style(holder-allocation): use ellipsis and match tag in frontend

Magickbase · Jun 28, 2024 · 84c8929 · 84c8929
1 parent 0f18aa9
commit 84c8929
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/pages/Xudt/HolderAllocation.tsx b/src/pages/Xudt/HolderAllocation.tsx
@@ -4,6 +4,8 @@ import styles from './HolderAllocation.module.scss'
 import { localeNumberString } from '../../utils/number'
 import CloseIcon from '../../assets/modal_close.png'
 import SimpleButton from '../../components/SimpleButton'
+import { matchScript } from '../../utils/util'
+import EllipsisMiddle from '../../components/EllipsisMiddle'
 
 const HolderAllocation = ({
   ckbHolderAmount,
@@ -50,7 +52,7 @@ const HolderAllocation = ({
                   .map(amount => (
                     <tr>
                       <td>
-                        <div>{amount.name ?? `#${amount.codeHash.slice(2, 6)}`}</div>
+                        <EllipsisMiddle>{matchScript(amount.codeHash)?.tag ?? amount.codeHash}</EllipsisMiddle>
                       </td>
                       <td>
                         <div>{localeNumberString(amount.holderCount)}</div>

diff --git a/src/utils/util.ts b/src/utils/util.ts
@@ -103,14 +103,18 @@ export const getContractHashTag = (script: Script): ContractHashTag | undefined
   return contractHashTag
 }
 
-export const matchScript = (contractHash: string, hashType: string): ContractHashTag | undefined => {
+export const matchScript = (contractHash: string, hashType?: string): ContractHashTag | undefined => {
   if (isMainnet()) {
     return MainnetContractHashTags.find(
-      scriptTag => scriptTag.codeHashes.find(codeHash => codeHash === contractHash) && scriptTag.hashType === hashType,
+      scriptTag =>
+        scriptTag.codeHashes.find(codeHash => codeHash === contractHash) &&
+        (!hashType || scriptTag.hashType === hashType),
     )
   }
   return TestnetContractHashTags.find(
-    scriptTag => scriptTag.codeHashes.find(codeHash => codeHash === contractHash) && scriptTag.hashType === hashType,
+    scriptTag =>
+      scriptTag.codeHashes.find(codeHash => codeHash === contractHash) &&
+      (!hashType || scriptTag.hashType === hashType),
   )
 }