Skip to content

refactor: Migrate <Routes /> into a TypeScript functional component #33276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DDDDDanica merged 27 commits into from
Aug 13, 2025
Merged

refactor: Migrate <Routes /> into a TypeScript functional component #33276

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
1f91b8c
Convert target files to typescript
MajorLift May 15, 2025
7b1bb31
Remove HOC container for `Routes`
MajorLift Jul 31, 2025
f470f09
Fix selectors
MajorLift Jul 31, 2025
d3a96f3
Convert `<Routes />` to functional component
MajorLift Jul 31, 2025
b2ddb91
Fix dispatch callbacks
MajorLift Aug 4, 2025
1c53c97
consolidate feature flag branch for `isLoadingShown` definition
MajorLift Aug 4, 2025
21e68fe
Use `component` prop for `Route` instances
MajorLift Aug 4, 2025
61733a0
Handle undefined case for `openExtensionInBrowser`
MajorLift Aug 4, 2025
5d38733
Add `component` to proptypes of `Route` wrapper components
MajorLift Aug 5, 2025
2b9015b
Restore `exact` props to routes
MajorLift Aug 5, 2025
d6e3bc0
undefined case handling for `getSelectedAccountTokensAcrossChains`
MajorLift Aug 5, 2025
7231ab7
Fix wrong path for `CreateAccountPage`
MajorLift Aug 7, 2025
831c40b
Better comments
MajorLift Aug 7, 2025
6134411
Fix incorrect selector output destructuring
MajorLift Aug 7, 2025
b1a9e0f
Merge branch 'main' into chore/react-router-v6/250515-convert-Routes-…
MajorLift Aug 11, 2025
2dd9d4f
Revert changes to selectors
MajorLift Aug 11, 2025
10aee98
Revert "Revert changes to selectors"
MajorLift Aug 11, 2025
5f2e795
Add effect cleanup for `history.listen` call
MajorLift Aug 11, 2025
c867278
Prevent `openExtensionInBrowser` from triggering on unrelated deps ch…
MajorLift Aug 11, 2025
29b0b66
minimize re-renders by splitting `useEffect` calls by deps
MajorLift Aug 11, 2025
6dbf846
Remove unused variable
MajorLift Aug 11, 2025
2c740d2
Revert change to `getSelectedAccountTokensAcrossChains` behavior and …
MajorLift Aug 11, 2025
2da9b28
Restore destructuring undefined handling
MajorLift Aug 11, 2025
aeeb1c6
Restore early exit to `getSelectedAccountTokensAcrossChains` but retu…
MajorLift Aug 11, 2025
c1be73a
Consolidate duplicated types for default export modules
MajorLift Aug 12, 2025
765e46a
Add TODOs to fix named exports cast as default exports
MajorLift Aug 12, 2025
2864c6e
Move `useAppSelector` to `ui/store/store.ts`
MajorLift Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Use component prop for Route instances
  • Loading branch information
