feat(xudt-tag): add xudt tag column in xudt page

Magickbase · Jun 24, 2024 · 41e5f09 · 41e5f09
1 parent dc903db
commit 41e5f09
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -207,6 +207,7 @@
       "estimated_epoch_time": "Estimated Epoch Time",
       "transactions_per_minute": "Transactions per Minute",
       "transactions_last_24hrs": "Transactions in Last 24hrs",
+      "tags": "Tags",
       "nervos_dao": "Nervos DAO",
       "mainnet": "Lina Mainnet",
       "testnet": "Testnet"

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -207,6 +207,7 @@
       "estimated_epoch_time": "预计 Epoch 时间",
       "transactions_per_minute": "每分钟的交易数",
       "transactions_last_24hrs": "最近 24 小时的交易数",
+      "tags": "Tags",
       "nervos_dao": "Nervos DAO",
       "mainnet": "Lina Mainnet",
       "testnet": "Testnet"

diff --git a/src/pages/Xudts/index.tsx b/src/pages/Xudts/index.tsx
@@ -9,6 +9,7 @@ import { Link } from '../../components/Link'
 import Content from '../../components/Content'
 import Pagination from '../../components/Pagination'
 import SortButton from '../../components/SortButton'
+import FilterButton from '../../components/FilterButton'
 import { TokensPanel, TokensContentEmpty, TokensLoadingPanel } from './styled'
 import { localeNumberString } from '../../utils/number'
 import Loading from '../../components/Loading'
@@ -158,7 +159,6 @@ const TokenTable: FC<{
       className: styles.colName,
       render: (_, token) => {
         const symbol = token.symbol || `#${token.typeHash.substring(token.typeHash.length - 4)}`
-        const tags = token.xudtTags ?? []
         return (
           <div className={styles.container}>
             <img className={styles.icon} src={token.iconFile ? token.iconFile : XUDTTokenIcon} alt="token icon" />
@@ -175,16 +175,27 @@ const TokenTable: FC<{
                   symbol
                 )}
               </div>
-              <div className={styles.tags}>
-                {tags.map(tag => (
-                  <XUDTTag tagName={tag} />
-                ))}
-              </div>
             </div>
           </div>
         )
       },
     },
+    {
+      title: (
+        <>
+          {t('xudt.tags')}
+          <FilterButton filterName="type" key="" filteredList={[]} />
+        </>
+      ),
+      className: styles.colTags,
+      render: (_, token) => (
+        <div className={styles.tags}>
+          {token.xudtTags?.map(tag => (
+            <XUDTTag tagName={tag} />
+          ))}
+        </div>
+      ),
+    },
     {
       title: (
         <>

diff --git a/src/pages/Xudts/styles.module.scss b/src/pages/Xudts/styles.module.scss
@@ -167,9 +167,16 @@ dt {
     }
   }
 
-  .colName {
-    width: 40%;
+  .colTags {
+    .tags {
+      flex-wrap: wrap;
+      display: flex;
+      gap: 8px;
+      margin-left: 8px;
+    }
+  }
 
+  .colName {
     .container {
       display: flex;
       position: relative;
@@ -190,13 +197,6 @@ dt {
         display: flex;
         align-items: center;
 
-        .tags {
-          flex-wrap: wrap;
-          display: flex;
-          gap: 8px;
-          margin-left: 8px;
-        }
-
         .symbolAndName {
           display: flex;
           flex-direction: column;