From ccbc6a26b5cc15c00040188a677c03980a11d779 Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Tue, 14 Jan 2025 11:10:46 +0100 Subject: [PATCH 1/5] fix: improve dapp explorer UI --- .../ProjectDetail/AboutDapp/index.tsx | 2 +- .../Contact/ContactItem/index.tsx | 15 ++++++++------ .../ProjectDetail/Contact/styles.scss | 20 ++++++++----------- .../components/ProjectDetail/index.tsx | 14 ++++++++----- .../components/ProjectDetail/styles.scss | 1 + .../SimpleView/SimpleViewContent/types.ts | 2 +- .../SimpleViewFilters/CategoryChip/mapper.tsx | 2 +- .../SimpleView/SimpleViewFilters/index.tsx | 1 + .../SimpleView/index.styles.module.scss | 11 ---------- .../explorer/components/SimpleView/index.tsx | 18 ++--------------- .../dapp/explorer/components/Slider/index.tsx | 11 +++++----- .../explorer/components/Slider/styles.scss | 8 ++++++++ .../list/DappListTitle.component.tsx | 18 ++++++++++++----- .../components/list/DappListTitle.module.scss | 8 ++++++++ 14 files changed, 67 insertions(+), 64 deletions(-) delete mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.styles.module.scss create mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.module.scss diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx index 6881f69fc..82cb648c4 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx @@ -20,7 +20,7 @@ export const AboutDapp: React.FC = () => { {data?.screenshots && ( - {t('dappdiscovery.side_panel.gallery')} + {t('dappdiscovery.side_panel.gallery')} ; @@ -12,11 +13,13 @@ export const ContactItem: React.FC = ({ itemIcon, itemTitle, it {itemIcon} - - {itemTitle} - - - {itemData} - + + + {itemTitle} + + + {itemData} + + ); diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/styles.scss index d0e012ff9..92ad09980 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/Contact/styles.scss @@ -1,17 +1,15 @@ @import '../../../styles/colors.scss'; .iog-contact-item { - display: grid; - grid-template-columns: 24px auto; - grid-template-areas: - 'icon title' - '. data'; - column-gap: 12px; - font-size: 16px; - align-items: stretch; + display: flex; + flex-direction: row; + font-size: 16px; + gap: 12px; .iog-contact-item-icon { - grid-area: icon; + width: 24px; + height: 24px; + margin-top: 4px; svg { width: 100%; @@ -22,12 +20,10 @@ .iog-contact-item-title { font-weight: bold; - grid-area: title; color: var(--text-color-primary) !important; } .iog-contact-item-data { - grid-area: data; - color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)) + color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); } } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx index 139effb8f..4d2863af6 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/index.tsx @@ -64,14 +64,18 @@ const ProjectDetail: React.FC = () => { fit="contain" src={data?.image?.src || ''} alt={data?.image?.alt || 'Image'} - width={80} - height={80} + width={50} + height={50} data-testid="dapp-info-modal-icon" /> )} - - {data?.title} - {data?.category} + + + {data?.title} + + + {data?.category} + diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/styles.scss index 52e0ce2c3..556af70e7 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/styles.scss @@ -28,6 +28,7 @@ .ant-tabs-tab { font-size: toRem(16); line-height: toRem(24); + font-weight: 400; .ant-tabs-tab-btn { color: var(--light-mode-mid-grey, var(--dark-mode-light-grey)) !important; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/types.ts b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/types.ts index a2fb684c0..80fa37829 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/types.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/types.ts @@ -1,5 +1,5 @@ export interface ISimpleViewContent { selectedCategory: string; - search: string; + search?: string; dappsSearchCacheTTLInMs?: number; } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/mapper.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/mapper.tsx index 9543adf98..03056bab3 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/mapper.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/mapper.tsx @@ -43,5 +43,5 @@ export const mapCategory = (category: string): React.ReactNode => { } })(); - return ; + return icon && ; }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx index 98fa2ed1c..7b557a87f 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx @@ -77,6 +77,7 @@ const SimpleViewFilters: React.FC = ({ onChangeCategory }) = edgeSwipeThreshold={20} slidesPerGroup={3} speed={650} + mousewheel navigation={{ prevEl: '.swiper-filters-prev', nextEl: '.swiper-filters-next' diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.styles.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.styles.module.scss deleted file mode 100644 index 9510719a4..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.styles.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../styles/colors.scss'; - -.header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.searchInput { - width: 345px; -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx index 6f45bc576..9727effc9 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx @@ -1,10 +1,8 @@ import * as React from 'react'; -import { SearchBox } from '@input-output-hk/lace-ui-toolkit'; import SimpleViewContent from './SimpleViewContent'; import SimpleViewFilters from './SimpleViewFilters'; -import styles from './index.styles.module.scss'; import { DappListTitle } from '../../../ui/components/list/DappListTitle.component'; const { useState } = React; @@ -12,24 +10,12 @@ const dappsCategoryToTitle = (category: string) => (category === 'all' ? 'All DA const SimpleView: React.FC = () => { const [selectedCategory, setCategory] = useState('all'); - const [searchValue, setSearchValue] = useState(''); return ( <> -
- -
- setSearchValue('')} - data-testid="dapp-explorer-search-input" - /> -
-
+ - + ); }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx index 7831d5247..b60f8957d 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx @@ -2,7 +2,7 @@ import React, { Children, cloneElement, isValidElement, useRef, useState } from import { Swiper, SwiperSlide } from 'swiper/react'; import { v4 as uuidv4 } from 'uuid'; import classNames from 'classnames'; -import SwiperCore, { Navigation, Virtual, Lazy, Swiper as SwiperType } from 'swiper'; +import SwiperCore, { Navigation, Virtual, Lazy, Swiper as SwiperType, Mousewheel } from 'swiper'; import { ExtractObjectFromData, ISlider } from './types'; import { EIconsName } from '../Icon'; import { IogButtonIcon } from '../Button'; @@ -13,7 +13,7 @@ import 'swiper/css'; import 'swiper/css/navigation'; import './styles.scss'; -SwiperCore.use([Navigation, Virtual, Lazy]); +SwiperCore.use([Navigation, Virtual, Lazy, Mousewheel]); const formatClassName = (className: string) => (className ? className.replace('.', '') : ''); @@ -24,7 +24,6 @@ const DEFAULT_PROPS = { const BUTTON_CLASS = 'iog-swiper-button-nav'; -// eslint-disable-next-line prettier/prettier const IogSlider = ({ id, data, @@ -39,6 +38,7 @@ const IogSlider = ({ buttonStandard = false, showSliderNavigation = true, fallback, + mousewheel, ...props }: // eslint-disable-next-line @typescript-eslint/no-explicit-any ISlider): React.ReactElement => { @@ -110,13 +110,12 @@ ISlider): React.ReactElement => { slidesPerView={slidesPerView || DEFAULT_PROPS.SLIDES_PER_VIEW} onSwiper={(swiper) => (swiperRef.current = swiper)} onSlideChange={handleSlideChange} + mousewheel={mousewheel} {...props} > {data?.map( // eslint-disable-next-line @typescript-eslint/no-explicit-any - (item: any) => ( - {childrenWithProps(item)} - ) + (item: any) => {childrenWithProps(item)} )} {data.length <= 0 && fallback} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss index e1d7e95d0..8556ff8a6 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss @@ -67,9 +67,17 @@ border: none; svg { + height: 16px; + width: 16px; stroke: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); } + &:not(:disabled):hover { + svg { + stroke: var(--text-color-primary) !important; + } + } + &:disabled { opacity: 0.24; } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx index 348803c05..714e69cee 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx @@ -1,10 +1,18 @@ -import React from 'react'; -import { Flex, Text } from '@input-output-hk/lace-ui-toolkit'; +import React, { ReactElement } from 'react'; +import { Flex, Text, InfoComponent, Tooltip } from '@input-output-hk/lace-ui-toolkit'; +import capitalize from 'lodash/capitalize'; -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -export const DappListTitle = ({ title, count }: { title: string; count?: number }) => ( +import styles from './DappListTitle.module.scss'; + +export const DappListTitle = ({ title, count }: { title: string; count?: number }): ReactElement => ( - {title} + + {capitalize(title)} + + + + + {count !== undefined ? ( ({count}) ) : // eslint-disable-next-line unicorn/no-null diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.module.scss new file mode 100644 index 000000000..0b283e1e7 --- /dev/null +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.module.scss @@ -0,0 +1,8 @@ +.icon { + color: var(--text-color-secondary); + cursor: pointer; + margin-top: 8px; + &:hover { + color: var(--text-color-primary); + } +} From 6a8cf2ed7d1b83aff78c6748db54d789c14f80ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Mas=C5=82owski?= Date: Wed, 15 Jan 2025 09:22:20 +0100 Subject: [PATCH 2/5] fix: dapp explorer layout for smaller widths --- .../components/Layout/Layout.module.scss | 4 ++-- .../dapp/explorer/components/DAppExplorer.tsx | 5 +---- .../explorer/components/SimpleView/index.tsx | 3 ++- .../dapp/explorer/layout/dapp/index.tsx | 12 ---------- .../explorer/layout/dapp/styles.module.scss | 22 ------------------- .../dapp/explorer/layout/dapp/types.ts | 7 ------ 6 files changed, 5 insertions(+), 48 deletions(-) delete mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/index.tsx delete mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/styles.module.scss delete mode 100644 apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/types.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss index c00b026fa..349c9d93a 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss @@ -67,7 +67,7 @@ $main-gap: 49px; 'nav side-panel' 'nav main'; margin-right: size_unit(4); - grid-template-columns: $navigation-col-width-collapsed 1fr; + grid-template-columns: $navigation-col-width-collapsed minmax(0, 1fr); grid-template-rows: $row-height 1fr; height: 100%; @@ -78,7 +78,7 @@ $main-gap: 49px; } @media (min-width: $breakpoint-xsmall) { - grid-template-columns: $navigation-col-width 1fr; + grid-template-columns: $navigation-col-width minmax(0, 1fr); margin: 0 size_unit(4) 0 size_unit(5); } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx index 4d02c5ee3..3c4c459fc 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/DAppExplorer.tsx @@ -1,15 +1,12 @@ import { Layout, SectionLayout } from '@views/browser/components'; import SimpleView from './SimpleView'; -import DappLayout from '../layout/dapp'; import React from 'react'; export const DAppExplorer: React.FC = () => ( <> - - - +
diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx index 9727effc9..b35b6c2c7 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/index.tsx @@ -4,6 +4,7 @@ import SimpleViewContent from './SimpleViewContent'; import SimpleViewFilters from './SimpleViewFilters'; import { DappListTitle } from '../../../ui/components/list/DappListTitle.component'; +import { withDrawer } from '../ProjectDetail/with-drawer'; const { useState } = React; const dappsCategoryToTitle = (category: string) => (category === 'all' ? 'All DApps' : category); @@ -20,4 +21,4 @@ const SimpleView: React.FC = () => { ); }; -export default SimpleView; +export default withDrawer(SimpleView); diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/index.tsx deleted file mode 100644 index 0c265b767..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { withDrawer } from '../../components/ProjectDetail/with-drawer'; -import * as React from 'react'; -import styles from './styles.module.scss'; -import type { IDappLayoutProps } from './types'; - -const DappLayout: React.FC = ({ children }) => ( -
-
{children}
-
-); - -export default withDrawer(DappLayout); diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/styles.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/styles.module.scss deleted file mode 100644 index 2c83c4d2e..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/styles.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '../../styles/colors.scss'; -@import '../../styles/theme.scss'; - -.iogDappLayout { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.container { - display: flex; - flex-direction: column; - justify-content: space-between; - flex-grow: 1; -} - -.contentWrapper { - display: flex; - flex-direction: column; - flex-grow: 1; -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/types.ts b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/types.ts deleted file mode 100644 index de8473a64..000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/layout/dapp/types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export interface IDappLayoutProps { - children: React.ReactNode; - hasHeader?: boolean; - isExplorer?: boolean; -} From c58da9947cfe8e96625dc1aa948ce5eb5db58c96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Mas=C5=82owski?= Date: Wed, 15 Jan 2025 11:23:58 +0100 Subject: [PATCH 3/5] fix: lint --- .../features/dapp/explorer/components/Slider/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx index b60f8957d..b9fdad46e 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/index.tsx @@ -115,7 +115,9 @@ ISlider): React.ReactElement => { > {data?.map( // eslint-disable-next-line @typescript-eslint/no-explicit-any - (item: any) => {childrenWithProps(item)} + (item: any) => ( + {childrenWithProps(item)} + ) )} {data.length <= 0 && fallback} From 68d001afaf804903cff2bd901965dee9bcdb4ed7 Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Wed, 15 Jan 2025 13:17:08 +0100 Subject: [PATCH 4/5] feat: fill in the tooltip text --- .../list/DappListTitle.component.tsx | 23 ++++++++++++++++++- .../browser-extension-wallet/en.json | 4 +--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx index 714e69cee..8220660fa 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx @@ -3,12 +3,33 @@ import { Flex, Text, InfoComponent, Tooltip } from '@input-output-hk/lace-ui-too import capitalize from 'lodash/capitalize'; import styles from './DappListTitle.module.scss'; +import { Trans } from 'react-i18next'; export const DappListTitle = ({ title, count }: { title: string; count?: number }): ReactElement => ( {capitalize(title)} - + , + link1: , + link2: ( + + ) + }} + style={{ width: '300px' }} + /> + } + align="start" + side="top" + > diff --git a/packages/translation/src/lib/translations/browser-extension-wallet/en.json b/packages/translation/src/lib/translations/browser-extension-wallet/en.json index c66a3c7f5..35b6b8088 100644 --- a/packages/translation/src/lib/translations/browser-extension-wallet/en.json +++ b/packages/translation/src/lib/translations/browser-extension-wallet/en.json @@ -29,14 +29,12 @@ "dappdiscovery.side_panel.contact": "Contact", "dappdiscovery.side_panel.email": "Email", "dappdiscovery.side_panel.company_website": "Company website", - "dappdiscovery.side_panel.access": "Access", "dappdiscovery.side_panel.social_links": "Social links", "dappdiscovery.show_all": "Show all", "dappdiscovery.empty_state.no_dapps_title": "No DApps available", "dappdiscovery.empty_state.no_dapps_content1": "There are no DApps matching your criteria at the moment.", "dappdiscovery.empty_state.no_dapps_content2": "This will change shortly, come back soon!", - "dappdiscovery.top_menu.register_button_label": "Register as DApp", - "dappdiscovery.top_menu.check_registration_button_label": "Check DApp registration", + "dappdiscovery.general_info": "

Dapp Explorer powered by DappRadar.

Trying to connect to a Dapp that doesn’t support Lace? Tag them on X to let them know you want Lace support!

Don’t see your Dapp? Register your Dapp with DappRadar to be automatically included in the Lace Dapp explorer.

", "addressBook.addressDetail.btn.copy": "Copy", "addressBook.deleteModal.buttons.cancel": "No", "addressBook.deleteModal.description": "Are you sure? There is no way to undo this action", From d2e2e96c1adfd5b85be3e0c2aed839a1bad63df2 Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Thu, 16 Jan 2025 10:35:46 +0100 Subject: [PATCH 5/5] fix: more improvements --- .../ProjectDetail/AboutDapp/index.tsx | 2 +- .../SimpleView/SimpleViewFilters/index.tsx | 6 +- .../services/helpers/apis-formatter/index.ts | 78 +------------------ .../services/helpers/apis-formatter/types.ts | 8 -- .../list/DappListTitle.component.tsx | 6 +- .../browser-extension-wallet/en.json | 2 +- 6 files changed, 10 insertions(+), 92 deletions(-) diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx index 82cb648c4..71a6448dd 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/ProjectDetail/AboutDapp/index.tsx @@ -18,7 +18,7 @@ export const AboutDapp: React.FC = () => { {data?.longDescription} {data?.screenshots && ( - + {t('dappdiscovery.side_panel.gallery')} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx index 7b557a87f..2d1069f0b 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx @@ -35,7 +35,7 @@ const SimpleViewFilters: React.FC = ({ onChangeCategory }) = }, [active, onChangeCategory]); const handleChangeCategory = (category: string) => { - setActive(category.toLowerCase()); + setActive(category); // eslint-disable-next-line @typescript-eslint/no-explicit-any const swiper = document.querySelector('.iog-classic-view-filters-slider')?.swiper; @@ -86,10 +86,10 @@ const SimpleViewFilters: React.FC = ({ onChangeCategory }) = key: `${label}`, className: classNames({ 'iog-tag': true, - 'iog-tag--active': value.toLocaleLowerCase() === active + 'iog-tag--active': value.toLocaleLowerCase() === active.toLowerCase() }), onClick: () => handleSetActive(value), - children: + children: })} data-testid="grid-category-slider" > diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/index.ts b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/index.ts index a7cbb6208..b011f9e93 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/index.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/index.ts @@ -1,13 +1,5 @@ -import { ICategory, ICertificate, IFeature } from '../../../services/api/categories/types'; -import { IDApp, IDAppScreenShot } from '../../../services/api/d-app/types'; -import { - IFiltersBadge, - IScreenshot, - ISectionCard, - ISectionCardCertificate, - ISectionCardItem, - ISectionRelated -} from './types'; +import { ICategory } from '../../../services/api/categories/types'; +import { IFiltersBadge } from './types'; export const formatFiltersResponse = (categories: ICategory[] | undefined): IFiltersBadge[] | [] => categories?.map((category) => ({ @@ -16,70 +8,4 @@ export const formatFiltersResponse = (categories: ICategory[] | undefined): IFil 'data-testid': `classic-filter-${category.name.toLowerCase()}` })) || []; -export const createDappItemsImage = (logo: IDApp['logo']): ISectionCardItem['image'] => ({ - alt: '', - src: logo, - width: 0, - height: 0 -}); - -export const createDappItemsFeatures = (feature: IFeature): ISectionRelated => ({ - alt: feature?.picture?.alternativeText, - url: feature?.picture?.formats?.thumbnail?.url || feature?.picture?.url, - caption: feature?.picture?.caption, - title: feature?.title, - description: feature?.description -}); - -export const createDappItemsScreenshots = (shots: IDAppScreenShot[]): IScreenshot[] => - shots.map((s) => ({ url: s.data })); - -export const createDappItemsCertificates = (certificate: ICertificate): ISectionCardCertificate => ({ - id: certificate?.id, - certification: { - id: certificate?.certification?.id, - name: certificate?.certification?.name, - level: certificate?.certification?.level, - description: certificate?.certification?.description, - icon: { - alt: certificate?.certification?.icon?.name, - src: certificate?.certification?.icon?.url, - width: certificate?.certification?.icon?.width, - height: certificate?.certification?.icon?.height - } - }, - issuedAt: certificate?.issuedAt, - pdfLink: certificate?.pdfLink, - summary: certificate?.summary -}); - -export const createDappItems = (dapp: IDApp): ISectionCardItem => ({ - subject: dapp.subject, - link: dapp.link, - providerName: dapp.companyName, - category: dapp.categories?.[0]?.name, - subcategory: '', - shortDescription: dapp.shortDescription, - title: dapp.projectName, - longDescription: dapp.longDescription, - image: createDappItemsImage(dapp.logo), - companyWebsite: dapp.companyWebsite, - email: dapp.companyEmail, - screenshots: createDappItemsScreenshots(dapp.screenshots), - isCertified: false, - certificates: [], - selectedCertificate: undefined -}); - -export const formatSectionsResponse = (categories?: ICategory[]): ISectionCard[] | [] => - categories?.map((category) => ({ - id: category?.id, - name: category?.name, - subcategory: category?.subcategories?.[0]?.name || '', - count: category?.dApps?.length, - color: category?.primaryColor, - planetAnimation: category?.lottie?.url, - items: category?.dApps?.map((dapp) => createDappItems(dapp)) - })) || []; - export const maybeGetCategoryName = (value: string): string | undefined => (value === 'all' ? undefined : value); diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/types.ts b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/types.ts index 952fa5432..330dd6b95 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/types.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/services/helpers/apis-formatter/types.ts @@ -5,14 +5,6 @@ interface ISectionCardItemImage { height: number; } -export interface ISectionRelated { - alt: string; - caption: string; - url: string; - title: string; - description: string; -} - export interface ICertification { id: number; name: string; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx index 8220660fa..08af0b1c5 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/ui/components/list/DappListTitle.component.tsx @@ -1,6 +1,5 @@ import React, { ReactElement } from 'react'; import { Flex, Text, InfoComponent, Tooltip } from '@input-output-hk/lace-ui-toolkit'; -import capitalize from 'lodash/capitalize'; import styles from './DappListTitle.module.scss'; import { Trans } from 'react-i18next'; @@ -8,7 +7,7 @@ import { Trans } from 'react-i18next'; export const DappListTitle = ({ title, count }: { title: string; count?: number }): ReactElement => ( - {capitalize(title)} + {title} , link1: , - link2: ( + link2: , + link3: ( Dapp Explorer powered by DappRadar.

Trying to connect to a Dapp that doesn’t support Lace? Tag them on X to let them know you want Lace support!

Don’t see your Dapp? Register your Dapp with DappRadar to be automatically included in the Lace Dapp explorer.

", + "dappdiscovery.general_info": "

Dapp Explorer powered by DappRadar.

Trying to connect to a Dapp that doesn’t support Lace? Tag them on X to let them know you want Lace support!

Don’t see your Dapp? Register your Dapp with DappRadar to be automatically included in the Lace Dapp explorer.

", "addressBook.addressDetail.btn.copy": "Copy", "addressBook.deleteModal.buttons.cancel": "No", "addressBook.deleteModal.description": "Are you sure? There is no way to undo this action",