feat: add rgbpp view on xudt list page

ref: Magickbase/ckb-explorer-public-issues#795
nervosnetwork · Nov 15, 2024 · d8dcd7e · d8dcd7e
1 parent 1611787
commit d8dcd7e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 11 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -804,6 +804,9 @@
       "type_script_hash": "Type Script Hash",
       "holders": "Holders",
       "unique_addresses": "Unique CKB Addresses",
+      "rgbpp_holders_count": "Holders",
+      "display_unique_ckb_addresses": "Display Unique CKB Addresses",
+      "display_rgbpp_holders": "Display RGB++ Holders",
       "decimal": "Decimal",
       "transactions": "24hr Transactions",
       "address_count": "Address Count",

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -805,6 +805,9 @@
       "type_script_hash": "Type Script Hash",
       "holders": "用户数",
       "unique_addresses": "CKB 地址数",
+      "rgbpp_holders_count": "持有人数",
+      "display_unique_ckb_addresses": "展示 CKB 地址数",
+      "display_rgbpp_holders": "展示 RGB++ 持有人数",
       "decimal": "小数位",
       "transactions": "24小时交易数",
       "address_count": "用户数",

diff --git a/src/models/Xudt/index.ts b/src/models/Xudt/index.ts
@@ -13,6 +13,7 @@ export interface XUDTHolderAllocation {
 }
 
 export interface XUDT {
+  holdersCount: string
   addressesCount: string
   createdAt: string
   h24CkbTransactionsCount: string

diff --git a/src/pages/Xudts/index.tsx b/src/pages/Xudts/index.tsx
@@ -1,4 +1,5 @@
-import { Table } from 'antd'
+import { Table, Tooltip } from 'antd'
+import { useHistory } from 'react-router'
 import { useQuery, UseQueryResult } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { FC, ReactNode, useState } from 'react'
@@ -197,6 +198,10 @@ const TokenTable: FC<{
   isEmpty: boolean
 }> = ({ query, sortParam, isEmpty }) => {
   const { t } = useTranslation()
+  const RGBPP_VIEW = 'rgbpp'
+  const { location } = useHistory()
+  const urlQuery = new URLSearchParams(location.search)
+  const isRgbppView = urlQuery.get('view') === RGBPP_VIEW
 
   const nullableColumns: (ColumnGroupType<XUDT> | ColumnType<XUDT> | false | undefined)[] = [
     {
@@ -251,16 +256,36 @@ const TokenTable: FC<{
       className: styles.colTransactions,
       render: (_, token) => localeNumberString(token.h24CkbTransactionsCount),
     },
-    {
-      title: (
-        <>
-          <span>{t('xudt.unique_addresses')}</span>
-          <SortButton field="addresses_count" sortParam={sortParam} />
-        </>
-      ),
-      className: styles.colAddressCount,
-      render: (_, token) => localeNumberString(token.addressesCount),
-    },
+    isRgbppView
+      ? {
+          title: (
+            <Tooltip title={t('xudt.display_rgbpp_holders')}>
+              <Link
+                to={`${location.pathname}?${new URLSearchParams({ ...urlQuery, view: 'ckb' })}`}
+                style={{ color: 'var(--primary-color)' }}
+              >
+                {t('xudt.rgbpp_holders_count')}
+              </Link>
+            </Tooltip>
+          ),
+          className: styles.colAddressCount,
+          render: (_, token) => localeNumberString(token.holdersCount),
+        }
+      : {
+          title: (
+            <Tooltip title={t('xudt.display_unique_ckb_addresses')}>
+              <Link
+                to={`${location.pathname}?${new URLSearchParams({ ...urlQuery, view: RGBPP_VIEW })}`}
+                style={{ color: 'var(--primary-color)' }}
+              >
+                {t('xudt.unique_addresses')}
+              </Link>
+              <SortButton field="addresses_count" sortParam={sortParam} />
+            </Tooltip>
+          ),
+          className: styles.colAddressCount,
+          render: (_, token) => localeNumberString(token.addressesCount),
+        },
     {
       title: (
         <>