fix: update blockchain category icons

rango-exchange · Nov 22, 2023 · 5ffd1ac · 5ffd1ac
1 parent b7c378e
commit 5ffd1ac
Show file tree

Hide file tree

Showing 18 changed files with 573 additions and 77 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`),
+        title: i18n.t(`Select Blockchain`)
       }}>
       <Divider size={12} />
-      <SelectableCategoryList
-        setCategory={setBlockchainCategory}
-        category={blockchainCategory}
-        blockchains={blockchains}
-        isLoading={fetchStatus === 'loading'}
-      />
-      <Divider size={24} />
+
+      {showCategory && (
+        <>
+          <SelectableCategoryList
+            setCategory={setBlockchainCategory}
+            category={blockchainCategory}
+            blockchains={blockchains}
+            isLoading={fetchStatus === 'loading'}
+          />
+          <Divider size={24} />
+        </>
+      )}
+
       <SearchInput
         value={searchedFor}
         autoFocus

diff --git a/widget/playground/src/components/MultiSelect/MultiSelect.tsx b/widget/playground/src/components/MultiSelect/MultiSelect.tsx
@@ -70,6 +70,7 @@ export function MultiSelect(props: MuliSelectPropTypes) {
               defaultSelectedItems={props.defaultSelectedItems}
               type={type}
               list={list}
+              showCategory={type === 'Blockchains' || type === 'Wallets'}
               icon={
                 type === 'Wallets' ? (
                   <WalletIcon size={18} />

diff --git 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<BlockchainCategories, 'ALL'>
-) =>
-  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
@@ -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) => (
-          <BlockchainsChip
-            selected={category === blockchainCategory}
-            key={blockchainCategory}
-            onClick={() => setCategory(blockchainCategory)}>
-            {blockchainCategory !== BlockchainCategories.ALL && (
-              <>
-                <ImageContent>
-                  {generateBlockchainsLogo(blockchains, blockchainCategory).map(
-                    (blockchain, index) =>
-                      index === 0 ? (
-                        <FirstImage
-                          key={`image-${blockchain.name}-${blockchain.chainId}`}
-                          src={blockchain.logo}
-                        />
-                      ) : (
-                        <Image
-                          key={`image-${blockchain.name}-${blockchain.chainId}`}
-                          src={blockchain.logo}
-                          size={15}
-                        />
-                      )
-                  )}
-                </ImageContent>
-                <Divider size={12} />
-              </>
-            )}
-            <Typography
-              size="xsmall"
-              variant="body"
-              color={
-                blockchainCategory === BlockchainCategories.ALL
-                  ? 'secondary500'
-                  : undefined
-              }>
-              {i18n.t(BlockchainCategories[blockchainCategory])}
-            </Typography>
-          </BlockchainsChip>
-        ))}
+        categories.map((blockchainCategory) => {
+          const Logo =
+            blockchainCategory !== BlockchainCategories.ALL
+              ? blockchainCategoryIcons[blockchainCategory]
+              : null;
+
+          const hasBlockchain = hasAnyCategory(blockchains, blockchainCategory);
+
+          return (
+            hasBlockchain && (
+              <BlockchainsChip
+                selected={category === blockchainCategory}
+                key={blockchainCategory}
+                onClick={() => setCategory(blockchainCategory)}>
+                {Logo && (
+                  <>
+                    <Logo size={28} />
+                    <Divider size={12} />
+                  </>
+                )}
+                <Typography
+                  size="xsmall"
+                  variant="body"
+                  color={
+                    blockchainCategory === BlockchainCategories.ALL
+                      ? 'secondary500'
+                      : undefined
+                  }>
+                  {i18n.t({
+                    id: '{blockchainCategory}',
+                    values: {
+                      blockchainCategory:
+                        blockchainCategoryLabel[blockchainCategory],
+                    },
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            )
+          );
+        })}
     </Container>
   );
 }
diff --git 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';