diff --git a/translations/en.po b/translations/en.po index ce60e995a5..e66913b469 100644 --- a/translations/en.po +++ b/translations/en.po @@ -32,7 +32,7 @@ msgstr "Try using different keywords" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 #: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:32 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:40 msgid "Select Blockchain" msgstr "Select Blockchain" @@ -638,7 +638,7 @@ msgid "Search {sourceType}" msgstr "Search {sourceType}" #. js-lingui-explicit-id -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:45 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:59 msgid "Search Blockchain" msgstr "Search Blockchain" @@ -861,6 +861,11 @@ msgstr "Bridges" msgid "Exchanges" msgstr "Exchanges" +#. js-lingui-explicit-id +#: widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx:63 +msgid "{blockchainCategory}" +msgstr "{blockchainCategory}" + #. js-lingui-explicit-id #: widget/ui/src/components/StepDetails/StepDetails.tsx:54 msgid "Swap on {fromChain} via {swapper}" diff --git a/translations/es.po b/translations/es.po index 1335a02e4d..8194a88970 100644 --- a/translations/es.po +++ b/translations/es.po @@ -37,7 +37,7 @@ msgstr "Intenta usar diferentes palabras clave" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 #: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:32 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:40 msgid "Select Blockchain" msgstr "Seleccionar Blockchain" @@ -643,7 +643,7 @@ msgid "Search {sourceType}" msgstr "Buscar {sourceType}" #. js-lingui-explicit-id -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:45 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:59 msgid "Search Blockchain" msgstr "Buscar Blockchain" @@ -866,6 +866,11 @@ msgstr "Puentes" msgid "Exchanges" msgstr "Intercambios" +#. js-lingui-explicit-id +#: widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx:63 +msgid "{blockchainCategory}" +msgstr "" + #. js-lingui-explicit-id #: widget/ui/src/components/StepDetails/StepDetails.tsx:54 msgid "Swap on {fromChain} via {swapper}" diff --git a/translations/fr.po b/translations/fr.po index 1af7383437..35fd5c9a68 100644 --- a/translations/fr.po +++ b/translations/fr.po @@ -37,7 +37,7 @@ msgstr "Essayez d'utiliser différents mots-clés" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 #: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:32 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:40 msgid "Select Blockchain" msgstr "Sélectionnez la Blockchain" @@ -643,7 +643,7 @@ msgid "Search {sourceType}" msgstr "Rechercher dans {sourceType}" #. js-lingui-explicit-id -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:45 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:59 msgid "Search Blockchain" msgstr "Rechercher dans la Blockchain" @@ -866,6 +866,11 @@ msgstr "Ponts de connexion" msgid "Exchanges" msgstr "Échanges" +#. js-lingui-explicit-id +#: widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx:63 +msgid "{blockchainCategory}" +msgstr "" + #. js-lingui-explicit-id #: widget/ui/src/components/StepDetails/StepDetails.tsx:54 msgid "Swap on {fromChain} via {swapper}" diff --git a/translations/ja.po b/translations/ja.po index aab92b3979..4e28acdf54 100644 --- a/translations/ja.po +++ b/translations/ja.po @@ -37,7 +37,7 @@ msgstr "別のキーワードを使用してみてください" #. js-lingui-explicit-id #: widget/embedded/src/components/BlockchainList/BlockchainList.tsx:66 #: widget/embedded/src/components/BlockchainsSection/BlockchainsSection.tsx:44 -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:32 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:40 msgid "Select Blockchain" msgstr "ブロックチェーンを選択" @@ -643,7 +643,7 @@ msgid "Search {sourceType}" msgstr "{sourceType} を検索" #. js-lingui-explicit-id -#: widget/embedded/src/pages/SelectBlockchainPage.tsx:45 +#: widget/embedded/src/pages/SelectBlockchainPage.tsx:59 msgid "Search Blockchain" msgstr "ブロックチェーンを検索" @@ -866,6 +866,11 @@ msgstr "ブリッジ" msgid "Exchanges" msgstr "交換" +#. js-lingui-explicit-id +#: widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx:63 +msgid "{blockchainCategory}" +msgstr "" + #. js-lingui-explicit-id #: widget/ui/src/components/StepDetails/StepDetails.tsx:54 msgid "Swap on {fromChain} via {swapper}" diff --git a/widget/embedded/src/pages/SelectBlockchainPage.tsx b/widget/embedded/src/pages/SelectBlockchainPage.tsx index 3eb82d0cf7..c0ce388cb7 100644 --- a/widget/embedded/src/pages/SelectBlockchainPage.tsx +++ b/widget/embedded/src/pages/SelectBlockchainPage.tsx @@ -1,5 +1,9 @@ import { i18n } from '@lingui/core'; -import { Divider, SelectableCategoryList } from '@rango-dev/ui'; +import { + Divider, + getCountCategories, + SelectableCategoryList +} from '@rango-dev/ui'; import React, { useState } from 'react'; import { BlockchainList } from '../components/BlockchainList'; @@ -23,22 +27,32 @@ export function SelectBlockchainPage(props: PropTypes) { const fetchStatus = useAppStore().fetchStatus; const blockchains = useAppStore().blockchains({ - type: type, + type: type }); + const countActiveCategories = getCountCategories(blockchains); + + const showCategory = countActiveCategories !== 1; + return ( - - + + {showCategory && ( + <> + + + + )} + diff --git a/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts b/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts index b35fb1ac22..65fbe6925d 100644 --- a/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts +++ b/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.helpers.ts @@ -1,7 +1,29 @@ import { type BlockchainMeta, TransactionType } from 'rango-sdk'; +import { + CosmosCategoryIcon, + EvmCategoryIcon, + OtherCategoryIcon, + UtxoCategoryIcon, +} from '../../icons'; + import { BlockchainCategories } from './SelectableCategoryList.types'; +export const blockchainCategoryIcons = { + [BlockchainCategories.EVM]: EvmCategoryIcon, + [BlockchainCategories.COSMOS]: CosmosCategoryIcon, + [BlockchainCategories.UTXO]: UtxoCategoryIcon, + [BlockchainCategories.OTHER]: OtherCategoryIcon, +}; + +export const blockchainCategoryLabel = { + [BlockchainCategories.ALL]: 'All', + [BlockchainCategories.EVM]: 'EVM', + [BlockchainCategories.COSMOS]: 'Cosmos', + [BlockchainCategories.UTXO]: 'UTXO', + [BlockchainCategories.OTHER]: 'Other', +}; + const filterByType = (blockchain: BlockchainMeta, type: string): boolean => { switch (type) { case BlockchainCategories.ALL: @@ -19,17 +41,22 @@ const filterByType = (blockchain: BlockchainMeta, type: string): boolean => { } }; -const blockchainslogo = { - [BlockchainCategories.EVM]: ['ETH', 'BSC', 'POLYGON'], - [BlockchainCategories.COSMOS]: ['COSMOS', 'OSMOSIS', 'JUNO'], - [BlockchainCategories.UTXO]: ['BTC', 'LTC', 'BCH'], - [BlockchainCategories.OTHER]: ['STARKNET', 'TRON', 'SOLANA'], -}; - -export const generateBlockchainsLogo = ( +export const hasAnyCategory = ( list: BlockchainMeta[], - type: Exclude -) => - list - .filter((item) => filterByType(item, type)) - .filter((item) => blockchainslogo[type].includes(item.name)); + blockchainType: string +) => list.some((blockchain) => filterByType(blockchain, blockchainType)); + +export const getCountCategories = (list: BlockchainMeta[]) => { + const categoriesToCheck = Object.values(BlockchainCategories).filter( + (category) => category !== BlockchainCategories.ALL + ); + + const categoriesCount = categoriesToCheck.reduce((count, category) => { + const isCategoryPresent = list.some((blockchain) => + filterByType(blockchain, category) + ); + return count + (isCategoryPresent ? 1 : 0); + }, 0); + + return categoriesCount; +}; diff --git a/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx b/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx index 5a5fa52f27..598bb9748d 100644 --- a/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx +++ b/widget/ui/src/components/SelectableCategoryList/SelectableCategoryList.tsx @@ -4,19 +4,19 @@ import type { PropTypes } from './SelectableCategoryList.types'; import { i18n } from '@lingui/core'; import React from 'react'; -import { Divider, Image, Skeleton, Typography } from '..'; +import { Divider, Skeleton, Typography } from '..'; import { BlockchainsChip } from '../BlockchainsChip'; -import { generateBlockchainsLogo } from './SelectableCategoryList.helpers'; import { - Container, - FirstImage, - ImageContent, -} from './SelectableCategoryList.styles'; + blockchainCategoryIcons, + blockchainCategoryLabel, + hasAnyCategory, +} from './SelectableCategoryList.helpers'; +import { Container } from './SelectableCategoryList.styles'; import { BlockchainCategories } from './SelectableCategoryList.types'; export function SelectableCategoryList(props: PropTypes) { - const { setCategory, category, blockchains, isLoading } = props; + const { setCategory, category, isLoading, blockchains } = props; const categories = Object.keys( BlockchainCategories ) as BlockchainCategories[]; @@ -32,45 +32,46 @@ export function SelectableCategoryList(props: PropTypes) { /> ))} {!isLoading && - categories.map((blockchainCategory) => ( - setCategory(blockchainCategory)}> - {blockchainCategory !== BlockchainCategories.ALL && ( - <> - - {generateBlockchainsLogo(blockchains, blockchainCategory).map( - (blockchain, index) => - index === 0 ? ( - - ) : ( - - ) - )} - - - - )} - - {i18n.t(BlockchainCategories[blockchainCategory])} - - - ))} + categories.map((blockchainCategory) => { + const Logo = + blockchainCategory !== BlockchainCategories.ALL + ? blockchainCategoryIcons[blockchainCategory] + : null; + + const hasBlockchain = hasAnyCategory(blockchains, blockchainCategory); + + return ( + hasBlockchain && ( + setCategory(blockchainCategory)}> + {Logo && ( + <> + + + + )} + + {i18n.t({ + id: '{blockchainCategory}', + values: { + blockchainCategory: + blockchainCategoryLabel[blockchainCategory], + }, + })} + + + ) + ); + })} ); } diff --git a/widget/ui/src/components/SelectableCategoryList/index.ts b/widget/ui/src/components/SelectableCategoryList/index.ts index 3b56dab01c..8d5000ad77 100644 --- a/widget/ui/src/components/SelectableCategoryList/index.ts +++ b/widget/ui/src/components/SelectableCategoryList/index.ts @@ -1,2 +1,3 @@ export { SelectableCategoryList } from './SelectableCategoryList'; export { BlockchainCategories } from './SelectableCategoryList.types'; +export { getCountCategories } from './SelectableCategoryList.helpers'; diff --git a/widget/ui/src/icons/CosmosCategory.tsx b/widget/ui/src/icons/CosmosCategory.tsx new file mode 100644 index 0000000000..f74839e061 --- /dev/null +++ b/widget/ui/src/icons/CosmosCategory.tsx @@ -0,0 +1,137 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgCosmosCategory(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default SvgCosmosCategory; diff --git a/widget/ui/src/icons/EvmCategory.tsx b/widget/ui/src/icons/EvmCategory.tsx new file mode 100644 index 0000000000..c84e528c4e --- /dev/null +++ b/widget/ui/src/icons/EvmCategory.tsx @@ -0,0 +1,74 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgEvmCategory(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default SvgEvmCategory; diff --git a/widget/ui/src/icons/OtherCategory.tsx b/widget/ui/src/icons/OtherCategory.tsx new file mode 100644 index 0000000000..8db52f2350 --- /dev/null +++ b/widget/ui/src/icons/OtherCategory.tsx @@ -0,0 +1,72 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgOtherCategory(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default SvgOtherCategory; diff --git a/widget/ui/src/icons/UtxoCategory.tsx b/widget/ui/src/icons/UtxoCategory.tsx new file mode 100644 index 0000000000..5ba6b62259 --- /dev/null +++ b/widget/ui/src/icons/UtxoCategory.tsx @@ -0,0 +1,44 @@ +import type { SvgIconPropsWithChildren } from '../components/SvgIcon'; + +import React, { createElement } from 'react'; + +import { SvgIcon } from '../components/SvgIcon'; + +function SvgUtxoCategory(props: SvgIconPropsWithChildren) { + return createElement( + SvgIcon, + props, + + + + + + + + + + + + + + + + ); +} +export default SvgUtxoCategory; diff --git a/widget/ui/src/icons/index.ts b/widget/ui/src/icons/index.ts index 25c51651ec..85e04c646f 100644 --- a/widget/ui/src/icons/index.ts +++ b/widget/ui/src/icons/index.ts @@ -7,11 +7,13 @@ export { default as ChevronUpIcon } from './ChevronUp'; export { default as CloseIcon } from './Close'; export { default as CompleteIcon } from './Complete'; export { default as CopyIcon } from './Copy'; +export { default as CosmosCategoryIcon } from './CosmosCategory'; export { default as CustomColorsIcon } from './CustomColors'; export { default as DarkModeIcon } from './DarkMode'; export { default as DeleteIcon } from './Delete'; export { default as DesktopIcon } from './Desktop'; export { default as DoneIcon } from './Done'; +export { default as EvmCategoryIcon } from './EvmCategory'; export { default as ErrorIcon } from './Error'; export { default as ExternalLinkIcon } from './ExternalLink'; export { default as FontIcon } from './Font'; @@ -30,6 +32,7 @@ export { default as NoNotificationIcon } from './NoNotification'; export { default as NotificationNumberIcon } from './NotificationNumber'; export { default as NotificationsIcon } from './Notifications'; export { default as NumberIcon } from './Number'; +export { default as OtherCategoryIcon } from './OtherCategory'; export { default as PinIcon } from './Pin'; export { default as RefreshIcon } from './Refresh'; export { default as ReverseIcon } from './Reverse'; @@ -37,6 +40,7 @@ export { default as RouteIcon } from './Route'; export { default as SearchIcon } from './Search'; export { default as TimeIcon } from './Time'; export { default as TransactionIcon } from './Transaction'; +export { default as UtxoCategoryIcon } from './UtxoCategory'; export { default as WalletIcon } from './Wallet'; export { default as WarningIcon } from './Warning'; export { default as ChainsIcon } from './Chains'; diff --git a/widget/ui/svgs/resources/fill/CosmosCategory.svg b/widget/ui/svgs/resources/fill/CosmosCategory.svg new file mode 100644 index 0000000000..082ae1fd74 --- /dev/null +++ b/widget/ui/svgs/resources/fill/CosmosCategory.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/widget/ui/svgs/resources/fill/EVMCategory.svg b/widget/ui/svgs/resources/fill/EVMCategory.svg new file mode 100644 index 0000000000..2727a37e0d --- /dev/null +++ b/widget/ui/svgs/resources/fill/EVMCategory.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/widget/ui/svgs/resources/fill/OtherCategory.svg b/widget/ui/svgs/resources/fill/OtherCategory.svg new file mode 100644 index 0000000000..10600f4805 --- /dev/null +++ b/widget/ui/svgs/resources/fill/OtherCategory.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/widget/ui/svgs/resources/fill/UTXOCategory.svg b/widget/ui/svgs/resources/fill/UTXOCategory.svg new file mode 100644 index 0000000000..24b6038fd6 --- /dev/null +++ b/widget/ui/svgs/resources/fill/UTXOCategory.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +