feat: add a option to choose recovery type during onboarding

Author: 0xnullifier

public/_locales/en/en.json

@@ -411,6 +411,13 @@
   "chooseYourAccountType": "Choose Your Account Type",
   "chooseAccountTypeDescription": "Select how you want to interact with the blockchain -- on-chain or off-chain.",
   "canAddMultipleAccountsLater": "You can add and manage multiple account types later within the wallet.",
+  "chooseRecoveryMethod": "Set Up Account Recovery",
+  "chooseRecoveryMethodDescription": "Choose how you want to recover your account if you lose access.",
+  "guardianRecovery": "Guardian",
+  "guardianRecoveryDescription": "Recommended. Guardian-based recovery for your account.",
+  "fullyPrivateRecovery": "Fully Private",
+  "fullyPrivateRecoveryDescription": "Local only. No recovery — losing your device can permanently lose funds.",
+  "default": "Default",
   "transactionFile": "Transaction file",
   "verificationFailed": "Verification Failed",
   "transactionVerifiedSuccessfully": "The transaction has been successfully verified. You can now claim your tokens.",

src/app/pages/Welcome.tsx

@@ -13,7 +13,7 @@ import { useWalletStore } from 'lib/store';
 import { fetchStateFromBackend } from 'lib/store/hooks/useIntercomSync';
 import { navigate, useLocation } from 'lib/woozie';
 import { OnboardingFlow } from 'screens/onboarding/navigator';
