refactor: move reset user flow logic into custom hook

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<string, { resetTo: string }> = {
+  '/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<boolean> => {
+  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;
+};

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;

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]);
 

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<string>('');
@@ -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<string>(brcContent, {

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]);
 

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]);
 

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

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]);
 

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]);
 

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]);
 

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<boolean> => {
-  const optionsTabs = await chrome.tabs.query({ url: chrome.runtime.getURL('options.html') });
-  return !!optionsTabs?.some((tab) =>
-    userFlowConfig.some(({ matchPattern }) => tab.url?.match(matchPattern)),
-  );
-};