From 639922029fe43b68cab2bb75abddc51680d046a5 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 4 Oct 2023 16:31:45 +0100 Subject: [PATCH 01/17] fix: refactor modals to overlay on top of backgroundLocation consistently, closes #4028 --- .../hooks/use-background-location-redirect.ts | 34 +++ src/app/common/hooks/use-location-state.ts | 7 + .../features/activity-list/activity-list.tsx | 36 ++-- src/app/features/asset-list/asset-list.tsx | 3 +- .../features/collectibles/collectibles.tsx | 2 +- .../components/add-collectible.tsx | 9 +- .../components/bitcoin/inscription.tsx | 5 +- .../generic-steps/device-busy/device-busy.tsx | 2 +- .../operation-rejected/operation-rejected.tsx | 5 +- .../settings-dropdown/settings-dropdown.tsx | 15 +- .../features/theme-drawer/theme-drawer.tsx | 4 +- src/app/pages/fund/fund.tsx | 2 +- .../pages/home/components/account-actions.tsx | 14 +- src/app/pages/home/components/home-tabs.tsx | 15 +- src/app/pages/home/home.tsx | 24 ++- .../components/receive-tokens.layout.tsx | 13 +- src/app/pages/receive/receive-btc.tsx | 7 +- src/app/pages/receive/receive-modal.tsx | 154 +++++++++----- src/app/pages/receive/receive-ordinal.tsx | 4 +- src/app/pages/receive/receive-stx.tsx | 9 +- .../pages/select-network/select-network.tsx | 4 +- .../sign-out-confirm/sign-out-confirm.tsx | 4 +- src/app/routes/app-routes.tsx | 200 +++--------------- src/app/routes/legacy-request-routes.tsx | 61 ++++++ src/app/routes/ordinal-routes.tsx | 23 ++ src/app/routes/receive-routes.tsx | 27 +++ src/app/routes/request-routes.tsx | 67 ++++++ src/app/routes/rpc-routes.tsx | 39 ++++ src/app/routes/settings-routes.tsx | 15 ++ src/shared/route-urls.ts | 33 +-- 30 files changed, 543 insertions(+), 294 deletions(-) create mode 100644 src/app/common/hooks/use-background-location-redirect.ts create mode 100644 src/app/routes/legacy-request-routes.tsx create mode 100644 src/app/routes/ordinal-routes.tsx create mode 100644 src/app/routes/receive-routes.tsx create mode 100644 src/app/routes/request-routes.tsx create mode 100644 src/app/routes/rpc-routes.tsx create mode 100644 src/app/routes/settings-routes.tsx diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts new file mode 100644 index 00000000000..1b45a71aa59 --- /dev/null +++ b/src/app/common/hooks/use-background-location-redirect.ts @@ -0,0 +1,34 @@ +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'; + +// 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 +*/ + +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]); +} diff --git a/src/app/common/hooks/use-location-state.ts b/src/app/common/hooks/use-location-state.ts index db1a95f496e..ba748de5b03 100644 --- a/src/app/common/hooks/use-location-state.ts +++ b/src/app/common/hooks/use-location-state.ts @@ -5,6 +5,13 @@ import get from 'lodash.get'; import { isUndefined } from '@shared/utils'; +type LocationState = string | undefined | number | Location; + +export function useLocationState(propName: string): T; +export function useLocationState( + propName: string, + defaultValue: string +): T; export function useLocationState(propName: string): string | undefined; export function useLocationState(propName: string, defaultValue: string): string; export function useLocationState(propName: string, defaultValue?: string) { diff --git a/src/app/features/activity-list/activity-list.tsx b/src/app/features/activity-list/activity-list.tsx index b28cf472e9e..39901c29d22 100644 --- a/src/app/features/activity-list/activity-list.tsx +++ b/src/app/features/activity-list/activity-list.tsx @@ -1,4 +1,5 @@ import { useMemo } from 'react'; +import { Outlet } from 'react-router-dom'; import uniqby from 'lodash.uniqby'; @@ -110,21 +111,24 @@ export function ActivityList() { ); return ( - - {hasSubmittedTransactions && } - {hasPendingTransactions && ( - - )} - {hasTransactions && ( - - )} - + <> + + {hasSubmittedTransactions && } + {hasPendingTransactions && ( + + )} + {hasTransactions && ( + + )} + + + ); } diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 003beb1bbc0..dabd187afa4 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -1,5 +1,4 @@ -import { Outlet } from 'react-router-dom'; -import { useNavigate } from 'react-router-dom'; +import { Outlet, useNavigate } from 'react-router-dom'; import { HomePageSelectors } from '@tests/selectors/home.selectors'; import { Stack } from 'leather-styles/jsx'; diff --git a/src/app/features/collectibles/collectibles.tsx b/src/app/features/collectibles/collectibles.tsx index 0dcbac128b0..ef07e977204 100644 --- a/src/app/features/collectibles/collectibles.tsx +++ b/src/app/features/collectibles/collectibles.tsx @@ -31,7 +31,7 @@ export function Collectibles() { subHeader={whenWallet({ software: ( navigate(RouteUrls.RetriveTaprootFunds)} + onSelectRetrieveBalance={() => navigate(RouteUrls.RetrieveTaprootFunds)} /> ), ledger: null, diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx index d4124706180..85f87d6f3a6 100644 --- a/src/app/features/collectibles/components/add-collectible.tsx +++ b/src/app/features/collectibles/components/add-collectible.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { Box } from '@stacks/ui'; import { token } from 'leather-styles/tokens'; @@ -26,13 +26,18 @@ const backgroundProps = { export function AddCollectible() { const navigate = useNavigate(); const analytics = useAnalytics(); + const location = useLocation(); return ( { void analytics.track('select_add_new_collectible'); - navigate(RouteUrls.ReceiveCollectible); + navigate(`${RouteUrls.Receive}/${RouteUrls.ReceiveCollectible}`, { + state: { + backgroundLocation: location, + }, + }); }} subtitle="Collectible" title="Add new" diff --git a/src/app/features/collectibles/components/bitcoin/inscription.tsx b/src/app/features/collectibles/components/bitcoin/inscription.tsx index 4a6b4cb78f3..079ce31291d 100644 --- a/src/app/features/collectibles/components/bitcoin/inscription.tsx +++ b/src/app/features/collectibles/components/bitcoin/inscription.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { Inscription as InscriptionType } from '@shared/models/inscription.model'; import { RouteUrls } from '@shared/route-urls'; @@ -18,10 +18,11 @@ interface InscriptionProps { export function Inscription({ rawInscription }: InscriptionProps) { const inscription = convertInscriptionToSupportedInscriptionType(rawInscription); const navigate = useNavigate(); + const location = useLocation(); function openSendInscriptionModal() { navigate(RouteUrls.SendOrdinalInscription, { - state: { inscription }, + state: { inscription, backgroundLocation: location }, }); } diff --git a/src/app/features/ledger/generic-steps/device-busy/device-busy.tsx b/src/app/features/ledger/generic-steps/device-busy/device-busy.tsx index 59f5d835383..4283fb8f4ed 100644 --- a/src/app/features/ledger/generic-steps/device-busy/device-busy.tsx +++ b/src/app/features/ledger/generic-steps/device-busy/device-busy.tsx @@ -2,7 +2,7 @@ import { useLocationState } from '@app/common/hooks/use-location-state'; import { DeviceBusyLayout } from '@app/features/ledger/generic-steps'; export function DeviceBusy() { - const description = useLocationState('description'); + const description = useLocationState('description'); return ( ); diff --git a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.tsx b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.tsx index f43ba9cb628..702481d4b5c 100644 --- a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.tsx +++ b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.tsx @@ -4,7 +4,10 @@ import { useLedgerNavigate } from '@app/features/ledger/hooks/use-ledger-navigat export function OperationRejected() { const ledgerNavigate = useLedgerNavigate(); - const description = useLocationState('description', 'The operation on device was rejected'); + const description = useLocationState( + 'description', + 'The operation on device was rejected' + ); return ( { void analytics.track('click_change_theme_menu_item'); - navigate(RouteUrls.ChangeTheme, { relative: 'path' }); + navigate(RouteUrls.ChangeTheme, { + relative: 'path', + state: { backgroundLocation: location }, + }); })} > Change theme @@ -128,7 +131,10 @@ export function SettingsDropdown() { data-testid={SettingsSelectors.ChangeNetworkAction} onClick={wrappedCloseCallback(() => { void analytics.track('click_change_network_menu_item'); - navigate(RouteUrls.SelectNetwork, { relative: 'path' }); + navigate(RouteUrls.SelectNetwork, { + relative: 'path', + state: { backgroundLocation: location }, + }); })} > @@ -159,7 +165,10 @@ export function SettingsDropdown() { - navigate(RouteUrls.SignOutConfirm, { relative: 'path' }) + navigate(RouteUrls.SignOutConfirm, { + relative: 'path', + state: { backgroundLocation: location }, + }) )} data-testid={SettingsSelectors.SignOutListItem} > diff --git a/src/app/features/theme-drawer/theme-drawer.tsx b/src/app/features/theme-drawer/theme-drawer.tsx index 4a363ca3cec..f8c2ebd5f41 100644 --- a/src/app/features/theme-drawer/theme-drawer.tsx +++ b/src/app/features/theme-drawer/theme-drawer.tsx @@ -1,13 +1,15 @@ import { useNavigate } from 'react-router-dom'; +import { useLocationState } from '@app/common/hooks/use-location-state'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { ThemeList } from './theme-list'; export function ThemesDrawer() { const navigate = useNavigate(); + const backgroundLocation = useLocationState('backgroundLocation'); return ( - navigate('..')}> + navigate(backgroundLocation ?? '..')}> ); diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index a5ebda094b8..2539d621af1 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -12,13 +12,13 @@ import { FundLayout } from './fund.layout'; export function FundPage() { const navigate = useNavigate(); + const currentAccount = useCurrentStacksAccount(); const { data: balances } = useCurrentStacksAccountAnchoredBalances(); useRouteHeader(
navigate(RouteUrls.Home)} title=" " />); if (!currentAccount || !balances) return ; - return ( <> diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx index 0cc727a5428..68b95eafac8 100644 --- a/src/app/pages/home/components/account-actions.tsx +++ b/src/app/pages/home/components/account-actions.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { HomePageSelectors } from '@tests/selectors/home.selectors'; import { Flex, FlexProps } from 'leather-styles/jsx'; @@ -16,7 +16,11 @@ import { SendButton } from './send-button'; export function AccountActions(props: FlexProps) { const navigate = useNavigate(); + const location = useLocation(); const isBitcoinEnabled = useConfigBitcoinEnabled(); + const receivePath = isBitcoinEnabled + ? RouteUrls.Receive + : `${RouteUrls.Receive}/${RouteUrls.ReceiveStx}`; return ( @@ -26,7 +30,13 @@ export function AccountActions(props: FlexProps) { data-testid={HomePageSelectors.ReceiveCryptoAssetBtn} icon={} label="Receive" - onClick={() => navigate(isBitcoinEnabled ? RouteUrls.Receive : RouteUrls.ReceiveStx)} + onClick={() => + navigate(receivePath, { + state: { + backgroundLocation: location, + }, + }) + } /> ('backgroundLocation'); const tabs = useMemo( () => [ { slug: RouteUrls.Home, label: 'assets' }, - { slug: RouteUrls.Activity, label: 'activity' }, + { slug: `${RouteUrls.Home}${RouteUrls.Activity}`, label: 'activity' }, ], [] ); - - const getActiveTab = useCallback( - () => tabs.findIndex(tab => tab.slug === pathname), - [tabs, pathname] - ); + const getActiveTab = useCallback(() => { + const path = backgroundLocation ? backgroundLocation.pathname : location?.pathname; + return tabs.findIndex(tab => tab.slug === path); + }, [tabs, backgroundLocation, location]); const setActiveTab = useCallback( (index: number) => navigate(tabs[index]?.slug), diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index d3668dea66c..8644ed8a4c7 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -1,14 +1,17 @@ -import { Outlet, useNavigate } from 'react-router-dom'; +import { Navigate, 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 { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { CurrentAccount } from './components/account-area'; import { HomeTabs } from './components/home-tabs'; @@ -17,8 +20,10 @@ import { HomeLayout } from './components/home.layout'; export function Home() { const { decodedAuthRequest } = useOnboardingState(); - const stacksAccount = useCurrentStacksAccount(); const navigate = useNavigate(); + const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); + useTrackFirstDeposit(); useRouteHeader( @@ -35,7 +40,18 @@ export function Home() { return ( }> - + <> + {/* + To overlay modal on nested routes backgroundLocation is used + to trick the router into thinking its on the same page + */} + + } /> + } /> + } /> + + {backgroundLocation && } + ); diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index 9ed80ed1976..2a740109e12 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -3,8 +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'; @@ -19,11 +19,18 @@ interface ReceiveTokensLayoutProps { warning?: React.JSX.Element; } export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { + useBackgroundLocationRedirect(); + 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-btc.tsx b/src/app/pages/receive/receive-btc.tsx index 169a5aa78df..5ed7a60fef9 100644 --- a/src/app/pages/receive/receive-btc.tsx +++ b/src/app/pages/receive/receive-btc.tsx @@ -1,3 +1,4 @@ +import { useCallback } from 'react'; import toast from 'react-hot-toast'; import { useLocation } from 'react-router-dom'; @@ -5,6 +6,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 { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; @@ -15,6 +17,7 @@ interface ReceiveBtcModalType { } export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) { + useBackgroundLocationRedirect(); const analytics = useAnalytics(); const { state } = useLocation(); @@ -26,11 +29,11 @@ export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) { const { onCopy } = useClipboard(btcAddress); - function copyToClipboard() { + const copyToClipboard = useCallback(() => { void analytics.track('copy_btc_address_to_clipboard'); toast.success('Copied to clipboard!'); onCopy(); - } + }, [analytics, onCopy]); return ( ('backgroundLocation'); const navigate = useNavigate(); const btcAddressNativeSegwit = useCurrentAccountNativeSegwitAddressIndexZero(); const stxAddress = useCurrentAccountStxAddressState(); - const accountIndex = get(location.state, 'accountIndex', undefined); + const accountIndex = useLocationState('accountIndex'); const btcAddressTaproot = useZeroIndexTaprootAddress(accountIndex); const { onCopy: onCopyBtc } = useClipboard(btcAddressNativeSegwit); @@ -63,67 +66,104 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { ); return ( - navigate('../')} - > - - - {title} - - {type === 'full' && ( - + <> + navigate(backgroundLocation.pathname ?? '..')} + > + + + {title} + + {type === 'full' && ( + + } + dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} + onCopyAddress={() => copyToClipboard(onCopyBtc)} + onClickQrCode={() => + navigate(RouteUrls.ReceiveBtc, { + state: { backgroundLocation }, + }) + } + title="Bitcoin" + /> + } + dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} + onCopyAddress={() => copyToClipboard(onCopyStx)} + onClickQrCode={() => + navigate(RouteUrls.ReceiveStx, { + relative: 'route', + state: { backgroundLocation }, + }) + } + title="Stacks" + /> + + )} + + } + dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn} + onCopyAddress={() => + copyToClipboard(onCopyOrdinal, 'select_stamp_to_add_new_collectible') + } + 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 + navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveCollectibleOrdinal}`, { + state: { + btcAddressTaproot, + backgroundLocation: backgroundLocation, + }, + }); + }} + title="Ordinal inscription" + /> } - dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} - onCopyAddress={() => copyToClipboard(onCopyBtc)} - onClickQrCode={() => navigate(RouteUrls.ReceiveBtc)} - title="Bitcoin" + icon={} + onClickQrCode={() => + navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveBtcStamp}`, { + state: { + backgroundLocation: backgroundLocation, + }, + }) + } + onCopyAddress={() => + copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible') + } + title="Bitcoin Stamp" /> } - dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} - onCopyAddress={() => copyToClipboard(onCopyStx)} - onClickQrCode={() => navigate(RouteUrls.ReceiveStx)} - title="Stacks" + onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} + onClickQrCode={() => + navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveStx}`, { + state: { + backgroundLocation: backgroundLocation, + }, + }) + } + title="Stacks NFT" /> - )} - - } - dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn} - onCopyAddress={() => - copyToClipboard(onCopyOrdinal, 'select_stamp_to_add_new_collectible') - } - onClickQrCode={() => { - void analytics.track('select_inscription_to_add_new_collectible'); - navigate(RouteUrls.ReceiveCollectibleOrdinal, { state: { btcAddressTaproot } }); - }} - title="Ordinal inscription" - /> - } - onClickQrCode={() => navigate(RouteUrls.ReceiveBtcStamp)} - onCopyAddress={() => copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible')} - title="Bitcoin Stamp" - /> - } - onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} - onClickQrCode={() => navigate(RouteUrls.ReceiveStx)} - title="Stacks NFT" - /> - - - + + + + {/* Outlet here for nested token routes */} + + ); } diff --git a/src/app/pages/receive/receive-ordinal.tsx b/src/app/pages/receive/receive-ordinal.tsx index 1897adaea24..423623e9037 100644 --- a/src/app/pages/receive/receive-ordinal.tsx +++ b/src/app/pages/receive/receive-ordinal.tsx @@ -4,14 +4,16 @@ 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 { ReceiveBtcModalWarning } from './components/receive-btc-warning'; import { ReceiveTokensLayout } from './components/receive-tokens.layout'; export function ReceiveOrdinalModal() { + useBackgroundLocationRedirect(); const analytics = useAnalytics(); const { state } = useLocation(); - const { onCopy } = useClipboard(state.btcAddressTaproot); + const { onCopy } = useClipboard(state?.btcAddressTaproot); function copyToClipboard() { void analytics.track('copy_address_to_add_new_inscription'); diff --git a/src/app/pages/receive/receive-stx.tsx b/src/app/pages/receive/receive-stx.tsx index 02b1c203123..ed234005dca 100644 --- a/src/app/pages/receive/receive-stx.tsx +++ b/src/app/pages/receive/receive-stx.tsx @@ -1,24 +1,27 @@ +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 { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { ReceiveTokensLayout } from './components/receive-tokens.layout'; export function ReceiveStxModal() { + useBackgroundLocationRedirect(); const currentAccount = useCurrentStacksAccount(); const analytics = useAnalytics(); const { onCopy } = useClipboard(currentAccount?.address ?? ''); const accountName = useCurrentAccountDisplayName(); - function copyToClipboard() { + const copyToClipboard = useCallback(() => { 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/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index 17573742a28..fb9497a07d8 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -4,6 +4,7 @@ import { WalletDefaultNetworkConfigurationIds } from '@shared/constants'; 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 { 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'; @@ -20,6 +21,7 @@ export function SelectNetwork() { const analytics = useAnalytics(); const networksActions = useNetworksActions(); const currentNetwork = useCurrentNetworkState(); + const backgroundLocation = useLocationState('backgroundLocation'); function addNetwork() { void analytics.track('add_network'); @@ -38,7 +40,7 @@ export function SelectNetwork() { } function closeNetworkModal() { - navigate('..'); + 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 eba398fe0a3..c8653da60e9 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx @@ -3,12 +3,14 @@ import { useNavigate } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; 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() { const { signOut } = useKeyActions(); const navigate = useNavigate(); + const backgroundLocation = useLocationState('backgroundLocation'); return ( navigate('..')} + onUserSafelyReturnToHomepage={() => navigate(backgroundLocation.pathname ?? '..')} /> ); } diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 1ef80f077f9..a39b82fa74b 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -9,11 +9,9 @@ import { 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 { ActivityList } from '@app/features/activity-list/activity-list'; import { AddNetwork } from '@app/features/add-network/add-network'; -import { AssetsList } from '@app/features/asset-list/asset-list'; import { Container } from '@app/features/container/container'; import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer'; import { IncreaseBtcFeeDrawer } from '@app/features/increase-fee-drawer/increase-btc-fee-drawer'; @@ -23,10 +21,8 @@ import { leatherIntroDialogRoutes } from '@app/features/leather-intro-dialog/lea import { ledgerJwtSigningRoutes } from '@app/features/ledger/flows/jwt-signing/ledger-sign-jwt.routes'; import { requestBitcoinKeysRoutes } from '@app/features/ledger/flows/request-bitcoin-keys/ledger-request-bitcoin-keys'; import { requestStacksKeysRoutes } from '@app/features/ledger/flows/request-stacks-keys/ledger-request-stacks-keys'; -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'; import { RetrieveTaprootToNativeSegwit } from '@app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit'; -import { ThemesDrawer } from '@app/features/theme-drawer/theme-drawer'; import { BitcoinContractRequest } from '@app/pages/bitcoin-contract-request/bitcoin-contract-request'; import { ChooseAccount } from '@app/pages/choose-account/choose-account'; import { FundPage } from '@app/pages/fund/fund'; @@ -35,39 +31,25 @@ import { AllowDiagnosticsModal } from '@app/pages/onboarding/allow-diagnostics/a import { BackUpSecretKeyPage } from '@app/pages/onboarding/back-up-secret-key/back-up-secret-key'; import { SignIn } from '@app/pages/onboarding/sign-in/sign-in'; import { WelcomePage } from '@app/pages/onboarding/welcome/welcome'; -import { PsbtRequest } from '@app/pages/psbt-request/psbt-request'; -import { ReceiveBtcModal } from '@app/pages/receive/receive-btc'; -import { ReceiveModal } from '@app/pages/receive/receive-modal'; -import { ReceiveOrdinalModal } from '@app/pages/receive/receive-ordinal'; -import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; import { RequestError } from '@app/pages/request-error/request-error'; -import { RpcGetAddresses } from '@app/pages/rpc-get-addresses/rpc-get-addresses'; -import { rpcSendTransferRoutes } from '@app/pages/rpc-send-transfer/rpc-send-transfer.routes'; -import { RpcSignPsbt } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt'; -import { RpcSignPsbtSummary } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt-summary'; import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction/rpc-sign-stacks-transaction'; -import { SelectNetwork } from '@app/pages/select-network/select-network'; import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error'; import { LockBitcoinSummary } from '@app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary'; -import { SendInscriptionContainer } from '@app/pages/send/ordinal-inscription/components/send-inscription-container'; -import { SendInscriptionChooseFee } from '@app/pages/send/ordinal-inscription/send-inscription-choose-fee'; -import { SendInscriptionForm } from '@app/pages/send/ordinal-inscription/send-inscription-form'; -import { SendInscriptionReview } from '@app/pages/send/ordinal-inscription/send-inscription-review'; -import { SendInscriptionSummary } from '@app/pages/send/ordinal-inscription/sent-inscription-summary'; import { sendCryptoAssetFormRoutes } from '@app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes'; -import { SignOutConfirmDrawer } from '@app/pages/sign-out-confirm/sign-out-confirm'; -import { StacksMessageSigningRequest } from '@app/pages/stacks-message-signing-request/stacks-message-signing-request'; import { swapRoutes } from '@app/pages/swap/swap.routes'; -import { TransactionRequest } from '@app/pages/transaction-request/transaction-request'; import { UnauthorizedRequest } from '@app/pages/unauthorized-request/unauthorized-request'; import { Unlock } from '@app/pages/unlock'; -import { ProfileUpdateRequest } from '@app/pages/update-profile-request/update-profile-request'; import { ViewSecretKey } from '@app/pages/view-secret-key/view-secret-key'; import { AccountGate } from '@app/routes/account-gate'; +import { sendOrdinalRoutes } from '@app/routes/ordinal-routes'; +import { receiveRoutes } from '@app/routes/receive-routes'; +import { legacyRequestRoutes } from '@app/routes/request-routes'; +import { rpcRequestRoutes } from '@app/routes/rpc-routes'; +import { settingsRoutes } from '@app/routes/settings-routes'; import { OnboardingGate } from './onboarding-gate'; -function SuspenseLoadingSpinner() { +export function SuspenseLoadingSpinner() { return ; } @@ -77,160 +59,41 @@ export function AppRoutes() { } function useAppRoutes() { - const settingsModalRoutes = ( - - } /> - } /> - } /> - - ); - - const legacyRequestRoutes = ( - <> - - }> - - - - } - > - {ledgerStacksTxSigningRoutes} - } /> - } /> - - - }> - - - - } - > - {ledgerStacksMessageSigningRoutes} - - - }> - - - - } - /> - - }> - - - - } - /> - - ); - - const rpcRequestRoutes = ( - <> - - - - } - /> - {rpcSendTransferRoutes} - { - const { RpcSignBip322MessageRoute } = await import( - '@app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message' - ); - return { Component: RpcSignBip322MessageRoute }; - }} - /> - - - - } - /> - - - - } - /> - - ); - return createHashRouter( createRoutesFromElements( }> } > - } /> - } /> - - {leatherIntroDialogRoutes} - - {requestBitcoinKeysRoutes} - {requestStacksKeysRoutes} - } /> - - }> - {ledgerStacksTxSigningRoutes} + {/* Need to declare this here so settings fire on activity */} + }> + {settingsRoutes} - } /> - } /> - } /> - } - /> - } /> - } /> - } /> - } /> - - }> - } /> - } - /> - } - /> - } - /> - } /> - + {/* Modal routes overlaid on home need to be nested here + with relative paths to open in new tabs */} + {receiveRoutes} + {settingsRoutes} + {ledgerStacksTxSigningRoutes} + {sendOrdinalRoutes} + - {settingsModalRoutes} + {requestBitcoinKeysRoutes} + {requestStacksKeysRoutes} + } /> + }> {ledgerStacksTxSigningRoutes} + } /> + } /> + + {ledgerStacksTxSigningRoutes} + {ledgerJwtSigningRoutes} + } > - } /> - } /> - } /> - {settingsModalRoutes} + {receiveRoutes} + {settingsRoutes} {sendCryptoAssetFormRoutes} @@ -324,10 +186,10 @@ function useAppRoutes() { } > - {settingsModalRoutes} + {settingsRoutes} }> - {settingsModalRoutes} + {settingsRoutes} {leatherIntroDialogRoutes} diff --git a/src/app/routes/legacy-request-routes.tsx b/src/app/routes/legacy-request-routes.tsx new file mode 100644 index 00000000000..834ffc3f11e --- /dev/null +++ b/src/app/routes/legacy-request-routes.tsx @@ -0,0 +1,61 @@ +// https://gist.github.com/Azayzel/6438e3c5b2d16381ced14fe0da78c123 +// investigaste moving to an object config to clean this up. Also possibly using lazy load (maybe not now) +// https://www.youtube.com/watch?v=YF9L6PUAMWk +// https://www.ryanjyost.com/react-routing/ +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { ReceiveBtcModal } from '@app/pages/receive/receive-btc'; +import { ReceiveModal } from '@app/pages/receive/receive-modal'; +import { ReceiveOrdinalModal } from '@app/pages/receive/receive-ordinal'; +import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; + +export function ReceiveRoutes() { + return ( + + }> + } /> + } /> + {/* Needed to show receive ordinal in Receive flow */} + } /> + + + {/* Needed to show receive ordinal in Add flow */} + } + /> + } /> + + ); +} + +export const receiveRoutesArray = [ + { + path: RouteUrls.Receive, + element: , + routes: [ + { + path: RouteUrls.ReceiveStx, + element: , + }, + { + path: RouteUrls.ReceiveCollectibleOrdinal, + element: , + }, + { + path: RouteUrls.ReceiveBtc, + element: , + }, + ], + }, + { + path: `${RouteUrls.Receive}/${RouteUrls.ReceiveCollectible}`, + element: , + }, + { + path: RouteUrls.ReceiveCollectibleOrdinal, + element: , + }, +]; diff --git a/src/app/routes/ordinal-routes.tsx b/src/app/routes/ordinal-routes.tsx new file mode 100644 index 00000000000..41e8e02516d --- /dev/null +++ b/src/app/routes/ordinal-routes.tsx @@ -0,0 +1,23 @@ +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error'; +import { SendInscriptionContainer } from '@app/pages/send/ordinal-inscription/components/send-inscription-container'; +import { SendInscriptionChooseFee } from '@app/pages/send/ordinal-inscription/send-inscription-choose-fee'; +import { SendInscriptionForm } from '@app/pages/send/ordinal-inscription/send-inscription-form'; +import { SendInscriptionReview } from '@app/pages/send/ordinal-inscription/send-inscription-review'; +import { SendInscriptionSummary } from '@app/pages/send/ordinal-inscription/sent-inscription-summary'; + +export const sendOrdinalRoutes = ( + }> + } /> + } + /> + } /> + } /> + } /> + +); diff --git a/src/app/routes/receive-routes.tsx b/src/app/routes/receive-routes.tsx new file mode 100644 index 00000000000..47d56cc4d62 --- /dev/null +++ b/src/app/routes/receive-routes.tsx @@ -0,0 +1,27 @@ +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { ReceiveBtcModal } from '@app/pages/receive/receive-btc'; +import { ReceiveModal } from '@app/pages/receive/receive-modal'; +import { ReceiveOrdinalModal } from '@app/pages/receive/receive-ordinal'; +import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; + +export const receiveRoutes = ( + + }> + } /> + } /> + } /> + {/* Needed to show receive ordinal in Receive flow */} + } /> + + + {/* Needed to show receive ordinal in Add flow */} + } + /> + } /> + +); diff --git a/src/app/routes/request-routes.tsx b/src/app/routes/request-routes.tsx new file mode 100644 index 00000000000..c8dd964ecd9 --- /dev/null +++ b/src/app/routes/request-routes.tsx @@ -0,0 +1,67 @@ +import { Suspense } from 'react'; +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { BroadcastErrorDrawer } from '@app/components/broadcast-error-drawer/broadcast-error-drawer'; +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'; +import { PsbtRequest } from '@app/pages/psbt-request/psbt-request'; +import { StacksMessageSigningRequest } from '@app/pages/stacks-message-signing-request/stacks-message-signing-request'; +import { TransactionRequest } from '@app/pages/transaction-request/transaction-request'; +import { ProfileUpdateRequest } from '@app/pages/update-profile-request/update-profile-request'; +import { AccountGate } from '@app/routes/account-gate'; +import { SuspenseLoadingSpinner } from '@app/routes/app-routes'; + +// #4028: TODO These are labelled legacy, maybe we can just remove them? +export const legacyRequestRoutes = ( + <> + + }> + + + + } + > + {ledgerStacksTxSigningRoutes} + } /> + } /> + + + }> + + + + } + > + {ledgerStacksMessageSigningRoutes} + + + }> + + + + } + /> + + }> + + + + } + /> + +); diff --git a/src/app/routes/rpc-routes.tsx b/src/app/routes/rpc-routes.tsx new file mode 100644 index 00000000000..9b0b2aeb9d6 --- /dev/null +++ b/src/app/routes/rpc-routes.tsx @@ -0,0 +1,39 @@ +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { RpcGetAddresses } from '@app/pages/rpc-get-addresses/rpc-get-addresses'; +import { rpcSendTransferRoutes } from '@app/pages/rpc-send-transfer/rpc-send-transfer.routes'; +import { RpcSignPsbt } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt'; +import { AccountGate } from '@app/routes/account-gate'; + +export const rpcRequestRoutes = ( + <> + + + + } + /> + {rpcSendTransferRoutes} + { + const { RpcSignBip322MessageRoute } = await import( + '@app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message' + ); + return { Component: RpcSignBip322MessageRoute }; + }} + /> + + + + } + /> + +); diff --git a/src/app/routes/settings-routes.tsx b/src/app/routes/settings-routes.tsx new file mode 100644 index 00000000000..a4d69e69c1d --- /dev/null +++ b/src/app/routes/settings-routes.tsx @@ -0,0 +1,15 @@ +import { Route } from 'react-router-dom'; + +import { RouteUrls } from '@shared/route-urls'; + +import { ThemesDrawer } from '@app/features/theme-drawer/theme-drawer'; +import { SelectNetwork } from '@app/pages/select-network/select-network'; +import { SignOutConfirmDrawer } from '@app/pages/sign-out-confirm/sign-out-confirm'; + +export const settingsRoutes = ( + + } /> + } /> + } /> + +); diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index 266fe6478c7..5887de98e79 100644 --- a/src/shared/route-urls.ts +++ b/src/shared/route-urls.ts @@ -23,22 +23,27 @@ export enum RouteUrls { // Active wallet routes Home = '/', - Activity = '/activity', + // Tab nested relative paths + Activity = 'activity', + // Active wallet routes AddNetwork = '/add-network', ChooseAccount = '/choose-account', Fund = '/fund', + // TODO investigate deprecating fund routes FundReceive = '/fund/receive', FundReceiveStx = '/fund/receive/stx', FundReceiveBtc = '/fund/receive/btc', IncreaseStxFee = '/increase-fee/stx', IncreaseBtcFee = '/increase-fee/btc', IncreaseFeeSent = '/increase-fee/sent', - Receive = '/receive', - ReceiveCollectible = '/receive/collectible', - ReceiveCollectibleOrdinal = '/receive/collectible/ordinal', - ReceiveStx = '/receive/stx', - ReceiveBtc = '/receive/btc', - ReceiveBtcStamp = '/receive/btc-stamp', + // 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', + ReceiveCollectible = 'collectible', + ReceiveCollectibleOrdinal = 'collectible/ordinal', Send = '/send-transaction', ViewSecretKey = '/view-secret-key', @@ -55,7 +60,7 @@ export enum RouteUrls { EditNonce = 'edit-nonce', SelectNetwork = 'choose-network', SignOutConfirm = 'sign-out', - RetriveTaprootFunds = 'retrive-taproot-funds', + RetrieveTaprootFunds = 'retrieve-taproot-funds', // Send crypto asset routes SendCryptoAsset = '/send', @@ -76,12 +81,12 @@ export enum RouteUrls { SentBrc20Summary = '/send/brc20/:ticker/summary', // Send ordinal inscriptions - SendOrdinalInscription = '/send/ordinal-inscription', - SendOrdinalInscriptionChooseFee = '/send/ordinal-inscription/choose-fee', - SendOrdinalInscriptionReview = '/send/ordinal-inscription/review', - SendOrdinalInscriptionSummary = '/send/ordinal-inscription/', - SendOrdinalInscriptionSent = '/send/ordinal-inscription/sent', - SendOrdinalInscriptionError = '/send/ordinal-inscription/error', + SendOrdinalInscription = 'send/ordinal-inscription', + SendOrdinalInscriptionChooseFee = 'send/ordinal-inscription/choose-fee', + SendOrdinalInscriptionReview = 'send/ordinal-inscription/review', + SendOrdinalInscriptionSummary = 'send/ordinal-inscription/', + SendOrdinalInscriptionSent = 'send/ordinal-inscription/sent', + SendOrdinalInscriptionError = 'send/ordinal-inscription/error', // Swap routes Swap = '/swap', From d4186ec85c1d6f57d004e69f013c4e4a9536f7a7 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 9 Oct 2023 15:19:09 +0100 Subject: [PATCH 02/17] fix: close original recieve modal before opening qr code modal to prevent double modal --- .../hooks/use-background-location-redirect.ts | 42 ++++++------- .../features/collectibles/collectibles.tsx | 2 +- .../components/receive-tokens.layout.tsx | 4 +- src/app/pages/receive/receive-btc.tsx | 9 ++- src/app/pages/receive/receive-modal.tsx | 51 +++++++--------- src/app/pages/receive/receive-ordinal.tsx | 4 +- src/app/pages/receive/receive-stx.tsx | 11 ++-- src/app/routes/app-routes.tsx | 4 +- src/app/routes/legacy-request-routes.tsx | 61 ------------------- src/shared/route-urls.ts | 4 +- 10 files changed, 59 insertions(+), 133 deletions(-) delete mode 100644 src/app/routes/legacy-request-routes.tsx diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts index 1b45a71aa59..cde2ebadd93 100644 --- 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 index ef07e977204..0dcbac128b0 100644 --- a/src/app/features/collectibles/collectibles.tsx +++ b/src/app/features/collectibles/collectibles.tsx @@ -31,7 +31,7 @@ export function Collectibles() { subHeader={whenWallet({ software: ( 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 index 2a740109e12..9416da4e5ec 100644 --- 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 index 5ed7a60fef9..6822fe2bf28 100644 --- a/src/app/pages/receive/receive-btc.tsx +++ b/src/app/pages/receive/receive-btc.tsx @@ -1,4 +1,3 @@ -import { useCallback } from 'react'; import toast from 'react-hot-toast'; import { useLocation } from 'react-router-dom'; @@ -6,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/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 ( ('backgroundLocation'); const navigate = useNavigate(); + const location = useLocation(); 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); @@ -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,11 +94,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { icon={} dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyBtc)} - onClickQrCode={() => - navigate(RouteUrls.ReceiveBtc, { - state: { backgroundLocation }, - }) - } + onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveBtc)} title="Bitcoin" /> } dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyStx)} - onClickQrCode={() => - navigate(RouteUrls.ReceiveStx, { - relative: 'route', - state: { backgroundLocation }, - }) - } + onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveStx)} title="Stacks" /> @@ -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={} 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={} 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 index 423623e9037..3cdab705477 100644 --- 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 index ed234005dca..36f097c5224 100644 --- 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 index a39b82fa74b..1298ff6b26b 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -70,7 +70,7 @@ function useAppRoutes() { } > - {/* Need to declare this here so settings fire on activity */} + {/* #4028: Needed so settings modals open on /activity */} }> {settingsRoutes} @@ -85,7 +85,7 @@ function useAppRoutes() { {requestBitcoinKeysRoutes} {requestStacksKeysRoutes} - } /> + } /> }> {ledgerStacksTxSigningRoutes} diff --git a/src/app/routes/legacy-request-routes.tsx b/src/app/routes/legacy-request-routes.tsx deleted file mode 100644 index 834ffc3f11e..00000000000 --- a/src/app/routes/legacy-request-routes.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// https://gist.github.com/Azayzel/6438e3c5b2d16381ced14fe0da78c123 -// investigaste moving to an object config to clean this up. Also possibly using lazy load (maybe not now) -// https://www.youtube.com/watch?v=YF9L6PUAMWk -// https://www.ryanjyost.com/react-routing/ -import { Route } from 'react-router-dom'; - -import { RouteUrls } from '@shared/route-urls'; - -import { ReceiveBtcModal } from '@app/pages/receive/receive-btc'; -import { ReceiveModal } from '@app/pages/receive/receive-modal'; -import { ReceiveOrdinalModal } from '@app/pages/receive/receive-ordinal'; -import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; - -export function ReceiveRoutes() { - return ( - - }> - } /> - } /> - {/* Needed to show receive ordinal in Receive flow */} - } /> - - - {/* Needed to show receive ordinal in Add flow */} - } - /> - } /> - - ); -} - -export const receiveRoutesArray = [ - { - path: RouteUrls.Receive, - element: , - routes: [ - { - path: RouteUrls.ReceiveStx, - element: , - }, - { - path: RouteUrls.ReceiveCollectibleOrdinal, - element: , - }, - { - path: RouteUrls.ReceiveBtc, - element: , - }, - ], - }, - { - path: `${RouteUrls.Receive}/${RouteUrls.ReceiveCollectible}`, - element: , - }, - { - path: RouteUrls.ReceiveCollectibleOrdinal, - element: , - }, -]; diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index 5887de98e79..c5e5ddba867 100644 --- 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', From 45cc5490e4eaea2b00fd63cf9fdf125f462568fd Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Tue, 10 Oct 2023 12:03:52 +0100 Subject: [PATCH 03/17] fix: use independant route for FundReceiveStx --- src/app/pages/fund/components/fiat-providers-list.tsx | 10 ++++++++-- .../pages/receive/components/receive-tokens.layout.tsx | 8 ++------ src/app/pages/select-network/select-network.tsx | 2 +- src/app/pages/sign-out-confirm/sign-out-confirm.tsx | 2 +- src/app/routes/app-routes.tsx | 4 +++- 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/app/pages/fund/components/fiat-providers-list.tsx b/src/app/pages/fund/components/fiat-providers-list.tsx index 362d388f71a..2f33e24f17f 100644 --- a/src/app/pages/fund/components/fiat-providers-list.tsx +++ b/src/app/pages/fund/components/fiat-providers-list.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { Grid } from 'leather-styles/jsx'; @@ -25,6 +25,8 @@ export function FiatProvidersList(props: FiatProvidersProps) { const activeProviders = useActiveFiatProviders(); 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 }); @@ -52,7 +54,11 @@ export function FiatProvidersList(props: FiatProvidersProps) { width="100%" maxWidth={['100%', '80rem']} > - navigate(RouteUrls.FundReceiveStx)} /> + + navigate(RouteUrls.FundReceiveStx, { state: { backgroundLocation: location } }) + } + /> {Object.entries(activeProviders).map(([providerKey, providerValue]) => { const providerUrl = getProviderUrl({ address, diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index 9416da4e5ec..bc300d631ef 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -1,4 +1,4 @@ -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; @@ -26,11 +26,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { const backgroundLocation = useLocationState('backgroundLocation'); return ( - navigate(backgroundLocation.pathname ?? '..')} - > + navigate(backgroundLocation ?? '..')}> {warning && warning} diff --git a/src/app/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index fb9497a07d8..48ee61c9fc2 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -40,7 +40,7 @@ export function SelectNetwork() { } function closeNetworkModal() { - navigate(backgroundLocation.pathname ?? '..'); + navigate(backgroundLocation ?? '..'); } 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 c8653da60e9..389d419004b 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx @@ -18,7 +18,7 @@ export function SignOutConfirmDrawer() { navigate(RouteUrls.Onboarding); void signOut(); }} - onUserSafelyReturnToHomepage={() => navigate(backgroundLocation.pathname ?? '..')} + onUserSafelyReturnToHomepage={() => navigate(backgroundLocation ?? '..')} /> ); } diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 1298ff6b26b..3555afd27b0 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -31,6 +31,7 @@ import { AllowDiagnosticsModal } from '@app/pages/onboarding/allow-diagnostics/a import { BackUpSecretKeyPage } from '@app/pages/onboarding/back-up-secret-key/back-up-secret-key'; import { SignIn } from '@app/pages/onboarding/sign-in/sign-in'; import { WelcomePage } from '@app/pages/onboarding/welcome/welcome'; +import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; import { RequestError } from '@app/pages/request-error/request-error'; import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction/rpc-sign-stacks-transaction'; import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error'; @@ -172,7 +173,8 @@ function useAppRoutes() { } > - {receiveRoutes} + {/* FundReceiveStx is opened independantly so Recieve doesn't open behind */} + } /> {settingsRoutes} From 972608c40479de331361f2c822cd8b7226bca314 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Tue, 10 Oct 2023 12:06:50 +0100 Subject: [PATCH 04/17] chore: deprecate unused routes --- src/shared/route-urls.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index c5e5ddba867..62f0bf0a43c 100644 --- a/src/shared/route-urls.ts +++ b/src/shared/route-urls.ts @@ -29,9 +29,7 @@ export enum RouteUrls { AddNetwork = '/add-network', ChooseAccount = '/choose-account', Fund = '/fund', - FundReceive = '/fund/receive', FundReceiveStx = '/fund/receive/stx', - FundReceiveBtc = '/fund/receive/btc', IncreaseStxFee = '/increase-fee/stx', IncreaseBtcFee = '/increase-fee/btc', IncreaseFeeSent = '/increase-fee/sent', From 706620270709117723cba9ded4ab3a2e86d6e3ca Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 11 Oct 2023 08:34:42 +0100 Subject: [PATCH 05/17] wip: debug ledger tests --- src/app/pages/receive/receive-modal.tsx | 11 +++++++++-- .../accounts/blockchain/bitcoin/bitcoin.hooks.ts | 5 +++-- src/shared/crypto/bitcoin/bitcoin.utils.ts | 2 +- tests/page-object-models/home.page.ts | 6 +++++- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index abbc801833b..543a6060a51 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -55,7 +55,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { function navigateToQrCodeRoute(route: RouteUrls) { setIsShowing(false); navigate(route, { - state: { backgroundLocation }, + state: { backgroundLocation, ...location.state }, }); } @@ -102,7 +102,14 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { icon={} dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyStx)} - onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveStx)} + onClickQrCode={ + () => + navigate(RouteUrls.ReceiveStx, { + relative: 'route', + state: { backgroundLocation, btcAddressTaproot }, + }) + // navigate(RouteUrls.ReceiveStx) + } title="Stacks" /> diff --git a/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts b/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts index 9c7e4e0c3f5..ffec6745611 100644 --- a/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts +++ b/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts @@ -19,12 +19,13 @@ export function useZeroIndexTaprootAddress(accIndex?: number) { const network = useCurrentNetwork(); const currentAccountIndex = useCurrentAccountIndex(); const account = useTaprootAccount(accIndex ?? currentAccountIndex); + // THIS ERROR BEING THROWN WHEN VIEWING STACKS ADDRESS IN LEDGER MODE - if (!account) throw new Error('Expected keychain to be provided'); + // if (!account) throw new Error('Expected keychain to be provided'); const address = getTaprootAddress({ index: 0, - keychain: account.keychain, + keychain: account?.keychain, network: network.chain.bitcoin.network, }); diff --git a/src/shared/crypto/bitcoin/bitcoin.utils.ts b/src/shared/crypto/bitcoin/bitcoin.utils.ts index 4cb2705f81e..b5e1b4bde6e 100644 --- a/src/shared/crypto/bitcoin/bitcoin.utils.ts +++ b/src/shared/crypto/bitcoin/bitcoin.utils.ts @@ -207,7 +207,7 @@ interface GetTaprootAddressArgs { network: BitcoinNetworkModes; } export function getTaprootAddress({ index, keychain, network }: GetTaprootAddressArgs) { - if (!keychain) throw new Error('Expected keychain to be provided'); + if (!keychain) throw new Error('Expected dddkeychain to be provided'); if (keychain.depth !== DerivationPathDepth.Account) throw new Error('Expects keychain to be on the account index'); diff --git a/tests/page-object-models/home.page.ts b/tests/page-object-models/home.page.ts index b7d22ea65c0..e2ec3ce724d 100644 --- a/tests/page-object-models/home.page.ts +++ b/tests/page-object-models/home.page.ts @@ -56,6 +56,7 @@ export class HomePage { } async goToReceiveModal() { + PETE check this await this.page.getByTestId(HomePageSelectors.ReceiveCryptoAssetBtn).click(); } @@ -89,7 +90,10 @@ export class HomePage { await this.goToReceiveModal(); // In Ledger mode, this element isn't visible, so clicking is conditional const qrCodeBtn = this.page.getByTestId(HomePageSelectors.ReceiveStxQrCodeBtn); - if (await qrCodeBtn.isVisible()) await qrCodeBtn.click(); + debugger; + + // THIS seems to run no matter whattttttt! maybe its goToReceiveModal crashing + if (false) await qrCodeBtn.click(); const displayerAddress = await this.page .getByTestId(SharedComponentsSelectors.AddressDisplayer) .innerText(); From 8514c5a5e7e2e27c197f27e1fecb5ece1f102abf Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Thu, 12 Oct 2023 09:51:14 +0100 Subject: [PATCH 06/17] fix: allow direct access to /receive/stx --- src/app/routes/app-routes.tsx | 20 ++++++++++++++++++++ src/shared/crypto/bitcoin/bitcoin.utils.ts | 2 +- tests/page-object-models/home.page.ts | 5 +---- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 3555afd27b0..476428c244c 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -63,6 +63,26 @@ function useAppRoutes() { return createHashRouter( createRoutesFromElements( }> + {/* +// going direct to /receive/stx doesn't work and thats what happens in Ledger mode +Adding this here makes it work going direct but then the BG isn't right +Review nesting of recieve as using these relative paths is stopping direct access + +BUT we need to have relative paths from '/' if we want to overlay the modal + +Direct access to ALL links actually doesn't work. Only through click! + +FFS - /change-theme even doesn't work when pasted in. +Need to catch all these routes and set a BG location. +This will probably help fix things in new tabs also + +The way it is now is shit as typing in URLs stops working + +*/} + } + /> Date: Thu, 12 Oct 2023 11:15:00 +0100 Subject: [PATCH 07/17] fix: get build passing --- .../hooks/use-background-location-redirect.ts | 43 ++++++++++--------- .../components/receive-tokens.layout.tsx | 2 +- src/app/routes/rpc-routes.tsx | 9 ++++ 3 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts index cde2ebadd93..2bc888020ae 100644 --- 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,22 @@ 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'); +// ts-unused-exports:disable-next-line +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/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index bc300d631ef..6c3bb80991d 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -1,4 +1,4 @@ -import { useLocation, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; diff --git a/src/app/routes/rpc-routes.tsx b/src/app/routes/rpc-routes.tsx index 9b0b2aeb9d6..8f8387cebf7 100644 --- a/src/app/routes/rpc-routes.tsx +++ b/src/app/routes/rpc-routes.tsx @@ -5,6 +5,7 @@ import { RouteUrls } from '@shared/route-urls'; import { RpcGetAddresses } from '@app/pages/rpc-get-addresses/rpc-get-addresses'; import { rpcSendTransferRoutes } from '@app/pages/rpc-send-transfer/rpc-send-transfer.routes'; import { RpcSignPsbt } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt'; +import { RpcSignPsbtSummary } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt-summary'; import { AccountGate } from '@app/routes/account-gate'; export const rpcRequestRoutes = ( @@ -35,5 +36,13 @@ export const rpcRequestRoutes = ( } /> + + + + } + /> ); From 65e396dae26d11a715d9090930fae081f60de75c Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Thu, 12 Oct 2023 11:32:26 +0100 Subject: [PATCH 08/17] fix: clean code --- .../hooks/use-background-location-redirect.ts | 10 ---------- src/app/pages/fund/fund.tsx | 1 - src/app/routes/app-routes.tsx | 16 ---------------- src/app/routes/request-routes.tsx | 1 - .../accounts/blockchain/bitcoin/bitcoin.hooks.ts | 5 ++--- tests/page-object-models/home.page.ts | 1 - 6 files changed, 2 insertions(+), 32 deletions(-) diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts index 2bc888020ae..344f56b3ff1 100644 --- a/src/app/common/hooks/use-background-location-redirect.ts +++ b/src/app/common/hooks/use-background-location-redirect.ts @@ -4,16 +4,6 @@ import { useLocation, useNavigate } from 'react-router-dom'; // 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 -*/ - // ts-unused-exports:disable-next-line export function useBackgroundLocationRedirect() { const { pathname, state } = useLocation(); diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index 2539d621af1..a5f2de80bf0 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -12,7 +12,6 @@ import { FundLayout } from './fund.layout'; export function FundPage() { const navigate = useNavigate(); - const currentAccount = useCurrentStacksAccount(); const { data: balances } = useCurrentStacksAccountAnchoredBalances(); diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 476428c244c..45a46b523b2 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -63,22 +63,6 @@ function useAppRoutes() { return createHashRouter( createRoutesFromElements( }> - {/* -// going direct to /receive/stx doesn't work and thats what happens in Ledger mode -Adding this here makes it work going direct but then the BG isn't right -Review nesting of recieve as using these relative paths is stopping direct access - -BUT we need to have relative paths from '/' if we want to overlay the modal - -Direct access to ALL links actually doesn't work. Only through click! - -FFS - /change-theme even doesn't work when pasted in. -Need to catch all these routes and set a BG location. -This will probably help fix things in new tabs also - -The way it is now is shit as typing in URLs stops working - -*/} } diff --git a/src/app/routes/request-routes.tsx b/src/app/routes/request-routes.tsx index c8dd964ecd9..9f4cbeccdbc 100644 --- a/src/app/routes/request-routes.tsx +++ b/src/app/routes/request-routes.tsx @@ -14,7 +14,6 @@ import { ProfileUpdateRequest } from '@app/pages/update-profile-request/update-p import { AccountGate } from '@app/routes/account-gate'; import { SuspenseLoadingSpinner } from '@app/routes/app-routes'; -// #4028: TODO These are labelled legacy, maybe we can just remove them? export const legacyRequestRoutes = ( <> Date: Thu, 12 Oct 2023 14:15:18 +0200 Subject: [PATCH 09/17] chore: explore routing issues --- .../features/activity-list/activity-list.tsx | 2 ++ src/app/pages/home/home.tsx | 22 ++---------- src/app/routes/app-routes.tsx | 35 ++++++++++--------- 3 files changed, 24 insertions(+), 35 deletions(-) diff --git a/src/app/features/activity-list/activity-list.tsx b/src/app/features/activity-list/activity-list.tsx index 39901c29d22..46d8f62b865 100644 --- a/src/app/features/activity-list/activity-list.tsx +++ b/src/app/features/activity-list/activity-list.tsx @@ -100,6 +100,7 @@ export function ActivityList() { return ( + ); @@ -107,6 +108,7 @@ export function ActivityList() { return ( + ); diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 8644ed8a4c7..8e87af4ed27 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -1,16 +1,13 @@ -import { Navigate, Route, useNavigate } from 'react-router-dom'; -import { Outlet, Routes, useLocation } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; +import { Outlet } 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 { CurrentAccount } from './components/account-area'; @@ -21,8 +18,6 @@ export function Home() { const { decodedAuthRequest } = useOnboardingState(); const navigate = useNavigate(); - const location = useLocation(); - const backgroundLocation = useLocationState('backgroundLocation'); useTrackFirstDeposit(); @@ -40,18 +35,7 @@ export function Home() { return ( }> - <> - {/* - To overlay modal on nested routes backgroundLocation is used - to trick the router into thinking its on the same page - */} - - } /> - } /> - } /> - - {backgroundLocation && } - + ); diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 45a46b523b2..6b043419726 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -12,6 +12,7 @@ import { RouteUrls } from '@shared/route-urls'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { ActivityList } from '@app/features/activity-list/activity-list'; import { AddNetwork } from '@app/features/add-network/add-network'; +import { AssetsList } from '@app/features/asset-list/asset-list'; import { Container } from '@app/features/container/container'; import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer'; import { IncreaseBtcFeeDrawer } from '@app/features/increase-fee-drawer/increase-btc-fee-drawer'; @@ -59,37 +60,38 @@ export function AppRoutes() { return ; } +const homePageModalRoutes = ( + <> + {settingsRoutes} + {receiveRoutes} + {ledgerStacksTxSigningRoutes} + {sendOrdinalRoutes} + {requestBitcoinKeysRoutes} + {requestStacksKeysRoutes} + +); + function useAppRoutes() { return createHashRouter( createRoutesFromElements( }> } - /> - } > - {/* #4028: Needed so settings modals open on /activity */} - }> - {settingsRoutes} + }> + {homePageModalRoutes} - {/* Modal routes overlaid on home need to be nested here - with relative paths to open in new tabs */} - {receiveRoutes} - {settingsRoutes} - {ledgerStacksTxSigningRoutes} - {sendOrdinalRoutes} + }> + {homePageModalRoutes} + - {requestBitcoinKeysRoutes} - {requestStacksKeysRoutes} } /> }> {ledgerStacksTxSigningRoutes} @@ -235,6 +237,7 @@ function useAppRoutes() { {swapRoutes} {/* Catch-all route redirects to onboarding */} + } /> ) From 3bd16ce48e9fad47bfe4cb9acfaa0ba7490a8e35 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:00:17 +0100 Subject: [PATCH 10/17] fix: re-introduce bg location for hometabs so modals overlay on top of activity --- src/app/pages/home/home.tsx | 27 ++++++++++++++++++++++++--- src/app/routes/app-routes.tsx | 14 +++----------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 8e87af4ed27..3df6296d4f1 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -1,14 +1,18 @@ -import { useNavigate } from 'react-router-dom'; -import { Outlet } from 'react-router-dom'; +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 { CurrentAccount } from './components/account-area'; import { HomeTabs } from './components/home-tabs'; @@ -17,6 +21,8 @@ import { HomeLayout } from './components/home.layout'; export function Home() { const { decodedAuthRequest } = useOnboardingState(); + const location = useLocation(); + const backgroundLocation = useLocationState('backgroundLocation'); const navigate = useNavigate(); useTrackFirstDeposit(); @@ -35,7 +41,22 @@ 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 && } + ); diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 6b043419726..7c821bdc43e 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -10,9 +10,7 @@ import { import { RouteUrls } from '@shared/route-urls'; import { LoadingSpinner } from '@app/components/loading-spinner'; -import { ActivityList } from '@app/features/activity-list/activity-list'; import { AddNetwork } from '@app/features/add-network/add-network'; -import { AssetsList } from '@app/features/asset-list/asset-list'; import { Container } from '@app/features/container/container'; import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer'; import { IncreaseBtcFeeDrawer } from '@app/features/increase-fee-drawer/increase-btc-fee-drawer'; @@ -60,7 +58,7 @@ export function AppRoutes() { return ; } -const homePageModalRoutes = ( +export const homePageModalRoutes = ( <> {settingsRoutes} {receiveRoutes} @@ -76,20 +74,14 @@ function useAppRoutes() { createRoutesFromElements( }> } > - }> - {homePageModalRoutes} - - - }> - {homePageModalRoutes} - + {homePageModalRoutes} } /> From 8efbcfffc488065ac82153dea2c46cb2f46c27cb Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:19:25 +0100 Subject: [PATCH 11/17] fix: do not nest recieve sub routes to prevent double overlay of modal and maintain direct access --- .../components/add-collectible.tsx | 2 +- src/app/pages/receive/receive-modal.tsx | 44 ++++++++----------- src/app/routes/receive-routes.tsx | 19 ++++---- src/shared/route-urls.ts | 10 ++--- 4 files changed, 33 insertions(+), 42 deletions(-) diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx index 85f87d6f3a6..948173ad42e 100644 --- a/src/app/features/collectibles/components/add-collectible.tsx +++ b/src/app/features/collectibles/components/add-collectible.tsx @@ -33,7 +33,7 @@ export function AddCollectible() { backgroundElementProps={backgroundProps} onClickLayout={() => { void analytics.track('select_add_new_collectible'); - navigate(`${RouteUrls.Receive}/${RouteUrls.ReceiveCollectible}`, { + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveCollectible}`, { state: { backgroundLocation: location, }, diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 543a6060a51..6195040f703 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import toast from 'react-hot-toast'; import { Outlet, useLocation, useNavigate } from 'react-router-dom'; @@ -11,6 +10,7 @@ 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,6 +31,7 @@ interface ReceiveModalProps { } export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { + // useBackgroundLocationRedirect(); const analytics = useAnalytics(); const backgroundLocation = useLocationState('backgroundLocation'); const navigate = useNavigate(); @@ -50,15 +51,6 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { copyHandler(); } - const [isShowing, setIsShowing] = useState(true); - - function navigateToQrCodeRoute(route: RouteUrls) { - setIsShowing(false); - navigate(route, { - state: { backgroundLocation, ...location.state }, - }); - } - const title = type === 'full' ? ( <> @@ -81,7 +73,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { top={[token('spacing.space.07'), 0]} title="" isShowing - onClose={() => navigate(backgroundLocation.pathname ?? '..')} + onClose={() => navigate(backgroundLocation ?? '..')} > @@ -94,7 +86,11 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { icon={} dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyBtc)} - onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveBtc)} + onClickQrCode={() => + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtc}`, { + state: { backgroundLocation, ...location.state }, + }) + } title="Bitcoin" /> } dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} onCopyAddress={() => copyToClipboard(onCopyStx)} - onClickQrCode={ - () => - navigate(RouteUrls.ReceiveStx, { - relative: 'route', - state: { backgroundLocation, btcAddressTaproot }, - }) - // navigate(RouteUrls.ReceiveStx) + onClickQrCode={() => + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { + state: { backgroundLocation, btcAddressTaproot }, + }) } title="Stacks" /> @@ -124,8 +117,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { } onClickQrCode={() => { void analytics.track('select_inscription_to_add_new_collectible'); - setIsShowing(false); - navigate(`/${RouteUrls.Receive}/${RouteUrls.ReceiveCollectibleOrdinal}`, { + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveCollectibleOrdinal}`, { state: { btcAddressTaproot, backgroundLocation, @@ -138,9 +130,9 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { address={btcAddressNativeSegwit} icon={} onClickQrCode={() => - navigateToQrCodeRoute( - `/${RouteUrls.Receive}/${RouteUrls.ReceiveBtcStamp}` as RouteUrls - ) + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtcStamp}`, { + state: { backgroundLocation, ...location.state }, + }) } onCopyAddress={() => copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible') @@ -152,7 +144,9 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { icon={} onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} onClickQrCode={() => - navigateToQrCodeRoute(`/${RouteUrls.Receive}/${RouteUrls.ReceiveStx}` as RouteUrls) + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { + state: { backgroundLocation, ...location.state }, + }) } title="Stacks NFT" /> diff --git a/src/app/routes/receive-routes.tsx b/src/app/routes/receive-routes.tsx index 47d56cc4d62..4b3ad22de6b 100644 --- a/src/app/routes/receive-routes.tsx +++ b/src/app/routes/receive-routes.tsx @@ -9,19 +9,16 @@ import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; export const receiveRoutes = ( - }> - } /> - } /> - } /> - {/* Needed to show receive ordinal in Receive flow */} - } /> - + } /> + } /> + } /> + } /> + {/* Needed to show receive ordinal in Receive flow */} + + } /> {/* Needed to show receive ordinal in Add flow */} - } - /> + } /> } /> ); diff --git a/src/shared/route-urls.ts b/src/shared/route-urls.ts index 62f0bf0a43c..d71dc485eb3 100644 --- a/src/shared/route-urls.ts +++ b/src/shared/route-urls.ts @@ -35,11 +35,11 @@ export enum RouteUrls { IncreaseFeeSent = '/increase-fee/sent', // nested routes must have relative paths Receive = 'receive', - ReceiveStx = 'stx', - ReceiveBtc = 'btc', - ReceiveBtcStamp = 'btc-stamp', - ReceiveCollectible = 'collectible', - ReceiveCollectibleOrdinal = 'collectible/ordinal', + ReceiveStx = 'receive/stx', + ReceiveBtc = 'receive/btc', + ReceiveBtcStamp = 'receive/btc-stamp', + ReceiveCollectible = 'receive/collectible', + ReceiveCollectibleOrdinal = 'receive/collectible/ordinal', Send = '/send-transaction', ViewSecretKey = '/view-secret-key', From a269dcdc81b65802830d05f5220ca4292ef29fbc Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 10:21:03 +0100 Subject: [PATCH 12/17] fix: enable bg redirect to overlay modal in new tab --- .../hooks/use-background-location-redirect.ts | 18 +++++++++--------- .../settings-dropdown/settings-dropdown.tsx | 3 --- src/app/features/theme-drawer/theme-drawer.tsx | 2 ++ .../components/receive-tokens.layout.tsx | 4 ++-- src/app/pages/receive/receive-btc.tsx | 4 ++-- src/app/pages/receive/receive-modal.tsx | 4 ++-- src/app/pages/receive/receive-ordinal.tsx | 4 ++-- src/app/pages/receive/receive-stx.tsx | 4 ++-- .../pages/select-network/select-network.tsx | 2 ++ .../sign-out-confirm/sign-out-confirm.tsx | 2 ++ 10 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/app/common/hooks/use-background-location-redirect.ts b/src/app/common/hooks/use-background-location-redirect.ts index 344f56b3ff1..0134fbf78de 100644 --- a/src/app/common/hooks/use-background-location-redirect.ts +++ b/src/app/common/hooks/use-background-location-redirect.ts @@ -1,24 +1,24 @@ 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'; -// ts-unused-exports:disable-next-line +// 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() { 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 }, - // }); - // } + 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 4cc1ce65c83..5fc3f5b17a3 100644 --- a/src/app/features/settings-dropdown/settings-dropdown.tsx +++ b/src/app/features/settings-dropdown/settings-dropdown.tsx @@ -79,7 +79,6 @@ export function SettingsDropdown() { onClick={wrappedCloseCallback(() => { void analytics.track('click_change_theme_menu_item'); navigate(RouteUrls.ChangeTheme, { - relative: 'path', state: { backgroundLocation: location }, }); })} @@ -132,7 +131,6 @@ export function SettingsDropdown() { onClick={wrappedCloseCallback(() => { void analytics.track('click_change_network_menu_item'); navigate(RouteUrls.SelectNetwork, { - relative: 'path', state: { backgroundLocation: location }, }); })} @@ -166,7 +164,6 @@ export function SettingsDropdown() { color={color('feedback-error')} onClick={wrappedCloseCallback(() => navigate(RouteUrls.SignOutConfirm, { - relative: 'path', state: { backgroundLocation: location }, }) )} diff --git a/src/app/features/theme-drawer/theme-drawer.tsx b/src/app/features/theme-drawer/theme-drawer.tsx index f8c2ebd5f41..89660c7a005 100644 --- a/src/app/features/theme-drawer/theme-drawer.tsx +++ b/src/app/features/theme-drawer/theme-drawer.tsx @@ -1,11 +1,13 @@ 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'; 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 6c3bb80991d..7c5d774197d 100644 --- 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 index 6822fe2bf28..002fba70e7e 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/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'; @@ -16,7 +16,7 @@ interface ReceiveBtcModalType { } export function ReceiveBtcModal({ type = 'btc' }: ReceiveBtcModalType) { - // useBackgroundLocationRedirect(); + useBackgroundLocationRedirect(); const analytics = useAnalytics(); const { state } = useLocation(); diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 6195040f703..68e7e98c473 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -10,7 +10,7 @@ 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 { 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,7 +31,7 @@ interface ReceiveModalProps { } export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { - // useBackgroundLocationRedirect(); + useBackgroundLocationRedirect(); const analytics = useAnalytics(); const backgroundLocation = useLocationState('backgroundLocation'); const navigate = useNavigate(); diff --git a/src/app/pages/receive/receive-ordinal.tsx b/src/app/pages/receive/receive-ordinal.tsx index 3cdab705477..423623e9037 100644 --- 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 index 36f097c5224..b5bce6c2624 100644 --- a/src/app/pages/receive/receive-stx.tsx +++ b/src/app/pages/receive/receive-stx.tsx @@ -4,13 +4,13 @@ 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 ?? ''); diff --git a/src/app/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index 48ee61c9fc2..be33cf095b1 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -4,6 +4,7 @@ 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'; @@ -16,6 +17,7 @@ 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(); 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 389d419004b..7f8c8985f72 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.tsx @@ -2,12 +2,14 @@ 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'); From 0d7b3687b44e58decb805022bc33843523ec52b2 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 11:41:43 +0100 Subject: [PATCH 13/17] fix: update path to receive stx to fix test --- src/app/pages/home/components/account-actions.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/home/components/account-actions.tsx b/src/app/pages/home/components/account-actions.tsx index 68b95eafac8..04ab3120e9f 100644 --- a/src/app/pages/home/components/account-actions.tsx +++ b/src/app/pages/home/components/account-actions.tsx @@ -20,7 +20,7 @@ export function AccountActions(props: FlexProps) { const isBitcoinEnabled = useConfigBitcoinEnabled(); const receivePath = isBitcoinEnabled ? RouteUrls.Receive - : `${RouteUrls.Receive}/${RouteUrls.ReceiveStx}`; + : `${RouteUrls.Home}${RouteUrls.ReceiveStx}`; return ( From 69a06e90d0d69e08b4eae01d9c23958ed5fd4896 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 12:16:54 +0100 Subject: [PATCH 14/17] fix: use bg location to open in new tab. share modal bg logic --- .../settings-dropdown/settings-dropdown.tsx | 8 ++++++ .../features/theme-drawer/theme-drawer.tsx | 2 +- .../fund/components/fiat-providers-list.tsx | 5 ++-- src/app/pages/fund/fund.tsx | 14 ++++++++-- src/app/pages/home/home.tsx | 27 ++++++------------- .../components/receive-tokens.layout.tsx | 2 +- src/app/pages/receive/receive-btc.tsx | 2 +- src/app/pages/receive/receive-modal.tsx | 3 ++- src/app/pages/receive/receive-ordinal.tsx | 2 +- src/app/pages/receive/receive-stx.tsx | 2 +- .../pages/select-network/select-network.tsx | 2 +- .../sign-out-confirm/sign-out-confirm.tsx | 2 +- src/app/routes/app-routes.tsx | 6 ++--- .../components/modal-background-wrapper.tsx | 26 ++++++++++++++++++ .../hooks/use-background-location-redirect.ts | 6 ++--- src/shared/route-urls.ts | 10 +++---- 16 files changed, 76 insertions(+), 43 deletions(-) create mode 100644 src/app/routes/components/modal-background-wrapper.tsx rename src/app/{common => routes}/hooks/use-background-location-redirect.ts (77%) 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 68e7e98c473..8b94c4cbdc7 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -10,13 +10,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'; @@ -88,6 +88,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', From 82a558458ec68b5abd648194a8e075777b3e5d07 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 12:49:12 +0100 Subject: [PATCH 15/17] fix: pass child routes as children to appease dep cruiser --- src/app/pages/fund/fund.tsx | 14 ++++++-------- src/app/routes/app-routes.tsx | 5 ++++- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index 2d54c35583a..4075b89eb67 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -1,20 +1,21 @@ -import { Route, useNavigate } from 'react-router-dom'; +import { 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() { +interface FundPageProps { + children: React.ReactNode; +} +export function FundPage({ children }: FundPageProps) { useBackgroundLocationRedirect(RouteUrls.Fund); const navigate = useNavigate(); const currentAccount = useCurrentStacksAccount(); @@ -27,10 +28,7 @@ export function FundPage() { <> <> - - } /> - {settingsRoutes} - + {children} ); diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 9327ff493db..47d677969d7 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -167,7 +167,10 @@ function useAppRoutes() { path={`${RouteUrls.Fund}/*`} element={ - + + } /> + {settingsRoutes} + } > From 341a6a6c0c0d33d277fad210e8668e62f029b498 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:05:20 +0100 Subject: [PATCH 16/17] fix: clean code, add note re ordinals modal --- .../features/settings-dropdown/settings-dropdown.tsx | 1 - src/app/pages/fund/fund.tsx | 4 +--- src/app/pages/receive/receive-modal.tsx | 10 +++------- src/app/pages/receive/receive-ordinal.tsx | 4 ++-- .../routes/hooks/use-background-location-redirect.ts | 7 +++++-- src/app/routes/receive-routes.tsx | 5 ----- 6 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx index 2d27eab08cf..1188917ce20 100644 --- a/src/app/features/settings-dropdown/settings-dropdown.tsx +++ b/src/app/features/settings-dropdown/settings-dropdown.tsx @@ -78,7 +78,6 @@ export function SettingsDropdown() { )} - {/* // more importantly I broke tests again for direct access to receive I think */} { diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index 4075b89eb67..066cd80ca6e 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -27,9 +27,7 @@ export function FundPage({ children }: FundPageProps) { return ( <> - <> - {children} - + {children} ); } diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 8b94c4cbdc7..79b1efa3e66 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -88,8 +88,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 }, + state: { backgroundLocation }, }) } title="Bitcoin" @@ -132,7 +131,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { icon={} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtcStamp}`, { - state: { backgroundLocation, ...location.state }, + state: { backgroundLocation }, }) } onCopyAddress={() => @@ -146,7 +145,7 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { - state: { backgroundLocation, ...location.state }, + state: { backgroundLocation }, }) } title="Stacks NFT" @@ -154,9 +153,6 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { - - {/* Outlet here for nested token routes */} - ); } diff --git a/src/app/pages/receive/receive-ordinal.tsx b/src/app/pages/receive/receive-ordinal.tsx index 4b236f1ba06..d485aa2bf94 100644 --- a/src/app/pages/receive/receive-ordinal.tsx +++ b/src/app/pages/receive/receive-ordinal.tsx @@ -13,14 +13,14 @@ export function ReceiveOrdinalModal() { useBackgroundLocationRedirect(); const analytics = useAnalytics(); const { state } = useLocation(); - const { onCopy } = useClipboard(state?.btcAddressTaproot); + const { onCopy } = useClipboard(state.btcAddressTaproot); function copyToClipboard() { void analytics.track('copy_address_to_add_new_inscription'); toast.success('Copied to clipboard!'); onCopy(); } - + // #4028 FIXME - this doesn't open in new tab as it loses btcAddressTaproot amd crashes btcStamp and Stx are OK? return ( } /> } /> } /> - {/* Needed to show receive ordinal in Receive flow */} - - } /> - - {/* Needed to show receive ordinal in Add flow */} } /> } /> From 630a5206390cf706d34e08e5207adc3531c8254d Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Fri, 13 Oct 2023 13:16:22 +0100 Subject: [PATCH 17/17] fix: clean code, add note re ordinals modal --- src/app/pages/receive/receive-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 79b1efa3e66..e6087c4941f 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -1,5 +1,5 @@ import toast from 'react-hot-toast'; -import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { useClipboard } from '@stacks/ui'; import { HomePageSelectors } from '@tests/selectors/home.selectors';