refactor(556x): Fix nested Route issues and Storybook compatibility for UnlockPage

Author: DDDDDanica

ui/pages/routes/routes.component.tsx

@@ -618,7 +618,13 @@ export default function Routes() {
           <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} exact />
-          <Route path={UNLOCK_ROUTE} exact>
+          <Route
+            path={UNLOCK_ROUTE}
+            // v5 Route supports exact with render props, but TS types don't recognize it
+            // Using spread operator with type assertion to bypass incorrect type definitions
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            {...({ exact: true } as any)}
+          >
             {(props: RouteComponentProps) => {
               const { history: v5History, location: v5Location } = props;
               const navigate = createV5CompatNavigate(v5History);
@@ -666,15 +672,12 @@ export default function Routes() {
                   keyringId?: string;
                 }>;
               return (
-                <Authenticated
-                  path={`${REVEAL_SEED_ROUTE}/:keyringId?`}
-                  component={() => (
-                    <RevealSeedConfirmationComponent
-                      navigate={navigate}
-                      keyringId={match.params.keyringId}
-                    />
-                  )}
-                />
+                <AuthenticatedV5Compat>
+                  <RevealSeedConfirmationComponent
+                    navigate={navigate}
+                    keyringId={match.params.keyringId}
+                  />
+                </AuthenticatedV5Compat>
               );
             }}
           </Route>
@@ -870,15 +873,12 @@ export default function Routes() {
                 params: { chainId: string; protocolId: string };
               }>;
               return (
-                <Authenticated
-                  path={`${DEFI_ROUTE}/:chainId/:protocolId`}
-                  component={() => (
-                    <DeFiPageComponent
-                      navigate={navigate}
-                      params={match.params}
-                    />
-                  )}
-                />
+                <AuthenticatedV5Compat>
+                  <DeFiPageComponent
+                    navigate={navigate}
+                    params={match.params}
+                  />
+                </AuthenticatedV5Compat>
               );
             }}
           </Route>
@@ -1121,7 +1121,12 @@ export default function Routes() {
         {renderRoutes()}
       </Box>
       {isUnlocked ? <Alerts history={history} /> : null}
-      <ToastMaster location={location} />
+      {React.createElement(
+        ToastMaster as React.ComponentType<{
+          location: RouteComponentProps['location'];
+        }>,
+        { location },
+      )}
     </div>
   );
 }

ui/pages/unlock-page/README.mdx

@@ -1,6 +1,6 @@
 import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
-import UnlockPage from '.';
+import UnlockPage from './unlock-page.component';
 
 # Unlock Page
 
@@ -14,7 +14,7 @@ Portal page for user to auth the access of their account
 
 | Name                       | Description                                                                |
 | -------------------------- | -------------------------------------------------------------------------- |
-| `history`                  | History router for redirect after action `object`                          |
+| `navigate`                 | Navigate function for redirect after action `object`                          |
 | `isUnlocked`               | If isUnlocked is true will redirect to most recent route in history `bool` |
 | `onRestore`                | onClick handler for "Forgot password?" link `func`                         |
 | `onSubmit`                 | onSumbit handler when form is submitted `func`                             |

ui/pages/unlock-page/unlock-page.container.js

@@ -112,4 +112,7 @@ const UnlockPageWithNavState = (props) => {
   return <UnlockPageConnected {...props} navState={navState} />;
 };
 
+// Export the connected component for Storybook/testing
+export { UnlockPageConnected };
+
 export default UnlockPageWithNavState;

ui/pages/unlock-page/unlock-page.stories.js

@@ -1,4 +1,3 @@
-import { createBrowserHistory } from 'history';
 import React from 'react';
 import README from './README.mdx';
 import UnlockPage from './unlock-page.component';
@@ -13,7 +12,8 @@ export default {
     },
   },
   argTypes: {
-    history: { control: 'object' },
+    navigate: { control: 'object' },
+    location: { control: 'object' },
     isUnlocked: { control: 'boolean' },
     onRestore: { action: 'onRestore' },
     onSubmit: { action: 'onSubmit' },
@@ -22,8 +22,9 @@ export default {
 };
 
 export const DefaultStory = (args) => {
-  const history = createBrowserHistory();
-  return <UnlockPage {...args} history={history} />;
+  const navigate = (path) => console.log('Navigate to:', path);
+  const location = { pathname: '/unlock', search: '', state: null };
+  return <UnlockPage {...args} navigate={navigate} location={location} />;
 };
 
 DefaultStory.storyName = 'Default';