From 465b7e4dc9f5186d84edda09787a71baf94864e3 Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Sun, 2 Jun 2024 15:45:42 +0800
Subject: [PATCH] feat(digest): add direction to digest

---
 src/components/RGBPP/types.ts                 |  1 +
 .../styles.module.scss                        |  3 +--
 src/locales/en.json                           |  1 +
 .../TransactionComp/RGBDigestComp.tsx         | 25 +++++++++++--------
 .../TransactionDetailsHeader.module.scss      | 16 +++++++++++-
 src/services/ExplorerService/types.ts         |  1 +
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/RGBPP/types.ts b/src/components/RGBPP/types.ts
index 9f8d6b1b7b..1b673ff823 100644
--- a/src/components/RGBPP/types.ts
+++ b/src/components/RGBPP/types.ts
@@ -2,4 +2,5 @@ export enum TransactionLeapDirection {
   NONE = 'none',
   IN = 'in',
   OUT = 'out',
+  WITH_IN_BTC = 'withinBTC',
 }
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
index 0722944421..8ea56cc981 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/styles.module.scss
@@ -69,9 +69,8 @@
 
   .txid,
   .commitment {
-    width: 100%;
+    max-width: 100%;
     display: flex;
-    flex: 1;
     flex-shrink: 1;
     overflow: hidden;
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
diff --git a/src/locales/en.json b/src/locales/en.json
index ecb1af867c..bb15717bc6 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx b/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx
index ec5476d60d..4c6123f1a0 100644
--- a/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx
+++ b/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}>
diff --git a/src/pages/Transaction/TransactionComp/TransactionDetailsHeader.module.scss b/src/pages/Transaction/TransactionComp/TransactionDetailsHeader.module.scss
index d0f7ec3669..debb209365 100644
--- a/src/pages/Transaction/TransactionComp/TransactionDetailsHeader.module.scss
+++ b/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;
diff --git a/src/services/ExplorerService/types.ts b/src/services/ExplorerService/types.ts
index 1a9e2c68b6..bc638165ae 100644
--- a/src/services/ExplorerService/types.ts
+++ b/src/services/ExplorerService/types.ts
@@ -313,6 +313,7 @@ export interface RGBDigest {
   txid: string
   confirmations: number
   commitment: string
+  leapDirection: string | null
   transfers: TransactionRecord[]
 }