chore: show sudt and nft info in lite transaction

Magickbase · Oct 9, 2023 · ed883fe · ed883fe
1 parent 9e2fc57
commit ed883fe
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss
@@ -15,7 +15,7 @@
       }
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       .transactionLiteBoxHeaderAddr {
         width: 200px;
         display: inline-block;
@@ -27,7 +27,7 @@
       color: var(--primary-color);
       font-size: 12px;
       padding: 2px 6px;
-      box-shadow: 0px 4px 4px rgba(16, 16, 16, 0.05);
+      box-shadow: 0 4px 4px rgb(16 16 16 / 5%);
       border: 1px solid #caffdf;
       border-radius: 4px;
       display: inline-block;
@@ -90,7 +90,7 @@
       }
     }
 
-    @media (max-width: 750px) {
+    @media (width <= 750px) {
       & > div {
         display: inline-block;
 
@@ -108,7 +108,7 @@
           }
 
           .tag {
-            padding: 2px 2px;
+            padding: 2px;
             margin-right: 2px;
           }
         }

diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx
@@ -12,6 +12,17 @@ import { defaultTransactionLiteDetails } from '../../state'
 import { TransactionBadge } from './TransactionBadge'
 import { fetchTransactionLiteDetailsByHash } from '../../../../services/ExplorerService/fetcher'
 
+const getTransferItemTag = (transfer: State.LiteTransfer) => {
+  const { cellType, udtInfo, mNftInfo } = transfer
+  if (cellType === 'm_nft_token') {
+    return `NFT-${mNftInfo?.className ?? 'Unknown'}`
+  }
+  if (cellType === 'udt') {
+    return udtInfo?.displayName || `Uknown Asset #${udtInfo?.typeHash.substring(udtInfo.typeHash.length - 4)}`
+  }
+  return 'CKB'
+}
+
 export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase }) => {
   const { hash: txHash } = useParams<{ hash: string }>()
 
@@ -33,21 +44,12 @@ export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase })
               </div>
               <div className={styles.transactionLiteBoxContent}>
                 {item.transfers.map((transfer, index) => {
-                  const transferCapacity = new BigNumber(transfer.capacity)
-                  const isIncome = transferCapacity.isPositive()
                   return (
                     <div key={`transfer-${index}`}>
-                      {/* only show token info on first line of transfer details */}
-                      {index === 0 ? <div>CKB</div> : <div />}
+                      <div>{getTransferItemTag(transfer)}</div>
                       <div className={styles.addressDetailLite}>
                         <TransactionBadge cellType={transfer.cellType} capacity={parseCKBAmount(transfer.capacity)} />
-                        <div className={styles.capacityChange}>
-                          <span className={isIncome ? styles.add : styles.subtraction}>{isIncome ? '+' : ''}</span>
-                          <DecimalCapacity
-                            balanceChangeType={isIncome ? 'income' : 'payment'}
-                            value={localeNumberString(shannonToCkb(transfer.capacity))}
-                          />
-                        </div>
+                        <TransferAmount transfer={transfer} />
                       </div>
                     </div>
                   )
@@ -59,3 +61,43 @@ export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase })
     </>
   )
 }
+
+const TransferAmount: FC<{ transfer: State.LiteTransfer }> = ({ transfer }) => {
+  const transferCapacity = new BigNumber(transfer.capacity)
+  const transferAmount = new BigNumber(transfer.udtInfo?.amount ?? 0)
+  const isIncome = transferCapacity.isPositive()
+  const decimalPanelType = isIncome ? 'income' : 'payment'
+  const isUdt = transfer.cellType === 'udt'
+  const isNft = transfer.cellType === 'm_nft_token'
+
+  const amountChange = localeNumberString(shannonToCkb(transferAmount))
+  const capacityChange = localeNumberString(shannonToCkb(transferCapacity))
+  const isIncomeColor = isIncome ? styles.add : styles.subtraction
+
+  const getUdtComponent = () => {
+    if (isUdt) {
+      return (
+        <>
+          <DecimalCapacity balanceChangeType={decimalPanelType} value={amountChange} hideUnit hideZero />
+          <div className={isIncomeColor}>{`(${Math.abs(Number(capacityChange))} CKB)`}</div>
+        </>
+      )
+    }
+    if (isNft) {
+      return (
+        <div className={isIncomeColor}>
+          {isIncome ? '' : '-'}
+          ID: {transfer.mNftInfo?.tokenId ?? 'Unknown'}
+          {` (${Math.abs(Number(capacityChange))} CKB)`}
+        </div>
+      )
+    }
+    return <DecimalCapacity balanceChangeType={decimalPanelType} value={capacityChange} />
+  }
+  return (
+    <div className={styles.capacityChange}>
+      <span className={isIncomeColor}>{isIncome ? '+' : ''}</span>
+      {getUdtComponent()}
+    </div>
+  )
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -167,6 +167,12 @@ declare namespace State {
       displayName: string
       uan: string
     }
+
+    mNftInfo?: {
+      className: string
+      tokenId: string // none 0x prefix hex number
+      total: string // decimal string
+    }
   }
 
   export interface LockInfo {