diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx index 5fc3f5b17a3..2d27eab08cf 100644 --- a/src/app/features/settings-dropdown/settings-dropdown.tsx +++ b/src/app/features/settings-dropdown/settings-dropdown.tsx @@ -55,6 +55,10 @@ export function SettingsDropdown() { useOnClickOutside(ref, isShowing ? handleClose : null); + // RouteUrls.Activity is nested off / so we need to use a link relative to the route + const linkRelativeType = + location.pathname === `${RouteUrls.Home}${RouteUrls.Activity}` ? 'route' : 'path'; + return ( {styles => ( @@ -74,11 +78,13 @@ export function SettingsDropdown() { )} + {/* // more importantly I broke tests again for direct access to receive I think */} { void analytics.track('click_change_theme_menu_item'); navigate(RouteUrls.ChangeTheme, { + relative: linkRelativeType, state: { backgroundLocation: location }, }); })} @@ -131,6 +137,7 @@ export function SettingsDropdown() { onClick={wrappedCloseCallback(() => { void analytics.track('click_change_network_menu_item'); navigate(RouteUrls.SelectNetwork, { + relative: linkRelativeType, state: { backgroundLocation: location }, }); })} @@ -164,6 +171,7 @@ export function SettingsDropdown() { color={color('feedback-error')} onClick={wrappedCloseCallback(() => navigate(RouteUrls.SignOutConfirm, { + relative: linkRelativeType, state: { backgroundLocation: location }, }) )} diff --git a/src/app/features/theme-drawer/theme-drawer.tsx b/src/app/features/theme-drawer/theme-drawer.tsx index 89660c7a005..52c68d3627f 100644 --- a/src/app/features/theme-drawer/theme-drawer.tsx +++ b/src/app/features/theme-drawer/theme-drawer.tsx @@ -1,8 +1,8 @@ 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 { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { ThemeList } from './theme-list'; diff --git a/src/app/pages/fund/components/fiat-providers-list.tsx b/src/app/pages/fund/components/fiat-providers-list.tsx index 2f33e24f17f..00307cd5b5b 100644 --- a/src/app/pages/fund/components/fiat-providers-list.tsx +++ b/src/app/pages/fund/components/fiat-providers-list.tsx @@ -26,7 +26,6 @@ export function FiatProvidersList(props: FiatProvidersProps) { const hasProviders = useHasFiatProviders(); const analytics = useAnalytics(); const location = useLocation(); - // const backgroundLocation = useLocationState('backgroundLocation'); const goToProviderExternalWebsite = (provider: string, providerUrl: string) => { void analytics.track('select_buy_option', { provider }); @@ -56,7 +55,9 @@ export function FiatProvidersList(props: FiatProvidersProps) { > - navigate(RouteUrls.FundReceiveStx, { state: { backgroundLocation: location } }) + navigate(`${RouteUrls.ReceiveStx}`, { + state: { backgroundLocation: location }, + }) } /> {Object.entries(activeProviders).map(([providerKey, providerValue]) => { diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index a5f2de80bf0..2d54c35583a 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -1,16 +1,21 @@ -import { Outlet, useNavigate } from 'react-router-dom'; +import { Route, useNavigate } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { Header } from '@app/components/header'; import { FullPageLoadingSpinner } from '@app/components/loading-spinner'; +import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; +import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; +import { settingsRoutes } from '@app/routes/settings-routes'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { FundLayout } from './fund.layout'; export function FundPage() { + useBackgroundLocationRedirect(RouteUrls.Fund); const navigate = useNavigate(); const currentAccount = useCurrentStacksAccount(); const { data: balances } = useCurrentStacksAccountAnchoredBalances(); @@ -21,7 +26,12 @@ export function FundPage() { return ( <> - + <> + + } /> + {settingsRoutes} + + ); } diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 3df6296d4f1..d910d52ea1d 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -1,11 +1,9 @@ import { Route, useNavigate } from 'react-router-dom'; -import { Outlet, Routes, useLocation } 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'; @@ -13,6 +11,7 @@ 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 { homePageModalRoutes } from '@app/routes/app-routes'; +import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper'; import { CurrentAccount } from './components/account-area'; import { HomeTabs } from './components/home-tabs'; @@ -21,8 +20,6 @@ import { HomeLayout } from './components/home.layout'; export function Home() { const { decodedAuthRequest } = useOnboardingState(); - const location = useLocation(); - const backgroundLocation = useLocationState('backgroundLocation'); const navigate = useNavigate(); useTrackFirstDeposit(); @@ -41,22 +38,14 @@ export function Home() { return ( }> - <> - {/* - To overlay modal on nested routes backgroundLocation is used - to trick the router into thinking its on the same page - */} - - } /> - }> - {homePageModalRoutes} - - + + } /> + }> {homePageModalRoutes} - } /> - - {backgroundLocation && } - + + + {homePageModalRoutes} + ); diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index 7c5d774197d..7bf223a76fb 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -3,11 +3,11 @@ import { useNavigate } from 'react-router-dom'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; -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'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { QrCode } from './address-qr-code'; diff --git a/src/app/pages/receive/receive-btc.tsx b/src/app/pages/receive/receive-btc.tsx index 002fba70e7e..33327d46de4 100644 --- a/src/app/pages/receive/receive-btc.tsx +++ b/src/app/pages/receive/receive-btc.tsx @@ -5,7 +5,7 @@ import { useClipboard } from '@stacks/ui'; import get from 'lodash.get'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index d5e22c6feac..0431877986f 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -9,13 +9,13 @@ import get from 'lodash.get'; 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 { 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'; import { BtcStampsIcon } from '@app/components/icons/btc-stamps-icon'; import { OrdinalIcon } from '@app/components/icons/ordinal-icon'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; @@ -81,6 +81,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { onCopyAddress={() => copyToClipboard(onCopyBtc)} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtc}`, { + // see if i need ...location.state state: { backgroundLocation, ...location.state }, }) } diff --git a/src/app/pages/receive/receive-ordinal.tsx b/src/app/pages/receive/receive-ordinal.tsx index 423623e9037..4b236f1ba06 100644 --- a/src/app/pages/receive/receive-ordinal.tsx +++ b/src/app/pages/receive/receive-ordinal.tsx @@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom'; import { useClipboard } from '@stacks/ui'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { ReceiveBtcModalWarning } from './components/receive-btc-warning'; import { ReceiveTokensLayout } from './components/receive-tokens.layout'; diff --git a/src/app/pages/receive/receive-stx.tsx b/src/app/pages/receive/receive-stx.tsx index b5bce6c2624..a4b82e76022 100644 --- a/src/app/pages/receive/receive-stx.tsx +++ b/src/app/pages/receive/receive-stx.tsx @@ -4,7 +4,7 @@ import { useClipboard } from '@stacks/ui'; import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useBackgroundLocationRedirect } from '@app/common/hooks/use-background-location-redirect'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { ReceiveTokensLayout } from './components/receive-tokens.layout'; diff --git a/src/app/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index be33cf095b1..270036a87a9 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -4,11 +4,11 @@ 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'; import { NetworkListItem } from '@app/pages/select-network/network-list-item'; +import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks'; import { useNetworks } from '@app/store/networks/networks.selectors'; 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 7f8c8985f72..5168194c633 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx @@ -2,9 +2,9 @@ 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 { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { SignOutConfirmLayout } from './sign-out-confirm.layout'; diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 7c821bdc43e..9327ff493db 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -164,16 +164,16 @@ function useAppRoutes() { } > - {/* FundReceiveStx is opened independantly so Recieve doesn't open behind */} - } /> {settingsRoutes} + + } /> {sendCryptoAssetFormRoutes} diff --git a/src/app/routes/components/modal-background-wrapper.tsx b/src/app/routes/components/modal-background-wrapper.tsx new file mode 100644 index 00000000000..a42b7da4664 --- /dev/null +++ b/src/app/routes/components/modal-background-wrapper.tsx @@ -0,0 +1,26 @@ +import { Route } from 'react-router-dom'; +import { Outlet, Routes, useLocation } from 'react-router-dom'; + +import { useLocationState } from '@app/common/hooks/use-location-state'; + +/* + To overlay modal on nested routes backgroundLocation is used + to trick the router into thinking its on the same page + */ +interface ModalBackgroundWrapperProps { + children: React.ReactNode; +} +export function ModalBackgroundWrapper({ children }: ModalBackgroundWrapperProps) { + const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); + + return ( + <> + + {children} + } /> + + {backgroundLocation && } + + ); +} diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/routes/hooks/use-background-location-redirect.ts similarity index 77% rename from src/app/common/hooks/use-background-location-redirect.ts rename to src/app/routes/hooks/use-background-location-redirect.ts index 0134fbf78de..62dfad62d7e 100644 --- a/src/app/common/hooks/use-background-location-redirect.ts +++ b/src/app/routes/hooks/use-background-location-redirect.ts @@ -7,7 +7,7 @@ import { useLocationState } from '@app/common/hooks/use-location-state'; // If routes are accessed directly / opened in new tabs `backgroundLocation` is lost // this hook re-directs the users to home then overlays the modal so the BG is the home route -export function useBackgroundLocationRedirect() { +export function useBackgroundLocationRedirect(baseUrl = RouteUrls.Home) { const { pathname, state } = useLocation(); const navigate = useNavigate(); const backgroundLocation = useLocationState('backgroundLocation'); @@ -16,10 +16,10 @@ export function useBackgroundLocationRedirect() { void (async () => { if (backgroundLocation === undefined) { return navigate(pathname, { - state: { backgroundLocation: { pathname: RouteUrls.Home }, ...state }, + state: { backgroundLocation: { pathname: baseUrl }, ...state }, }); } return false; })(); - }, [backgroundLocation, navigate, pathname, state]); + }, [backgroundLocation, baseUrl, navigate, pathname, state]); } diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index d71dc485eb3..356b9bae6b3 100644 --- a/src/shared/route-urls.ts +++ b/src/shared/route-urls.ts @@ -23,25 +23,23 @@ export enum RouteUrls { // Active wallet routes Home = '/', - // Tab nested relative paths - Activity = 'activity', - // Active wallet routes AddNetwork = '/add-network', ChooseAccount = '/choose-account', Fund = '/fund', - FundReceiveStx = '/fund/receive/stx', IncreaseStxFee = '/increase-fee/stx', IncreaseBtcFee = '/increase-fee/btc', IncreaseFeeSent = '/increase-fee/sent', + Send = '/send-transaction', + ViewSecretKey = '/view-secret-key', + // nested routes must have relative paths + Activity = 'activity', Receive = 'receive', ReceiveStx = 'receive/stx', ReceiveBtc = 'receive/btc', ReceiveBtcStamp = 'receive/btc-stamp', ReceiveCollectible = 'receive/collectible', ReceiveCollectibleOrdinal = 'receive/collectible/ordinal', - Send = '/send-transaction', - ViewSecretKey = '/view-secret-key', // Locked wallet route Unlock = '/unlock',