fix: use bg location to open in new tab. share modal bg logic

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 (
     <SlideFade initialOffset="-20px" timeout={150} in={isShowing}>
       {styles => (
@@ -74,11 +78,13 @@ export function SettingsDropdown() {
               </MenuItem>
             </>
           )}
+          {/* // more importantly I broke tests again for direct access to receive I think  */}
           <MenuItem
             data-testid={SettingsSelectors.ToggleTheme}
             onClick={wrappedCloseCallback(() => {
               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 },
               })
             )}

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';
 

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<Location>('backgroundLocation');
 
   const goToProviderExternalWebsite = (provider: string, providerUrl: string) => {
     void analytics.track('select_buy_option', { provider });
@@ -56,7 +55,9 @@ export function FiatProvidersList(props: FiatProvidersProps) {
     >
       <ReceiveStxItem
         onReceiveStx={() =>
-          navigate(RouteUrls.FundReceiveStx, { state: { backgroundLocation: location } })
+          navigate(`${RouteUrls.ReceiveStx}`, {
+            state: { backgroundLocation: location },
+          })
         }
       />
       {Object.entries(activeProviders).map(([providerKey, providerValue]) => {

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 (
     <>
       <FundLayout address={currentAccount.address} />
-      <Outlet />
+      <>
+        <ModalBackgroundWrapper>
+          <Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
+          {settingsRoutes}
+        </ModalBackgroundWrapper>
+      </>
     </>
   );
 }

src/app/pages/home/home.tsx

@@ -1,18 +1,17 @@
 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';
 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<Location>('backgroundLocation');
   const navigate = useNavigate();
 
   useTrackFirstDeposit();
@@ -41,22 +38,14 @@ export function Home() {
   return (
     <HomeLayout currentAccount={<CurrentAccount />}>
       <HomeTabs>
-        <>
-          {/* 
-          To overlay modal on nested routes backgroundLocation is used 
-          to trick the router into thinking its on the same page
-          */}
-          <Routes location={backgroundLocation || location}>
-            <Route index element={<AssetsList />} />
-            <Route path={RouteUrls.Activity} element={<ActivityList />}>
-              {homePageModalRoutes}
-            </Route>
-
+        <ModalBackgroundWrapper>
+          <Route index element={<AssetsList />} />
+          <Route path={RouteUrls.Activity} element={<ActivityList />}>
             {homePageModalRoutes}
-            <Route path="*" element={<Outlet />} />
-          </Routes>
-          {backgroundLocation && <Outlet />}
-        </>
+          </Route>
+
+          {homePageModalRoutes}
+        </ModalBackgroundWrapper>
       </HomeTabs>
     </HomeLayout>
   );

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';
 

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';
 

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 },
                   })
                 }

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';

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';

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';
 

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';
 

src/app/routes/app-routes.tsx

@@ -164,16 +164,16 @@ function useAppRoutes() {
         </Route>
 
         <Route
-          path={RouteUrls.Fund}
+          path={`${RouteUrls.Fund}/*`}
           element={
             <AccountGate>
               <FundPage />
             </AccountGate>
           }
         >
-          {/* FundReceiveStx is opened independantly so Recieve doesn't open behind */}
-          <Route path={RouteUrls.FundReceiveStx} element={<ReceiveStxModal />} />
           {settingsRoutes}
+
+          <Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
         </Route>
 
         {sendCryptoAssetFormRoutes}

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<Location>('backgroundLocation');
+
+  return (
+    <>
+      <Routes location={backgroundLocation || location}>
+        {children}
+        <Route path="*" element={<Outlet />} />
+      </Routes>
+      {backgroundLocation && <Outlet />}
+    </>
+  );
+}

src/app/common/hooks/use-background-location-redirect.ts → 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]);
 }

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',