diff --git a/src/app/hooks/useResetUserFlow.ts b/src/app/hooks/useResetUserFlow.ts new file mode 100644 index 000000000..1f489efd0 --- /dev/null +++ b/src/app/hooks/useResetUserFlow.ts @@ -0,0 +1,35 @@ +import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; + +const userFlowConfig: Record = { + '/send-btc': { resetTo: '/send-btc' }, + '/confirm-btc-tx': { resetTo: '/send-btc' }, + '/send-brc20': { resetTo: '/send-brc20' }, + '/confirm-inscription-request': { resetTo: '/send-brc20' }, + '/send-ordinal': { resetTo: '/nft-dashboard' }, + '/confirm-ordinal-tx': { resetTo: '/nft-dashboard' }, + '/send-nft': { resetTo: '/nft-dashboard' }, + '/confirm-nft-tx': { resetTo: '/nft-dashboard' }, +}; + +export const hasTabWhichRequiresReset = async (): Promise => { + const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); + return !!optionsTabs?.some((tab) => + Object.keys(userFlowConfig).some((matchPattern) => tab.url?.match(matchPattern)), + ); +}; + +export const useResetUserFlow = () => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const resetUserFlow = (path: keyof typeof userFlowConfig) => { + if (!userFlowConfig[path]) { + return; + } + navigate(userFlowConfig[path]?.resetTo); + dispatch(setShouldResetUserFlow(false)); + }; + return resetUserFlow; +}; diff --git a/src/app/screens/accountList/index.tsx b/src/app/screens/accountList/index.tsx index 696753e22..14e823623 100644 --- a/src/app/screens/accountList/index.tsx +++ b/src/app/screens/accountList/index.tsx @@ -12,7 +12,7 @@ import { Account } from '@secretkeylabs/xverse-core/types'; import useWalletSelector from '@hooks/useWalletSelector'; import useWalletReducer from '@hooks/useWalletReducer'; import React, { useMemo } from 'react'; -import { hasTabWhichRequiresReset } from '@utils/helper'; +import { hasTabWhichRequiresReset } from '@hooks/useResetUserFlow'; const Container = styled.div` display: flex; diff --git a/src/app/screens/confirmBtcTransaction/index.tsx b/src/app/screens/confirmBtcTransaction/index.tsx index ae9f84f51..ce4ffb66e 100644 --- a/src/app/screens/confirmBtcTransaction/index.tsx +++ b/src/app/screens/confirmBtcTransaction/index.tsx @@ -17,8 +17,7 @@ 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'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const BottomBarContainer = styled.h1((props) => ({ marginTop: props.theme.spacing(5), @@ -41,7 +40,6 @@ function ConfirmBtcTransaction() { fee, amount, signedTxHex, recipient, isRestoreFundFlow, unspentUtxos, isBrc20TokenFlow, feePerVByte, } = location.state; - const dispatch = useDispatch(); const { isLoading, @@ -62,15 +60,10 @@ function ConfirmBtcTransaction() { }); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/send-btc', { - state: { - amount, - recipientAddress, - }, - }); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-btc-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/confirmInscriptionRequest/index.tsx b/src/app/screens/confirmInscriptionRequest/index.tsx index cb9c42676..2297a48b9 100644 --- a/src/app/screens/confirmInscriptionRequest/index.tsx +++ b/src/app/screens/confirmInscriptionRequest/index.tsx @@ -28,6 +28,7 @@ import OrdinalsIcon from '@assets/img/nftDashboard/white_ordinals_icon.svg'; import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg'; import { isLedgerAccount } from '@utils/helper'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const OuterContainer = styled.div` display: flex; @@ -137,7 +138,7 @@ function ConfirmInscriptionRequest() { feePerVByte, } = location.state; const { - btcAddress, network, selectedAccount, seedPhrase, btcFiatRate, + btcAddress, network, selectedAccount, seedPhrase, btcFiatRate, shouldResetUserFlow } = useWalletSelector(); const btcClient = useBtcClient(); const [signedTx, setSignedTx] = useState(''); @@ -152,6 +153,13 @@ function ConfirmInscriptionRequest() { const content = useMemo(() => textContent && JSON.parse(textContent), [textContent]); + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/confirm-inscription-request'); + } + }, [shouldResetUserFlow]); + useEffect(() => { axios .get(brcContent, { diff --git a/src/app/screens/confirmNftTransaction/index.tsx b/src/app/screens/confirmNftTransaction/index.tsx index 16fa6f825..86489239a 100644 --- a/src/app/screens/confirmNftTransaction/index.tsx +++ b/src/app/screens/confirmNftTransaction/index.tsx @@ -5,7 +5,6 @@ import { useEffect } from 'react'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { StacksTransaction } from '@secretkeylabs/xverse-core/types'; import { broadcastSignedTransaction } from '@secretkeylabs/xverse-core/transactions'; -import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; import BottomBar from '@components/tabBar'; import AssetIcon from '@assets/img/transactions/Assets.svg'; import ConfirmStxTransationComponent from '@components/confirmStxTransactionComponent'; @@ -20,8 +19,7 @@ import useWalletSelector from '@hooks/useWalletSelector'; import useStxWalletData from '@hooks/queries/useStxWalletData'; import { isLedgerAccount } from '@utils/helper'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; -import { useDispatch } from 'react-redux'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -101,7 +99,6 @@ function ConfirmNftTransaction() { const { selectedAccount, shouldResetUserFlow } = useWalletSelector(); const navigate = useNavigate(); const location = useLocation(); - const dispatch = useDispatch(); const { id } = useParams(); const { nftData } = useNftDataSelector(); const nftIdDetails = id!.split('::'); @@ -164,10 +161,10 @@ function ConfirmNftTransaction() { mutate({ signedTx: txs[0] }); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-nft-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/confirmOrdinalTransaction/index.tsx b/src/app/screens/confirmOrdinalTransaction/index.tsx index 3ba66fe4f..6265794d9 100644 --- a/src/app/screens/confirmOrdinalTransaction/index.tsx +++ b/src/app/screens/confirmOrdinalTransaction/index.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components'; import { useMutation } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; import BottomBar from '@components/tabBar'; import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import AccountHeaderComponent from '@components/accountHeader'; @@ -16,8 +15,7 @@ import useBtcClient from '@hooks/useBtcClient'; import { isLedgerAccount } from '@utils/helper'; import useWalletSelector from '@hooks/useWalletSelector'; import { LedgerTransactionType } from '@screens/ledger/confirmLedgerTransaction'; -import { useDispatch } from 'react-redux'; -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -96,7 +94,6 @@ function ConfirmOrdinalTransaction() { const btcClient = useBtcClient(); const [recipientAddress, setRecipientAddress] = useState(''); const location = useLocation(); - const dispatch = useDispatch(); const { fee, feePerVByte, signedTxHex, ordinalUtxo, } = location.state; @@ -157,10 +154,10 @@ function ConfirmOrdinalTransaction() { navigate(-1); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/confirm-ordinal-tx'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendBrc20/index.tsx b/src/app/screens/sendBrc20/index.tsx index 03c105f0f..e50957dbe 100644 --- a/src/app/screens/sendBrc20/index.tsx +++ b/src/app/screens/sendBrc20/index.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; import BigNumber from 'bignumber.js'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; import { @@ -10,6 +10,7 @@ import { ErrorCodes, } from '@secretkeylabs/xverse-core'; import { Recipient } from '@secretkeylabs/xverse-core/transactions/btc'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; import useWalletSelector from '@hooks/useWalletSelector'; import TopRow from '@components/topRow'; import BottomBar from '@components/tabBar'; @@ -53,7 +54,7 @@ function SendBrc20Screen() { const { t } = useTranslation('translation'); const navigate = useNavigate(); const { - btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList, + btcAddress, ordinalsAddress, selectedAccount, seedPhrase, network, btcFiatRate, brcCoinsList, shouldResetUserFlow } = useWalletSelector(); const [amountError, setAmountError] = useState(''); const [amountToSend, setAmountToSend] = useState(''); @@ -65,6 +66,13 @@ function SendBrc20Screen() { const coinName = location.search ? location.search.split('coinName=')[1] : undefined; const fungibleToken = location.state?.fungibleToken || brcCoinsList?.find((coin) => coin.name === coinName); + const resetUserFlow = useResetUserFlow(); + useEffect(() => { + if (shouldResetUserFlow) { + resetUserFlow('/send-brc20'); + } + }, [shouldResetUserFlow]); + const handleBackButtonClick = () => { if (showForm) { setAmountError(''); diff --git a/src/app/screens/sendBtc/index.tsx b/src/app/screens/sendBtc/index.tsx index 67079de47..09d20be8a 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 { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { useLocation, useNavigate } from 'react-router-dom'; import SendForm from '@components/sendForm'; import TopRow from '@components/topRow'; @@ -15,7 +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'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; function SendBtcScreen() { const location = useLocation(); @@ -40,7 +40,6 @@ function SendBtcScreen() { shouldResetUserFlow, } = useSelector((state: StoreState) => state.walletState); const { t } = useTranslation('translation', { keyPrefix: 'SEND' }); - const dispatch = useDispatch(); const navigate = useNavigate(); const { @@ -81,11 +80,10 @@ function SendBtcScreen() { } }, [data]); + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - setAmount(''); - setRecipientAddress(''); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-btc'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendNft/index.tsx b/src/app/screens/sendNft/index.tsx index 8d50cb992..49686cd65 100644 --- a/src/app/screens/sendNft/index.tsx +++ b/src/app/screens/sendNft/index.tsx @@ -20,8 +20,7 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector'; import { NftData } from '@secretkeylabs/xverse-core/types/api/stacks/assets'; import AccountHeaderComponent from '@components/accountHeader'; import useNetworkSelector from '@hooks/useNetwork'; -import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; -import { useDispatch } from 'react-redux'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -102,7 +101,6 @@ function SendNft() { const navigate = useNavigate(); const { id } = useParams(); const location = useLocation(); - const dispatch = useDispatch(); let address: string | undefined; if (location.state) { @@ -176,10 +174,10 @@ function SendNft() { } }, [data]); + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-nft'); } }, [shouldResetUserFlow]); diff --git a/src/app/screens/sendOrdinal/index.tsx b/src/app/screens/sendOrdinal/index.tsx index 3f0108297..558975db5 100644 --- a/src/app/screens/sendOrdinal/index.tsx +++ b/src/app/screens/sendOrdinal/index.tsx @@ -24,6 +24,7 @@ import { isLedgerAccount } from '@utils/helper'; import { setShouldResetUserFlow } from '@stores/wallet/actions/actionCreators'; import { useDispatch } from 'react-redux'; import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api'; +import { useResetUserFlow } from '@hooks/useResetUserFlow'; const ScrollContainer = styled.div` display: flex; @@ -170,10 +171,10 @@ function SendOrdinal() { navigate(-1); }; + const resetUserFlow = useResetUserFlow(); useEffect(() => { if (shouldResetUserFlow) { - navigate('/nft-dashboard'); - dispatch(setShouldResetUserFlow(false)); + resetUserFlow('/send-ordinal'); } }, [shouldResetUserFlow]); diff --git a/src/app/utils/helper.ts b/src/app/utils/helper.ts index b2a8522f3..cfa93438f 100644 --- a/src/app/utils/helper.ts +++ b/src/app/utils/helper.ts @@ -167,21 +167,3 @@ export const isLedgerAccount = (account: Account | null): boolean => account?.accountType === 'ledger'; export const isInOptions = (): boolean => !!window.location?.pathname?.match(/options.html$/); - -const userFlowConfig = [ - { matchPattern: '/send-btc', resetTo: '/send-btc' }, - { matchPattern: '/confirm-btc-tx', resetTo: '/send-btc' }, - { matchPattern: '/send-brc20', resetTo: '/send-brc20' }, - { matchPattern: '/confirm-inscription-request', resetTo: '/send-brc20' }, - { matchPattern: '/send-ordinal', resetTo: '/nft-dashboard' }, - { matchPattern: '/confirm-ordinal-tx', resetTo: '/nft-dashboard' }, - { matchPattern: '/send-nft', resetTo: '/nft-dashboard' }, - { matchPattern: '/confirm-nft-tx', resetTo: '/nft-dashboard' }, -]; - -export const hasTabWhichRequiresReset = async (): Promise => { - const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') }); - return !!optionsTabs?.some((tab) => - userFlowConfig.some(({ matchPattern }) => tab.url?.match(matchPattern)), - ); -};