fix: close original recieve modal before opening qr code modal to pre…

…vent double modal
Nithishvb · Oct 16, 2023 · 10b7246 · 10b7246
1 parent c006894
commit 10b7246
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 133 deletions.
diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts
@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+// import { useEffect } from 'react';
+// import { useLocation, useNavigate } from 'react-router-dom';
 
-// import { RouteUrls } from '@shared/route-urls';
-import { useLocationState } from '@app/common/hooks/use-location-state';
+// // 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
@@ -14,21 +14,21 @@ when modals are opened in a new tab they lose the location.state.backgroundLocat
  this hook sets the backgroundLocation to be RouteUrls.Home to improve UX
 */
 
-export function useBackgroundLocationRedirect() {
-  const { pathname, state } = useLocation();
-  const navigate = useNavigate();
-  const backgroundLocation = useLocationState('backgroundLocation');
+// export function useBackgroundLocationRedirect() {
+//   const { pathname, state } = useLocation();
+//   const navigate = useNavigate();
+//   const backgroundLocation = useLocationState('backgroundLocation');
 
-  // console.log('backgroundLocation', backgroundLocation);
-  // debugger;
-  useEffect(() => {
-    void (async () => {
-      // if (backgroundLocation === undefined) {
-      //   return navigate(pathname, {
-      //     state: { backgroundLocation: { pathname: RouteUrls.Home }, ...state },
-      //   });
-      // }
-      return false;
-    })();
-  }, [backgroundLocation, navigate, pathname, state]);
-}
+//   // console.log('backgroundLocation', backgroundLocation);
+//   // debugger;
+//   useEffect(() => {
+//     void (async () => {
+//       // if (backgroundLocation === undefined) {
+//       //   return navigate(pathname, {
+//       //     state: { backgroundLocation: { pathname: RouteUrls.Home }, ...state },
+//       //   });
+//       // }
+//       return false;
+//     })();
+//   }, [backgroundLocation, navigate, pathname, state]);
+// }
diff --git a/src/app/features/collectibles/collectibles.tsx b/src/app/features/collectibles/collectibles.tsx
@@ -31,7 +31,7 @@ export function Collectibles() {
       subHeader={whenWallet({
         software: (
           <TaprootBalanceDisplayer
-            onSelectRetrieveBalance={() => navigate(RouteUrls.RetrieveTaprootFunds)}
+            onSelectRetrieveBalance={() => navigate(RouteUrls.RetriveTaprootFunds)}
           />
         ),
         ledger: null,

diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx
@@ -3,7 +3,7 @@ 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 { 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';
@@ -19,7 +19,7 @@ interface ReceiveTokensLayoutProps {
   warning?: React.JSX.Element;
 }
 export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
-  useBackgroundLocationRedirect();
+  // useBackgroundLocationRedirect();
 
   const { address, accountName, onCopyAddressToClipboard, title, warning } = props;
   const navigate = useNavigate();

diff --git a/src/app/pages/receive/receive-btc.tsx b/src/app/pages/receive/receive-btc.tsx
@@ -1,12 +1,11 @@
-import { useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { useLocation } from 'react-router-dom';
 
 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/common/hooks/use-background-location-redirect';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
@@ -17,7 +16,7 @@ interface ReceiveBtcModalType {
 }
 
 export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) {
-  useBackgroundLocationRedirect();
+  // useBackgroundLocationRedirect();
   const analytics = useAnalytics();
   const { state } = useLocation();
 
@@ -29,11 +28,11 @@ export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) {
 
   const { onCopy } = useClipboard(btcAddress);
 
-  const copyToClipboard = useCallback(() => {
+  function copyToClipboard() {
     void analytics.track('copy_btc_address_to_clipboard');
     toast.success('Copied to clipboard!');
     onCopy();
-  }, [analytics, onCopy]);
+  }
 
   return (
     <ReceiveTokensLayout

diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx
@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { useClipboard } from '@stacks/ui';
 import { HomePageSelectors } from '@tests/selectors/home.selectors';
@@ -10,7 +11,6 @@ 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';
@@ -31,13 +31,13 @@ interface ReceiveModalProps {
 }
 
 export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
-  useBackgroundLocationRedirect();
   const analytics = useAnalytics();
   const backgroundLocation = useLocationState<Location>('backgroundLocation');
   const navigate = useNavigate();
+  const location = useLocation();
   const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero();
   const stxAddress = useCurrentAccountStxAddressState();
-  const accountIndex = useLocationState<number>('accountIndex');
+  const accountIndex = get(location.state, 'accountIndex', undefined);
   const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex);
 
   const { onCopy: onCopyBtc } = useClipboard(btcAddressNativeSegwit);
@@ -50,6 +50,15 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
     copyHandler();
   }
 
+  const [isShowing, setIsShowing] = useState(true);
+
+  function navigateToQrCodeRoute(route: RouteUrls) {
+    setIsShowing(false);
+    navigate(route, {
+      state: { backgroundLocation },
+    });
+  }
+
   const title =
     type === 'full' ? (
       <>
@@ -85,24 +94,15 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
                 icon={<BtcIcon />}
                 dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn}
                 onCopyAddress={() => copyToClipboard(onCopyBtc)}
-                onClickQrCode={() =>
-                  navigate(RouteUrls.ReceiveBtc, {
-                    state: { backgroundLocation },
-                  })
-                }
+                onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveBtc)}
                 title="Bitcoin"
               />
               <ReceiveItem
                 address={stxAddress}
                 icon={<StxAvatar />}
                 dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn}
                 onCopyAddress={() => copyToClipboard(onCopyStx)}
-                onClickQrCode={() =>
-                  navigate(RouteUrls.ReceiveStx, {
-                    relative: 'route',
-                    state: { backgroundLocation },
-                  })
-                }
+                onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveStx)}
                 title="Stacks"
               />
             </ReceiveItemList>
