Tim/ledger UI fixes

src/app/components/sendForm/index.tsx

@@ -221,16 +221,17 @@ function SendForm({
   stxMemo,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
+  // TODO tim: use context instead of duplicated local state and parent state (as props)
   const [amount, setAmount] = useState(amountToSend ?? '');
+  const [recipientAddress, setRecipientAddress] = useState(recipient ?? '');
   const [memo, setMemo] = useState(stxMemo ?? '');
   const [fiatAmount, setFiatAmount] = useState<string | undefined>('0');
   const [switchToFiat, setSwitchToFiat] = useState(false);
   const [addressError, setAddressError] = useState<string | undefined>(recepientError);
-  const [recipientAddress, setRecipientAddress] = useState(recipient ?? '');
   const navigate = useNavigate();
 
   const {
-    stxBtcRate, btcFiatRate, fiatCurrency, stxAddress,
+    stxBtcRate, btcFiatRate, fiatCurrency, stxAddress, selectedAccount
   } = useSelector(
     (state: StoreState) => state.walletState,
   );
@@ -243,6 +244,11 @@ function SendForm({
     currencyType,
   );
 
+  useEffect(() => {
+    setAmount('');
+    setRecipientAddress('');
+  }, [selectedAccount]);
+
   useEffect(() => {
     if (recepientError) {
       if (associatedAddress !== '' && recepientError.includes(t('ERRORS.ADDRESS_INVALID'))) {

src/app/screens/accountList/index.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import Plus from '@assets/img/dashboard/plus.svg';
 import ConnectLedger from '@assets/img/dashboard/connect_ledger.svg';
 import { useDispatch } from 'react-redux';
-import { selectAccount } from '@stores/wallet/actions/actionCreators';
+import { selectAccount, setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators';
 import Seperator from '@components/seperator';
 import { Account } from '@secretkeylabs/xverse-core/types';
 import useWalletSelector from '@hooks/useWalletSelector';
@@ -90,6 +90,7 @@ function AccountList(): JSX.Element {
         account.accountName
       )
     );
+    dispatch(setShouldResetUserFlow(true));
     navigate('/');
   };
 

src/app/screens/confirmBtcTransaction/index.tsx

@@ -17,6 +17,8 @@ import useBtcClient from '@hooks/useBtcClient';
 import { isLedgerAccount } from '@utils/helper';
 import BigNumber from 'bignumber.js';
 import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction';
+import { useDispatch } from 'react-redux';
+import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators';
 
 const BottomBarContainer = styled.h1((props) => ({
   marginTop: props.theme.spacing(5),
@@ -25,9 +27,7 @@ const BottomBarContainer = styled.h1((props) => ({
 function ConfirmBtcTransaction() {
   const navigate = useNavigate();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
-  const {
-    network, ordinalsAddress, btcAddress, selectedAccount,
-  } = useWalletSelector();
+  const { ordinalsAddress, btcAddress, selectedAccount, shouldResetUserFlow } = useWalletSelector();
   const btcClient = useBtcClient();
   const [recipientAddress, setRecipientAddress] = useState('');
   const [signedTx, setSignedTx] = useState<string>('');
@@ -41,6 +41,7 @@ function ConfirmBtcTransaction() {
     fee, amount, signedTxHex, recipient, isRestoreFundFlow, unspentUtxos, isBrc20TokenFlow,
     feePerVByte,
   } = location.state;
+  const dispatch = useDispatch();
 
   const {
     isLoading,
@@ -61,6 +62,18 @@ function ConfirmBtcTransaction() {
     });
   };
 
+  useEffect(() => {
+    if (shouldResetUserFlow) {
+      navigate('/send-btc', {
+        state: {
+          amount,
+          recipientAddress,
+        },
+      });
+      dispatch(setShouldResetUserFlow(false));
+    }
+  }, [shouldResetUserFlow]);
+
   const onContinueButtonClick = () => {
     mutate({ signedTx });
   };

src/app/screens/sendBtc/index.tsx

@@ -2,7 +2,7 @@ import BigNumber from 'bignumber.js';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@tanstack/react-query';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
 import SendForm from '@components/sendForm';
 import TopRow from '@components/topRow';
@@ -15,6 +15,7 @@ import { BITCOIN_DUST_AMOUNT_SATS } from '@utils/constants';
 import { Recipient, SignedBtcTx } from '@secretkeylabs/xverse-core/transactions/btc';
 import { ErrorCodes, ResponseError } from '@secretkeylabs/xverse-core';
 import { isInOptions } from '@utils/helper';
+import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators';
 
 function SendBtcScreen() {
   const location = useLocation();
@@ -36,8 +37,10 @@ function SendBtcScreen() {
     selectedAccount,
     seedPhrase,
     btcFiatRate,
+    shouldResetUserFlow,
   } = useSelector((state: StoreState) => state.walletState);
   const { t } = useTranslation('translation', { keyPrefix: 'SEND' });
+  const dispatch = useDispatch();
 
   const navigate = useNavigate();
   const {
@@ -79,6 +82,14 @@ function SendBtcScreen() {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (shouldResetUserFlow) {
+      setAmount('');
+      setRecipientAddress('');
+      dispatch(setShouldResetUserFlow(false));
+    }
+  }, [shouldResetUserFlow]);
+
   useEffect(() => {
     if (recipientAddress && amount && txError) {
       if (Number(txError) === ErrorCodes.InSufficientBalance) {

src/app/stores/index.ts

@@ -41,6 +41,8 @@ const storeMiddleware = [
       actions.StoreEncryptedSeedKey,
       actions.SetWalletSeedPhraseKey,
       actions.UnlockWalletKey,
+      actions.SelectAccountKey,
+      actions.SetShouldResetUserFlowKey
     ],
   }),
 ];

src/app/stores/wallet/actions/actionCreators.ts

@@ -243,3 +243,12 @@ export function setWalletLockPeriodAction(
     walletLockPeriod,
   };
 }
+
+export function setShouldResetUserFlow(
+  shouldResetUserFlow: boolean
+): actions.SetShouldResetUserFlow {
+  return {
+    type: actions.SetShouldResetUserFlowKey,
+    shouldResetUserFlow
+  };
+}

src/app/stores/wallet/actions/types.ts

@@ -44,6 +44,7 @@ export const AddLedgerAccountKey = 'AddLedgerAccountKey';
 export const SetBrcCoinsListKey = 'SetBrcCoinsList';
 
 export const SetWalletLockPeriodKey = 'SetWalletLockPeriod';
+export const SetShouldResetUserFlowKey = 'SetShouldResetUserFlow';
 
 export enum WalletSessionPeriods {
   LOW = 1,
@@ -85,6 +86,7 @@ export interface WalletState {
   accountName: string | undefined;
   btcApiUrl: string;
   walletLockPeriod: WalletSessionPeriods;
+  shouldResetUserFlow: boolean;
 }
 
 export interface SetWallet {
@@ -245,3 +247,8 @@ export type WalletActions =
   | SetBrcCoinsData
   | SetWalletLockPeriod
   | DisableWalletExistsGuard;
+
+export type ShouldResetUserFlow = {
+  type: typeof ShouldResetUserFlowKey;
+  shouldResetUserFlow: boolean;
+}

src/app/stores/wallet/reducer.ts

@@ -28,6 +28,7 @@ import {
   WalletActions,
   WalletSessionPeriods,
   WalletState,
+  SetShouldResetUserFlowKey,
 } from './actions/types';
 
 const initialWalletState: WalletState = {
@@ -64,6 +65,7 @@ const initialWalletState: WalletState = {
   accountType: 'software',
   accountName: undefined,
   walletLockPeriod: WalletSessionPeriods.STANDARD,
+  shouldResetUserFlow: false,
 };
 
 const walletReducer = (
@@ -209,6 +211,11 @@ const walletReducer = (
         ...state,
         walletLockPeriod: action.walletLockPeriod,
       };
+    case SetShouldResetUserFlowKey:
+      return {
+        ...state,
+        shouldResetUserFlow: action.shouldResetUserFlow
+      }
     default:
       return state;
   }