feat(holder-allocation): xudt holder-allocation

src/locales/en.json

@@ -739,6 +739,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

@@ -740,6 +740,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/models/Xudt/index.ts

@@ -14,6 +14,14 @@ export interface XUDT {
   typeScript: Script
   udtType: 'xudt'
   xudtTags?: string[]
+  holderAllocation: {
+    ckbHoldersCount: string
+    btcHoldersCount: string
+    lockHoderAmount: {
+      lock: string
+      holderAmount: string
+    }[]
+  }
   iconFile: string
   operatorWebsite: string
   email: string

src/pages/Xudt/HolderAllocation.module.scss

@@ -0,0 +1,109 @@
+@import '../../styles/variables.module';
+
+.holderAllocationContainer {
+  background-color: #fff;
+  margin: 15% auto;
+  padding: 20px 24px 20px 40px;
+  width: 497px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $mobileBreakPoint) {
+    width: 90%;
+    margin-top: 20vh;
+    padding: 24px 16px;
+  }
+
+  .closeIcon {
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderAllocationContent {
+    background-color: #fff;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+
+    @media (max-width: $mobileBreakPoint) {
+      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,69 @@
+import { useTranslation } from 'react-i18next'
+import { MouseEventHandler } from 'react'
+import styles from './HolderAllocation.module.scss'
+import { localeNumberString } from '../../utils/number'
+import CloseIcon from '../../assets/modal_close.png'
+import SimpleButton from '../../components/SimpleButton'
+
+const HolderAllocation = ({
+  ckbHolderAmount,
+  btcHolderAmount,
+  lockHoderAmount,
+  onClose,
+}: {
+  ckbHolderAmount: string
+  btcHolderAmount: string
+  lockHoderAmount?: {
+    lock: string
+    holderAmount: string
+  }[]
+  onClose: MouseEventHandler<HTMLDivElement>
+}) => {
+  const [t] = useTranslation()
+  return (
+    <div className={styles.holderAllocationContainer}>
+      <div className={styles.holderAllocationContent}>
+        <h2>{t('xudt.holder_allocation')}</h2>
+        <p>
+          {t('xudt.holder_allocation_description', {
+            ckb: localeNumberString(ckbHolderAmount),
+            btc: localeNumberString(btcHolderAmount),
+          })}
+        </p>
+        {lockHoderAmount && (
+          <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>
+                {lockHoderAmount.map(amount => (
+                  <tr>
+                    <td>
+                      <div>{amount.lock}</div>
+                    </td>
+                    <td>
+                      <div>{amount.holderAmount}</div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      <SimpleButton onClick={onClose} className={styles.closeIcon}>
+        <img src={CloseIcon} alt="close icon" />
+      </SimpleButton>
+    </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'
@@ -24,6 +23,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'
 import { ReactComponent as EditIcon } from '../../assets/edit.svg'
 import XUDTTokenIcon from '../../assets/sudt_token.png'
 
@@ -67,6 +69,7 @@ export const UDTOverviewCard = ({
   const { t } = useTranslation()
   const isMobile = useIsMobile()
   const [isScriptDisplayed, setIsScriptDisplayed] = useState(false)
+  const [showHolderAmountModal, setShowHolderAmountModal] = useState(false)
   const [isModifyTokenInfoModalOpen, setIsModifyTokenInfoModalOpen] = useState<boolean>(false)
 
   const issuer = xudt?.issuerAddress
@@ -116,7 +119,18 @@ export const UDTOverviewCard = ({
     },
     {
       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'),
@@ -182,8 +196,16 @@ export const UDTOverviewCard = ({
         </div>
 
         <CardCellsLayout type="left-right" cells={items} borderTop />
+        <SimpleModal isShow={showHolderAmountModal} setIsShow={setShowHolderAmountModal}>
+          <HolderAllocation
+            onClose={() => setShowHolderAmountModal(false)}
+            ckbHolderAmount={xudt?.holderAllocation.ckbHoldersCount ?? '0'}
+            btcHolderAmount={xudt?.holderAllocation.btcHoldersCount ?? '0'}
+            lockHoderAmount={xudt?.holderAllocation.lockHoderAmount}
+          />
+        </SimpleModal>
 
-        <TypeScriptController onClick={toggleScriptDisplay}>
+        <SimpleButton className={styles.typeScriptController} onClick={toggleScriptDisplay}>
           {isScriptDisplayed ? (
             <div className={styles.scriptToggle}>
               <EyeOpenIcon />
@@ -195,7 +217,7 @@ export const UDTOverviewCard = ({
               <div>{t('xudt.type_script_hash')}</div>
             </div>
           )}
-        </TypeScriptController>
+        </SimpleButton>
 
         {isScriptDisplayed ? (
           script && <Script script={script} />
@@ -237,14 +259,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 && (
@@ -257,15 +279,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'
@@ -68,12 +68,12 @@ export const Xudt = () => {
 
   return (
     <Content>
-      <UDTContentPanel className="container">
+      <div className={classNames(styles.container, 'container')}>
         <UDTOverviewCard typeHash={typeHash} xudt={xudt} refetchUDT={queryUDT.refetch} />
 
-        <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}>
@@ -86,7 +86,7 @@ export const Xudt = () => {
               />
             </div>
           </div>
-        </UDTTransactionTitlePanel>
+        </div>
 
         <QueryResult query={querySimpleUDTTransactions} delayLoading>
           {data => (
@@ -101,7 +101,7 @@ export const Xudt = () => {
             />
           )}
         </QueryResult>
-      </UDTContentPanel>
+      </div>
     </Content>
   )
 }