fix: use location.state to store background route to prevent unmount

src/app/common/hooks/use-location-state.ts

@@ -5,15 +5,11 @@ import get from 'lodash.get';
 
 import { isUndefined } from '@shared/utils';
 
-export function useLocationState(propName: string): string | undefined;
-export function useLocationState(propName: string, defaultValue: string): string;
 export function useLocationState(propName: string, defaultValue?: string) {
   const location = useLocation();
   return get(location, `state.${propName}`, defaultValue);
 }
 
-export function useLocationStateWithCache<T = string>(propName: string): T | undefined;
-export function useLocationStateWithCache<T = string>(propName: string, defaultValue: T): T;
 export function useLocationStateWithCache<T = string>(propName: string, defaultValue?: T) {
   const location = useLocation();
   const [value, setValue] = useState(defaultValue);

src/app/components/receive/receive-collectible.tsx

@@ -1,14 +1,14 @@
 import toast from 'react-hot-toast';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import BitcoinStampImg from '@assets/images/bitcoin-stamp.png';
 import { Box, Stack, useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { OrdinalIcon } from '@app/components/icons/ordinal-icon';
 import { useZeroIndexTaprootAddress } from '@app/query/bitcoin/ordinals/use-zero-index-taproot-address';
@@ -19,9 +19,9 @@ import { ReceiveCollectibleItem } from './receive-collectible-item';
 
 export function ReceiveCollectible() {
   const analytics = useAnalytics();
-  const location = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
+  const accountIndex = useLocationState('accountIndex');
   const navigate = useNavigate();
-  const accountIndex = get(location.state, 'accountIndex', undefined);
   const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero();
   const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex);
 
@@ -54,7 +54,9 @@ export function ReceiveCollectible() {
         data-testid={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn}
         onCopyAddress={() => {
           void analytics.track('select_inscription_to_add_new_collectible');
-          navigate(RouteUrls.ReceiveCollectibleOrdinal, { state: { btcAddressTaproot } });
+          navigate(RouteUrls.ReceiveCollectibleOrdinal, {
+            state: { btcAddressTaproot, backgroundLocation },
+          });
         }}
         title="Ordinal inscription"
       />

src/app/features/asset-list/asset-list.tsx

@@ -1,5 +1,4 @@
-import { Outlet } from 'react-router-dom';
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 
 import { Box, Stack } from '@stacks/ui';
 import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors';

src/app/features/collectibles/components/bitcoin/inscription.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Inscription as InscriptionType } from '@shared/models/inscription.model';
 import { RouteUrls } from '@shared/route-urls';
@@ -18,10 +18,11 @@ interface InscriptionProps {
 export function Inscription({ rawInscription }: InscriptionProps) {
   const inscription = convertInscriptionToSupportedInscriptionType(rawInscription);
   const navigate = useNavigate();
+  const location = useLocation();
 
   function openSendInscriptionModal() {
     navigate(RouteUrls.SendOrdinalInscription, {
-      state: { inscription },
+      state: { inscription, backgroundLocation: location },
     });
   }
 

src/app/features/settings-dropdown/settings-dropdown.tsx

@@ -95,7 +95,10 @@ export function SettingsDropdown() {
               data-testid={SettingsSelectors.ToggleTheme}
               onClick={wrappedCloseCallback(() => {
                 void analytics.track('click_change_theme_menu_item');
-                navigate(RouteUrls.ChangeTheme, { relative: 'path' });
+                navigate(RouteUrls.ChangeTheme, {
+                  relative: 'path',
+                  state: { backgroundLocation: location },
+                });
               })}
             >
               Change theme
@@ -147,7 +150,10 @@ export function SettingsDropdown() {
               data-testid={SettingsSelectors.ChangeNetworkAction}
               onClick={wrappedCloseCallback(() => {
                 void analytics.track('click_change_network_menu_item');
-                navigate(RouteUrls.SelectNetwork, { relative: 'path' });
+                navigate(RouteUrls.SelectNetwork, {
+                  relative: 'path',
+                  state: { backgroundLocation: location },
+                });
               })}
             >
               <Flex width="100%" alignItems="center" justifyContent="space-between">
@@ -178,7 +184,10 @@ export function SettingsDropdown() {
             <MenuItem
               color={color('feedback-error')}
               onClick={wrappedCloseCallback(() =>
-                navigate(RouteUrls.SignOutConfirm, { relative: 'path' })
+                navigate(RouteUrls.SignOutConfirm, {
+                  relative: 'path',
+                  state: { backgroundLocation: location },
+                })
               )}
               data-testid="settings-sign-out"
             >

src/app/pages/home/components/home-tabs.tsx

@@ -6,6 +6,7 @@ import type { StackProps } from '@stacks/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Tabs } from '@app/components/tabs';
 
@@ -16,6 +17,7 @@ interface HomeTabsProps extends StackProps {
 export function HomeTabs({ children }: HomeTabsProps) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
 
   const tabs = useMemo(
     () => [
@@ -25,16 +27,14 @@ export function HomeTabs({ children }: HomeTabsProps) {
     []
   );
 
-  const getActiveTab = useCallback(
-    () => tabs.findIndex(tab => tab.slug === pathname),
-    [tabs, pathname]
-  );
+  const path = backgroundLocation ? backgroundLocation.pathname : pathname;
+
+  const getActiveTab = useCallback(() => tabs.findIndex(tab => tab.slug === path), [tabs, path]);
 
   const setActiveTab = useCallback(
     (index: number) => navigate(tabs[index]?.slug),
     [navigate, tabs]
   );
-
   return (
     <Stack flexGrow={1} mt="loose" spacing="extra-loose">
       <Tabs

src/app/pages/home/components/receive-button.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { ButtonProps } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
@@ -13,15 +13,21 @@ import { HomeActionButton } from './tx-button';
 
 export function ReceiveButton(props: ButtonProps) {
   const navigate = useNavigate();
+  const location = useLocation();
   const isBitcoinEnabled = useConfigBitcoinEnabled();
+  const receivePath = isBitcoinEnabled ? RouteUrls.Receive : RouteUrls.ReceiveStx;
 
   return (
     <HomeActionButton
       buttonComponent={PrimaryButton}
       data-testid={HomePageSelectors.ReceiveCryptoAssetBtn}
       icon={QrCodeIcon}
       label="Receive"
-      onClick={() => navigate(isBitcoinEnabled ? RouteUrls.Receive : RouteUrls.ReceiveStx)}
+      onClick={() =>
+        navigate(receivePath, {
+          state: { backgroundLocation: location },
+        })
+      }
       {...props}
     />
   );

src/app/pages/home/home.tsx

@@ -1,16 +1,19 @@
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useTrackFirstDeposit } from '@app/common/hooks/analytics/transactions-analytics.hooks';
 import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { Header } from '@app/components/header';
+import { ActivityList } from '@app/features/activity-list/activity-list';
+import { AssetsList } from '@app/features/asset-list/asset-list';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { SuggestedFirstSteps } from '@app/features/suggested-first-steps/suggested-first-steps';
 import { HomeActions } from '@app/pages/home/components/home-actions';
-import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { settingsModalRoutes } from '@app/routes/app-routes';
 
 import { CurrentAccount } from './components/account-area';
 import { HomeTabs } from './components/home-tabs';
@@ -19,8 +22,10 @@ import { HomeLayout } from './components/home.layout';
 export function Home() {
   const { decodedAuthRequest } = useOnboardingState();
 
-  const stacksAccount = useCurrentStacksAccount();
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
   useTrackFirstDeposit();
 
   useRouteHeader(
@@ -41,7 +46,15 @@ export function Home() {
       actions={<HomeActions />}
     >
       <HomeTabs>
-        <Outlet context={{ address: stacksAccount?.address }} />
+        <>
+          <Routes location={backgroundLocation || location}>
+            <Route path={RouteUrls.Home} element={<AssetsList />} />
+            <Route path={RouteUrls.Activity} element={<ActivityList />}>
+              {settingsModalRoutes}
+            </Route>
+          </Routes>
+          {backgroundLocation && <Outlet />}
+        </>
       </HomeTabs>
     </HomeLayout>
   );

src/app/pages/receive-tokens/components/receive-tokens.layout.tsx

@@ -4,8 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Button, Flex, Text, color } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 
-import { RouteUrls } from '@shared/route-urls';
-
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { Title } from '@app/components/typography';
@@ -23,9 +22,10 @@ interface ReceiveTokensLayoutProps {
 export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
   const { address, accountName, onCopyAddressToClipboard, title, warning, hasSubtitle } = props;
   const navigate = useNavigate();
+  const { pathname } = useLocationState('backgroundLocation');
 
   return (
-    <BaseDrawer title={title} isShowing onClose={() => navigate(RouteUrls.Home)}>
+    <BaseDrawer title={title} isShowing onClose={() => navigate(pathname)}>
       <Flex alignItems="center" flexDirection="column" pb={['loose', '48px']} px="loose">
         {hasSubtitle && (
           <Text color={color('text-caption')} mb="tight" textAlign="left">

src/app/pages/receive-tokens/receive-modal.tsx

@@ -9,6 +9,7 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { BtcIcon } from '@app/components/icons/btc-icon';
@@ -22,6 +23,7 @@ import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain
 export function ReceiveModal() {
   const analytics = useAnalytics();
   const navigate = useNavigate();
+  const backgroundLocation = useLocationState('backgroundLocation');
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const stxAddress = useCurrentAccountStxAddressState();
   const { onCopy: onCopyStacks } = useClipboard(stxAddress);
@@ -31,8 +33,13 @@ export function ReceiveModal() {
     toast.success('Copied to clipboard!');
     copyHandler();
   }
+
   return (
-    <BaseDrawer title="Select asset to receive" isShowing onClose={() => navigate('../')}>
+    <BaseDrawer
+      title="Select asset to receive"
+      isShowing
+      onClose={() => navigate(backgroundLocation?.pathname)}
+    >
       <Box mx="extra-loose">
         <Caption style={{ fontSize: '14px' }}>Tokens</Caption>
 
@@ -49,7 +56,11 @@ export function ReceiveModal() {
                     borderRadius="10px"
                     data-testid={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn}
                     mode="tertiary"
-                    onClick={() => navigate(RouteUrls.ReceiveBtc)}
+                    onClick={() =>
+                      navigate(RouteUrls.ReceiveBtc, {
+                        state: { backgroundLocation },
+                      })
+                    }
                   >
                     <Box color={color('text-caption')} size="14px">
                       <QrCodeIcon />
@@ -79,7 +90,11 @@ export function ReceiveModal() {
                     borderRadius="10px"
                     data-testid={HomePageSelectors.ReceiveStxQrCodeBtn}
                     mode="tertiary"
-                    onClick={() => navigate(RouteUrls.ReceiveStx)}
+                    onClick={() =>
+                      navigate(RouteUrls.ReceiveStx, {
+                        state: { backgroundLocation },
+                      })
+                    }
                   >
                     <Box color={color('text-caption')} size="14px">
                       <QrCodeIcon />

src/app/pages/receive/receive-collectible/receive-collectible-oridinal.tsx

@@ -6,6 +6,7 @@ import { Box, Flex, Stack, color, useClipboard } from '@stacks/ui';
 import { truncateMiddle } from '@stacks/ui-utils';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { ErrorLabel } from '@app/components/error-label';
@@ -18,6 +19,7 @@ export function ReceiveCollectibleOrdinal() {
   const navigate = useNavigate();
   const analytics = useAnalytics();
   const { state } = useLocation();
+  const { pathname } = useLocationState('backgroundLocation');
   const { onCopy } = useClipboard(state.btcAddressTaproot);
 
   function copyToClipboard() {
@@ -27,7 +29,7 @@ export function ReceiveCollectibleOrdinal() {
   }
 
   return (
-    <BaseDrawer isShowing onClose={() => navigate('../')}>
+    <BaseDrawer isShowing onClose={() => navigate(pathname)}>
       <Box mx="extra-loose">
         <Stack alignItems="center" px={['unset', 'base']} spacing="loose" textAlign="center">
           <OrdinalIcon />

src/app/routes/app-routes.tsx

@@ -70,6 +70,14 @@ export function AppRoutes() {
   return <RouterProvider router={routes} />;
 }
 
+export const settingsModalRoutes = (
+  <Route>
+    <Route path={RouteUrls.SignOutConfirm} element={<SignOutConfirmDrawer />} />
+    <Route path={RouteUrls.ChangeTheme} element={<ThemesDrawer />} />
+    <Route path={RouteUrls.SelectNetwork} element={<SelectNetwork />} />
+  </Route>
+);
+
 function useAppRoutes() {
   const userHasNotConsentedToDiagnostics = useHasUserRespondedToAnalyticsConsent();
 
@@ -83,14 +91,6 @@ function useAppRoutes() {
       )
     );
 
-  const settingsModalRoutes = (
-    <Route>
-      <Route path={RouteUrls.SignOutConfirm} element={<SignOutConfirmDrawer />} />
-      <Route path={RouteUrls.ChangeTheme} element={<ThemesDrawer />} />
-      <Route path={RouteUrls.SelectNetwork} element={<SelectNetwork />} />
-    </Route>
-  );
-
   const legacyRequestRoutes = (
     <>
       <Route
@@ -187,8 +187,9 @@ function useAppRoutes() {
           }
         >
           <Route index element={<AssetsList />} />
-          <Route path={RouteUrls.Activity} element={<ActivityList />} />
-
+          <Route path={RouteUrls.Activity} element={<ActivityList />}>
+            {settingsModalRoutes}
+          </Route>
           {requestBitcoinKeysRoutes}
           {requestStacksKeysRoutes}
           <Route path={RouteUrls.RetriveTaprootFunds} element={<RetrieveTaprootToNativeSegwit />} />