chore: merge develop into vic/add-consolidation-logic-skeleton

secretkeylabs · Dec 28, 2023 · fb30da8 · fb30da8
2 parents 32d0d5a + bcd28b0
commit fb30da8
Show file tree

Hide file tree

Showing 32 changed files with 879 additions and 1,855 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,11 +11,10 @@
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
     "@scure/btc-signer": "^1.1.1",
-    "@secretkeylabs/xverse-core": "5.3.0-8fda8f5",
-    "@stacks/connect": "^6.10.2",
-    "@stacks/encryption": "4.3.5",
+    "@secretkeylabs/xverse-core": "7.1.0",
+    "@stacks/connect": "7.4.1",
     "@stacks/stacks-blockchain-api-types": "6.1.1",
-    "@stacks/transactions": "4.3.8",
+    "@stacks/transactions": "6.9.0",
     "@tanstack/query-sync-storage-persister": "^4.29.1",
     "@tanstack/react-query": "^4.29.3",
     "@tanstack/react-query-devtools": "^4.29.3",

diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -1,7 +1,6 @@
 import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg';
 import AssetIcon from '@assets/img/transactions/Assets.svg';
 import ActionButton from '@components/button';
-import InfoContainer from '@components/infoContainer';
 import RecipientComponent from '@components/recipientComponent';
 import TransactionSettingAlert from '@components/transactionSetting';
 import TransferFeeView from '@components/transferFeeView';
