diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts index 60906008556..1b45a71aa59 100644 --- a/src/app/common/hooks/use-background-location-redirect.ts +++ b/src/app/common/hooks/use-background-location-redirect.ts @@ -1,37 +1,34 @@ import { useEffect } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { RouteUrls } from '@shared/route-urls'; - +// import { RouteUrls } from '@shared/route-urls'; import { useLocationState } from '@app/common/hooks/use-location-state'; +// PETE this is the last thing +// - test opening in new tabs +// - find what fails and where then apply Kyrans advice +// - I think it works everywhere but Home tabs + /* when modals are opened in a new tab they lose the location.state.backgroundLocation this hook sets the backgroundLocation to be RouteUrls.Home to improve UX */ -// This seems to do nothing and things already work in new tabs? -// test more export function useBackgroundLocationRedirect() { const { pathname, state } = useLocation(); const navigate = useNavigate(); const backgroundLocation = useLocationState('backgroundLocation'); + // console.log('backgroundLocation', backgroundLocation); + // debugger; useEffect(() => { void (async () => { - switch (true) { - // FIXME ReceiveCollectibleOrdinal loses state?.btcAddressTaproot in a new tab - // this can be improved to try and fetch btcAddressTaproot - // case pathname === RouteUrls.ReceiveCollectibleOrdinal && !state?.btcAddressTaproot: - // return navigate(RouteUrls.Home); - - // case backgroundLocation === undefined: - // return navigate(pathname, { - // state: { backgroundLocation: { pathname: RouteUrls.Home } }, - // }); - default: - return false; - } + // if (backgroundLocation === undefined) { + // return navigate(pathname, { + // state: { backgroundLocation: { pathname: RouteUrls.Home }, ...state }, + // }); + // } + return false; })(); }, [backgroundLocation, navigate, pathname, state]); } diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx index 079fd90bd74..4cc1ce65c83 100644 --- a/src/app/features/settings-dropdown/settings-dropdown.tsx +++ b/src/app/features/settings-dropdown/settings-dropdown.tsx @@ -10,7 +10,6 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; -import { useLocationState } from '@app/common/hooks/use-location-state'; import { useModifierKey } from '@app/common/hooks/use-modifier-key'; import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; import { useWalletType } from '@app/common/use-wallet-type'; diff --git a/src/app/features/theme-drawer/theme-drawer.tsx b/src/app/features/theme-drawer/theme-drawer.tsx index a2b5f78db50..f8c2ebd5f41 100644 --- a/src/app/features/theme-drawer/theme-drawer.tsx +++ b/src/app/features/theme-drawer/theme-drawer.tsx @@ -1,15 +1,11 @@ import { useNavigate } from 'react-router-dom'; -// import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; import { useLocationState } from '@app/common/hooks/use-location-state'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { ThemeList } from './theme-list'; -// useBackgroundLocationRedirect is more just needed if you open a new tab when on the home page -// funds is OK - so try just handle it on Home export function ThemesDrawer() { - // useBackgroundLocationRedirect(); const navigate = useNavigate(); const backgroundLocation = useLocationState('backgroundLocation'); return ( diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index a020676ecf4..2a740109e12 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -3,9 +3,8 @@ import { useNavigate } from 'react-router-dom'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; -import { RouteUrls } from '@shared/route-urls'; - import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { AddressDisplayer } from '@app/components/address-displayer/address-displayer'; import { LeatherButton } from '@app/components/button/button'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; @@ -24,9 +23,14 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { const { address, accountName, onCopyAddressToClipboard, title, warning } = props; const navigate = useNavigate(); + const backgroundLocation = useLocationState('backgroundLocation'); return ( - navigate(RouteUrls.Home)}> + navigate(backgroundLocation.pathname ?? '..')} + > {warning && warning} diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 06a729f7f7b..26715812ca2 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -29,15 +29,13 @@ interface ReceiveModalProps { } export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { - // useBackgroundLocationRedirect(); + useBackgroundLocationRedirect(); const analytics = useAnalytics(); - // const location = useLocation(); const backgroundLocation = useLocationState('backgroundLocation'); const navigate = useNavigate(); const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero(); const stxAddress = useCurrentAccountStxAddressState(); const accountIndex = useLocationState('accountIndex'); - // const accountIndex = get(location.state, 'accountIndex', undefined); const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex); const { onCopy: onCopyBtc } = useClipboard(btcAddressNativeSegwit); @@ -67,7 +65,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { return ( <> - navigate(backgroundLocation.pathname)}> + navigate(backgroundLocation.pathname ?? '..')}> {title} diff --git a/src/app/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index c0f58560278..fb9497a07d8 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -4,7 +4,6 @@ import { WalletDefaultNetworkConfigurationIds } from '@shared/constants'; import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; import { useLocationState } from '@app/common/hooks/use-location-state'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { NetworkListLayout } from '@app/pages/select-network/components/network-list.layout'; @@ -17,7 +16,6 @@ import { AddNetworkButton } from './components/add-network-button'; const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[]; export function SelectNetwork() { - useBackgroundLocationRedirect(); const navigate = useNavigate(); const networks = useNetworks(); const analytics = useAnalytics(); @@ -42,7 +40,7 @@ export function SelectNetwork() { } function closeNetworkModal() { - navigate(backgroundLocation); + navigate(backgroundLocation.pathname ?? '..'); } return ( diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx index 402b1aba5e7..c8653da60e9 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx @@ -2,14 +2,12 @@ import { useNavigate } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; -import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { useLocationState } from '@app/common/hooks/use-location-state'; import { SignOutConfirmLayout } from './sign-out-confirm.layout'; export function SignOutConfirmDrawer() { - useBackgroundLocationRedirect(); const { signOut } = useKeyActions(); const navigate = useNavigate(); const backgroundLocation = useLocationState('backgroundLocation'); @@ -20,7 +18,7 @@ export function SignOutConfirmDrawer() { navigate(RouteUrls.Onboarding); void signOut(); }} - onUserSafelyReturnToHomepage={() => navigate(backgroundLocation)} + onUserSafelyReturnToHomepage={() => navigate(backgroundLocation.pathname ?? '..')} /> ); } diff --git a/src/app/routes/request-routes.tsx b/src/app/routes/request-routes.tsx index b872dadafa6..c8dd964ecd9 100644 --- a/src/app/routes/request-routes.tsx +++ b/src/app/routes/request-routes.tsx @@ -4,7 +4,6 @@ import { Route } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; import { BroadcastErrorDrawer } from '@app/components/broadcast-error-drawer/broadcast-error-drawer'; -import { LoadingSpinner } from '@app/components/loading-spinner'; import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer'; import { ledgerStacksMessageSigningRoutes } from '@app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg.routes'; import { ledgerStacksTxSigningRoutes } from '@app/features/ledger/flows/stacks-tx-signing/ledger-sign-tx.routes'; @@ -15,7 +14,7 @@ import { ProfileUpdateRequest } from '@app/pages/update-profile-request/update-p import { AccountGate } from '@app/routes/account-gate'; import { SuspenseLoadingSpinner } from '@app/routes/app-routes'; -// These are labelled legacy, maybe we can just remove them? +// #4028: TODO These are labelled legacy, maybe we can just remove them? export const legacyRequestRoutes = ( <>