Skip to content

Commit

Permalink
fix: do not nest recieve sub routes to prevent double overlay of moda…
Browse files Browse the repository at this point in the history
…l and maintain direct access
  • Loading branch information
pete-watters committed Oct 16, 2023
1 parent 12571b0 commit 1477c96
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
44 changes: 19 additions & 25 deletions src/app/pages/receive/receive-modal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useState } from 'react';
import toast from 'react-hot-toast';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';

Expand All @@ -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';
Expand All @@ -31,6 +31,7 @@ interface ReceiveModalProps {
}

export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
// useBackgroundLocationRedirect();
const analytics = useAnalytics();
const backgroundLocation = useLocationState<Location>('backgroundLocation');
const navigate = useNavigate();
Expand All @@ -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' ? (
<>
Expand All @@ -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 ?? '..')}
>
<Box mx="space.06">
<styled.h1 mb="space.05" textStyle="heading.03">
Expand All @@ -94,21 +86,22 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
icon={<BtcIcon />}
dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn}
onCopyAddress={() => copyToClipboard(onCopyBtc)}
onClickQrCode={() => navigateToQrCodeRoute(RouteUrls.ReceiveBtc)}
onClickQrCode={() =>
navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtc}`, {
state: { backgroundLocation, ...location.state },
})
}
title="Bitcoin"
/>
<ReceiveItem
address={stxAddress}
icon={<StxAvatar />}
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"
/>
Expand All @@ -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,
Expand All @@ -138,9 +130,9 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
address={btcAddressNativeSegwit}
icon={<BtcStampsIcon />}
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')
Expand All @@ -152,7 +144,9 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) {
icon={<StxAvatar />}
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"
/>
Expand Down
19 changes: 8 additions & 11 deletions src/app/routes/receive-routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,16 @@ import { ReceiveStxModal } from '@app/pages/receive/receive-stx';

export const receiveRoutes = (
<Route>
<Route path={RouteUrls.Receive} element={<ReceiveModal />}>
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
<Route path={RouteUrls.ReceiveBtc} element={<ReceiveBtcModal />} />
<Route path={RouteUrls.ReceiveBtcStamp} element={<ReceiveBtcModal type="btc-stamp" />} />
{/* Needed to show receive ordinal in Receive flow */}
<Route path={RouteUrls.ReceiveCollectibleOrdinal} element={<ReceiveOrdinalModal />} />
</Route>
<Route path={RouteUrls.Receive} element={<ReceiveModal />} />
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
<Route path={RouteUrls.ReceiveBtc} element={<ReceiveBtcModal />} />
<Route path={RouteUrls.ReceiveBtcStamp} element={<ReceiveBtcModal type="btc-stamp" />} />
{/* Needed to show receive ordinal in Receive flow */}

<Route path={RouteUrls.ReceiveCollectibleOrdinal} element={<ReceiveOrdinalModal />} />

{/* Needed to show receive ordinal in Add flow */}
<Route
path={`${RouteUrls.Receive}/${RouteUrls.ReceiveCollectible}`}
element={<ReceiveModal type="collectible" />}
/>
<Route path={RouteUrls.ReceiveCollectible} element={<ReceiveModal type="collectible" />} />
<Route path={RouteUrls.ReceiveCollectibleOrdinal} element={<ReceiveOrdinalModal />} />
</Route>
);
10 changes: 5 additions & 5 deletions src/shared/route-urls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',

Expand Down

0 comments on commit 1477c96

Please sign in to comment.