feat(digest): add direction to digest

src/components/RGBPP/types.ts

@@ -2,4 +2,5 @@ export enum TransactionLeapDirection {
   NONE = 'none',
   IN = 'in',
   OUT = 'out',
+  WITH_IN_BTC = 'withinBTC',
 }

src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss

@@ -69,9 +69,9 @@
 
   .txid,
   .commitment {
-    width: 100%;
+    max-width: 100%;
     display: flex;
-    flex: 1;
+    flex: 1 1;
     flex-shrink: 1;
     overflow: hidden;
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;

src/locales/en.json

@@ -415,6 +415,7 @@
       "tx_on_bitcoin": "Tx On Bitcoin",
       "leap_in": "L1 → L2",
       "leap_out": "L2 → L1",
+      "with_in": "L1 → L1",
       "leap_in_tip": "This RGB++ transaction is marked as \"L1 → L2\", indicating that the number of cells with RGB++ lock in the output exceeds the number of cells with RGB++ lock in the input.",
       "leap_out_tip": "This RGB++ transaction is marked as \"L2 → L1\", indicating that the number of cells with RGB++ lock in the input exceeds the number of cells with RGB++ lock in the output.",
       "view_in_btc_explorer": "View in Bitcoin Explorer",

src/pages/Transaction/TransactionComp/RGBDigestComp.tsx

@@ -18,6 +18,8 @@ export const RGBDigestComp = ({ hash, txid }: { hash: string; txid?: string }) =
       : undefined,
   )
 
+  const { data: rgbDigest } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
+
   const { data: displayInputs } = useQuery(
     ['transaction_inputs', hash, 1, 10],
     async () => {
@@ -64,23 +66,26 @@ export const RGBDigestComp = ({ hash, txid }: { hash: string; txid?: string }) =
   }, [displayInputs, displayOutputs])
 
   const direction = useMemo(() => {
-    // FIXME: should be from API because inputs/outputs are paginated
-    const inputCellCount = displayInputs.data.filter(c => c.rgbInfo).length
-    const outputCellCount = displayOutputs.data.filter(c => c.rgbInfo).length
-    if (inputCellCount === outputCellCount) {
-      return TransactionLeapDirection.NONE
-    }
-    if (inputCellCount > outputCellCount) {
-      return TransactionLeapDirection.OUT
+    switch (rgbDigest?.data.leapDirection) {
+      case 'in':
+        return TransactionLeapDirection.IN
+      case 'out':
+        return TransactionLeapDirection.OUT
+      case 'within':
+        return TransactionLeapDirection.WITH_IN_BTC
+      default:
+        return TransactionLeapDirection.NONE
     }
-    return TransactionLeapDirection.IN
-  }, [displayInputs, displayOutputs])
+  }, [rgbDigest])
 
   return (
     <>
       <Card className={styles.transactionHeader}>
         <div className={styles.headerContent}>
           <p>{t('transaction.rgb_digest')} </p>
+          {direction !== TransactionLeapDirection.NONE && (
+            <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
+          )}
         </div>
       </Card>
       <Card className={styles.digestContent}>

src/pages/Transaction/TransactionComp/TransactionDetailsHeader.module.scss

@@ -27,9 +27,23 @@
 
 .headerContent {
   display: flex;
-  justify-content: space-between;
+  gap: 8px;
   align-items: center;
 
+  .leap {
+    border: 1px solid #b0fcd3;
+    border-radius: 4px;
+    background-color: #e8fff1;
+    color: #23bc98;
+    padding: 5px 8px;
+    font-size: 12px;
+    line-height: 14px;
+  }
+
+  .leap:hover {
+    cursor: pointer;
+  }
+
   p {
     font-size: 20px;
     font-weight: 600;

src/services/ExplorerService/types.ts

@@ -313,6 +313,7 @@ export interface RGBDigest {
   txid: string
   confirmations: number
   commitment: string
+  leapDirection: string | null
   transfers: TransactionRecord[]
 }