From dd33a75112e559419c7215e55af7ea399c34074c Mon Sep 17 00:00:00 2001
From: daryl <sai9375@hotmail.com>
Date: Fri, 7 Jun 2024 22:39:05 +0800
Subject: [PATCH] feat(l1l1): l1->l1

---
 src/components/RGBPP/index.tsx                | 22 ++-------------
 .../TransactionRGBPPDigestContent.tsx         | 27 ++++++++++++-------
 .../TransactionRGBPPDigestModal/index.tsx     | 13 ++-------
 .../TransactionComp/RGBDigestComp.tsx         |  2 +-
 4 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/src/components/RGBPP/index.tsx b/src/components/RGBPP/index.tsx
index ec8ca395b..7f2560c95 100644
--- a/src/components/RGBPP/index.tsx
+++ b/src/components/RGBPP/index.tsx
@@ -1,29 +1,15 @@
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Transaction } from '../../models/Transaction'
 import SimpleModal from '../Modal'
 import SimpleButton from '../SimpleButton'
 import TransactionRGBPPDigestModal from '../TransactionItem/TransactionRGBPPDigestModal'
 import styles from './styles.module.scss'
-import { TransactionLeapDirection } from './types'
 
 const RGBPP = ({ transaction }: { transaction: Transaction }) => {
   const [showModal, setShowModal] = useState(false)
   const { t } = useTranslation()
 
-  const direction = useMemo(() => {
-    // FIXME: should be from API because inputs/outputs are paginated
-    const inputCellCount = transaction.displayInputs.filter(c => c.rgbInfo).length
-    const outputCellCount = transaction.displayOutputs.filter(c => c.rgbInfo).length
-    if (inputCellCount === outputCellCount) {
-      return TransactionLeapDirection.NONE
-    }
-    if (inputCellCount > outputCellCount) {
-      return TransactionLeapDirection.OUT
-    }
-    return TransactionLeapDirection.IN
-  }, [transaction])
-
   return (
     <div>
       <SimpleButton
@@ -36,11 +22,7 @@ const RGBPP = ({ transaction }: { transaction: Transaction }) => {
         </div>
       </SimpleButton>
       <SimpleModal isShow={showModal} setIsShow={setShowModal}>
-        <TransactionRGBPPDigestModal
-          onClickClose={() => setShowModal(false)}
-          hash={transaction.transactionHash}
-          leapDirection={direction}
-        />
+        <TransactionRGBPPDigestModal onClickClose={() => setShowModal(false)} hash={transaction.transactionHash} />
       </SimpleModal>
     </div>
   )
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx
index 796847b7c..052e4055f 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/TransactionRGBPPDigestContent.tsx
@@ -18,19 +18,26 @@ import { useIsMobile } from '../../../hooks'
 import { Link } from '../../Link'
 import config from '../../../config'
 
-export const TransactionRGBPPDigestContent = ({
-  leapDirection,
-  hash,
-}: {
-  leapDirection: TransactionLeapDirection
-  hash: string
-}) => {
+export const TransactionRGBPPDigestContent = ({ hash }: { hash: string }) => {
   const { t } = useTranslation()
   const setToast = useSetToast()
   const isMobile = useIsMobile()
 
   const { data, isFetched } = useQuery(['rgb-digest', hash], () => explorerService.api.fetchRGBDigest(hash))
 
+  const direction = useMemo(() => {
+    switch (data?.data.leapDirection) {
+      case 'in':
+        return TransactionLeapDirection.IN
+      case 'out':
+        return TransactionLeapDirection.OUT
+      case 'withinBTC':
+        return TransactionLeapDirection.WITH_IN_BTC
+      default:
+        return TransactionLeapDirection.NONE
+    }
+  }, [data])
+
   const transfers = useMemo(() => {
     const m = new Map<string, LiteTransfer.Transfer[]>()
     data?.data.transfers?.forEach(tf => {
@@ -125,9 +132,9 @@ export const TransactionRGBPPDigestContent = ({
             {typeof data.data.confirmations === 'number' && (
               <span className={styles.blockConfirm}>({data.data.confirmations} Confirmations on Bitcoin)</span>
             )}
-            {leapDirection !== TransactionLeapDirection.NONE ? (
-              <Tooltip placement="top" title={t(`address.leap_${leapDirection}_tip`)}>
-                <span className={styles.leap}>{t(`address.leap_${leapDirection}`)}</span>
+            {direction !== TransactionLeapDirection.NONE ? (
+              <Tooltip placement="top" title={t(`address.leap_${direction}_tip`)}>
+                <span className={styles.leap}>{t(`address.leap_${direction}`)}</span>
               </Tooltip>
             ) : null}
           </div>
diff --git a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
index 6df5a50d3..9f67c4422 100644
--- a/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
+++ b/src/components/TransactionItem/TransactionRGBPPDigestModal/index.tsx
@@ -2,17 +2,8 @@ import { useTranslation } from 'react-i18next'
 import styles from './styles.module.scss'
 import CloseIcon from '../../../assets/modal_close.png'
 import { TransactionRGBPPDigestContent } from './TransactionRGBPPDigestContent'
-import { TransactionLeapDirection } from '../../RGBPP/types'
 
-const TransactionRGBPPDigestModal = ({
-  hash,
-  leapDirection,
-  onClickClose,
-}: {
-  onClickClose: Function
-  hash: string
-  leapDirection: TransactionLeapDirection
-}) => {
+const TransactionRGBPPDigestModal = ({ hash, onClickClose }: { onClickClose: Function; hash: string }) => {
   const { t } = useTranslation()
 
   return (
@@ -23,7 +14,7 @@ const TransactionRGBPPDigestModal = ({
           <img src={CloseIcon} alt="close icon" className={styles.closeIcon} />
         </button>
       </div>
-      <TransactionRGBPPDigestContent leapDirection={leapDirection} hash={hash} />
+      <TransactionRGBPPDigestContent hash={hash} />
     </div>
   )
 }
diff --git a/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx b/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx
index 24d7f373b..37fafa88e 100644
--- a/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx
+++ b/src/pages/Transaction/TransactionComp/RGBDigestComp.tsx
@@ -89,7 +89,7 @@ export const RGBDigestComp = ({ hash, txid }: { hash: string; txid?: string }) =
         </div>
       </Card>
       <Card className={styles.digestContent}>
-        <TransactionRGBPPDigestContent hash={hash} leapDirection={direction} />
+        <TransactionRGBPPDigestContent hash={hash} />
         <div className={styles.btcTxContent}>
           {isBtcTxLoading ? <SmallLoading /> : null}
           {btcTx?.vout.some(v => v.scriptPubKey.asm.includes('OP_RETURN')) ? (