@@ -117,14 +117,11 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
               }
               onClickQrCode={() => {
                 void analytics.track('select_inscription_to_add_new_collectible');
-                // navigate(RouteUrls.ReceiveCollectibleOrdinal, { state: { btcAddressTaproot } });
-                // TODO improve and refactor
-                // using absolute path here so it opens from Add new OR inside Receive modal
-                // FIXME - BUG - not seeing taproot when open in new tab
+                setIsShowing(false);
                 navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveCollectibleOrdinal}`, {
                   state: {
                     btcAddressTaproot,
-                    backgroundLocation: backgroundLocation,
+                    backgroundLocation,
                   },
                 });
               }}
@@ -134,11 +131,9 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
               address={btcAddressNativeSegwit}
               icon={<BtcStampsIcon />}
               onClickQrCode={() =>
-                navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveBtcStamp}`, {
-                  state: {
-                    backgroundLocation: backgroundLocation,
-                  },
-                })
+                navigateToQrCodeRoute(
+                  `/${RouteUrls.Receive}/${RouteUrls.ReceiveBtcStamp}` as RouteUrls
+                )
               }
               onCopyAddress={() =>
                 copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible')
@@ -150,11 +145,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
               icon={<StxAvatar />}
               onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')}
               onClickQrCode={() =>
-                navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveStx}`, {
-                  state: {
-                    backgroundLocation: backgroundLocation,
-                  },
-                })
+                navigateToQrCodeRoute(`/${RouteUrls.Receive}/${RouteUrls.ReceiveStx}` as RouteUrls)
               }
               title="Stacks NFT"
             />

diff --git a/src/app/pages/receive/receive-ordinal.tsx b/src/app/pages/receive/receive-ordinal.tsx
@@ -4,13 +4,13 @@ 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/common/hooks/use-background-location-redirect';
 import { ReceiveBtcModalWarning } from './components/receive-btc-warning';
 import { ReceiveTokensLayout } from './components/receive-tokens.layout';
 
 export function ReceiveOrdinalModal() {
-  useBackgroundLocationRedirect();
+  // useBackgroundLocationRedirect();
   const analytics = useAnalytics();
   const { state } = useLocation();
   const { onCopy } = useClipboard(state?.btcAddressTaproot);

diff --git a/src/app/pages/receive/receive-stx.tsx b/src/app/pages/receive/receive-stx.tsx
@@ -1,27 +1,26 @@
-import { useCallback } from 'react';
 import toast from 'react-hot-toast';
 
 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/common/hooks/use-background-location-redirect';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 import { ReceiveTokensLayout } from './components/receive-tokens.layout';
 
 export function ReceiveStxModal() {
-  useBackgroundLocationRedirect();
+  // useBackgroundLocationRedirect();
   const currentAccount = useCurrentStacksAccount();
   const analytics = useAnalytics();
   const { onCopy } = useClipboard(currentAccount?.address ?? '');
   const accountName = useCurrentAccountDisplayName();
 
-  const copyToClipboard = useCallback(() => {
+  function copyToClipboard() {
     void analytics.track('copy_stx_address_to_clipboard');
-    toast.success('Copied to clipboard!');
+    toast.success('Copied to clipboard');
     onCopy();
-  }, [analytics, onCopy]);
+  }
 
   if (!currentAccount) return null;
 

diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
@@ -70,7 +70,7 @@ function useAppRoutes() {
             </AccountGate>
           }
         >
-          {/* Need to declare this here so settings fire on activity */}
+          {/* #4028: Needed so settings modals open on /activity */}
           <Route path={RouteUrls.Activity} element={<ActivityList />}>
             {settingsRoutes}
           </Route>
@@ -85,7 +85,7 @@ function useAppRoutes() {
 
         {requestBitcoinKeysRoutes}
         {requestStacksKeysRoutes}
-        <Route path={RouteUrls.RetrieveTaprootFunds} element={<RetrieveTaprootToNativeSegwit />} />
+        <Route path={RouteUrls.RetriveTaprootFunds} element={<RetrieveTaprootToNativeSegwit />} />
         <Route path={RouteUrls.IncreaseStxFee} element={<IncreaseStxFeeDrawer />}>
           {ledgerStacksTxSigningRoutes}
         </Route>

diff --git a/src/app/routes/legacy-request-routes.tsx b/src/app/routes/legacy-request-routes.tsx
diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts
@@ -29,7 +29,6 @@ export enum RouteUrls {
   AddNetwork = '/add-network',
   ChooseAccount = '/choose-account',
   Fund = '/fund',
-  // TODO investigate deprecating fund routes
   FundReceive = '/fund/receive',
   FundReceiveStx = '/fund/receive/stx',
   FundReceiveBtc = '/fund/receive/btc',
@@ -38,7 +37,6 @@ export enum RouteUrls {
   IncreaseFeeSent = '/increase-fee/sent',
   // nested routes must have relative paths
   Receive = 'receive',
-  // TODO -  investigate un-nesting stx and btc as it may make for cleaner re-directs elsewhere - manybe pass prop?
   ReceiveStx = 'stx',
   ReceiveBtc = 'btc',
   ReceiveBtcStamp = 'btc-stamp',
@@ -60,7 +58,7 @@ export enum RouteUrls {
   EditNonce = 'edit-nonce',
   SelectNetwork = 'choose-network',
   SignOutConfirm = 'sign-out',
-  RetrieveTaprootFunds = 'retrieve-taproot-funds',
+  RetriveTaprootFunds = 'retrive-taproot-funds',
 
   // Send crypto asset routes
   SendCryptoAsset = '/send',