Merge pull request #474 from secretkeylabs/imamahzafar/eng-2252-detec…

…t-and-show-all-ordinals-in-sign-psbt Detect and show all ordinals in sign PSBT
secretkeylabs · Jun 20, 2023 · 5c185e9 · 5c185e9
2 parents 9854e33 + 3ebd804
commit 5c185e9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/src/app/hooks/useDetectOrdinalInSignPsbt.ts b/src/app/hooks/useDetectOrdinalInSignPsbt.ts
@@ -1,21 +1,21 @@
 import {
   getOrdinalIdFromUtxo,
-  getOrdinalInfo,
-  OrdinalInfo,
+  Inscription,
   ParsedPSBT,
   UTXO,
 } from '@secretkeylabs/xverse-core';
 import { useEffect, useState } from 'react';
+import useOrdinalsApi from './useOrdinalsApi';
 import useWalletSelector from './useWalletSelector';
 
 const useDetectOrdinalInSignPsbt = (parsedPsbt: '' | ParsedPSBT) => {
   const [loading, setLoading] = useState(false);
-  const [ordinalId, setOrdinalId] = useState<string | undefined>(undefined);
   const [userReceivesOrdinal, setUserReceivesOrdinal] = useState(false);
-  const [ordinalInfoData, setOrdinalInfoData] = useState<OrdinalInfo | undefined>(undefined);
+  const [ordinalInfoData, setOrdinalInfoData] = useState<Array<Inscription>>([]);
   const {
     ordinalsAddress,
   } = useWalletSelector();
+  const OrdinalsApi = useOrdinalsApi();
 
   const getOrdinalId = async (utxoHash: string, index: number) => {
     const utxo: UTXO = {
@@ -31,17 +31,18 @@ const useDetectOrdinalInSignPsbt = (parsedPsbt: '' | ParsedPSBT) => {
   };
 
   async function handleOrdinalAndOrdinalInfo() {
+    const ordinals: Inscription[] = [];
     if (parsedPsbt) {
       setLoading(true);
-      parsedPsbt.inputs.forEach(async (input) => {
+      await Promise.all(parsedPsbt.inputs.map(async (input) => {
         const data = await getOrdinalId(input.txid, input.index);
         if (data) {
-          setOrdinalId(data);
-          const response = await getOrdinalInfo(data);
-          setOrdinalInfoData(response);
+          const response = await OrdinalsApi.getInscription(data);
+          ordinals.push(response);
         }
-        setLoading(false);
-      });
+      }));
+      setOrdinalInfoData(ordinals);
+      setLoading(false);
       parsedPsbt.outputs.forEach(async (output) => {
         if (output.address === ordinalsAddress) {
           setUserReceivesOrdinal(true);
@@ -55,7 +56,6 @@ const useDetectOrdinalInSignPsbt = (parsedPsbt: '' | ParsedPSBT) => {
   }, []);
 
   return {
-    ordinalId,
     loading,
     ordinalInfoData,
     userReceivesOrdinal,

diff --git a/src/app/screens/signPsbtRequest/index.tsx b/src/app/screens/signPsbtRequest/index.tsx
@@ -93,7 +93,6 @@ function SignPsbtRequest() {
 
   const parsedPsbt = useMemo(() => handlePsbtParsing(), [handlePsbtParsing]);
   const {
-    ordinalId,
     loading,
     ordinalInfoData,
     userReceivesOrdinal,
@@ -211,16 +210,16 @@ function SignPsbtRequest() {
                 {!payload.broadcast ? (
                   <InfoContainer bodyText={t('PSBT_NO_BROADCAST_DISCLAIMER')} />
                 ) : null}
-                {ordinalId && (
-                <OrdinalDetailComponent
-                  ordinalInscription={ordinalInfoData?.inscriptionNumber!}
-                  icon={IconOrdinal}
-                  title={t('ORDINAL')}
-                  ordinal={ordinalInfoData}
-                  ordinalDetail={ordinalInfoData?.metadata['content type']}
-                  heading={userReceivesOrdinal ? t('YOU_WILL_RECEIVE') : t('YOU_WILL_TRANSFER')}
-                />
-                )}
+                {ordinalInfoData && ordinalInfoData.map((ordinalData) => (
+                  <OrdinalDetailComponent
+                    ordinalInscription={`Inscription ${ordinalData?.number}`}
+                    icon={IconOrdinal}
+                    title={t('ORDINAL')}
+                    ordinal={ordinalData}
+                    ordinalDetail={ordinalData?.content_type}
+                    heading={userReceivesOrdinal ? t('YOU_WILL_RECEIVE') : t('YOU_WILL_TRANSFER')}
+                  />
+                ))}
                 <RecipientComponent
                   value={`${satsToBtc(new BigNumber(parsedPsbt?.netAmount))
                     .toString()

diff --git a/src/app/screens/signPsbtRequest/ordinalDetailComponent.tsx b/src/app/screens/signPsbtRequest/ordinalDetailComponent.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { animated, useSpring } from '@react-spring/web';
 import Cross from '@assets/img/dashboard/X.svg';
 import styled from 'styled-components';
-import { OrdinalInfo } from '@secretkeylabs/xverse-core';
+import { Inscription } from '@secretkeylabs/xverse-core';
 import OrdinalImage from '@screens/ordinals/ordinalImage';
 
 const Container = styled.div((props) => ({
@@ -123,7 +123,7 @@ interface Props {
   icon: string;
   title: string;
   heading?: string;
-  ordinal?: OrdinalInfo;
+  ordinal?: Inscription;
 }
 function OrdinalDetailComponent({
   ordinalInscription,
@@ -152,7 +152,6 @@ function OrdinalDetailComponent({
   const onCrossClick = () => {
     setShowOrdinal(false);
   };
-
   return (
     <>
       {showOrdinal && (
@@ -166,7 +165,7 @@ function OrdinalDetailComponent({
           <OrdinalImageContainer>
             <OrdinalImage ordinal={ordinal!} />
           </OrdinalImageContainer>
-          <InscriptionText>{ordinal?.inscriptionNumber}</InscriptionText>
+          <InscriptionText>{`Inscription ${ordinal?.number} `}</InscriptionText>
         </OrdinalOuterImageContainer>
       </OrdinalBackgroundContainer>
       )}