Merge pull request #701 from secretkeylabs/fix/ENG-3392

fix: show sat bundle for each input with an exotic or inscription
secretkeylabs · Dec 5, 2023 · c927dc5 · c927dc5
2 parents 91deed7 + 47c4c9b
commit c927dc5
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 49 deletions.
diff --git a/src/app/hooks/useDetectOrdinalInSignPsbt.ts b/src/app/hooks/useDetectOrdinalInSignPsbt.ts
@@ -1,33 +1,41 @@
 import {
   Bundle,
-  BundleSatRange,
   getUtxoOrdinalBundle,
   mapRareSatsAPIResponseToBundle,
   ParsedPSBT,
 } from '@secretkeylabs/xverse-core';
 import useWalletSelector from './useWalletSelector';
 
-export type InputsBundle = Pick<Bundle, 'value' | 'satRanges' | 'totalExoticSats'>;
+export type InputsBundle = (Pick<Bundle, 'satRanges' | 'totalExoticSats'> & {
+  inputIndex: number;
+})[];
 
 const useDetectOrdinalInSignPsbt = () => {
   const { ordinalsAddress, network } = useWalletSelector();
 
-  const handleOrdinalAndOrdinalInfo = async (parsedPsbt?: ParsedPSBT) => {
-    const satRanges: BundleSatRange[] = [];
-    let value = 0;
-    let totalExoticSats = 0;
+  const handleOrdinalAndOrdinalInfo = async (
+    parsedPsbt?: ParsedPSBT,
+  ): Promise<{ bundleItemsData: InputsBundle; userReceivesOrdinal: boolean }> => {
+    const bundleItemsData: InputsBundle = [];
     let userReceivesOrdinal = false;
 
     if (parsedPsbt) {
       const inputsRequest = parsedPsbt.inputs.map((input) =>
         getUtxoOrdinalBundle(network.type, input.txid, input.index),
       );
       const inputsResponse = await Promise.all(inputsRequest);
-      inputsResponse.forEach((inputResponse) => {
+      inputsResponse.forEach((inputResponse, index) => {
         const bundle = mapRareSatsAPIResponseToBundle(inputResponse);
-        value += bundle.value;
-        totalExoticSats += bundle.totalExoticSats;
-        satRanges.push(...bundle.satRanges);
+        if (
+          bundle.inscriptions.length > 0 ||
+          bundle.satributes.some((satributes) => !satributes.includes('COMMON'))
+        ) {
+          bundleItemsData.push({
+            satRanges: bundle.satRanges,
+            totalExoticSats: bundle.totalExoticSats,
+            inputIndex: index,
+          });
+        }
       });
 
       parsedPsbt.outputs.forEach((output) => {
@@ -37,12 +45,6 @@ const useDetectOrdinalInSignPsbt = () => {
       });
     }
 
-    const bundleItemsData = {
-      value,
-      satRanges,
-      totalExoticSats,
-    };
-
     return {
       bundleItemsData,
       userReceivesOrdinal,

diff --git a/src/app/screens/signBatchPsbtRequest/index.tsx b/src/app/screens/signBatchPsbtRequest/index.tsx
@@ -117,6 +117,7 @@ function SignBatchPsbtRequest() {
   const { btcAddress, ordinalsAddress, selectedAccount, network } = useWalletSelector();
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+  const { t: tCommon } = useTranslation('translation', { keyPrefix: 'COMMON' });
   const [expandInputOutputView, setExpandInputOutputView] = useState(false);
   const { payload, confirmSignPsbt, cancelSignPsbt, getSigningAddresses, requestToken } =
     useSignBatchPsbtTx();
@@ -366,14 +367,32 @@ function SignBatchPsbtRequest() {
 
                 {userTransfersOrdinals.length > 0 &&
                   userTransfersOrdinals.map((item, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <SatsBundle key={`${index}-transfer`} bundle={item as Bundle} />
+                    <SatsBundle
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`${index}-transfer`}
+                      title={`${tCommon('INPUT')} #${item.inputIndex}`}
+                      bundle={
+                        {
+                          totalExoticSats: item.totalExoticSats,
+                          satRanges: item.satRanges,
+                        } as Bundle
+                      }
+                    />
                   ))}
 
                 {userReceivesOrdinals.length > 0 &&
                   userTransfersOrdinals.map((item, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <SatsBundle key={`${index}-receive`} bundle={item as Bundle} />
+                    <SatsBundle
+                      // eslint-disable-next-line react/no-array-index-key
+                      key={`${index}-receive`}
+                      title={`${tCommon('INPUT')} #${item.inputIndex}`}
+                      bundle={
+                        {
+                          totalExoticSats: item.totalExoticSats,
+                          satRanges: item.satRanges,
+                        } as Bundle
+                      }
+                    />
                   ))}
 
                 <RecipientComponent
@@ -420,16 +439,20 @@ function SignBatchPsbtRequest() {
               {t('TRANSACTION')} {currentPsbtIndex + 1}/{parsedPsbts.length}
             </ReviewTransactionText>
 
-            {userReceivesOrdinalArr[currentPsbtIndex]?.bundleItemsData && (
-              <SatsBundle
-                title={
-                  userReceivesOrdinalArr[currentPsbtIndex]?.userReceivesOrdinal
-                    ? t('YOU_WILL_RECEIVE')
-                    : t('YOU_WILL_TRANSFER')
-                }
-                bundle={userReceivesOrdinalArr[currentPsbtIndex]?.bundleItemsData as Bundle}
-              />
-            )}
+            {Array.isArray(userReceivesOrdinalArr[currentPsbtIndex]?.bundleItemsData) &&
+              userReceivesOrdinalArr[currentPsbtIndex].bundleItemsData.map((bundle, index) => (
+                <SatsBundle
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={index}
+                  title={`${tCommon('INPUT')} #${bundle.inputIndex}`}
+                  bundle={
+                    {
+                      totalExoticSats: bundle.totalExoticSats,
+                      satRanges: bundle.satRanges,
+                    } as Bundle
+                  }
+                />
+              ))}
 
             <RecipientComponent
               value={`${

diff --git a/src/app/screens/signPsbtRequest/index.tsx b/src/app/screens/signPsbtRequest/index.tsx
@@ -110,8 +110,8 @@ function SignPsbtRequest() {
   const { t: signatureRequestTranslate } = useTranslation('translation', {
     keyPrefix: 'SIGNATURE_REQUEST',
   });
-  const { t: rareSatsTranslate } = useTranslation('translation', {
-    keyPrefix: 'RARE_SATS',
+  const { t: tCommon } = useTranslation('translation', {
+    keyPrefix: 'COMMON',
   });
   const [expandInputOutputView, setExpandInputOutputView] = useState(false);
   const { payload, confirmSignPsbt, cancelSignPsbt, getSigningAddresses } = useSignPsbtTx();
@@ -387,12 +387,21 @@ function SignPsbtRequest() {
             <Container>
               <ReviewTransactionText>{t('REVIEW_TRANSACTION')}</ReviewTransactionText>
               {!payload.broadcast && <InfoContainer bodyText={t('PSBT_NO_BROADCAST_DISCLAIMER')} />}
-              {bundleItemsData && (
-                <SatsBundle
-                  title={userReceivesOrdinal ? t('YOU_WILL_RECEIVE') : t('YOU_WILL_TRANSFER')}
-                  bundle={bundleItemsData as Bundle}
-                />
-              )}
+              {Array.isArray(bundleItemsData) &&
+                bundleItemsData.map((bundle, index) => (
+                  <SatsBundle
+                    title={`${tCommon('INPUT')} #${bundle.inputIndex}`}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={index}
+                    bundle={
+                      {
+                        totalExoticSats: bundle.totalExoticSats,
+                        satRanges: bundle.satRanges,
+                      } as Bundle
+                    }
+                  />
+                ))}
+
               <RecipientComponent
                 value={`${satsToBtc(new BigNumber((parsedPsbt?.netAmount ?? 0).toString()))
                   .toString()
@@ -409,14 +418,6 @@ function SignPsbtRequest() {
               />
 
               <TransactionDetailComponent title={t('NETWORK')} value={network.type} />
-              <TransactionDetailComponent
-                title={rareSatsTranslate('BUNDLE_SIZE')}
-                value={getSatsAmountString(new BigNumber(bundleItemsData?.value.toString() ?? 0))}
-                subValue={getBtcFiatEquivalent(
-                  new BigNumber(bundleItemsData?.value.toString() ?? 0),
-                  BigNumber(btcFiatRate),
-                )}
-              />
               {payload.broadcast ? (
                 <TransactionDetailComponent
                   title={t('FEES')}

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -4,7 +4,8 @@
     "SEND": "Send",
     "COMBO": "Combo",
     "SATS": "Sats",
-    "SATTRIBUTES": "Sattributes"
+    "SATTRIBUTES": "Sattributes",
+    "INPUT": "Input"
   },
   "LANDING_SCREEN": {
     "SCREEN_TITLE": "Wallet for Stacks & Bitcoin",
@@ -1177,8 +1178,7 @@
     "RARE_SATS_BUNDLE": "Rare Sats Bundle",
     "BUNDLE_PENDING_SEND_DESCRIPTION": "This bundle is already in a pending transfer.",
     "RARE_SAT": "Rare Sat",
-    "INSCRIBED_SAT": "Inscribed Sat",
-    "BUNDLE_SIZE": "Bundle size"
+    "INSCRIBED_SAT": "Inscribed Sat"
   },
   "COLLECTIBLE_COLLECTION_SCREEN": {
     "BACK_TO_GALLERY": "Back to gallery",