@@ -269,14 +268,10 @@ function ConfirmBtcTransactionComponent({
   }, [signedNonOrdinalBtcSend]);
 
   useEffect(() => {
-    if (
+    const isFeeHigh =
       feeMultipliers &&
-      currentFee.isGreaterThan(new BigNumber(feeMultipliers.thresholdHighSatsFee))
-    ) {
-      setShowFeeWarning(true);
-    } else if (showFeeWarning) {
-      setShowFeeWarning(false);
-    }
+      currentFee.isGreaterThan(new BigNumber(feeMultipliers.thresholdHighSatsFee));
+    setShowFeeWarning(!!isFeeHigh);
   }, [currentFee, feeMultipliers]);
 
   const onAdvancedSettingClick = () => {
@@ -358,7 +353,9 @@ function ConfirmBtcTransactionComponent({
     <>
       <OuterContainer isGalleryOpen={isGalleryOpen}>
         {showFeeWarning && (
-          <InfoContainer type="Warning" bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')} />
+          <CalloutContainer>
+            <Callout bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')} variant="warning" />
+          </CalloutContainer>
         )}
         {/* TODO tim: refactor this not to use children. it should be just another prop */}
         {children}

diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -129,9 +129,10 @@ interface Props {
   isAsset?: boolean;
   title?: string;
   subTitle?: string;
+  hasSignatures?: boolean;
 }
 
-function ConfirmStxTransationComponent({
+function ConfirmStxTransactionComponent({
   initialStxTransactions,
   loading,
   isSponsored,
@@ -142,6 +143,7 @@ function ConfirmStxTransationComponent({
   onConfirmClick,
   onCancelClick,
   skipModal = false,
+  hasSignatures = false,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const { t: signatureRequestTranslate } = useTranslation('translation', {
@@ -280,7 +282,7 @@ function ConfirmStxTransationComponent({
     try {
       const signedTxs = await signLedgerStxTransaction({
         transport,
-        transactionBuffer: initialStxTransactions[0].serialize(),
+        transactionBuffer: Buffer.from(initialStxTransactions[0].serialize()),
         addressIndex: selectedAccount.deviceAccountIndex,
       });
       setIsTxApproved(true);
@@ -334,12 +336,14 @@ function ConfirmStxTransationComponent({
         {isSponsored ? (
           <SponsoredInfoText>{t('SPONSORED_TX_INFO')}</SponsoredInfoText>
         ) : (
-          <Button onClick={onAdvancedSettingClick}>
-            <>
-              <ButtonImage src={SettingIcon} />
-              <ButtonText>{t('ADVANCED_SETTING')}</ButtonText>
-            </>
-          </Button>
+          !hasSignatures && (
+            <Button onClick={onAdvancedSettingClick}>
+              <>
+                <ButtonImage src={SettingIcon} />
+                <ButtonText>{t('ADVANCED_SETTING')}</ButtonText>
+              </>
+            </Button>
+          )
         )}
         <TransactionSettingAlert
           visible={openTransactionSettingModal}
@@ -407,4 +411,4 @@ function ConfirmStxTransationComponent({
   );
 }
 
-export default ConfirmStxTransationComponent;
+export default ConfirmStxTransactionComponent;
diff --git a/src/app/components/postCondition/postConditionView/index.tsx b/src/app/components/postCondition/postConditionView/index.tsx
@@ -1,13 +1,13 @@
 /* eslint-disable no-nested-ternary */
-import { StoreState } from '@stores/index';
-import { useSelector } from 'react-redux';
 import {
   addressToString,
   FungibleConditionCode,
   NonFungibleConditionCode,
   PostCondition,
 } from '@stacks/transactions';
+import { StoreState } from '@stores/index';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import TransferAmountComponent from '@components/transferAmountComponent';
 import { getNameFromPostCondition, getSymbolFromPostCondition } from './helper';
@@ -36,9 +36,9 @@ function PostConditionsView({ postCondition, amount, icon }: Props) {
         return t('TRANSFER_LESS');
       case FungibleConditionCode.LessEqual:
         return t('TRANSFER_LESS_EQUAL');
-      case NonFungibleConditionCode.DoesNotOwn:
+      case NonFungibleConditionCode.Sends:
         return t('TRANSFER_DOES_NOT_OWN');
-      case NonFungibleConditionCode.Owns:
+      case NonFungibleConditionCode.DoesNotSend:
         return t('TRANSFER_OWN');
       default:
         return '';

diff --git a/src/app/components/transactionSetting/editNonce.tsx b/src/app/components/transactionSetting/editNonce.tsx
@@ -58,7 +58,7 @@ function EditNonce({ nonce, setNonce }: Props) {
 
   useEffect(() => {
     setNonce(nonceInput);
-  }, [nonceInput]);
+  }, [nonceInput, setNonce]);
 
   return (
     <NonceContainer>

diff --git a/src/app/components/transactionsRequests/ContractCallRequest.tsx b/src/app/components/transactionsRequests/ContractCallRequest.tsx
@@ -1,5 +1,5 @@
 import AccountHeaderComponent from '@components/accountHeader';
-import ConfirmStxTransationComponent from '@components/confirmStxTransactionComponent';
+import ConfirmStxTransactionComponent from '@components/confirmStxTransactionComponent';
 import InfoContainer from '@components/infoContainer';
 import FtPostConditionCard from '@components/postCondition/ftPostConditionCard';
 import NftPostConditionCard from '@components/postCondition/nftPostConditionCard';
@@ -11,15 +11,18 @@ import {
   addressToString,
   Args,
   broadcastSignedTransaction,
+  buf2hex,
   Coin,
   ContractFunction,
   extractFromPayload,
+  isMultiSig,
 } from '@secretkeylabs/xverse-core';
 import { ContractCallPayload } from '@stacks/connect';
 import {
   ClarityType,
   cvToJSON,
   cvToString,
+  MultiSigSpendingCondition,
   PostConditionType,
   SomeCV,
   StacksTransaction,
@@ -85,6 +88,12 @@ export default function ContractCallRequest(props: ContractCallRequestProps) {
   const [hasTabClosed, setHasTabClosed] = useState(false);
   const { t } = useTranslation('translation');
 
+  // SignTransaction Params
+  const isMultiSigTx = isMultiSig(unsignedTx);
+  const hasSignatures =
+    isMultiSigTx &&
+    (unsignedTx.auth.spendingCondition as MultiSigSpendingCondition).fields?.length > 0;
+
   useOnOriginTabClose(tabId, () => {
     setHasTabClosed(true);
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -175,7 +184,7 @@ export default function ContractCallRequest(props: ContractCallRequestProps) {
         finalizeTxSignature({
           requestPayload: requestToken,
           tabId,
-          data: { txId: broadcastResult, txRaw: tx[0].serialize().toString('hex') },
+          data: { txId: broadcastResult, txRaw: buf2hex(tx[0].serialize()) },
         });
         navigate('/tx-status', {
           state: {
@@ -208,6 +217,13 @@ export default function ContractCallRequest(props: ContractCallRequestProps) {
           browserTx: true,
         },
       });
+    } else if (isMultiSigTx) {
+      finalizeTxSignature({
+        requestPayload: requestToken,
+        tabId,
+        data: { txId: '', txRaw: buf2hex(unsignedTx.serialize()) },
+      });
+      window.close();
     } else {
       broadcastTx(transactions, attachment);
     }
@@ -248,13 +264,14 @@ export default function ContractCallRequest(props: ContractCallRequestProps) {
   return (
     <>
       <AccountHeaderComponent disableMenuOption disableAccountSwitch />
-      <ConfirmStxTransationComponent
+      <ConfirmStxTransactionComponent
         initialStxTransactions={[unsignedTx]}
         onConfirmClick={confirmCallback}
         onCancelClick={cancelCallback}
         loading={false}
         title={request.functionName}
         subTitle={`Requested by ${request.appDetails?.name}`}
+        hasSignatures={hasSignatures}
       >
         <>
           {hasTabClosed && (
@@ -272,7 +289,7 @@ export default function ContractCallRequest(props: ContractCallRequestProps) {
           />
           {functionArgsView()}
         </>
-      </ConfirmStxTransationComponent>
+      </ConfirmStxTransactionComponent>
     </>
   );
 }
diff --git a/src/app/components/transactionsRequests/ContractDeployTransaction.tsx b/src/app/components/transactionsRequests/ContractDeployTransaction.tsx
@@ -1,13 +1,13 @@
 import DownloadImage from '@assets/img/webInteractions/ArrowLineDown.svg';
 import AccountHeaderComponent from '@components/accountHeader';
-import ConfirmStxTransationComponent from '@components/confirmStxTransactionComponent';
+import ConfirmStxTransactionComponent from '@components/confirmStxTransactionComponent';
 import InfoContainer from '@components/infoContainer';
 import StxPostConditionCard from '@components/postCondition/stxPostConditionCard';
 import TransactionDetailComponent from '@components/transactionDetailComponent';
 import useNetworkSelector from '@hooks/useNetwork';
 import useOnOriginTabClose from '@hooks/useOnTabClosed';
-import { broadcastSignedTransaction } from '@secretkeylabs/xverse-core';
-import { PostCondition, StacksTransaction } from '@stacks/transactions';
+import { broadcastSignedTransaction, buf2hex, isMultiSig } from '@secretkeylabs/xverse-core';
+import { MultiSigSpendingCondition, PostCondition, StacksTransaction } from '@stacks/transactions';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -111,6 +111,12 @@ export default function ContractDeployRequest(props: ContractDeployRequestProps)
   const [loaderForBroadcastingTx, setLoaderForBroadcastingTx] = useState<boolean>(false);
   const navigate = useNavigate();
 
+  // SignTransaction Params
+  const isMultiSigTx = isMultiSig(unsignedTx);
+  const hasSignatures =
+    isMultiSigTx &&
+    (unsignedTx.auth.spendingCondition as MultiSigSpendingCondition).fields?.length > 0;
+
   useOnOriginTabClose(tabId, () => {
     setHasTabClosed(true);
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -124,7 +130,7 @@ export default function ContractDeployRequest(props: ContractDeployRequestProps)
         finalizeTxSignature({
           requestPayload: requestToken,
           tabId,
-          data: { txId: broadcastResult, txRaw: tx[0].serialize().toString('hex') },
+          data: { txId: broadcastResult, txRaw: buf2hex(tx[0].serialize()) },
         });
         navigate('/tx-status', {
           state: {
@@ -160,6 +166,13 @@ export default function ContractDeployRequest(props: ContractDeployRequestProps)
           browserTx: true,
         },
       });
+    } else if (isMultiSigTx) {
+      finalizeTxSignature({
+        requestPayload: requestToken,
+        tabId,
+        data: { txId: '', txRaw: buf2hex(unsignedTx.serialize()) },
+      });
+      window.close();
     } else {
       broadcastTx(txs);
     }
@@ -199,13 +212,14 @@ export default function ContractDeployRequest(props: ContractDeployRequestProps)
   return (
     <>
       <AccountHeaderComponent disableMenuOption disableAccountSwitch />
-      <ConfirmStxTransationComponent
+      <ConfirmStxTransactionComponent
         initialStxTransactions={[unsignedTx!]}
         onConfirmClick={confirmCallback}
         onCancelClick={cancelCallback}
         loading={loaderForBroadcastingTx}
         isSponsored={sponsored}
         title={t('DEPLOY_CONTRACT_REQUEST.DEPLOY_CONTRACT')}
+        hasSignatures={hasSignatures}
       >
         {hasTabClosed && (
           <InfoContainer
@@ -233,7 +247,7 @@ export default function ContractDeployRequest(props: ContractDeployRequestProps)
             </Button>
           </DownloadButtonContainer>
         </DownloadContainer>
-      </ConfirmStxTransationComponent>
+      </ConfirmStxTransactionComponent>
     </>
   );
 }
diff --git a/src/app/hooks/queries/useConfirmedBtcBalance.ts b/src/app/hooks/queries/useConfirmedBtcBalance.ts
@@ -0,0 +1,36 @@
+import useBtcClient from '@hooks/useBtcClient';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import useWalletSelector from '../useWalletSelector';
+
+const useConfirmBtcBalance = () => {
+  const { btcAddress } = useWalletSelector();
+  const btcClient = useBtcClient();
+
+  const fetchBtcAddressData = async () => btcClient.getAddressData(btcAddress);
+
+  const { data, isLoading, isError, error } = useQuery({
+    queryKey: ['btc-address-data'],
+    queryFn: fetchBtcAddressData,
+  });
+
+  const confirmedBalance = useMemo(() => {
+    if (!isLoading && !isError && data) {
+      const chainStats = data.chain_stats;
+      const mempoolStats = data.mempool_stats;
+
+      if (chainStats && mempoolStats) {
+        return chainStats.funded_txo_sum - chainStats.spent_txo_sum - mempoolStats.spent_txo_sum;
+      }
+    }
+    return undefined;
+  }, [data, isLoading, isError]);
+
+  return {
+    confirmedBalance,
+    isLoading,
+    error,
+  };
+};
+
+export default useConfirmBtcBalance;
diff --git a/src/app/hooks/queries/useStxPendingTxData.ts b/src/app/hooks/queries/useStxPendingTxData.ts
@@ -1,4 +1,4 @@
-import { fetchStxPendingTxData } from '@secretkeylabs/xverse-core';
+import { fetchStxPendingTxData, StxPendingTxData } from '@secretkeylabs/xverse-core';
 import { StoreState } from '@stores/index';
 import { useQuery } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
@@ -9,7 +9,7 @@ const useStxPendingTxData = () => {
   const selectedNetwork = useNetworkSelector();
   const result = useQuery({
     queryKey: ['stx-pending-transaction', { stxAddress, selectedNetwork }],
-    queryFn: () => fetchStxPendingTxData(stxAddress, selectedNetwork),
+    queryFn: (): Promise<StxPendingTxData> => fetchStxPendingTxData(stxAddress, selectedNetwork),
   });
   return result;
 };

diff --git a/src/app/hooks/queries/useStxWalletData.ts b/src/app/hooks/queries/useStxWalletData.ts
@@ -7,6 +7,7 @@ import { useDispatch } from 'react-redux';
 import useNetworkSelector from '../useNetwork';
 import useWalletSelector from '../useWalletSelector';
 
+// TODO refactor: no need to put this in store. use this hook instead
 export const useStxWalletData = () => {
   const dispatch = useDispatch();
   const { stxAddress } = useWalletSelector();