diff --git a/src/app/components/sendForm/index.tsx b/src/app/components/sendForm/index.tsx index a67218c6d..4df4acdc7 100644 --- a/src/app/components/sendForm/index.tsx +++ b/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('0'); const [switchToFiat, setSwitchToFiat] = useState(false); const [addressError, setAddressError] = useState(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'))) { diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 28471f37b..6c2210b35 100644 --- a/src/app/screens/accountList/index.tsx +++ b/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('/'); }; diff --git a/src/app/screens/confirmBtcTransaction/index.tsx b/src/app/screens/confirmBtcTransaction/index.tsx index 91fe100ec..ae9f84f51 100644 --- a/src/app/screens/confirmBtcTransaction/index.tsx +++ b/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(''); @@ -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 }); }; diff --git a/src/app/screens/sendBtc/index.tsx b/src/app/screens/sendBtc/index.tsx index dba20ae4b..327fba724 100644 --- a/src/app/screens/sendBtc/index.tsx +++ b/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) { diff --git a/src/app/stores/index.ts b/src/app/stores/index.ts index 0e2afb3f0..ded78d637 100644 --- a/src/app/stores/index.ts +++ b/src/app/stores/index.ts @@ -41,6 +41,8 @@ const storeMiddleware = [ actions.StoreEncryptedSeedKey, actions.SetWalletSeedPhraseKey, actions.UnlockWalletKey, + actions.SelectAccountKey, + actions.SetShouldResetUserFlowKey ], }), ]; diff --git a/src/app/stores/wallet/actions/actionCreators.ts b/src/app/stores/wallet/actions/actionCreators.ts index 653f8f0e4..0c7244e5d 100644 --- a/src/app/stores/wallet/actions/actionCreators.ts +++ b/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 + }; +} diff --git a/src/app/stores/wallet/actions/types.ts b/src/app/stores/wallet/actions/types.ts index 8e522bcaa..cde4a668c 100644 --- a/src/app/stores/wallet/actions/types.ts +++ b/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; +} diff --git a/src/app/stores/wallet/reducer.ts b/src/app/stores/wallet/reducer.ts index d1add3d62..0cb454017 100644 --- a/src/app/stores/wallet/reducer.ts +++ b/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; }