feat: CP-11530 seedless recovery methods

apps/next/src/localization/locales/en/translation.json

@@ -23,19 +23,23 @@
   "Accounts updated": "Accounts updated",
   "Action was not approved. Please try again.": "Action was not approved. Please try again.",
   "Activity": "Activity",
+  "Add Authenticator": "Add Authenticator",
   "Add Avalanche C-Chain Address": "Add Avalanche C-Chain Address",
   "Add Avalanche X/P-Chain Address": "Add Avalanche X/P-Chain Address",
   "Add Bitcoin Address": "Add Bitcoin Address",
   "Add Custom Token": "Add Custom Token",
+  "Add Passkey": "Add Passkey",
   "Add Solana": "Add Solana",
   "Add Solana Address": "Add Solana Address",
   "Add Token": "Add Token",
+  "Add Yubikey": "Add Yubikey",
   "Add a display name for your wallet. You can change it at any time in the settings.": "Add a display name for your wallet. You can change it at any time in the settings.",
   "Add a name so that it is easier to find later.": "Add a name so that it is easier to find later.",
   "Add an address": "Add an address",
   "Add optional recovery methods": "Add optional recovery methods",
   "Add optional recovery methods to securely restore access in case you lose your credentials.": "Add optional recovery methods to securely restore access in case you lose your credentials.",
   "Add or connect a wallet": "Add or connect a wallet",
+  "Add recovery method": "Add recovery method",
   "Add using Keystone": "Add using Keystone",
   "Add using Ledger": "Add using Ledger",
   "Address copied!": "Address copied!",
@@ -57,14 +61,18 @@
   "Approves all {{token}}": "Approves all {{token}}",
   "Approving will give this dApp access to your active account.": "Approving will give this dApp access to your active account.",
   "Are you sure that you want to cancel this request?": "Are you sure that you want to cancel this request?",
+  "Are you sure you want to change the authenticator?": "Are you sure you want to change the authenticator?",
   "Are you sure you want to delete selected accounts?": "Are you sure you want to delete selected accounts?",
   "Are you sure you want to delete this contact?": "Are you sure you want to delete this contact?",
   "Are you sure you want to delete {{name}} account?": "Are you sure you want to delete {{name}} account?",
+  "Are you sure you want to remove this recovery method?": "Are you sure you want to remove this recovery method?",
   "As a Core user, you have the option to opt-in for airdrop rewards based on your activity and engagement. Core will collect anonymous interaction data to power this feature.": "As a Core user, you have the option to opt-in for airdrop rewards based on your activity and engagement. Core will collect anonymous interaction data to power this feature.",
   "Assets": "Assets",
   "Attempted to use an unknown derivation path": "Attempted to use an unknown derivation path",
   "Authenticator": "Authenticator",
+  "Authenticator added!": "Authenticator added!",
   "Authenticator app": "Authenticator app",
+  "Authenticator app removed successfully!": "Authenticator app removed successfully!",
   "Authenticator apps generate secure, time-based codes for wallet recovery.": "Authenticator apps generate secure, time-based codes for wallet recovery.",
   "Auto": "Auto",
   "Auto • {{name}}": "Auto • {{name}}",
@@ -94,6 +102,7 @@
   "Cancelling will require you to restart the 2 day waiting period": "Cancelling will require you to restart the 2 day waiting period",
   "Cancelling...": "Cancelling...",
   "Chain": "Chain",
+  "Change Authenticator App": "Change Authenticator App",
   "Change password": "Change password",
   "Chinese - Simplified": "Chinese - Simplified",
   "Chinese - Traditional": "Chinese - Traditional",
@@ -174,9 +183,11 @@
   "Ensure you have installed the latest {{appName}} app and open it on your device": "Ensure you have installed the latest {{appName}} app and open it on your device",
   "Enter a password": "Enter a password",
   "Enter a valid email address": "Enter a valid email address",
+  "Enter code manually": "Enter code manually",
   "Enter name": "Enter name",
   "Enter password": "Enter password",
   "Enter private key": "Enter private key",
+  "Enter the code generated from the authenticator app": "Enter the code generated from the authenticator app",
   "Enter the code generated from your authenticator app.": "Enter the code generated from your authenticator app.",
   "Enter the code generated in your authenticator app.": "Enter the code generated in your authenticator app.",
   "Enter your PIN on your Ledger": "Enter your PIN on your Ledger",
