feat(holder-allocation): xudt holder-allocation

src/locales/en.json

@@ -735,6 +735,10 @@
       "repeat_inscription_symbol": "This inscription is a duplicate with an earlier release of the same symbol."
     },
     "xudt": {
+      "holder_allocation": "Holder Allocation",
+      "holder_allocation_description": "There are {{ckb}} CKB Holders and {{btc}} BTC holders of current asset.",
+      "lock_hash": "Lock Hash",
+      "count": "Count",
       "xudt": "xUDT",
       "xudts": "xUDTs",
       "name": "Name",

src/locales/zh.json

@@ -736,6 +736,10 @@
       "repeat_inscription_symbol": "此铭文与早期发布的铭文同名"
     },
     "xudt": {
+      "holder_allocation": "地址分布",
+      "holder_allocation_description": "当前地址有{{ckb}} CKB地址持有人及{{btc}} BTC 地址持有人",
+      "lock_hash": "Lock Hash",
+      "count": "Count",
       "xudt": "xUDT",
       "xudts": "xUDTs",
       "name": "名称",

src/pages/Xudt/HolderAllocation.module.scss

@@ -0,0 +1,92 @@
+@import '../../styles/variables.module';
+
+.holderAllocationContainer {
+  background-color: #fff;
+  margin: 15% auto;
+  padding: 20px 40px;
+  width: 497px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  @media (max-width: $mobileBreakPoint) {
+    width: 90%;
+    margin-top: 40%;
+    padding: 24px 16px;
+    align-items: flex-start;
+
+    p {
+      line-height: 24px;
+    }
+  }
+
+  h2 {
+    color: #333;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+    color: #333;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    width: 100%;
+    word-wrap: break-word;
+  }
+
+  .table {
+    border-radius: 4px;
+    border: 1px solid #e5e5e5;
+    padding: 1px;
+
+    table {
+      thead {
+        background: #fafafa;
+
+        tr {
+          div {
+            color: #666;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            text-transform: capitalize;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          div {
+            color: #333;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+          }
+        }
+      }
+
+      thead,
+      tbody {
+        tr {
+          border-radius: 4px;
+
+          div {
+            font-size: 14px;
+            padding: 12px 16px;
+          }
+        }
+      }
+
+      width: 312px;
+      background: #fff;
+    }
+  }
+}

src/pages/Xudt/HolderAllocation.tsx

@@ -0,0 +1,76 @@
+import { useTranslation } from 'react-i18next'
+import styles from './HolderAllocation.module.scss'
+
+const HolderAllocation = ({ typeHash }: { typeHash: string }) => {
+  const [t] = useTranslation()
+  return (
+    <div className={styles.holderAllocationContainer}>
+      <h2>{t('xudt.holder_allocation')}</h2>
+      <p>
+        {t('xudt.holder_allocation_description', {
+          ckb: '1,000',
+          btc: '200',
+        })}
+        {typeHash}
+      </p>
+      <div className={styles.table}>
+        <table>
+          <thead>
+            <tr>
+              <td>
+                <div>{t('xudt.lock_hash')}</div>
+              </td>
+              <td>
+                <div>{t('xudt.count')}</div>
+              </td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div>secp256k1</div>
+              </td>
+              <td>
+                <div>200</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>omnilock</div>
+              </td>
+              <td>
+                <div>400</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>joyid</div>
+              </td>
+              <td>
+                <div>100</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>RGB++</div>
+              </td>
+              <td>
+                <div>400</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <div>other</div>
+              </td>
+              <td>
+                <div>300</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default HolderAllocation

src/pages/Xudt/UDTComp.tsx

@@ -8,7 +8,6 @@ import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons'
 import { Link } from '../../components/Link'
 import { CsvExport } from '../../components/CsvExport'
 import TransactionItem from '../../components/TransactionItem/index'
-import { UDTTransactionsPagination, UDTTransactionsPanel, TypeScriptController, UDTNoResultPanel } from './styled'
 import { parseUDTAmount } from '../../utils/number'
 import { ReactComponent as OpenInNew } from '../../assets/open_in_new.svg'
 import { deprecatedAddrToNewAddr, getBtcUtxo } from '../../utils/util'
@@ -23,6 +22,9 @@ import { RawBtcRPC } from '../../services/ExplorerService'
 import { XUDT } from '../../models/Xudt'
 import { getBtcTxList } from '../../services/ExplorerService/fetcher'
 import XUDTTag from '../../components/XUDTTag'
+import SimpleButton from '../../components/SimpleButton'
+import SimpleModal from '../../components/Modal'
+import HolderAllocation from './HolderAllocation'
 
 const IssuerContent: FC<{ address: string }> = ({ address }) => {
   const { t } = useTranslation()
@@ -56,6 +58,7 @@ export const UDTOverviewCard = ({ typeHash, xudt }: { typeHash: string; xudt: XU
   const { t } = useTranslation()
   const isMobile = useIsMobile()
   const [isScriptDisplayed, setIsScriptDisplayed] = useState(false)
+  const [showHolderAmountModal, setShowHolderAmountModal] = useState(false)
 
   const issuer = xudt?.issuerAddress
   const script = xudt?.typeScript ?? null
@@ -104,7 +107,18 @@ export const UDTOverviewCard = ({ typeHash, xudt }: { typeHash: string; xudt: XU
     },
     {
       title: t('xudt.holder_addresses'),
-      content: xudt?.addressesCount ?? '-',
+      content: xudt?.addressesCount ? (
+        <SimpleButton
+          className={styles.holderAddressesButton}
+          onClick={() => {
+            setShowHolderAmountModal(true)
+          }}
+        >
+          {xudt.addressesCount}
+        </SimpleButton>
+      ) : (
+        '-'
+      ),
     },
     {
       title: t('xudt.symbol'),
@@ -137,8 +151,11 @@ export const UDTOverviewCard = ({ typeHash, xudt }: { typeHash: string; xudt: XU
         </div>
 
         <CardCellsLayout type="left-right" cells={items} borderTop />
+        <SimpleModal isShow={showHolderAmountModal} setIsShow={setShowHolderAmountModal}>
+          <HolderAllocation typeHash={typeHash} />
+        </SimpleModal>
 
-        <TypeScriptController onClick={toggleScriptDisplay}>
+        <SimpleButton className={styles.typeScriptController} onClick={toggleScriptDisplay}>
           {isScriptDisplayed ? (
             <div className={styles.scriptToggle}>
               <EyeOpenIcon />
@@ -150,7 +167,7 @@ export const UDTOverviewCard = ({ typeHash, xudt }: { typeHash: string; xudt: XU
               <div>{t('xudt.type_script_hash')}</div>
             </div>
           )}
-        </TypeScriptController>
+        </SimpleButton>
 
         {isScriptDisplayed ? (
           script && <Script script={script} />
@@ -184,14 +201,14 @@ export const UDTComp = ({
 
   if (filterNoResult) {
     return (
-      <UDTNoResultPanel>
+      <div className={styles.uDTNoResultPanel}>
         <span>{t('search.udt_filter_no_result')}</span>
-      </UDTNoResultPanel>
+      </div>
     )
   }
   return (
     <>
-      <UDTTransactionsPanel>
+      <div className={styles.uDTTransactionsPanel}>
         {transactions.map(
           (transaction, index) =>
             transaction && (
@@ -204,15 +221,15 @@ export const UDTComp = ({
               />
             ),
         )}
-      </UDTTransactionsPanel>
-      <UDTTransactionsPagination>
+      </div>
+      <div className={styles.uDTTransactionsPagination}>
         <PaginationWithRear
           currentPage={currentPage}
           totalPages={totalPages}
           onChange={onPageChange}
           rear={xudt ? <CsvExport link={`/export-xudt-holders?id=${xudt.typeHash}`} /> : null}
         />
-      </UDTTransactionsPagination>
+      </div>
     </>
   )
 }

src/pages/Xudt/index.tsx

@@ -1,8 +1,8 @@
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useQuery } from '@tanstack/react-query'
+import classNames from 'classnames'
 import Content from '../../components/Content'
-import { UDTContentPanel, UDTTransactionTitlePanel } from './styled'
 import UDTComp, { UDTOverviewCard } from './UDTComp'
 import { usePaginationParamsInPage, useSearchParams, useUpdateSearchParams } from '../../hooks'
 import Filter from '../../components/Filter'
@@ -67,12 +67,12 @@ export const Xudt = () => {
 
   return (
     <Content>
-      <UDTContentPanel className="container">
+      <div className={classNames(styles.container, 'container')}>
         <UDTOverviewCard typeHash={typeHash} xudt={xudt} />
 
-        <UDTTransactionTitlePanel>
-          <div className="udtTransactionContainer">
-            <div className="udtTransactionTitle">
+        <div className={styles.uDTTransactionTitlePanel}>
+          <div className={styles.udtTransactionContainer}>
+            <div className={styles.udtTransactionTitle}>
               {`${t('transaction.transactions')} (${localeNumberString(total)})`}
             </div>
             <div className={styles.searchAndfilter}>
@@ -85,7 +85,7 @@ export const Xudt = () => {
               />
             </div>
           </div>
-        </UDTTransactionTitlePanel>
+        </div>
 
         <QueryResult query={querySimpleUDTTransactions} delayLoading>
           {data => (
@@ -100,7 +100,7 @@ export const Xudt = () => {
             />
           )}
         </QueryResult>
-      </UDTContentPanel>
+      </div>
     </Content>
   )
 }