Tim/eng 3475 nonce not updating correctly after switching accounts

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

src/app/screens/transactionRequest/index.tsx

@@ -5,6 +5,7 @@ import useStxTransactionRequest from '@hooks/useStxTransactionRequest';
 import useWalletReducer from '@hooks/useWalletReducer';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
+  Account,
   buf2hex,
   Coin,
   ContractFunction,
@@ -18,6 +19,7 @@ import { ContractCallPayload, ContractDeployPayload } from '@stacks/connect';
 import { StacksTransaction } from '@stacks/transactions';
 import { getNetworkType, isHardwareAccount } from '@utils/helper';
 import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { MoonLoader } from 'react-spinners';
 import styled from 'styled-components';
@@ -42,16 +44,15 @@ function TransactionRequest() {
   const [coinsMetaData, setCoinsMetaData] = useState<Coin[] | null>(null);
   const [codeBody, setCodeBody] = useState(undefined);
   const [contractName, setContractName] = useState(undefined);
-  const [hasSwitchedAccount, setHasSwitchedAccount] = useState(false);
   const [attachment, setAttachment] = useState<Buffer | undefined>(undefined);
 
-  const handleTokenTransferRequest = async (tokenTransferPayload: any) => {
+  const handleTokenTransferRequest = async (tokenTransferPayload: any, requestAccount: Account) => {
     const stxPendingTxData = await fetchStxPendingTxData(stxAddress, selectedNetwork);
     const unsignedSendStxTx = await getTokenTransferRequest(
       tokenTransferPayload.recipient,
       tokenTransferPayload.amount,
       tokenTransferPayload.memo!,
-      stxPublicKey,
+      requestAccount.stxPublicKey,
       feeMultipliers!,
       selectedNetwork,
       stxPendingTxData || [],
@@ -69,16 +70,19 @@ function TransactionRequest() {
     });
   };
 
-  const handleContractCallRequest = async (contractCallPayload: ContractCallPayload) => {
+  const handleContractCallRequest = async (
+    contractCallPayload: ContractCallPayload,
+    requestAccount: Account,
+  ) => {
     const {
       unSignedContractCall,
       contractInterface,
       coinsMetaData: coinMeta,
     } = await getContractCallPromises(
       contractCallPayload,
-      stxAddress,
+      requestAccount.stxAddress,
       selectedNetwork,
-      stxPublicKey,
+      requestAccount.stxPublicKey,
       stacksTransaction?.auth,
     );
     setUnsignedTx(unSignedContractCall);
@@ -104,21 +108,61 @@ function TransactionRequest() {
     }
   };
 
-  const handleContractDeployRequest = async (contractDeployPayload: ContractDeployPayload) => {
+  const handleContractDeployRequest = async (
+    contractDeployPayload: ContractDeployPayload,
+    requestAccount: Account,
+  ) => {
     const response = await createDeployContractRequest(
       contractDeployPayload,
       selectedNetwork,
-      stxPublicKey,
+      requestAccount.stxPublicKey,
       feeMultipliers!,
-      stxAddress,
+      requestAccount.stxAddress,
       stacksTransaction?.auth,
     );
     setUnsignedTx(response.contractDeployTx);
     setCodeBody(response.codeBody);
     setContractName(response.contractName);
   };
 
-  const switchAccountBasedOnRequest = () => {
+  const handleTxSigningRequest = async (requestAccount: Account) => {
+    if (payload.txType === 'contract_call') {
+      await handleContractCallRequest(payload, requestAccount);
+    } else if (payload.txType === 'smart_contract') {
+      await handleContractDeployRequest(payload, requestAccount);
+    } else {
+      navigate('/confirm-stx-tx', {
+        state: {
+          unsignedTx: payload.txHex,
+          sponsored: payload.sponsored,
+          isBrowserTx: true,
+          tabId,
+          requestToken,
+        },
+      });
+    }
+  };
+
+  const createRequestTx = async (account: Account) => {
+    try {
+      if (!payload.txHex) {
+        if (payload.txType === 'token_transfer') {
+          await handleTokenTransferRequest(payload, account);
+        } else if (payload.txType === 'contract_call') {
+          await handleContractCallRequest(payload, account);
+        } else if (payload.txType === 'smart_contract') {
+          await handleContractDeployRequest(payload, account);
+        }
+      } else {
+        await handleTxSigningRequest(account);
+      }
+    } catch (e: unknown) {
+      console.error(e); // eslint-disable-line
+      toast.error('Unexpected error creating transaction');
+    }
+  };
+
+  const handleRequest = async () => {
     if (getNetworkType(payload.network) !== network.type) {
       navigate('/tx-status', {
         state: {
@@ -134,7 +178,8 @@ function TransactionRequest() {
     if (payload.stxAddress !== selectedAccount?.stxAddress && !isHardwareAccount(selectedAccount)) {
       const account = accountsList.find((acc) => acc.stxAddress === payload.stxAddress);
       if (account) {
-        switchAccount(account);
+        await switchAccount(account);
+        await createRequestTx(account);
       } else {
         navigate('/tx-status', {
           state: {
@@ -146,48 +191,14 @@ function TransactionRequest() {
           },
         });
       }
-    }
-    setHasSwitchedAccount(true);
-  };
-
-  const handleTxSigningRequest = async () => {
-    if (payload.txType === 'contract_call') {
-      await handleContractCallRequest(payload);
-    } else if (payload.txType === 'smart_contract') {
-      await handleContractDeployRequest(payload);
     } else {
-      navigate('/confirm-stx-tx', {
-        state: {
-          unsignedTx: payload.txHex,
-          sponsored: payload.sponsored,
-          isBrowserTx: true,
-          tabId,
-          requestToken,
-        },
-      });
-    }
-  };
-
-  const createRequestTx = async () => {
-    if (hasSwitchedAccount) {
-      if (!payload.txHex) {
-        if (payload.txType === 'token_transfer') {
-          await handleTokenTransferRequest(payload);
-        } else if (payload.txType === 'contract_call') {
-          await handleContractCallRequest(payload);
-        } else if (payload.txType === 'smart_contract') {
-          await handleContractDeployRequest(payload);
-        }
-      } else {
-        await handleTxSigningRequest();
-      }
+      await createRequestTx(selectedAccount!);
     }
   };
 
   useEffect(() => {
-    switchAccountBasedOnRequest();
-    createRequestTx();
-  }, [hasSwitchedAccount]);
+    handleRequest();
+  }, []);
 
   return (
     <>

src/app/stores/wallet/reducer.ts

@@ -31,6 +31,37 @@ import {
   WalletState,
 } from './actions/types';
 
+/*
+ * This store should ONLY be used for global app settings such as:
+ *  - hasActivatedOrdinalsKey: undefined,
+ *  - hasActivatedRareSatsKey: undefined,
+ *  - hasActivatedRBFKey: true,
+ *  - rareSatsNoticeDismissed: undefined,
+ *  - showBtcReceiveAlert: true,
+ *  - showOrdinalReceiveAlert: true,
+ *  - showDataCollectionAlert: true,
+ *  - btcApiUrl: '',
+ *  - selectedAccount: null,
+ *  - accountType: 'software',
+ *  - accountName: undefined,
+ *  - walletLockPeriod: WalletSessionPeriods.STANDARD,
+ *  - isUnlocked: false,
+ *  - fiatCurrency: 'USD',
+ *
+ * because we get many bugs around caching the wrong values when switching accounts,
+ * we prefer react-query cache (with the correct cache keys) for all
+ * account-specific values, and API fetch results such as:
+ *  - btcFiatRate: '0',
+ *  - stxBtcRate: '0',
+ *  - stxBalance: '0',
+ *  - stxAvailableBalance: '0',
+ *  - stxLockedBalance: '0',
+ *  - stxNonce: 0,
+ *  - btcBalance: '0',
+ *  - feeMultipliers: null,
+ *
+ * TODO refactor most of these values out of the store and use query cache instead
+ */
 const initialWalletState: WalletState = {
   stxAddress: '',
   btcAddress: '',