@@ -186,11 +197,13 @@
   "Enter your password to view your recovery phrase": "Enter your password to view your recovery phrase",
   "Enter your recovery phrase": "Enter your recovery phrase",
   "Enter your recovery phrase to import a wallet": "Enter your recovery phrase to import a wallet",
+  "Error occurred. Please try again.": "Error occurred. Please try again.",
   "Error while deriving address": "Error while deriving address",
   "Exit": "Exit",
   "Export Cancelled": "Export Cancelled",
   "Export Failed": "Export Failed",
   "Extended public key not found": "Extended public key not found",
+  "FIDO device removed!": "FIDO device removed!",
   "Failed to Initialize": "Failed to Initialize",
   "Failed to change account": "Failed to change account",
   "Failed to change password": "Failed to change password",
@@ -209,6 +222,7 @@
   "File Upload Failed": "File Upload Failed",
   "Fill out your wallet details": "Fill out your wallet details",
   "Filter": "Filter",
+  "Finish setting up recovery methods": "Finish setting up recovery methods",
   "Flagged as malicious. Disconnect now!": "Flagged as malicious. Disconnect now!",
   "Floating": "Floating",
   "Follow the instructions in your browser window to add this key to your account.": "Follow the instructions in your browser window to add this key to your account.",
@@ -334,6 +348,7 @@
   "No connected sites": "No connected sites",
   "No matching results": "No matching results",
   "No matching sites found": "No matching sites found",
+  "No recovery methods set up": "No recovery methods set up",
   "No routes found with enough liquidity.": "No routes found with enough liquidity.",
   "No saved addresses": "No saved addresses",
   "No thanks": "No thanks",
@@ -342,6 +357,7 @@
   "Only Keystore files from the Avalanche Wallet are supported": "Only Keystore files from the Avalanche Wallet are supported",
   "Only keystore files exported from the Avalanche Wallet are supported.": "Only keystore files exported from the Avalanche Wallet are supported.",
   "Oops! It seems like you have no internet connection. Please try again later.": "Oops! It seems like you have no internet connection. Please try again later.",
+  "Open any authenticator app and scan the QR code below or enter the code manually": "Open any authenticator app and scan the QR code below or enter the code manually",
   "Open the Solana app on your Ledger device": "Open the Solana app on your Ledger device",
   "Options": "Options",
   "Our team was made aware of this issue. Feel free to contact us for further information.": "Our team was made aware of this issue. Feel free to contact us for further information.",
@@ -378,6 +394,7 @@
   "Please try again later or choose a different token pair.": "Please try again later or choose a different token pair.",
   "Please try again later or contact support.": "Please try again later or contact support.",
   "Please try again later.": "Please try again later.",
+  "Please try again.": "Please try again.",
   "Please try switching to a different network.": "Please try switching to a different network.",
   "Please update the Avalanche Application on your Ledger device to continue.": "Please update the Avalanche Application on your Ledger device to continue.",
   "Please use (<b>{{deviceName}}</b>) FIDO device to continue.": "Please use (<b>{{deviceName}}</b>) FIDO device to continue.",
@@ -409,7 +426,9 @@
   "Recovery phrase copied to clipboard": "Recovery phrase copied to clipboard",
   "Refresh": "Refresh",
   "Reject": "Reject",
+  "Remove FIDO Device": "Remove FIDO Device",
   "Remove account": "Remove account",
+  "Remove recovery method": "Remove recovery method",
   "Rename": "Rename",
   "Rename Account": "Rename Account",
   "Rename Wallet": "Rename Wallet",
@@ -457,6 +476,8 @@
   "Sending this token is not supported yet.": "Sending this token is not supported yet.",
   "Sending this type of token is not supported by Core": "Sending this type of token is not supported by Core",
   "Set a limit that you will allow to automatically spend.": "Set a limit that you will allow to automatically spend.",
+  "Set up ": "Set up ",
+  "Setting up your authenticator app.": "Setting up your authenticator app.",
   "Settings": "Settings",
   "Show me Trending Tokens": "Show me Trending Tokens",
   "Show password": "Show password",
@@ -471,7 +492,9 @@
   "Solana": "Solana",
   "Some of the required parameters are invalid.": "Some of the required parameters are invalid.",
   "Some of the required parameters are missing.": "Some of the required parameters are missing.",
+  "Something Went Wrong": "Something Went Wrong",
   "Something bad happened please try again later!": "Something bad happened please try again later!",
