Skip to content

Commit

Permalink
wip: refactor of routes and header options
Browse files Browse the repository at this point in the history
  • Loading branch information
@pete-watters
pete-watters committed Apr 11, 2024
1 parent 9db9a9c commit 93b2af1
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 125 deletions.
2 changes: 1 addition & 1 deletion ...components/crypto-assets/bitcoin/src20-token-asset-list/src20-token-asset-item.layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { formatBalance } from '@app/common/format-balance';
import type { Src20Token } from '@app/query/bitcoin/stamps/stamps-by-address.query';
import { Src20AvatarIcon } from '@app/ui/components/avatar/src20-avatar-icon';
import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { Pressable } from '@app/ui/components/pressable/pressable';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
import { Pressable } from '@app/ui/pressable/pressable';

interface Src20TokenAssetItemLayoutProps {
token: Src20Token;
Expand Down
15 changes: 15 additions & 0 deletions src/app/features/approver/approver-demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { useNavigate } from 'react-router-dom';

import { Box, Circle, styled } from 'leather-styles/jsx';

import { RouteUrls } from '@shared/route-urls';

import { Button } from '@app/ui/components/button/button';
import { Callout } from '@app/ui/components/callout/callout';
import { Header } from '@app/ui/components/containers/headers/header';
import { Flag } from '@app/ui/components/flag/flag';
import { ItemLayout } from '@app/ui/components/item-layout/item-layout';
import { Logo } from '@app/ui/components/logo';
import { Pressable } from '@app/ui/components/pressable/pressable';
import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
import { TooltipProvider } from '@app/ui/components/tooltip/tooltip';
Expand All @@ -12,8 +18,17 @@ import { InfoCircleIcon } from '@app/ui/icons';
import { Approver } from './approver';

export function ApproverDemo() {
const navigate = useNavigate();
return (
<styled.div minH="100vh">
<Header
variant="dialog"
logo={
<Box height="headerContainerHeight" margin="auto" px="space.02">
<Logo onClick={() => navigate(RouteUrls.Home)} />
</Box>
}
/>
<Approver>
<Approver.Header
title="Some prompt that bre"
Expand Down
283 changes: 159 additions & 124 deletions src/app/routes/app-routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@ import {
RouterProvider,
createHashRouter,
createRoutesFromElements,
useNavigate,

Check failure on line 8 in src/app/routes/app-routes.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

'useNavigate' is declared but its value is never read.
} from 'react-router-dom';

import * as Sentry from '@sentry/react';
import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
import { Box } from 'leather-styles/jsx';

import { RouteUrls } from '@shared/route-urls';

Expand Down Expand Up @@ -54,6 +57,9 @@ import { AccountGate } from '@app/routes/account-gate';
import { receiveRoutes } from '@app/routes/receive-routes';
import { legacyRequestRoutes } from '@app/routes/request-routes';
import { rpcRequestRoutes } from '@app/routes/rpc-routes';
import { ContainerLayout } from '@app/ui/components/containers/container.layout';
import { Header } from '@app/ui/components/containers/headers/header';
import { Logo } from '@app/ui/components/logo';

import { OnboardingGate } from './onboarding-gate';

Expand All @@ -80,146 +86,175 @@ export const homePageModalRoutes = (
);

function useAppRoutes() {
// const navigate = useNavigate();
return sentryCreateBrowserRouter(
createRoutesFromElements(
<Route element={<Container />}>
<Route
path="/*"
element={
<AccountGate>
<Home />
</AccountGate>
}
>
{homePageModalRoutes}
</Route>
<Route>
<Route element={<Container />}>
<Route
path="/*"
element={
<AccountGate>
<Home />
</AccountGate>
}
>
{homePageModalRoutes}
</Route>

<Route path="approver" element={<ApproverDemo />} />
<Route
path={RouteUrls.RetrieveTaprootFunds}
element={<RetrieveTaprootToNativeSegwit />}
/>
<Route path={RouteUrls.IncreaseStxFee} element={<IncreaseStxFeeDialog />}>
{ledgerStacksTxSigningRoutes}
</Route>
<Route
path={`${RouteUrls.IncreaseStxFee}/${RouteUrls.TransactionBroadcastError}`}
element={<BroadcastError />}
/>
<Route path={RouteUrls.IncreaseBtcFee} element={<IncreaseBtcFeeDialog />}>
{ledgerBitcoinTxSigningRoutes}
</Route>
<Route path={RouteUrls.IncreaseFeeSent} element={<IncreaseFeeSentDialog />} />

<Route path={RouteUrls.RetrieveTaprootFunds} element={<RetrieveTaprootToNativeSegwit />} />
<Route path={RouteUrls.IncreaseStxFee} element={<IncreaseStxFeeDialog />}>
{ledgerStacksTxSigningRoutes}
</Route>
<Route
path={`${RouteUrls.IncreaseStxFee}/${RouteUrls.TransactionBroadcastError}`}
element={<BroadcastError />}
/>
<Route path={RouteUrls.IncreaseBtcFee} element={<IncreaseBtcFeeDialog />}>
{ledgerBitcoinTxSigningRoutes}
</Route>
<Route path={RouteUrls.IncreaseFeeSent} element={<IncreaseFeeSentDialog />} />

{ledgerStacksTxSigningRoutes}
<Route
path={RouteUrls.RpcReceiveBitcoinContractOffer}
element={
<AccountGate>
<Suspense fallback={<SuspenseLoadingSpinner />}>
<BitcoinContractRequest />
</Suspense>
</AccountGate>
}
/>
<Route path={RouteUrls.BitcoinContractLockSuccess} element={<LockBitcoinSummary />} />
<Route path={RouteUrls.BitcoinContractLockError} element={<BroadcastError />} />
<Route path={RouteUrls.BitcoinContractList} element={<BitcoinContractList />} />
<Route
path={RouteUrls.Onboarding}
element={
<OnboardingGate>
<WelcomePage />
</OnboardingGate>
}
>
<Route path={RouteUrls.RequestDiagnostics} element={<AllowDiagnosticsModal />} />
<Route path={RouteUrls.ConnectLedgerStart} element={<ConnectLedgerStart />} />
<Route
path={RouteUrls.LedgerUnsupportedBrowser}
element={<UnsupportedBrowserLayout />}
/>

<Route
path={RouteUrls.RpcReceiveBitcoinContractOffer}
element={
<AccountGate>
<Suspense fallback={<SuspenseLoadingSpinner />}>
<BitcoinContractRequest />
</Suspense>
</AccountGate>
}
/>
<Route path={RouteUrls.BitcoinContractLockSuccess} element={<LockBitcoinSummary />} />
<Route path={RouteUrls.BitcoinContractLockError} element={<BroadcastError />} />
<Route path={RouteUrls.BitcoinContractList} element={<BitcoinContractList />} />
<Route
path={RouteUrls.Onboarding}
element={
<OnboardingGate>
<WelcomePage />
</OnboardingGate>
}
>
<Route path={RouteUrls.RequestDiagnostics} element={<AllowDiagnosticsModal />} />
<Route path={RouteUrls.ConnectLedgerStart} element={<ConnectLedgerStart />} />
<Route path={RouteUrls.LedgerUnsupportedBrowser} element={<UnsupportedBrowserLayout />} />
{requestBitcoinKeysRoutes}
{requestStacksKeysRoutes}
</Route>
<Route
path={RouteUrls.BackUpSecretKey}
element={
<OnboardingGate>
<BackUpSecretKeyPage />
</OnboardingGate>
}
/>
<Route
path={RouteUrls.SetPassword}
lazy={async () => {
const { SetPasswordRoute } = await import(
'@app/pages/onboarding/set-password/set-password'
);
return { Component: SetPasswordRoute };
}}
/>

{requestBitcoinKeysRoutes}
{requestStacksKeysRoutes}
</Route>
<Route
path={RouteUrls.BackUpSecretKey}
element={
<OnboardingGate>
<BackUpSecretKeyPage />
</OnboardingGate>
}
/>
<Route
path={RouteUrls.SetPassword}
lazy={async () => {
const { SetPasswordRoute } = await import(
'@app/pages/onboarding/set-password/set-password'
);
return { Component: SetPasswordRoute };
}}
/>
<Route
path={RouteUrls.SignIn}
element={
<OnboardingGate>
<SignIn />
</OnboardingGate>
}
/>
<Route
path={RouteUrls.AddNetwork}
element={
<AccountGate>
<AddNetwork />
</AccountGate>
}
/>
<Route
path={RouteUrls.ChooseAccount}
element={
<AccountGate>
<ChooseAccount />
</AccountGate>
}
>
{ledgerJwtSigningRoutes}
</Route>

<Route
path={RouteUrls.SignIn}
element={
<OnboardingGate>
<SignIn />
</OnboardingGate>
}
/>
<Route
path={RouteUrls.AddNetwork}
element={
<AccountGate>
<AddNetwork />
</AccountGate>
}
/>
<Route
path={RouteUrls.ChooseAccount}
element={
<AccountGate>
<ChooseAccount />
</AccountGate>
}
>
{ledgerJwtSigningRoutes}
</Route>
<Route
path={RouteUrls.Fund}
element={
<AccountGate>
<FundPage />
</AccountGate>
}
>
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
<Route path={RouteUrls.ReceiveBtc} element={<ReceiveBtcModal />} />
</Route>
<Route
path={RouteUrls.FundChooseCurrency}
element={
<AccountGate>
<ChooseCryptoAssetToFund />
</AccountGate>
}
>
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
</Route>

<Route
path={RouteUrls.Fund}
element={
<AccountGate>
<FundPage />
</AccountGate>
}
>
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
<Route path={RouteUrls.ReceiveBtc} element={<ReceiveBtcModal />} />
</Route>
<Route
path={RouteUrls.FundChooseCurrency}
element={
<AccountGate>
<ChooseCryptoAssetToFund />
</AccountGate>
}
>
<Route path={RouteUrls.ReceiveStx} element={<ReceiveStxModal />} />
</Route>
{sendCryptoAssetFormRoutes}

{sendCryptoAssetFormRoutes}
<Route
path={RouteUrls.ViewSecretKey}
element={
<AccountGate>
<ViewSecretKey />
</AccountGate>
}
/>
<Route path={RouteUrls.Unlock} element={<Unlock />}>
{leatherIntroDialogRoutes}
</Route>
</Route>

<Route
path={RouteUrls.ViewSecretKey}
path="approver"
element={
<AccountGate>
<ViewSecretKey />
</AccountGate>
<ContainerLayout
header={
<Header
variant="dialog"
logo={
<Box height="headerContainerHeight" margin="auto" px="space.02">
<Logo
data-testid={OnboardingSelectors.LogoRouteToHome}
// onClick={() => navigate(RouteUrls.Home)}
/>
</Box>
}
/>
}
>
<ApproverDemo />
</ContainerLayout>
}
/>
<Route path={RouteUrls.Unlock} element={<Unlock />}>
{leatherIntroDialogRoutes}
</Route>

{legacyRequestRoutes}
{rpcRequestRoutes}
<Route path={RouteUrls.UnauthorizedRequest} element={<UnauthorizedRequest />} />
Expand Down

0 comments on commit 93b2af1

Please sign in to comment.