Feat/v0 to v1 migration

extension/popup/Router.tsx

@@ -36,6 +36,11 @@ import { WalletSettingsScreen } from './screens/WalletSettingsScreen';
 import { WalletStylingScreen } from './screens/WalletStylingScreen';
 import { AboutScreen } from './screens/AboutScreen';
 import { RecoveryPhraseScreen } from './screens/RecoveryPhraseScreen';
+import { V0MigrationIntroScreen } from './screens/V0MigrationIntroScreen';
+import { V0MigrationSetupScreen } from './screens/V0MigrationSetupScreen';
+import { V0MigrationFundsScreen } from './screens/V0MigrationFundsScreen';
+import { V0MigrationReviewScreen } from './screens/V0MigrationReviewScreen';
+import { V0MigrationSubmittedScreen } from './screens/V0MigrationSubmittedScreen';
 
 export function Router() {
   const { currentScreen } = useStore();
@@ -85,6 +90,16 @@ export function Router() {
       return <AboutScreen />;
     case 'recovery-phrase':
       return <RecoveryPhraseScreen />;
+    case 'v0-migration-intro':
+      return <V0MigrationIntroScreen />;
+    case 'v0-migration-setup':
+      return <V0MigrationSetupScreen />;
+    case 'v0-migration-funds':
+      return <V0MigrationFundsScreen />;
+    case 'v0-migration-review':
+      return <V0MigrationReviewScreen />;
+    case 'v0-migration-submitted':
+      return <V0MigrationSubmittedScreen />;
 
     // Transactions
     case 'send':

extension/popup/screens/SettingsScreen.tsx

@@ -4,6 +4,7 @@ import ThemeIcon from '../assets/theme-icon.svg';
 import RpcSettingsIcon from '../assets/rpc-settings-icon.svg';
 import KeyIcon from '../assets/key-icon.svg';
 import ClockIcon from '../assets/clock-icon.svg';
+import TransferV0Icon from '../assets/transferv0_icon.svg';
 import { CloseIcon } from '../components/icons/CloseIcon';
 import { ChevronRightIcon } from '../components/icons/ChevronRightIcon';
 import AboutIcon from '../assets/settings-gear-icon.svg';
@@ -30,6 +31,9 @@ export function SettingsScreen() {
   function handleAbout() {
     navigate('about');
   }
+  function handleTransferV0() {
+    navigate('v0-migration-intro');
+  }
 
   const Row = ({ icon, label, onClick }: { icon: string; label: string; onClick: () => void }) => (
     <button
@@ -94,6 +98,7 @@ export function SettingsScreen() {
           <Row icon={KeyIcon} label="Key settings" onClick={handleKeySettings} />
           <Row icon={RpcSettingsIcon} label="RPC settings" onClick={handleRPCSettings} />
           <Row icon={ClockIcon} label="Lock time" onClick={handleLockTime} />
+          <Row icon={TransferV0Icon} label="Transfer v0 funds" onClick={handleTransferV0} />
           <Row icon={AboutIcon} label="About" onClick={handleAbout} />
         </div>