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

…using modals, closes #4028
leather-io · Jul 27, 2023 · cf76885 · cf76885
1 parent ac24e3e
commit cf76885
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 27 deletions.
diff --git a/src/app/features/asset-list/asset-list.tsx b/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';

diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/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 },
     });
   }
 

diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/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"
             >

diff --git a/src/app/pages/home/components/home-tabs.tsx b/src/app/pages/home/components/home-tabs.tsx
@@ -15,7 +15,8 @@ interface HomeTabsProps extends StackProps {
 // TODO #4013: Abstract this to generic RouteTab once choose-fee-tab updated
 export function HomeTabs({ children }: HomeTabsProps) {
   const navigate = useNavigate();
-  const { pathname } = useLocation();
+  const { pathname, state: locationState } = useLocation();
+  const backgroundLocation = locationState?.backgroundLocation;
 
   const tabs = useMemo(
     () => [
@@ -25,16 +26,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

diff --git a/src/app/pages/home/components/receive-button.tsx b/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}
     />
   );

diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
@@ -1,4 +1,4 @@
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -7,6 +7,8 @@ import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-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';
@@ -21,6 +23,9 @@ export function Home() {
 
   const stacksAccount = useCurrentStacksAccount();
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const backgroundLocation = location?.state?.backgroundLocation;
   useTrackFirstDeposit();
 
   useRouteHeader(
@@ -41,7 +46,13 @@ 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 />} />
+          </Routes>
+          {backgroundLocation && <Outlet />}
+        </>
       </HomeTabs>
     </HomeLayout>
   );

diff --git a/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx b/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx
@@ -1,11 +1,9 @@
 import { FiCopy } from 'react-icons/fi';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, 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 { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { Title } from '@app/components/typography';
@@ -23,9 +21,14 @@ interface ReceiveTokensLayoutProps {
 export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
   const { address, accountName, onCopyAddressToClipboard, title, warning, hasSubtitle } = props;
   const navigate = useNavigate();
+  const {
+    state: {
+      backgroundLocation: { pathname },
+    },
+  } = useLocation();
 
   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">

diff --git a/src/app/pages/receive-tokens/receive-modal.tsx b/src/app/pages/receive-tokens/receive-modal.tsx
@@ -1,6 +1,6 @@
 import toast from 'react-hot-toast';
 import { FiCopy } from 'react-icons/fi';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Box, Button, Flex, Stack, useClipboard } from '@stacks/ui';
 import { color, truncateMiddle } from '@stacks/ui-utils';
@@ -22,6 +22,9 @@ import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain
 export function ReceiveModal() {
   const analytics = useAnalytics();
   const navigate = useNavigate();
+  const {
+    state: { backgroundLocation },
+  } = useLocation();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const stxAddress = useCurrentAccountStxAddressState();
   const { onCopy: onCopyStacks } = useClipboard(stxAddress);
@@ -31,8 +34,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 +57,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 +91,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 />

diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
@@ -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 />} />