+  "Something went wrong": "Something went wrong",
   "Something went wrong. Please try again.": "Something went wrong. Please try again.",
   "Sort": "Sort",
   "Spanish": "Spanish",
@@ -480,6 +503,7 @@
   "Stay updated on latest airdrops, events and more! You can unsubscribe anytime. For more details, see our <policyLink>Privacy Policy</policyLink>": "Stay updated on latest airdrops, events and more! You can unsubscribe anytime. For more details, see our <policyLink>Privacy Policy</policyLink>",
   "Storage update failed": "Storage update failed",
   "Strong password! Keep this one!": "Strong password! Keep this one!",
+  "Success!": "Success!",
   "Successfully imported the keystore file.": "Successfully imported the keystore file.",
   "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
   "Suggested slippage - your transaction will fail if the fail price changes unfavorable more than this percentage": "Suggested slippage - your transaction will fail if the fail price changes unfavorable more than this percentage",
@@ -588,6 +612,7 @@
   "Unsupported elliptic curve": "Unsupported elliptic curve",
   "Unsupported network": "Unsupported network",
   "Unsupported token type": "Unsupported token type",
+  "Update your recovery methods": "Update your recovery methods",
   "Updating accounts...": "Updating accounts...",
   "Upload a JSON file to import": "Upload a JSON file to import",
   "Upload keystore file": "Upload keystore file",
@@ -616,6 +641,7 @@
   "Wallet not found": "Wallet not found",
   "Wallet renamed": "Wallet renamed",
   "Wallet secrets not found for the requested ID": "Wallet secrets not found for the requested ID",
+  "We encountered an unexpected issue.": "We encountered an unexpected issue.",
   "We were not able to verify this code. Please try again.": "We were not able to verify this code. Please try again.",
   "We're unable to cover the gas fees for your transaction at this time. As a result, this feature has been disabled.": "We're unable to cover the gas fees for your transaction at this time. As a result, this feature has been disabled.",
   "Weak password! Try adding more characters": "Weak password! Try adding more characters",
@@ -631,6 +657,8 @@
   "You pay": "You pay",
   "You receive": "You receive",
   "You will be prompted {{remaining}} more time(s).": "You will be prompted {{remaining}} more time(s).",
+  "You will no longer be able to use this authenticator once you switch. You will need to re-add an authenticator": "You will no longer be able to use this authenticator once you switch. You will need to re-add an authenticator",
+  "You will no longer be able to use this method once you removed.": "You will no longer be able to use this method once you removed.",
   "You're about to terminate this session": "You're about to terminate this session",
   "Your account's private key is a fixed password for accessing the\n        specific addresses above. Keep it secure, anyone with this private key\n        can access the account associated with it.": "Your account's private key is a fixed password for accessing the\n        specific addresses above. Keep it secure, anyone with this private key\n        can access the account associated with it.",
   "Your export request has expired. Please try again.": "Your export request has expired. Please try again.",

apps/next/src/pages/Onboarding/components/CardMenu.tsx

