From cf768854d7bfb7cce95f621ac5caa4e8dc3c1ec6 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Tue, 25 Jul 2023 16:28:40 +0100 Subject: [PATCH] fix: use location.state to store background route to prevent unmount using modals, closes #4028 --- src/app/features/asset-list/asset-list.tsx | 3 +-- .../components/bitcoin/inscription.tsx | 5 ++-- .../settings-dropdown/settings-dropdown.tsx | 15 +++++++++--- src/app/pages/home/components/home-tabs.tsx | 11 ++++----- .../pages/home/components/receive-button.tsx | 10 ++++++-- src/app/pages/home/home.tsx | 15 ++++++++++-- .../components/receive-tokens.layout.tsx | 11 +++++---- .../pages/receive-tokens/receive-modal.tsx | 24 +++++++++++++++---- src/app/routes/app-routes.tsx | 5 ++-- 9 files changed, 72 insertions(+), 27 deletions(-) diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 6052f794b11..683b727c302 100644 --- 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 index 4a6b4cb78f3..079ce31291d 100644 --- 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 index 8e4850ab034..9e859e9cdb9 100644 --- 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 }, + }); })} > @@ -178,7 +184,10 @@ export function SettingsDropdown() { - 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 index a15a314d07a..d15d7f87981 100644 --- 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 ( 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 index 6e7a64f7190..e2f508d592a 100644 --- 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={} > - + <> + + } /> + } /> + + {backgroundLocation && } + ); diff --git a/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx b/src/app/pages/receive-tokens/components/receive-tokens.layout.tsx index bb15e7b778a..d3d6e71b8f5 100644 --- 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 ( - navigate(RouteUrls.Home)}> + navigate(pathname)}> {hasSubtitle && ( diff --git a/src/app/pages/receive-tokens/receive-modal.tsx b/src/app/pages/receive-tokens/receive-modal.tsx index 859d256f5c5..3f7c5d8f97d 100644 --- 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 ( - navigate('../')}> + navigate(backgroundLocation?.pathname)} + > Tokens @@ -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 }, + }) + } > @@ -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 }, + }) + } > diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index ebe47cc768e..b2bda7a3f31 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -187,8 +187,9 @@ function useAppRoutes() { } > } /> - } /> - + }> + {settingsModalRoutes} + {requestBitcoinKeysRoutes} {requestStacksKeysRoutes} } />