[ENG-2879] feat: Batch sign PSBT in extension

package.json

@@ -61,7 +61,7 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-state-sync": "^3.1.4",
-    "sats-connect": "1.1.2",
+    "sats-connect": "1.3.0",
     "stream-browserify": "^3.0.0",
     "string-to-color": "^2.2.2",
     "styled-components": "^5.3.5",

src/app/components/bottomModal/index.tsx

@@ -8,41 +8,44 @@ const BottomModalHeaderText = styled.h1((props) => ({
   flex: 1,
 }));
 
-const RowContainer = styled.div({
+const RowContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'space-between',
-  margin: '24px 24px 20px 24px',
-});
+  margin: props.theme.spacing(12),
+  marginBottom: props.theme.spacing(10),
+}));
 
 const ButtonImage = styled.button({
   backgroundColor: 'transparent',
 });
 
+const CustomisedModal = styled(Modal)`
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  position: absolute;
+`;
+
 interface Props {
   header: string;
   visible: boolean;
   children: React.ReactNode;
   onClose: () => void;
   overlayStylesOverriding?: {};
   contentStylesOverriding?: {};
+  className?: string;
 }
 
-const CustomisedModal = styled(Modal)`
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  position: absolute;
-`;
-
 function BottomModal({
   header,
   children,
   visible,
   onClose,
   overlayStylesOverriding,
   contentStylesOverriding,
+  className,
 }: Props) {
   const theme = useTheme();
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
@@ -79,6 +82,7 @@ function BottomModal({
       ariaHideApp={false}
       style={customStyles}
       contentLabel="Example Modal"
+      className={className}
     >
       <RowContainer>
         <BottomModalHeaderText>{header}</BottomModalHeaderText>

src/app/components/button/index.tsx

@@ -18,6 +18,7 @@ const Button = styled.button<ButtonProps>((props) => ({
   width: '100%',
   height: 44,
   transition: 'all 0.1s ease',
+  columnGap: props.theme.spacing(3),
   ':disabled': {
     opacity: 0.4,
     cursor: 'not-allowed',
@@ -63,23 +64,22 @@ const AnimatedButtonText = styled.div((props) => ({
   textAlign: 'center',
 }));
 
-const ButtonImage = styled.img((props) => ({
-  marginRight: props.theme.spacing(3),
+const ButtonImage = styled.img({
   alignSelf: 'center',
   transform: 'all',
-}));
+});
 
-const ButtonIconContainer = styled.div((props) => ({
+const ButtonIconContainer = styled.div({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  marginRight: props.theme.spacing(3),
-}));
+});
 
 interface Props {
   className?: string;
   src?: string;
   icon?: JSX.Element;
+  iconPosition?: 'left' | 'right';
   text: string;
   onPress: () => void;
   processing?: boolean;
@@ -93,6 +93,7 @@ function ActionButton({
   className,
   src,
   icon,
+  iconPosition = 'left',
   text,
   onPress,
   processing = false,
@@ -120,8 +121,9 @@ function ActionButton({
         ) : (
           <>
             {src && <ButtonImage src={src} />}
-            {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
+            {icon && iconPosition === 'left' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
             <AnimatedButtonText>{text}</AnimatedButtonText>
+            {icon && iconPosition === 'right' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
           </>
         )}
       </TransparentButton>
@@ -140,8 +142,9 @@ function ActionButton({
       ) : (
         <>
           {src && <ButtonImage src={src} />}
-          {icon && <ButtonIconContainer>{icon}</ButtonIconContainer>}
+          {icon && iconPosition === 'left' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
           <ButtonText warning={warning}>{text}</ButtonText>
+          {icon && iconPosition === 'right' && <ButtonIconContainer>{icon}</ButtonIconContainer>}
         </>
       )}
     </Button>

src/app/components/confirmStxTransactionComponent/index.tsx

@@ -1,7 +1,7 @@
 import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg';
 import ledgerConnectDefaultIcon from '@assets/img/ledger/ledger_connect_default.svg';
 import ledgerConnectStxIcon from '@assets/img/ledger/ledger_import_connect_stx.svg';
-import { ledgerDelay } from '@common/utils/ledger';
+import { delay } from '@common/utils/ledger';
 import BottomModal from '@components/bottomModal';
 import ActionButton from '@components/button';
 import InfoContainer from '@components/infoContainer';
@@ -174,7 +174,7 @@
     } else if (showFeeWarning) {
       setShowFeeWarning(false);
     }
   }, [initialStxTransactions, feeMultipliers]);
 
   const getFee = () =>
     isSponsored
@@ -275,7 +275,7 @@
     }
 
     setIsConnectSuccess(true);
-    await ledgerDelay(1500);
+    await delay(1500);
     setCurrentStepIndex(1);
     try {
       const signedTxs = await signLedgerStxTransaction({
@@ -284,7 +284,7 @@
         addressIndex: selectedAccount.deviceAccountIndex,
       });
       setIsTxApproved(true);
-      await ledgerDelay(1500);
+      await delay(1500);
       onConfirmClick([signedTxs]);
     } catch (e) {
       console.error(e);
@@ -323,7 +323,9 @@
         {(initialStxTransactions[0]?.payload as any)?.amount && (
           <TransferFeeView
             fee={microstacksToStx(
-              getFee().plus(new BigNumber((initialStxTransactions[0]?.payload as any).amount?.toString(10))),
+              getFee().plus(
+                new BigNumber((initialStxTransactions[0]?.payload as any).amount?.toString(10)),
+              ),
             )}
             currency="STX"
             title={t('TOTAL')}

src/app/components/loadingTransactionStatus/circularSvgAnimation.tsx

@@ -54,10 +54,12 @@ const StyledSvg = styled.svg<{ status: ConfirmationStatus; loadingPercentage: nu
 export function CircularSvgAnimation({
   status,
   loadingPercentage,
+  withLoadingBgCircle = false,
   onRest,
 }: {
   status: ConfirmationStatus;
   loadingPercentage: number;
+  withLoadingBgCircle?: boolean;
   onRest?: () => void;
 }) {
   const [isCircleRested, setIsCircleRested] = useState(false);
@@ -94,6 +96,13 @@ export function CircularSvgAnimation({
         fill="none"
       >
         <path className={checkClass} d="M59.125 35.75L38.9582 55L28.875 45.375" />
+        {withLoadingBgCircle && status === 'LOADING' && (
+          <path
+            stroke="rgba(255, 255, 255, 0.1)"
+            strokeWidth={2}
+            d="M44 77C62.2254 77 77 62.2254 77 44C77 25.7746 62.2254 11 44 11C25.7746 11 11 25.7746 11 44C11 62.2254 25.7746 77 44 77Z"
+          />
+        )}
         <animated.path
           className="circle"
           d="M44 77C62.2254 77 77 62.2254 77 44C77 25.7746 62.2254 11 44 11C25.7746 11 11 25.7746 11 44C11 62.2254 25.7746 77 44 77Z"

src/app/components/loadingTransactionStatus/index.tsx

@@ -1,9 +1,9 @@
 import ActionButton from '@components/button';
-import className from 'classnames';
-import styled from 'styled-components';
-import { StyledP, StyledHeading, VerticalStackButtonContainer } from '@ui-library/common.styled';
 import { animated, easings, useSpring } from '@react-spring/web';
+import { StyledHeading, StyledP, VerticalStackButtonContainer } from '@ui-library/common.styled';
+import className from 'classnames';
 import { useState } from 'react';
+import styled from 'styled-components';
 import { CircularSvgAnimation, ConfirmationStatus } from './circularSvgAnimation';
 
 type Texts = {
@@ -84,7 +84,7 @@ const StatusLarge = styled.div`
 `;
 
 const Heading = styled(StyledHeading)`
-  margin-bottom: 6px;
+  margin-bottom: 12px;
 `;
 
 /**
@@ -103,13 +103,15 @@ export function LoadingTransactionStatus({
   primaryAction,
   secondaryAction,
   loadingPercentage,
+  withLoadingBgCircle = false,
 }: {
   status: ConfirmationStatus;
   resultTexts: Texts;
   loadingTexts: Texts;
   primaryAction: Action;
-  secondaryAction: Action;
+  secondaryAction?: Action;
   loadingPercentage: number;
+  withLoadingBgCircle?: boolean;
 }) {
   const [hasCircleAnimationRested, setHasCircleAnimationRested] = useState(false);
 
@@ -147,6 +149,7 @@ export function LoadingTransactionStatus({
             status={status}
             loadingPercentage={loadingPercentage}
             onRest={handleAnimationRest}
+            withLoadingBgCircle={withLoadingBgCircle}
           />
         </StatusLarge>
         <AnimatedBodyContainer>
@@ -167,7 +170,7 @@ export function LoadingTransactionStatus({
       <BottomFixedContainer className={visibleClass}>
         <VerticalStackButtonContainer>
           <ActionButton text={primaryAction.text} onPress={primaryAction.onPress} />
-          {status === 'SUCCESS' && (
+          {secondaryAction && status === 'SUCCESS' && (
             <ActionButton
               text={secondaryAction.text}
               onPress={secondaryAction.onPress}

src/app/hooks/useDetectOrdinalInSignPsbt.ts

@@ -1,62 +1,51 @@
 import { getUtxoOrdinalBundle, ParsedPSBT } from '@secretkeylabs/xverse-core';
 import { BundleItem, mapRareSatsAPIResponseToRareSats } from '@utils/rareSats';
 import { isAxiosError } from 'axios';
-import { useEffect, useState } from 'react';
 import useWalletSelector from './useWalletSelector';
 
-const useDetectOrdinalInSignPsbt = (parsedPsbt: undefined | ParsedPSBT) => {
-  const [loading, setLoading] = useState(false);
-  const [userReceivesOrdinal, setUserReceivesOrdinal] = useState(false);
-  const [bundleItemsData, setBundleItemsData] = useState<BundleItem[]>([]);
+const useDetectOrdinalInSignPsbt = () => {
   const { ordinalsAddress, network } = useWalletSelector();
 
-  async function handleOrdinalAndOrdinalInfo() {
+  const handleOrdinalAndOrdinalInfo = async (parsedPsbt?: ParsedPSBT) => {
     const bundleItems: BundleItem[] = [];
+    let userReceivesOrdinal = false;
+
     if (parsedPsbt) {
-      setLoading(true);
-      await Promise.all(
-        parsedPsbt.inputs.map(async (input) => {
-          try {
-            const data = await getUtxoOrdinalBundle(network.type, input.txid, input.index);
-
-            const bundle = mapRareSatsAPIResponseToRareSats(data);
-            bundle.items.forEach((item) => {
-              // we don't show unknown items for now
-              if (item.type === 'unknown') {
-                return;
-              }
-              bundleItems.push(item);
-            });
-          } catch (e) {
-            // we get back a 404 if the UTXO is not found, so it is likely this is a UTXO from an unpublished txn
-            if (!isAxiosError(e) || e.response?.status !== 404) {
-              // rethrow error if response was not 404
-              throw e;
+      parsedPsbt.inputs.map(async (input) => {
+        try {
+          const data = await getUtxoOrdinalBundle(network.type, input.txid, input.index);
+
+          const bundle = mapRareSatsAPIResponseToRareSats(data);
+          bundle.items.forEach((item) => {
+            // we don't show unknown items for now
+            if (item.type === 'unknown') {
+              return;
             }
+            bundleItems.push(item);
+          });
+        } catch (e) {
+          // we get back a 404 if the UTXO is not found, so it is likely this is a UTXO from an unpublished txn
+          if (!isAxiosError(e) || e.response?.status !== 404) {
+            // rethrow error if response was not 404
+            throw e;
           }
-        }),
-      );
-
-      setBundleItemsData(bundleItems);
-      setLoading(false);
+        }
+      });
 
-      parsedPsbt.outputs.forEach(async (output) => {
+      parsedPsbt.outputs.forEach((output) => {
         if (output.address === ordinalsAddress) {
-          setUserReceivesOrdinal(true);
+          userReceivesOrdinal = true;
         }
       });
     }
-  }
-
-  useEffect(() => {
-    handleOrdinalAndOrdinalInfo();
-  }, []);
 
-  return {
-    loading,
-    bundleItemsData,
-    userReceivesOrdinal,
+    return {
+      bundleItemsData: bundleItems,
+      userReceivesOrdinal,
+    };
   };
+
+  return handleOrdinalAndOrdinalInfo;
 };
 
 export default useDetectOrdinalInSignPsbt;