-import { ImportType, OnboardingAction, OnboardingStep, OnboardingType } from 'screens/onboarding/types';
+import { ImportType, OnboardingAction, OnboardingStep, OnboardingType, WalletType } from 'screens/onboarding/types';
 
 /**
  * Check if hardware security is available for vault key protection.
@@ -71,6 +71,7 @@ const Welcome: FC = () => {
   const [onboardingType, setOnboardingType] = useState<OnboardingType | null>(null);
   const [importType, setImportType] = useState<ImportType | null>(null);
   const [password, setPassword] = useState<string | null>(null);
+  const [walletType, setWalletType] = useState<WalletType>(WalletType.Psm);
   const [importedWithFile, setImportedWithFile] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [useBiometric, setUseBiometric] = useState(true);
@@ -94,14 +95,14 @@ const Welcome: FC = () => {
       // For hardware-only wallets, pass undefined as password
       const actualPassword = password === '__HARDWARE_ONLY__' ? undefined : password;
       if (!importedWithFile) {
-        await registerWallet(actualPassword, seedPhraseFormatted, onboardingType === OnboardingType.Import);
+        await registerWallet(walletType, actualPassword, seedPhraseFormatted, onboardingType === OnboardingType.Import);
       } else {
         await importWalletFromClient(actualPassword, seedPhraseFormatted);
       }
     } else {
       throw new Error('Missing password or seed phrase');
     }
-  }, [password, seedPhrase, importedWithFile, registerWallet, onboardingType, importWalletFromClient]);
+  }, [password, seedPhrase, importedWithFile, registerWallet, onboardingType, importWalletFromClient, walletType]);
 
   const onAction = async (action: OnboardingAction) => {
     let eventCategory = AnalyticsEventCategory.ButtonPress;
@@ -180,6 +181,14 @@ const Welcome: FC = () => {
         setPassword(action.payload.password);
         eventCategory = AnalyticsEventCategory.FormSubmit;
         // Hardware protection is automatically set up in Vault.spawn() when available
+        if (onboardingType === OnboardingType.Create) {
+          navigate('/#select-recovery-method');
+        } else {
+          navigate('/#confirmation');
+        }
+        break;
+      case 'select-recovery-method':
+        setWalletType(action.payload);
         navigate('/#confirmation');
         break;
       case 'confirmation':
@@ -231,6 +240,8 @@ const Welcome: FC = () => {
               navigate('/#import-from-seed');
             }
           }
+        } else if (step === OnboardingStep.SelectRecoveryMethod) {
+          navigate('/#create-password');
         } else if (step === OnboardingStep.ImportFromFile || step === OnboardingStep.ImportFromSeed) {
           navigate('/#select-import-type');
         }
@@ -271,6 +282,9 @@ const Welcome: FC = () => {
       case '#create-password':
         setStep(OnboardingStep.CreatePassword);
         break;
+      case '#select-recovery-method':
+        setStep(OnboardingStep.SelectRecoveryMethod);
+        break;
       case '#confirmation':
         if (!password) {
           navigate('/');

src/lib/miden/back/actions.ts

@@ -73,13 +73,13 @@ export async function isDAppEnabled() {
   return bools.every(Boolean);
 }
 
-export function registerNewWallet(password?: string, mnemonic?: string, ownMnemonic?: boolean) {
+export function registerNewWallet(walletType: WalletType, password?: string, mnemonic?: string, ownMnemonic?: boolean) {
   return withInited(async () => {
     console.log('[Actions.registerNewWallet] Starting...');
     // Password may be undefined for hardware-only wallets (mobile/desktop with Secure Enclave)
     // Vault.spawn() will handle this by using hardware protection instead
     // spawn() returns the vault directly, avoiding a second biometric prompt from unlock()
-    const vault = await Vault.spawn(password ?? '', mnemonic, ownMnemonic);
+    const vault = await Vault.spawn(walletType, password ?? '', mnemonic, ownMnemonic);
     console.log('[Actions.registerNewWallet] Vault.spawn completed, initializing state...');
     const accounts = await vault.fetchAccounts();
     const settings = await vault.fetchSettings();

src/lib/miden/back/main.ts

@@ -36,7 +36,7 @@ async function processRequest(req: WalletRequest, port: Runtime.Port): Promise<W
         state
       };
     case WalletMessageType.NewWalletRequest:
-      await Actions.registerNewWallet(req.password, req.mnemonic, req.ownMnemonic);
+      await Actions.registerNewWallet(req.walletType, req.password, req.mnemonic, req.ownMnemonic);
       return { type: WalletMessageType.NewWalletResponse };
     case WalletMessageType.ImportFromClientRequest:
       await Actions.registerImportedWallet(req.password, req.mnemonic);

src/lib/miden/back/vault.ts

@@ -185,7 +185,12 @@ export class Vault {
     return passKey;
   }
 
-  static async spawn(password: string, mnemonic?: string, ownMnemonic?: boolean): Promise<Vault> {
+  static async spawn(
+    walletType: WalletType,
+    password: string,
+    mnemonic?: string,
+    ownMnemonic?: boolean
+  ): Promise<Vault> {
     return withError('Failed to create wallet', async (): Promise<Vault> => {
       // Generate random vault key (256-bit)
       const vaultKeyBytes = Passworder.generateVaultKey();
@@ -233,7 +238,7 @@ export class Vault {
         insertKeyCallback
       };
       const hdAccIndex = 0;
-      const walletSeed = deriveClientSeed(WalletType.Psm, mnemonic, 0);
+      const walletSeed = deriveClientSeed(walletType, mnemonic, 0);
 
       // Wrap WASM client operations in a lock to prevent concurrent access
       const accPublicKey = await withWasmClientLock(async () => {
@@ -243,20 +248,20 @@ export class Vault {
             return await midenClient.importPublicMidenWalletFromSeed(walletSeed);
           } catch (e) {
             console.error('Failed to import wallet from seed in spawn, creating new wallet instead', e);
-            return await midenClient.createMidenWallet(WalletType.Psm, walletSeed);
+            return await midenClient.createMidenWallet(walletType, walletSeed);
           }
         } else {
           // Sync to chain tip BEFORE creating first account (no accounts = no tags = fast sync)
           await midenClient.syncState();
-          return await midenClient.createMidenWallet(WalletType.Psm, walletSeed);
+          return await midenClient.createMidenWallet(walletType, walletSeed);
         }
       });
 
       const initialAccount: WalletAccount = {
         publicKey: accPublicKey,
         name: 'Miden Account 1',
         isPublic: true,
-        type: WalletType.Psm,
+        type: walletType,
         hdIndex: hdAccIndex
       };
 

src/lib/miden/front/client.ts

@@ -93,8 +93,8 @@ export const [MidenContextProvider, useMidenContext] = constate(() => {
 
   // Wrap store actions in useCallback for stable references
   const registerWallet = useCallback(
-    async (password: string | undefined, mnemonic?: string, ownMnemonic?: boolean) => {
-      await storeRegisterWallet(password, mnemonic, ownMnemonic);
+    async (walletType: WalletType, password: string | undefined, mnemonic: string, ownMnemonic: boolean) => {
+      await storeRegisterWallet(walletType, password, mnemonic, ownMnemonic);
     },
     [storeRegisterWallet]
   );

src/lib/shared/types.ts

@@ -177,6 +177,7 @@ export interface NewWalletRequest extends WalletMessageBase {
   password?: string; // Optional for hardware-only wallets (mobile/desktop with Secure Enclave)
   mnemonic?: string;
   ownMnemonic?: boolean;
+  walletType: WalletType;
 }
 
 export interface NewWalletResponse extends WalletMessageBase {

src/lib/store/index.ts

@@ -115,9 +115,10 @@ export const useWalletStore = create<WalletStore>()(
     },
 
     // Auth actions
-    registerWallet: async (password, mnemonic, ownMnemonic) => {
+    registerWallet: async (walletType, password, mnemonic, ownMnemonic) => {
       const res = await request({
         type: WalletMessageType.NewWalletRequest,
+        walletType,
         password,
         mnemonic,
         ownMnemonic

src/lib/store/types.ts

@@ -98,7 +98,12 @@ export interface WalletActions {
   syncFromBackend: (state: MidenState) => void;
 
   // Auth actions
-  registerWallet: (password: string | undefined, mnemonic?: string, ownMnemonic?: boolean) => Promise<void>;
+  registerWallet: (
+    walletType: WalletType,
+    password: string | undefined,
+    mnemonic: string,
+    ownMnemonic: boolean
+  ) => Promise<void>;
   importWalletFromClient: (password: string | undefined, mnemonic: string) => Promise<void>;
   unlock: (password?: string) => Promise<void>;
 
@@ -116,7 +121,7 @@ export interface WalletActions {
   signTransaction: (publicKey: string, signingInputs: string) => Promise<Uint8Array>;
   signWord: (publicKey: string, wordHex: string) => Promise<string>;
   getAuthSecretKey: (key: string) => Promise<string>;
-  getPublicKeyForCommitment: (publicKeyCommitment: string) => Promise<string>;
+  etPublicKeyForCommitment: (publicKeyCommitment: string) => Promise<string>;
 
   // DApp actions
   getDAppPayload: (id: string) => Promise<any>;

src/screens/onboarding/create-wallet-flow/SelectRecoveryMethod.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+
+import classNames from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { ReactComponent as ArrowRightIcon } from 'app/icons/arrow-right.svg';
+
+import { WalletType } from '../types';
+
+export interface SelectRecoveryMethodScreenProps extends Omit<React.ButtonHTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+  onSubmit?: (payload: WalletType) => void;
+}
+
+type RecoveryOption = {
+  id: WalletType;
+  title: string;
+  description: string;
+  isDefault?: boolean;
+  isLast?: boolean;
+};
+
+export const SelectRecoveryMethodScreen = ({ onSubmit, ...props }: SelectRecoveryMethodScreenProps) => {
+  const { t } = useTranslation();
+  const options: RecoveryOption[] = useMemo(
+    () => [
+      {
+        id: WalletType.Psm,
+        title: t('guardianRecovery'),
+        description: t('guardianRecoveryDescription'),
+        isDefault: true
+      },
+      {
+        id: WalletType.OffChain,
+        title: t('fullyPrivateRecovery'),
+        description: t('fullyPrivateRecoveryDescription'),
+        isLast: true
+      }
+    ],
+    [t]
+  );
+
+  return (
+    <div className="flex-1 flex flex-col items-center bg-transparent pt-6 h-full" {...props}>
+      <div className="flex flex-col items-center">
+        <h1 className="font-semibold text-2xl lh-title">{t('chooseRecoveryMethod')}</h1>
+        <p className="text-base text-center lh-title">{t('chooseRecoveryMethodDescription')}</p>
+      </div>
+      {options.map(option => (
+        <div
+          key={option.id}
+          className={classNames('flex flex-col border p-4 rounded-lg cursor-pointer', {
+            'mb-2': !option.isLast,
+            'mb-8': option.isLast
+          })}
+          onClick={() => onSubmit?.(option.id)}
+        >
+          <div className="flex flex-row justify-between items-center">
+            <div className="flex items-center gap-2">
+              <h2 className="font-medium text-base">{option.title}</h2>
+              {option.isDefault && (
+                <span className="bg-pure-black text-pure-white text-xs font-medium px-2 py-0.5 rounded-full">
+                  {t('default')}
+                </span>
+              )}
+            </div>
+            <ArrowRightIcon fill="currentColor" height={'20px'} width={'20px'} />
+          </div>
+          <p className="text-grey-600">{option.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+};