From 84c89291f98d4e748439d44e650e635572d521a8 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Fri, 28 Jun 2024 23:26:13 +0800
Subject: [PATCH] style(holder-allocation): use ellipsis and match tag in
 frontend

---
 src/pages/Xudt/HolderAllocation.tsx |  4 +++-
 src/utils/util.ts                   | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/Xudt/HolderAllocation.tsx b/src/pages/Xudt/HolderAllocation.tsx
index bb5cf8165a..15a72ece28 100644
--- 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
index 111ef80bd0..0b4fb68bdb 100644
--- 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),
   )
 }