style(tag): use translation

Magickbase · Aug 7, 2024 · 48d2de8 · 48d2de8
1 parent 6fb98d5
commit 48d2de8
Showing 1 changed file with 54 additions and 52 deletions.
diff --git a/src/pages/NftCollections/List.tsx b/src/pages/NftCollections/List.tsx
@@ -2,6 +2,7 @@ import { scriptToHash } from '@nervosnetwork/ckb-sdk-utils'
 import { Popover, Tooltip } from 'antd'
 import classNames from 'classnames'
 import { Trans, useTranslation } from 'react-i18next'
+import { TFunction } from 'i18next'
 import { Link } from '../../components/Link'
 import SortButton from '../../components/SortButton'
 import { handleNftImgError, patchMibaoImg } from '../../utils/util'
@@ -46,56 +47,57 @@ function useFilterList(): Record<'title' | 'value', string>[] {
   ]
 }
 
-const filterList = [
-  {
-    key: 'invalid',
-    value: 'Invalid',
-    title: <NFTTag key="invalid" tagName="invalid" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'suspicious',
-    value: 'Suspicious',
-    title: <NFTTag key="suspicious" tagName="suspicious" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'out-of-length-range',
-    value: 'Out Of Length Range',
-    title: <NFTTag key="out-of-length-range" tagName="out-of-length-range" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'rgb++',
-    value: 'RGB++',
-    title: <NFTTag key="rgb++" tagName="rgb++" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'duplicate',
-    value: 'Duplicate',
-    title: <NFTTag key="duplicate" tagName="duplicate" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'layer-1-asset',
-    value: 'Layer 1 Asset',
-    title: <NFTTag key="layer-1-asset" tagName="layer-1-asset" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'layer-2-asset',
-    value: 'Layer 2 Asset',
-    title: <NFTTag key="layer-2-asset" tagName="layer-2-asset" />,
-    to: '/nft-collections',
-  },
-  {
-    key: 'supply-limited',
-    value: 'supply-limited',
-    title: <NFTTag key="supply-limited" tagName="supply-limited" />,
-    to: '/nft-collections',
-  },
-].filter(f => whiteList.includes(f.key))
+const getFilterList = (t: TFunction) =>
+  [
+    {
+      key: 'invalid',
+      value: t('xudt.tags.invalid'),
+      title: <NFTTag key="invalid" tagName="invalid" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'suspicious',
+      value: t('xudt.tags.suspicious'),
+      title: <NFTTag key="suspicious" tagName="suspicious" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'out-of-length-range',
+      value: t('xudt.tags.out-of-length-range'),
+      title: <NFTTag key="out-of-length-range" tagName="out-of-length-range" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'rgb++',
+      value: t('xudt.tags.rgb++'),
+      title: <NFTTag key="rgb++" tagName="rgb++" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'duplicate',
+      value: t('xudt.tags.duplicate'),
+      title: <NFTTag key="duplicate" tagName="duplicate" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'layer-1-asset',
+      value: t('xudt.tags.layer-1-asset'),
+      title: <NFTTag key="layer-1-asset" tagName="layer-1-asset" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'layer-2-asset',
+      value: t('xudt.tags.layer-2-asset'),
+      title: <NFTTag key="layer-2-asset" tagName="layer-2-asset" />,
+      to: '/nft-collections',
+    },
+    {
+      key: 'supply-limited',
+      value: t('xudt.tags.supply-limited'),
+      title: <NFTTag key="supply-limited" tagName="supply-limited" />,
+      to: '/nft-collections',
+    },
+  ].filter(f => whiteList.includes(f.key))
 
 export const isTxFilterType = (s?: string): boolean => {
   return s ? ['all', 'm_nft', 'nrc721', 'cota', 'spore'].includes(s) : false
@@ -141,7 +143,7 @@ const Tags = () => {
   return (
     <div className={styles.colTags}>
       {t('xudt.title.tags')}
-      <MultiFilterButton filterName="tags" key="" filterList={filterList} />
+      <MultiFilterButton filterName="tags" key="" filterList={getFilterList(t)} />
     </div>
   )
 }
@@ -369,7 +371,7 @@ export const ListOnMobile: React.FC<{ isLoading: boolean; list: NFTCollection[]
           <SimpleSortHeader sortField="timestamp" fieldI18n={t('nft.created_time')} />
           <div style={{ display: 'flex', flexWrap: 'nowrap', maxWidth: '100%' }}>
             {t('xudt.title.tags')}
-            <MultiFilterButton filterName="tags" key="" filterList={filterList} />
+            <MultiFilterButton filterName="tags" key="" filterList={getFilterList(t)} />
           </div>
         </FilterSortContainerOnMobile>
       </Card>