refactor(atoms): remove transaction request atom

src/app/features/container/container.tsx

@@ -28,13 +28,9 @@ function UnmountEffectSuspense() {
    * the request promise to fail; triggering an onCancel callback function.
    */
   const handleUnmount = useCallback(async () => {
-    if (!!transactionRequest) {
-      await handleCancelTransaction();
-    } else if (!!authRequest) {
-      cancelAuthentication();
-    } else if (!!signatureRequest) {
-      handleCancelSignMessage();
-    }
+    if (!!transactionRequest) await handleCancelTransaction();
+    if (!!authRequest) cancelAuthentication();
+    if (!!signatureRequest) handleCancelSignMessage();
   }, [
     transactionRequest,
     authRequest,
@@ -66,6 +62,8 @@ function useCacheInitialRouteSearchParams() {
 
   useEffect(() => {
     setParams(searchParams);
+    // Here we set some legacy atoms
+
     // We only want to set the initial searchParams, not all subsequent updates
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/app/pages/signature-request/signature-request.tsx

@@ -10,6 +10,7 @@ import {
 } from '@shared/signature/types';
 import {
   useIsSignatureRequestValid,
+  useSetAtomSignatureRequestToken,
   useSignatureRequestSearchParams,
 } from '@app/store/signatures/requests.hooks';
 
@@ -24,6 +25,10 @@ function SignatureRequestBase() {
 
   useRouteHeader(<PopupHeader />);
 
+  // Temporary workaround to avoid pattern of pulling search params directly
+  // into an atom, rather than using the tooling provided by our router library
+  useSetAtomSignatureRequestToken(requestToken);
+
   if (!isSignatureMessageType(messageType)) return null;
   if (isUndefined(validSignatureRequest)) return null;
   if (!requestToken || !messageType) return null;

src/app/pages/transaction-request/hooks/use-transaction-error.ts

@@ -11,23 +11,21 @@ import { useCurrentAccountAvailableStxBalance } from '@app/query/balance/balance
 import {
   useTransactionBroadcastError,
   useTransactionRequestState,
-  useTransactionRequestValidation,
 } from '@app/store/transactions/requests.hooks';
 import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
 
 export function useTransactionError() {
   const transactionRequest = useTransactionRequestState();
   const contractInterface = useContractInterface(transactionRequest);
   const broadcastError = useTransactionBroadcastError();
-  const isValidTransaction = useTransactionRequestValidation();
+
   const { origin } = useDefaultRequestParams();
 
   const currentAccount = useCurrentAccount();
   const availableStxBalance = useCurrentAccountAvailableStxBalance();
 
   return useMemo<TransactionErrorReason | void>(() => {
     if (!origin) return TransactionErrorReason.ExpiredRequest;
-    if (isValidTransaction === false) return TransactionErrorReason.Unauthorized;
 
     if (!transactionRequest || !availableStxBalance || !currentAccount) {
       return TransactionErrorReason.Generic;
@@ -68,7 +66,6 @@ export function useTransactionError() {
     availableStxBalance,
     currentAccount,
     transactionRequest,
-    isValidTransaction,
     origin,
   ]);
 }

src/app/pages/transaction-request/transaction-request.tsx

@@ -15,6 +15,8 @@ import { StxTransferDetails } from '@app/pages/transaction-request/components/st
 import { PostConditionModeWarning } from '@app/pages/transaction-request/components/post-condition-mode-warning';
 import { TransactionError } from '@app/pages/transaction-request/components/transaction-error/transaction-error';
 import {
+  useSetTransactionRequestAtom,
+  useTransactionRequest,
   useTransactionRequestState,
   useUpdateTransactionBroadcastError,
 } from '@app/store/transactions/requests.hooks';
@@ -57,6 +59,12 @@ function TransactionRequestBase() {
 
   useEffect(() => void analytics.track('view_transaction_signing'), [analytics]);
 
+  const txRequest = useTransactionRequest();
+
+  // This exists to move away from the pattern where the search param is pull
+  // from an atom, rather than from the tooling provided by the app's router
+  useSetTransactionRequestAtom(txRequest);
+
   const onSubmit = useCallback(
     async values => {
       if (walletType === 'ledger') {
@@ -73,9 +81,7 @@ function TransactionRequestBase() {
         fee: values.fee,
         type: values.feeType,
       });
-      return () => {
-        void setBroadcastError(null);
-      };
+      return () => void setBroadcastError(null);
     },
     [
       analytics,

src/app/store/accounts/account.hooks.ts

@@ -8,14 +8,15 @@ import {
 import {
   accountsWithAddressState,
   currentAccountConfirmedTransactionsState,
-  currentAccountState,
-  currentAccountStxAddressState,
   hasSwitchedAccountsState,
   hasCreatedAccountState,
-  transactionAccountIndexState,
 } from '@app/store/accounts/accounts';
 
 import { currentAccountIndexState } from '../wallet/wallet';
+import { useTransactionRequestState } from '../transactions/requests.hooks';
+import { useMemo } from 'react';
+import { AccountWithAddress } from './account.models';
+import { signatureRequestAccountIndex } from '../signatures/requests';
 
 export function useAccountConfirmedTransactions() {
   return useAtomValue(currentAccountConfirmedTransactionsState);
@@ -25,20 +26,43 @@ export function useAccounts() {
   return useAtomValue(accountsWithAddressState);
 }
 
-export function useCurrentAccountStxAddressState() {
-  return useAtomValue(currentAccountStxAddressState);
+// Comment below from original atom. This pattern encourages view level
+// implementation details to leaak into the state structure. Do not do this.
+//   This contains the state of the current account:
+//   could be the account associated with an in-process transaction request
+//   or the last selected / first account of the user
+export function useCurrentAccount() {
+  const accountIndex = useCurrentAccountIndex();
+  const txIndex = useTransactionAccountIndex();
+  const signatureIndex = useAtomValue(signatureRequestAccountIndex);
+  // ⚠️ to refactor, we should not just continually add new conditionals here
+  const index = txIndex ?? signatureIndex;
+  const hasSwitched = useAtomValue(hasSwitchedAccountsState);
+  const accounts = useAtomValue(accountsWithAddressState);
+  if (!accounts) return undefined;
+  if (typeof index === 'number' && !hasSwitched) return accounts[index];
+  return accounts[accountIndex] as AccountWithAddress | undefined;
 }
 
-export function useCurrentAccount() {
-  return useAtomValue(currentAccountState);
+export function useCurrentAccountStxAddressState() {
+  return useCurrentAccount()?.address;
 }
 
 export function useCurrentAccountIndex() {
   return useAtomValue(currentAccountIndexState);
 }
 
 export function useTransactionAccountIndex() {
-  return useAtomValue(transactionAccountIndexState);
+  const accounts = useAtomValue(accountsWithAddressState);
+  const txPayload = useTransactionRequestState();
+  const txAddress = txPayload?.stxAddress;
+
+  return useMemo(() => {
+    if (txAddress && accounts) {
+      return accounts.findIndex(account => account.address === txAddress); // selected account
+    }
+    return undefined;
+  }, [accounts, txAddress]);
 }
 
 export function useTransactionNetworkVersion() {