@@ -7,6 +7,7 @@ import {
   StackProps,
   styled,
   Typography,
+  useTheme,
 } from '@avalabs/k2-alpine';
 import { FC, ReactNode, type ReactElement } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -26,6 +27,8 @@ type CardMenuItemProps = {
   icon: ReactElement;
   text: string;
   description?: string;
+  size?: string;
+  itemGap?: string;
 } & (
   | {
       link: string;
@@ -39,22 +42,32 @@ export const CardMenuItem: FC<CardMenuItemProps> = ({
   icon,
   text,
   description,
+  size,
   ...props
 }) => {
   const history = useHistory();
+  const theme = useTheme();
 
   const onClick =
     'onClick' in props ? props.onClick : () => history.push(props.link);
 
   return (
-    <CardMenuItemContainer onClick={onClick}>
+    <CardMenuItemContainer
+      onClick={onClick}
+      sx={{
+        gap: size === 'small' ? theme.spacing(1.5) : theme.spacing(3),
+        paddingX: size === 'small' ? theme.spacing(1.5) : theme.spacing(2.5),
+      }}
+    >
       {icon}
       <Stack className="CardLikeMenuItem-text-wrapper">
         <Stack gap={0.5}>
-          <Typography variant="button">{text}</Typography>
+          <Typography variant={size === 'small' ? 'subtitle3' : 'button'}>
+            {text}
+          </Typography>
           {description && (
             <Typography
-              variant="subtitle1"
+              variant={size === 'small' ? 'caption2' : 'subtitle1'}
               color="text.secondary"
               whiteSpace="normal"
             >
@@ -78,10 +91,7 @@ export const CardMenuItem: FC<CardMenuItemProps> = ({
 const CardMenuItemContainer = styled(MenuItem)(({ theme }) => ({
   flexDirection: 'row',
   justifyContent: 'space-between',
-  gap: theme.spacing(3),
   color: theme.palette.text.primary,
-  paddingLeft: theme.spacing(2.5),
-  paddingRight: theme.spacing(2.5),
   transition: 'background-color .15s ease-in-out',
 
   '& .CardLikeMenuItem-chevron': {

apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessChooseSetupMethod.tsx

@@ -1,7 +1,13 @@
 import { FC, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdOutlinePassword } from 'react-icons/md';
-import { Divider, EncryptedIcon, Stack, StackProps } from '@avalabs/k2-alpine';
+import {
+  Divider,
+  EncryptedIcon,
+  SecurityKeyIcon,
+  Stack,
+  StackProps,
+} from '@avalabs/k2-alpine';
 
 import {
   FullscreenModalActions,
@@ -63,7 +69,7 @@ export const SeedlessChooseSetupMethod: FC<SeedlessChooseSetupMethodProps> = ({
           />
           <CardMenuItem
             onClick={() => onMethodChosen('yubikey')}
-            icon={<MdOutlinePassword size={24} />} // TODO: replace with YubiKey icon
+            icon={<SecurityKeyIcon size={24} />}
             text={t('Yubikey')}
             description={t(
               `Use a YubiKey for physical, hardware-based protection and strong authentication.`,

apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessNameFidoKey.tsx

@@ -15,11 +15,13 @@ import { NavButton } from '@/pages/Onboarding/components/NavButton';
 type SeedlessNameFidoKeyProps = {
   keyType: 'passkey' | 'yubikey';
   onNext: (name: string) => void;
+  required?: boolean;
 };
 
 export const SeedlessNameFidoKey: FC<SeedlessNameFidoKeyProps> = ({
   keyType,
   onNext,
+  required,
 }) => {
   const { t } = useTranslation();
   const [name, setName] = useState('');
@@ -50,9 +52,11 @@ export const SeedlessNameFidoKey: FC<SeedlessNameFidoKeyProps> = ({
         </Stack>
       </FullscreenModalContent>
       <FullscreenModalActions>
-        <NavButton variant="text" onClick={() => onNext('')}>
-          {t(`Skip`)}
-        </NavButton>
+        {!required && (
+          <NavButton variant="text" onClick={() => onNext('')}>
+            {t(`Skip`)}
+          </NavButton>
+        )}
         <NavButton
           disabled={!name}
           color="primary"

apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx

@@ -26,6 +26,8 @@ export const SeedlessMfaLoginFlow: FC<SeedlessMfaLoginFlowProps> = ({
   const history = useHistory();
   const { registerBackButtonHandler, setTotal } = useModalPageControl();
   const { oidcToken, setSeedlessSignerToken } = useOnboardingContext();
+  // TODO: remove
+  console.log('oidcToken: ', oidcToken);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {

apps/next/src/pages/Settings/Settings.tsx

@@ -5,6 +5,9 @@ import { ChangePassword } from './components/ChangePassword';
 import { ConnectedSites } from './components/ConnectedSites';
 import { SettingsHomePage } from './components/Home';
 import { RecoveryPhrase } from './components/RecoveryPhrase';
+import { RecoveryMethods } from './components/RecoveryMethods';
+import { Authenticator } from './components/RecoveryMethods/Authenticator';
+import { FIDO } from './components/RecoveryMethods/FIDO/FIDO';
 import { NetworkManagement } from './components/NetworkManagement';
 
 export const Settings: FC = () => {
@@ -15,6 +18,16 @@ export const Settings: FC = () => {
       <Route path={`${path}/change-password`} component={ChangePassword} />
       <Route path={`${path}/connected-sites`} component={ConnectedSites} />
       <Route path={`${path}/recovery-phrase`} component={RecoveryPhrase} />
+      <Route
+        path={`${path}/recovery-method/authenticator`}
+        component={Authenticator}
+      />
+      <Route path={`${path}/recovery-method/fido/:id`} component={FIDO} exact />
+      <Route
+        path={`${path}/recovery-methods`}
+        component={RecoveryMethods}
+        exact
+      />
       <Route
         path={`${path}/network-management`}
         component={NetworkManagement}