@MajorLift
MajorLift committed Aug 7, 2025
commit 21e68fe58fef520f1ad999b0cd39637fd4966afe
1 change: 1 addition & 0 deletions ui/helpers/higher-order-components/authenticated/authenticated.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,5 @@ export default function Authenticated(props) {
Authenticated.propTypes = {
isUnlocked: PropTypes.bool,
completedOnboarding: PropTypes.bool,
path: PropTypes.string,
};
1 change: 1 addition & 0 deletions ui/helpers/higher-order-components/initialized/initialized.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ export default function Initialized(props) {

Initialized.propTypes = {
completedOnboarding: PropTypes.bool,
path: PropTypes.string,
};
110 changes: 73 additions & 37 deletions ui/pages/routes/routes.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable jsdoc/check-tag-names */
/* eslint-disable import/no-useless-path-segments */
/* eslint-disable import/extensions */
import classnames from 'classnames';
Expand Down Expand Up @@ -505,111 +506,146 @@ export default function Routes() {
<Suspense fallback={null}>
{/* since the loading time is less than 200ms, we decided not to show a spinner fallback or anything */}
<Switch>
Copy link
Contributor

@HowardBraham HowardBraham Aug 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want to change this to a v6 <Routes> here, or do it in another PR?

Copy link
Contributor Author

@MajorLift MajorLift Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm good point. A separate PR is more reviewable, but I agree that there's no point in putting the v6 migration off for too long. I'll create a branch off of this one to get it started and open a PR. Absent any blockers, we could merge these back-to-back.

Copy link
Contributor Author

@MajorLift MajorLift Aug 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow-up PR for migration to react-router v6 APIs/patterns created here: #35030

<Route path={ONBOARDING_ROUTE} Component={OnboardingFlow} />
<Route path={LOCK_ROUTE} Component={Lock} />
<Initialized path={UNLOCK_ROUTE} Component={UnlockPage} />
<Route path={DEEP_LINK_ROUTE} Component={DeepLink} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Route path={ONBOARDING_ROUTE} component={OnboardingFlow} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Route path={LOCK_ROUTE} component={Lock} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Initialized path={UNLOCK_ROUTE} component={UnlockPage} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Route path={DEEP_LINK_ROUTE} component={DeepLink} />
<RestoreVaultComponent
path={RESTORE_VAULT_ROUTE}
Component={RestoreVaultPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={RestoreVaultPage}
/>
<Authenticated
path={SMART_ACCOUNT_UPDATE}
Component={SmartAccountUpdate}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={SmartAccountUpdate}
/>
<Authenticated
// `:keyringId` is optional here, if not provided, this will fallback
// to the main seed phrase.
path={`${REVEAL_SEED_ROUTE}/:keyringId?`}
Component={RevealSeedConfirmation}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={RevealSeedConfirmation}
/>
<Authenticated path={IMPORT_SRP_ROUTE} Component={ImportSrpPage} />
<Authenticated path={SETTINGS_ROUTE} Component={Settings} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={IMPORT_SRP_ROUTE} component={ImportSrpPage} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={SETTINGS_ROUTE} component={Settings} />
<Authenticated
path={NOTIFICATIONS_SETTINGS_ROUTE}
Component={NotificationsSettings}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={NotificationsSettings}
/>
<Authenticated
path={`${NOTIFICATIONS_ROUTE}/:uuid`}
Component={NotificationDetails}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={NotificationDetails}
/>
<Authenticated path={NOTIFICATIONS_ROUTE} Component={Notifications} />
<Authenticated path={SNAPS_ROUTE} Component={SnapList} />
<Authenticated path={SNAPS_VIEW_ROUTE} Component={SnapView} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={NOTIFICATIONS_ROUTE} component={Notifications} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={SNAPS_ROUTE} component={SnapList} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={SNAPS_VIEW_ROUTE} component={SnapView} />
<Authenticated
path={`${CONFIRM_TRANSACTION_ROUTE}/:id?`}
Component={ConfirmTransaction}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={ConfirmTransaction}
/>
<Authenticated path={SEND_ROUTE} Component={SendPage} />
<Authenticated path={SWAPS_ROUTE} Component={Swaps} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={SEND_ROUTE} component={SendPage} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={SWAPS_ROUTE} component={Swaps} />
<Authenticated
path={`${CROSS_CHAIN_SWAP_TX_DETAILS_ROUTE}/:srcTxMetaId`}
Component={CrossChainSwapTxDetails}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={CrossChainSwapTxDetails}
/>
<Authenticated
path={CROSS_CHAIN_SWAP_ROUTE}
Component={CrossChainSwap}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={CrossChainSwap}
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE}
Component={ConfirmAddSuggestedTokenPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={ConfirmAddSuggestedTokenPage}
/>
<Authenticated
path={CONFIRM_ADD_SUGGESTED_NFT_ROUTE}
Component={ConfirmAddSuggestedNftPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={ConfirmAddSuggestedNftPage}
/>
<Authenticated
path={`${CONFIRMATION_V_NEXT_ROUTE}/:id?`}
Component={ConfirmationPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={ConfirmationPage}
/>
<Authenticated
path={NEW_ACCOUNT_ROUTE}
Component={CreateAccountPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={CreateAccountPage}
/>
<Authenticated
path={`${CONNECT_ROUTE}/:id`}
Component={PermissionsConnect}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={PermissionsConnect}
/>
<Authenticated
path={`${ASSET_ROUTE}/image/:asset/:id`}
Component={NftFullImage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={NftFullImage}
/>
<Authenticated
path={`${ASSET_ROUTE}/:chainId/:asset/:id`}
Component={Asset}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={Asset}
/>
<Authenticated
path={`${ASSET_ROUTE}/:chainId/:asset/`}
Component={Asset}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={Asset}
/>
<Authenticated path={`${ASSET_ROUTE}/:chainId`} Component={Asset} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={`${ASSET_ROUTE}/:chainId`} component={Asset} />
<Authenticated
path={`${DEFI_ROUTE}/:chainId/:protocolId`}
Component={DeFiPage}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={DeFiPage}
/>
<Authenticated
path={`${CONNECTIONS}/:origin`}
Component={Connections}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={Connections}
/>
<Authenticated path={PERMISSIONS} Component={PermissionsPage} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={PERMISSIONS} component={PermissionsPage} />
<Authenticated
path={`${REVIEW_PERMISSIONS}/:origin`}
Component={ReviewPermissions}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={ReviewPermissions}
/>
<Authenticated
path={WALLET_DETAILS_ROUTE}
Component={WalletDetails}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={WalletDetails}
/>
<Authenticated
path={`${ACCOUNT_DETAILS_ROUTE}/:address`}
Component={MultichainAccountDetails}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={MultichainAccountDetails}
/>
<Authenticated
path={`${ACCOUNT_DETAILS_QR_CODE_ROUTE}/:address`}
Component={AddressQRCode}
// @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6
component={AddressQRCode}
/>

<Authenticated path={DEFAULT_ROUTE} Component={Home} />
{/** @ts-expect-error TODO: Replace `component` prop with `element` once `react-router` is upgraded to v6 */}
<Authenticated path={DEFAULT_ROUTE} component={Home} />
</Switch>
</Suspense>
);
Expand Down