Merge branch 'main' into chore/refactor-workflows

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -10,11 +10,10 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "5.3.0",
-    "@stacks/connect": "^6.10.2",
-    "@stacks/encryption": "4.3.5",
+    "@secretkeylabs/xverse-core": "7.0.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",

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}

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;

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 '';

src/app/components/rareSatIcon/rareSatIcon.tsx

@@ -1,31 +1,32 @@
-import OneDPali from '@assets/img/nftDashboard/rareSats/1d_pali.svg';
-import TwoDPali from '@assets/img/nftDashboard/rareSats/2d_pali.svg';
-import ThreeDPali from '@assets/img/nftDashboard/rareSats/3d_pali.svg';
-import Alpha from '@assets/img/nftDashboard/rareSats/alpha.svg';
+import OneDPali from '@assets/img/nftDashboard/rareSats/1Dpali.png';
+import FirstTx from '@assets/img/nftDashboard/rareSats/1stx.png';
+import TwoDPali from '@assets/img/nftDashboard/rareSats/2Dpali.png';
+import ThreeDPali from '@assets/img/nftDashboard/rareSats/3Dpali.png';
+import Alpha from '@assets/img/nftDashboard/rareSats/alpha.png';
+import Block78 from '@assets/img/nftDashboard/rareSats/b78.png';
+import Block9 from '@assets/img/nftDashboard/rareSats/b9.png';
 import BlackEpic from '@assets/img/nftDashboard/rareSats/black_epic.svg';
 import BlackLegendary from '@assets/img/nftDashboard/rareSats/black_legendary.svg';
 import BlackRare from '@assets/img/nftDashboard/rareSats/black_rare.svg';
 import BlackUncommon from '@assets/img/nftDashboard/rareSats/black_uncommon.svg';
-import Block78 from '@assets/img/nftDashboard/rareSats/block_78.svg';
-import Block9 from '@assets/img/nftDashboard/rareSats/block_9.svg';
-import BlockPali from '@assets/img/nftDashboard/rareSats/block_pali.svg';
 import Epic from '@assets/img/nftDashboard/rareSats/epic.svg';
-import FibonacciSequence from '@assets/img/nftDashboard/rareSats/fibonacci_sequence.svg';
-import FirstTransactionSilkroad from '@assets/img/nftDashboard/rareSats/first_transaction_silkroad.svg';
-import Hitman from '@assets/img/nftDashboard/rareSats/hitman.svg';
-import Jpeg from '@assets/img/nftDashboard/rareSats/jpeg.svg';
+import FibonacciSequence from '@assets/img/nftDashboard/rareSats/fibonacci.png';
+import Hitman from '@assets/img/nftDashboard/rareSats/hitman.png';
+import Jpeg from '@assets/img/nftDashboard/rareSats/jpeg.png';
 import Legendary from '@assets/img/nftDashboard/rareSats/legendary.svg';
 import Mythic from '@assets/img/nftDashboard/rareSats/mythic.svg';
-import Nakamoto from '@assets/img/nftDashboard/rareSats/nakamoto.svg';
-import Omega from '@assets/img/nftDashboard/rareSats/omega.svg';
-import Palinception from '@assets/img/nftDashboard/rareSats/palinception.svg';
-import Palindrome from '@assets/img/nftDashboard/rareSats/palindrome.svg';
-import Pizza from '@assets/img/nftDashboard/rareSats/pizza.svg';
+import Nakamoto from '@assets/img/nftDashboard/rareSats/nakamoto.png';
+import Omega from '@assets/img/nftDashboard/rareSats/omega.png';
+import Palindrome from '@assets/img/nftDashboard/rareSats/pali.png';
+import BlockPali from '@assets/img/nftDashboard/rareSats/paliblock.png';
+import Palinception from '@assets/img/nftDashboard/rareSats/perfectpaliception.png';
+import Pizza from '@assets/img/nftDashboard/rareSats/pizza.png';
 import Rare from '@assets/img/nftDashboard/rareSats/rare.svg';
-import SequencePali from '@assets/img/nftDashboard/rareSats/sequence_pali.svg';
+import SequencePali from '@assets/img/nftDashboard/rareSats/seqpali.png';
+import SilkRoad from '@assets/img/nftDashboard/rareSats/silkroad.png';
 import Uncommon from '@assets/img/nftDashboard/rareSats/uncommon.svg';
 import Unknown from '@assets/img/nftDashboard/rareSats/unknown.svg';
-import Vintage from '@assets/img/nftDashboard/rareSats/vintage.svg';
+import Vintage from '@assets/img/nftDashboard/rareSats/vintage.png';
 import { RareSatsType } from '@secretkeylabs/xverse-core';
 import styled from 'styled-components';
 import Theme from '../../../theme';
@@ -47,6 +48,7 @@ const Image = styled.img`
   width: 100%;
   height: 100%;
   zindex: 2;
+  object-fit: cover;
 `;
 
 interface Props {
@@ -80,15 +82,15 @@ function RareSatIcon({ type, size = 24, bgColor, padding = 0, isDynamicSize = fa
     NAME_PALINDROME: Palindrome,
     ALPHA: Alpha,
     OMEGA: Omega,
-    FIRST_TRANSACTION: FirstTransactionSilkroad,
+    FIRST_TRANSACTION: FirstTx,
     BLOCK9: Block9,
     BLOCK78: Block78,
     NAKAMOTO: Nakamoto,
     VINTAGE: Vintage,
     PIZZA: Pizza,
     JPEG: Jpeg,
     HITMAN: Hitman,
-    SILK_ROAD: FirstTransactionSilkroad,
+    SILK_ROAD: SilkRoad,
   }[type];
   if (!src) {
     return null;

src/app/components/transactionSetting/editNonce.tsx

@@ -58,7 +58,7 @@ function EditNonce({ nonce, setNonce }: Props) {
 
   useEffect(() => {
     setNonce(nonceInput);
-  }, [nonceInput]);
+  }, [nonceInput, setNonce]);
 
   return (
     <NonceContainer>

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>
     </>
   );
 }

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>
     </>
   );
 }