fix: use useLocationState for cleaner code, closes #4028

src/app/common/hooks/use-location-state.ts

@@ -5,15 +5,11 @@ import get from 'lodash.get';
 
 import { isUndefined } from '@shared/utils';
 
-export function useLocationState(propName: string): string | undefined;
-export function useLocationState(propName: string, defaultValue: string): string;
 export function useLocationState(propName: string, defaultValue?: string) {
   const location = useLocation();
   return get(location, `state.${propName}`, defaultValue);
 }
 
-export function useLocationStateWithCache<T = string>(propName: string): T | undefined;
-export function useLocationStateWithCache<T = string>(propName: string, defaultValue: T): T;
 export function useLocationStateWithCache<T = string>(propName: string, defaultValue?: T) {
   const location = useLocation();
   const [value, setValue] = useState(defaultValue);

src/app/components/receive/receive-collectible.tsx

@@ -1,14 +1,14 @@
 import toast from 'react-hot-toast';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import BitcoinStampImg from '@assets/images/bitcoin-stamp.png';
 import { Box, Stack, useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
-import get from 'lodash.get';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { OrdinalIcon } from '@app/components/icons/ordinal-icon';
 import { useZeroIndexTaprootAddress } from '@app/query/bitcoin/ordinals/use-zero-index-taproot-address';
@@ -19,9 +19,9 @@ import { ReceiveCollectibleItem } from './receive-collectible-item';
 
 export function ReceiveCollectible() {
   const analytics = useAnalytics();
-  const location = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
+  const accountIndex = useLocationState('accountIndex');
   const navigate = useNavigate();
-  const accountIndex = get(location.state, 'accountIndex', undefined);
   const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero();
   const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex);
 
@@ -55,7 +55,7 @@ export function ReceiveCollectible() {
         onCopyAddress={() => {
           void analytics.track('select_inscription_to_add_new_collectible');
           navigate(RouteUrls.ReceiveCollectibleOrdinal, {
-            state: { btcAddressTaproot, backgroundLocation: location.state.backgroundLocation },
+            state: { btcAddressTaproot, backgroundLocation },
           });
         }}
         title="Ordinal inscription"

src/app/features/collectibles/components/bitcoin/inscription.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Inscription as InscriptionType } from '@shared/models/inscription.model';
 import { RouteUrls } from '@shared/route-urls';
 
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { OrdinalIconFull } from '@app/components/icons/ordinal-icon-full';
 import { OrdinalMinimalIcon } from '@app/components/icons/ordinal-minimal-icon';
@@ -18,11 +19,11 @@ interface InscriptionProps {
 export function Inscription({ rawInscription }: InscriptionProps) {
   const inscription = convertInscriptionToSupportedInscriptionType(rawInscription);
   const navigate = useNavigate();
-  const location = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
 
   function openSendInscriptionModal() {
     navigate(RouteUrls.SendOrdinalInscription, {
-      state: { inscription, backgroundLocation: location },
+      state: { inscription, backgroundLocation },
     });
   }
 

src/app/features/settings-dropdown/settings-dropdown.tsx

@@ -11,6 +11,7 @@ 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';
@@ -47,6 +48,7 @@ export function SettingsDropdown() {
   const key = useCurrentKeyDetails();
   const { isPressed: showAdvancedMenuOptions } = useModifierKey('alt', 120);
   const location = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
 
   const handleClose = useCallback(() => setIsShowingSettings(false), [setIsShowingSettings]);
 
@@ -97,7 +99,7 @@ export function SettingsDropdown() {
                 void analytics.track('click_change_theme_menu_item');
                 navigate(RouteUrls.ChangeTheme, {
                   relative: 'path',
-                  state: { backgroundLocation: location },
+                  state: { backgroundLocation },
                 });
               })}
             >
@@ -152,7 +154,7 @@ export function SettingsDropdown() {
                 void analytics.track('click_change_network_menu_item');
                 navigate(RouteUrls.SelectNetwork, {
                   relative: 'path',
-                  state: { backgroundLocation: location },
+                  state: { backgroundLocation },
                 });
               })}
             >
@@ -186,7 +188,7 @@ export function SettingsDropdown() {
               onClick={wrappedCloseCallback(() =>
                 navigate(RouteUrls.SignOutConfirm, {
                   relative: 'path',
-                  state: { backgroundLocation: location },
+                  state: { backgroundLocation },
                 })
               )}
               data-testid="settings-sign-out"

src/app/pages/home/components/home-tabs.tsx

@@ -6,6 +6,7 @@ import type { StackProps } from '@stacks/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Tabs } from '@app/components/tabs';
 
@@ -15,8 +16,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, state: locationState } = useLocation();
-  const backgroundLocation = locationState?.backgroundLocation;
+  const { pathname } = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
 
   const tabs = useMemo(
     () => [

src/app/pages/home/home.tsx

@@ -4,6 +4,7 @@ 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';
@@ -31,7 +32,7 @@ function HomeContainer({ account }: HomeContainerProps) {
   const navigate = useNavigate();
 
   const location = useLocation();
-  const backgroundLocation = location?.state?.backgroundLocation;
+  const backgroundLocation = useLocationState('backgroundLocation');
   useTrackFirstDeposit();
 
   useRouteHeader(

src/app/pages/receive-tokens/components/receive-tokens.layout.tsx

@@ -1,9 +1,10 @@
 import { FiCopy } from 'react-icons/fi';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Box, Button, Flex, Text, color } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 
+import { useLocationState } from '@app/common/hooks/use-location-state';
 import { AddressDisplayer } from '@app/components/address-displayer/address-displayer';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
 import { Title } from '@app/components/typography';
@@ -21,11 +22,7 @@ interface ReceiveTokensLayoutProps {
 export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
   const { address, accountName, onCopyAddressToClipboard, title, warning, hasSubtitle } = props;
   const navigate = useNavigate();
-  const {
-    state: {
-      backgroundLocation: { pathname },
-    },
-  } = useLocation();
+  const { pathname } = useLocationState('backgroundLocation');
 
   return (
     <BaseDrawer title={title} isShowing onClose={() => navigate(pathname)}>

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 { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { Box, Button, Flex, Stack, useClipboard } from '@stacks/ui';
 import { color, truncateMiddle } from '@stacks/ui-utils';
@@ -9,6 +9,7 @@ import { HomePageSelectors } from '@tests/selectors/home.selectors';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+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';
@@ -22,9 +23,7 @@ import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain
 export function ReceiveModal() {
   const analytics = useAnalytics();
   const navigate = useNavigate();
-  const {
-    state: { backgroundLocation },
-  } = useLocation();
+  const backgroundLocation = useLocationState('backgroundLocation');
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const stxAddress = useCurrentAccountStxAddressState();
   const { onCopy: onCopyStacks } = useClipboard(stxAddress);