refactor(popup): move ConnectWallet route out of Settings (#656)

src/popup/Popup.tsx

@@ -17,6 +17,7 @@ import {
 
 export const ROUTES_PATH = {
   HOME: '/',
+  CONNECT_WALLET: '/connect-wallet',
   SETTINGS: '/settings',
   MISSING_HOST_PERMISSION: '/missing-host-permission',
   OUT_OF_FUNDS: '/out-of-funds',
@@ -59,6 +60,10 @@ export const routes = [
             path: ROUTES_PATH.SETTINGS,
             lazy: () => import('./pages/Settings'),
           },
+          {
+            path: ROUTES_PATH.CONNECT_WALLET,
+            lazy: () => import('./pages/ConnectWallet'),
+          },
         ],
       },
     ],

src/popup/components/ProtectedRoute.tsx

@@ -16,7 +16,7 @@ export const ProtectedRoute = () => {
     return <Navigate to={ROUTES_PATH.OUT_OF_FUNDS} />;
   }
   if (state.connected === false) {
-    return <Navigate to={ROUTES_PATH.SETTINGS} />;
+    return <Navigate to={ROUTES_PATH.CONNECT_WALLET} />;
   }
 
   return <Outlet />;

src/popup/pages/ConnectWallet.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ConnectWalletForm } from '@/popup/components/ConnectWalletForm';
+import { useMessage, usePopupState } from '@/popup/lib/context';
+import { getWalletInformation } from '@/shared/helpers';
+
+export const Component = () => {
+  const { state } = usePopupState();
+  const message = useMessage();
+
+  const connectState = state.transientState['connect'];
+  return (
+    <ConnectWalletForm
+      publicKey={state.publicKey}
+      state={connectState}
+      defaultValues={{
+        recurring:
+          localStorage?.getItem('connect.recurring') === 'true' || false,
+        amount: localStorage?.getItem('connect.amount') || undefined,
+        walletAddressUrl:
+          localStorage?.getItem('connect.walletAddressUrl') || undefined,
+        autoKeyAddConsent:
+          localStorage?.getItem('connect.autoKeyAddConsent') === 'true',
+      }}
+      saveValue={(key, val) => {
+        localStorage?.setItem(`connect.${key}`, val.toString());
+      }}
+      getWalletInfo={getWalletInformation}
+      connectWallet={(data) => message.send('CONNECT_WALLET', data)}
+      onConnect={() => {
+        // The popup closes due to redirects on connect, so we don't need to
+        // update any state manually.
+        // But we reload it, as it's open all-time when running E2E tests
+        window.location.reload();
+      }}
+      clearConnectState={() => message.send('CONNECT_WALLET', null)}
+    />
+  );
+};

src/popup/pages/Settings.tsx

@@ -1,43 +1,9 @@
 import React from 'react';
-import { ConnectWalletForm } from '@/popup/components/ConnectWalletForm';
 import { WalletInformation } from '@/popup/components/WalletInformation';
-import { useMessage, usePopupState } from '@/popup/lib/context';
-import { getWalletInformation } from '@/shared/helpers';
+import { usePopupState } from '@/popup/lib/context';
 
 export const Component = () => {
   const { state } = usePopupState();
-  const message = useMessage();
 
-  if (state.connected) {
-    return <WalletInformation info={state} />;
-  } else {
-    const connectState = state.transientState['connect'];
-    return (
-      <ConnectWalletForm
-        publicKey={state.publicKey}
-        state={connectState}
-        defaultValues={{
-          recurring:
-            localStorage?.getItem('connect.recurring') === 'true' || false,
-          amount: localStorage?.getItem('connect.amount') || undefined,
-          walletAddressUrl:
-            localStorage?.getItem('connect.walletAddressUrl') || undefined,
-          autoKeyAddConsent:
-            localStorage?.getItem('connect.autoKeyAddConsent') === 'true',
-        }}
-        saveValue={(key, val) => {
-          localStorage?.setItem(`connect.${key}`, val.toString());
-        }}
-        getWalletInfo={getWalletInformation}
-        connectWallet={(data) => message.send('CONNECT_WALLET', data)}
-        onConnect={() => {
-          // The popup closes due to redirects on connect, so we don't need to
-          // update any state manually.
-          // But we reload it, as it's open all-time when running E2E tests
-          window.location.reload();
-        }}
-        clearConnectState={() => message.send('CONNECT_WALLET', null)}
-      />
-    );
-  }
+  return <WalletInformation info={state} />;
 };