Release v0.26.1 to main

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "private": true,
   "engines": {
     "node": "^18.18.2"
@@ -10,7 +10,7 @@
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "5.2.0",
+    "@secretkeylabs/xverse-core": "5.3.0",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "6.1.1",

src/app/components/guards/auth.tsx

@@ -1,13 +1,13 @@
-import { PropsWithChildren, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import useSeedVault from '@hooks/useSeedVault';
 import useWalletSelector from '@hooks/useWalletSelector';
-import { useDispatch } from 'react-redux';
 import { setWalletUnlockedAction } from '@stores/wallet/actions/actionCreators';
+import { PropsWithChildren, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 function AuthGuard({ children }: PropsWithChildren) {
   const navigate = useNavigate();
-  const { masterPubKey, encryptedSeed, isUnlocked } = useWalletSelector();
+  const { masterPubKey, encryptedSeed, isUnlocked, accountsList } = useWalletSelector();
   const { getSeed, hasSeed } = useSeedVault();
   const dispatch = useDispatch();
 
@@ -26,7 +26,12 @@ function AuthGuard({ children }: PropsWithChildren) {
       return;
     }
     const hasSeedPhrase = await hasSeed();
-    if (!hasSeedPhrase || !masterPubKey) {
+    if (
+      !hasSeedPhrase ||
+      // We ensure there is at least 1 account with a masterPubKey as the unlock code will select an account if one
+      // is not selected in the store
+      (!masterPubKey && (accountsList.length === 0 || !accountsList[0].masterPubKey))
+    ) {
       navigate('/landing');
       return;
     }

src/app/components/seedPhraseInput/index.tsx

@@ -50,16 +50,24 @@ type SeedWordInputProps = {
   index: number;
   handleChangeInput: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleKeyDownInput: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  handlePaste: (pastedText: string) => void;
   disabled?: boolean;
 };
 const SeedWordInput = React.forwardRef<HTMLInputElement, SeedWordInputProps>(
-  ({ value, index, handleChangeInput, handleKeyDownInput, disabled }, ref) => {
-    const [showValue, setShowValue] = useState(false);
+  ({ value, index, handleChangeInput, handleKeyDownInput, disabled, handlePaste }, ref) => {
+    const DEV_MODE = process.env.NODE_ENV === 'development';
+    const [showValue, setShowValue] = useState(DEV_MODE);
 
     const handleFocusInput = () => setShowValue(true);
     const handleBlurInput = () => setShowValue(false);
     const handlePasteInput = (e: React.ClipboardEvent<HTMLInputElement>) => {
       e.preventDefault();
+
+      if (DEV_MODE) {
+        const { clipboardData } = e;
+        const pastedText = clipboardData.getData('text');
+        handlePaste(pastedText);
+      }
     };
 
     return (
@@ -167,6 +175,16 @@ export default function SeedPhraseInput({
     });
   };
 
+  const handlePaste = (pastedText: string) => {
+    const splitPastedText = pastedText.split(' ');
+    splitPastedText.forEach((text, index) => {
+      setSeedInputValues((prevSeed) => {
+        prevSeed[index] = text;
+        return [...prevSeed];
+      });
+    });
+  };
+
   useEffect(() => {
     const seedPhrase = seedInputValues
       .slice(0, !show24Words ? 12 : 24)
@@ -190,6 +208,7 @@ export default function SeedPhraseInput({
             index={index}
             handleChangeInput={handleChangeInput(index)}
             handleKeyDownInput={handleKeyDownInput(index)}
+            handlePaste={handlePaste}
             ref={(el) => {
               inputsRef.current[index] = el;
             }}
@@ -206,6 +225,7 @@ export default function SeedPhraseInput({
               index={index}
               handleChangeInput={handleChangeInput(index)}
               handleKeyDownInput={handleKeyDownInput(index)}
+              handlePaste={handlePaste}
               ref={(el) => {
                 inputsRef.current[index] = el;
               }}

src/app/hooks/useDetectOrdinalInSignPsbt.ts

@@ -1,6 +1,6 @@
 import {
   Bundle,
-  getUtxoOrdinalBundle,
+  getUtxoOrdinalBundleIfFound,
   mapRareSatsAPIResponseToBundle,
   ParsedPSBT,
 } from '@secretkeylabs/xverse-core';
@@ -21,10 +21,13 @@ const useDetectOrdinalInSignPsbt = () => {
 
     if (parsedPsbt) {
       const inputsRequest = parsedPsbt.inputs.map((input) =>
-        getUtxoOrdinalBundle(network.type, input.txid, input.index),
+        getUtxoOrdinalBundleIfFound(network.type, input.txid, input.index),
       );
       const inputsResponse = await Promise.all(inputsRequest);
       inputsResponse.forEach((inputResponse, index) => {
+        if (!inputResponse) {
+          return;
+        }
         const bundle = mapRareSatsAPIResponseToBundle(inputResponse);
         if (
           bundle.inscriptions.length > 0 ||

src/app/hooks/useWalletReducer.ts

@@ -65,6 +65,7 @@ const useWalletReducer = () => {
       currentAccounts,
     );
 
+    // we sanitise the account to remove any unknown properties which we had in pervious versions of the app
     walletAccounts[0] = {
       id: walletAccounts[0].id,
       btcAddress: walletAccounts[0].btcAddress,
@@ -77,13 +78,18 @@ const useWalletReducer = () => {
       bnsName: walletAccounts[0].bnsName,
     };
 
-    let selectedAccountData: Account;
+    let selectedAccountData: Account | undefined;
     if (!selectedAccount) {
       [selectedAccountData] = walletAccounts;
     } else if (isLedgerAccount(selectedAccount)) {
-      selectedAccountData = ledgerAccountsList[selectedAccount.id];
+      selectedAccountData = ledgerAccountsList.find((a) => a.id === selectedAccount.id);
     } else {
-      selectedAccountData = walletAccounts[selectedAccount.id];
+      selectedAccountData = walletAccounts.find((a) => a.id === selectedAccount.id);
+    }
+
+    if (!selectedAccountData) {
+      // this should not happen but is a good fallback to have, just in case
+      [selectedAccountData] = walletAccounts;
     }
 
     if (!isHardwareAccount(selectedAccountData)) {
@@ -326,36 +332,24 @@ const useWalletReducer = () => {
   };
 
   const addLedgerAccount = async (ledgerAccount: Account) => {
-    try {
-      dispatch(updateLedgerAccountsAction([...ledgerAccountsList, ledgerAccount]));
-    } catch (err) {
-      return Promise.reject(err);
-    }
+    dispatch(updateLedgerAccountsAction([...ledgerAccountsList, ledgerAccount]));
   };
 
   const removeLedgerAccount = async (ledgerAccount: Account) => {
-    try {
-      dispatch(
-        updateLedgerAccountsAction(
-          ledgerAccountsList.filter((account) => account.id !== ledgerAccount.id),
-        ),
-      );
-    } catch (err) {
-      return Promise.reject(err);
-    }
+    dispatch(
+      updateLedgerAccountsAction(
+        ledgerAccountsList.filter((account) => account.id !== ledgerAccount.id),
+      ),
+    );
   };
 
   const updateLedgerAccounts = async (updatedLedgerAccount: Account) => {
     const newLedgerAccountsList = ledgerAccountsList.map((account) =>
       account.id === updatedLedgerAccount.id ? updatedLedgerAccount : account,
     );
-    try {
-      dispatch(updateLedgerAccountsAction(newLedgerAccountsList));
-      if (isLedgerAccount(selectedAccount) && updatedLedgerAccount.id === selectedAccount?.id) {
-        switchAccount(updatedLedgerAccount);
-      }
-    } catch (err) {
-      return Promise.reject(err);
+    dispatch(updateLedgerAccountsAction(newLedgerAccountsList));
+    if (isLedgerAccount(selectedAccount) && updatedLedgerAccount.id === selectedAccount?.id) {
+      switchAccount(updatedLedgerAccount);
     }
   };
 

src/app/screens/confirmFtTransaction/index.tsx

@@ -13,7 +13,7 @@ import { deserializeTransaction } from '@stacks/transactions';
 import { useMutation } from '@tanstack/react-query';
 import { isLedgerAccount } from '@utils/helper';
 import BigNumber from 'bignumber.js';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -22,8 +22,14 @@ function ConfirmFtTransaction() {
   const navigate = useNavigate();
   const selectedNetwork = useNetworkSelector();
   const location = useLocation();
-  const { unsignedTx: seedHex, amount, fungibleToken, memo, recepientAddress } = location.state;
-  const unsignedTx = deserializeTransaction(seedHex);
+  const {
+    unsignedTx: unsignedTxHex,
+    amount,
+    fungibleToken,
+    memo,
+    recepientAddress,
+  } = location.state;
+  const unsignedTx = useMemo(() => deserializeTransaction(unsignedTxHex), [unsignedTxHex]);
   const { refetch } = useStxWalletData();
   const { network, selectedAccount } = useWalletSelector();
 

src/app/screens/confirmNftTransaction/index.tsx

@@ -17,7 +17,7 @@ import { deserializeTransaction } from '@stacks/transactions';
 import { useMutation } from '@tanstack/react-query';
 import { isLedgerAccount } from '@utils/helper';
 import BigNumber from 'bignumber.js';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
@@ -74,7 +74,7 @@ function ConfirmNftTransaction() {
   const nft = nftDetailQuery.data?.data;
 
   const { unsignedTx: unsignedTxHex, recipientAddress } = location.state;
-  const unsignedTx = deserializeTransaction(unsignedTxHex);
+  const unsignedTx = useMemo(() => deserializeTransaction(unsignedTxHex), [unsignedTxHex]);
   const { network } = useWalletSelector();
   const { refetch } = useStxWalletData();
   const selectedNetwork = useNetworkSelector();

src/app/screens/confirmStxTransaction/index.tsx

@@ -24,7 +24,7 @@ import { deserializeTransaction } from '@stacks/transactions';
 import { useMutation } from '@tanstack/react-query';
 import { isLedgerAccount } from '@utils/helper';
 import BigNumber from 'bignumber.js';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -49,7 +49,7 @@ function ConfirmStxTransaction() {
   const location = useLocation();
   const selectedNetwork = useNetworkSelector();
   const { unsignedTx: stringHex, sponsored, isBrowserTx, tabId, requestToken } = location.state;
-  const unsignedTx = deserializeTransaction(stringHex);
+  const unsignedTx = useMemo(() => deserializeTransaction(stringHex), [stringHex]);
   useOnOriginTabClose(Number(tabId), () => {
     setHasTabClosed(true);
     window.scrollTo({ top: 0, behavior: 'smooth' });