From f7aef19ad5ef65c1663cbdd5b17ff408d8b82e4a Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Sat, 16 Aug 2025 13:57:18 +0200
Subject: [PATCH 01/22] feat: init the authenticator

---
 apps/next/src/pages/Settings/Settings.tsx     |   7 +
 .../pages/Settings/components/Home/Home.tsx   |   6 +-
 .../Authenticator/Authenticator.tsx           |  69 ++++++++++
 .../AuthenticatorVerifyScreen.tsx             |  19 +++
 .../RecoveryMethods/Authenticator/index.ts    |   1 +
 .../RecoveryMethods/RecoveryMethods.tsx       | 122 ++++++++++++++++++
 .../components/RecoveryMethods/index.ts       |   1 +
 apps/next/src/popup/app.tsx                   |   2 +
 .../services/seedless/SeedlessMfaService.ts   |   3 +
 9 files changed, 229 insertions(+), 1 deletion(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/index.ts
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/index.ts

diff --git a/apps/next/src/pages/Settings/Settings.tsx b/apps/next/src/pages/Settings/Settings.tsx
index 56c7fb56c..3003f42be 100644
--- a/apps/next/src/pages/Settings/Settings.tsx
+++ b/apps/next/src/pages/Settings/Settings.tsx
@@ -5,6 +5,8 @@ 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';
 
 export const Settings: FC = () => {
   const { path } = useRouteMatch();
@@ -14,6 +16,11 @@ 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-methods/authenticator`}
+        component={Authenticator}
+      />
+      <Route path={`${path}/recovery-methods`} component={RecoveryMethods} />
       <Route path={path} component={SettingsHomePage} />
     </Switch>
   );
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index e38b9783e..40d2925f3 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -186,7 +186,11 @@ export const SettingsHomePage = () => {
           />
         )}
         <SettingsNavItem label={t('Reset recovery phrase')} divider />
-        <SettingsNavItem label={t('Recovery methods')} divider />
+        <SettingsNavItem
+          label={t('Recovery methods')}
+          divider
+          href={`${path}/recovery-methods`}
+        />
         <SettingsNavItem
           label={t('Participate in Core Analytics')}
           description={t(
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
new file mode 100644
index 000000000..1a75b2a42
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
@@ -0,0 +1,69 @@
+import { Page } from '@/components/Page';
+import { Stack, Typography } from '@avalabs/k2-alpine';
+import { FC, useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TotpResetChallenge } from '@core/types';
+import { useState } from 'react';
+import { useGoBack, useSeedlessMfaManager } from '@core/ui';
+import browser from 'webextension-polyfill';
+import { AuthenticatorVerifyScreen } from './AuthenticatorVerifyScreen';
+
+export const Authenticator: FC = () => {
+  const { t } = useTranslation();
+  const {
+    initAuthenticatorChange,
+    completeAuthenticatorChange,
+    hasFidoConfigured,
+    hasTotpConfigured,
+  } = useSeedlessMfaManager();
+  const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
+  console.log('totpChallenge: ', totpChallenge);
+  const goBack = useGoBack();
+
+  const initChange = useCallback(async () => {
+    console.log('initChange: ');
+    // if (hasFidoConfigured) {
+    //   browser.tabs.create({
+    //     url: `${ContextContainer.FULLSCREEN}#/update-recovery-methods`,
+    //   });
+    //   return;
+    // }
+
+    // setState(State.Initiated);
+    try {
+      console.log('try: ');
+      const challenge = await initAuthenticatorChange();
+      console.log('challenge: ', challenge);
+      setTotpChallenge(challenge);
+      // setState(State.Pending);
+    } catch (e) {
+      console.log('catch: ', e);
+      setTotpChallenge(undefined);
+      // setState(State.Failure);
+    }
+  }, [initAuthenticatorChange]);
+
+  useEffect(() => {
+    console.log('init');
+    initChange();
+  }, [initChange]);
+
+  return (
+    <Page
+      title={t('Scan QR code')}
+      withBackButton
+      contentProps={{ justifyContent: 'flex-start' }}
+    >
+      <Typography variant="caption">
+        {t(
+          'Open any authenticator app and scan the QR code below or enter the code manually',
+        )}
+      </Typography>
+      {/* <AuthenticatorVerifyScreen
+        onBackClick={goBack}
+        totpChallenge={totpChallenge}
+        onNextClick={() => console.log('Next clicked')}
+      /> */}
+    </Page>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
new file mode 100644
index 000000000..9caa9d833
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from '@avalabs/k2-alpine';
+import QRCode from 'qrcode.react';
+
+export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
+  const theme = useTheme();
+  return (
+    <div>
+      <h1>Authenticator Verify Screen</h1>
+      <QRCode
+        renderAs="svg"
+        fgColor={theme.palette.common.black}
+        bgColor={theme.palette.common.white}
+        value={totpChallenge.totpUrl}
+        level="H"
+        size={188}
+      />
+    </div>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/index.ts b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/index.ts
new file mode 100644
index 000000000..82c26be9a
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/index.ts
@@ -0,0 +1 @@
+export * from './Authenticator';
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
new file mode 100644
index 000000000..353c06ab9
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -0,0 +1,122 @@
+import { Page } from '@/components/Page';
+import {
+  Box,
+  ChevronRightIcon,
+  Divider,
+  EncryptedIcon,
+  IconButton,
+  Paper,
+  PasswordIcon,
+  SecurityKeyIcon,
+  Typography,
+} from '@avalabs/k2-alpine';
+import { useAnalyticsContext } from '@core/ui';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+
+export const RecoveryMethods: FC = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { capture } = useAnalyticsContext();
+  const { path } = useRouteMatch();
+  console.log('path: ', path);
+
+  const cards = [
+    {
+      icon: <PasswordIcon fontSize="large" />,
+      title: t('Passkey'),
+      description: t(
+        'Passkeys are used for quick, password-free recovery and enhanced security.',
+      ),
+      to: '/onboarding/import',
+      analyticsKey: 'AddPasskeyClicked',
+    },
+    {
+      icon: <EncryptedIcon fontSize="large" />,
+      title: t('Authenticator app'),
+      description: t(
+        'Authenticator apps generate secure, time-based codes for wallet recovery.',
+      ),
+      to: `${path}/authenticator`,
+      analyticsKey: 'AddAuthenticatorClicked',
+    },
+    {
+      icon: <SecurityKeyIcon fontSize="large" />,
+      title: t('Yubikey'),
+      description: t(
+        'YubiKeys are physical, hardware-based protection and strong authentication.',
+      ),
+      to: '/onboarding/import',
+      analyticsKey: 'AddYubikeyClicked',
+    },
+  ];
+
+  return (
+    <Page
+      title={t('Recovery methods')}
+      withBackButton
+      contentProps={{ justifyContent: 'flex-start' }}
+    >
+      <Paper
+        elevation={1}
+        sx={{
+          borderRadius: 2,
+        }}
+      >
+        {cards.map((card, idx) => {
+          console.log('card: ', card);
+          return (
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                p: 2,
+                position: 'relative',
+                cursor: 'pointer',
+                '&:hover': { backgroundColor: 'action.hover' },
+              }}
+              onClick={() => {
+                capture(card.analyticsKey);
+                history.push(card.to);
+              }}
+              key={card.title}
+            >
+              <Box
+                sx={{
+                  mr: 2,
+                  color: 'primary.main',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                {card.icon}
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <Typography variant="h6" fontWeight={600}>
+                  {card.title}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {card.description}
+                </Typography>
+              </Box>
+              <IconButton edge="end" size="large" sx={{ ml: 1 }}>
+                <ChevronRightIcon />
+              </IconButton>
+              {idx < cards.length - 1 && (
+                <Divider
+                  sx={{
+                    position: 'absolute',
+                    left: 64,
+                    right: 0,
+                    bottom: 0,
+                  }}
+                />
+              )}
+            </Box>
+          );
+        })}
+      </Paper>
+    </Page>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/index.ts b/apps/next/src/pages/Settings/components/RecoveryMethods/index.ts
new file mode 100644
index 000000000..1251a3f5b
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/index.ts
@@ -0,0 +1 @@
+export * from './RecoveryMethods';
diff --git a/apps/next/src/popup/app.tsx b/apps/next/src/popup/app.tsx
index 20f36782d..0ad65f114 100644
--- a/apps/next/src/popup/app.tsx
+++ b/apps/next/src/popup/app.tsx
@@ -15,6 +15,7 @@ import {
   NetworkContextProvider,
   OnboardingContextProvider,
   PermissionContextProvider,
+  SeedlessMfaManagementProvider,
   usePageHistory,
   usePreferredColorScheme,
   WalletContextProvider,
@@ -94,6 +95,7 @@ export function App() {
           <ThemeProvider theme={preferredColorScheme} />,
           <AccountsContextProvider />,
           <NetworkContextProvider />,
+          <SeedlessMfaManagementProvider />,
           <OnboardingContextProvider
             onError={(message: string) => toast.error(message)}
             LoadingComponent={CircularProgress}
diff --git a/packages/service-worker/src/services/seedless/SeedlessMfaService.ts b/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
index acb38a552..887ecdaad 100644
--- a/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
+++ b/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
@@ -168,9 +168,12 @@ export class SeedlessMfaService implements OnUnlock, OnLock {
   async initAuthenticatorChange(tabId?: number): Promise<TotpResetChallenge> {
     const session = await this.#getSession();
     const response = await session.resetTotpStart(TOTP_ISSUER);
+    console.log('response: ', response);
+    console.log('response.requiresMfa(): ', response.requiresMfa());
 
     if (response.requiresMfa()) {
       const methods = await this.getRecoveryMethods();
+      console.log('methods: ', methods);
       const method =
         methods.length === 1
           ? methods[0]

From 5b6f11b67601d592ee33ea8eec272cf47bc9975f Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Mon, 25 Aug 2025 14:13:41 +0200
Subject: [PATCH 02/22] feat: add card

---
 .../screens/SeedlessChooseSetupMethod.tsx     | 10 ++-
 .../pages/Settings/components/Home/Home.tsx   | 11 +++
 .../RecoveryMethods/RecoveryMethods.tsx       | 69 +++++--------------
 .../SeedlessMfaManagementProvider.tsx         | 13 +++-
 4 files changed, 49 insertions(+), 54 deletions(-)

diff --git a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessChooseSetupMethod.tsx b/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessChooseSetupMethod.tsx
index 23ed9e37d..937cb39a2 100644
--- a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessChooseSetupMethod.tsx
+++ b/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.`,
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 40d2925f3..96cdf0f77 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -14,6 +14,7 @@ import {
   useContactsContext,
   useSettingsContext,
   useWalletContext,
+  useSeedlessMfaManager,
 } from '@core/ui';
 
 import { LanguageSelector } from '@/components/LanguageSelector';
@@ -52,6 +53,8 @@ export const SettingsHomePage = () => {
   const [isPrivacyMode, setIsPrivacyMode] = useState(false);
   const [isCoreAiEnabled, setIsCoreAiEnabled] = useState(false);
   const { showTrendingTokens, setShowTrendingTokens } = useSettingsContext();
+  const { isMfaSetupPromptVisible } = useSeedlessMfaManager();
+  console.log('isMfaSetupPromptVisible: ', isMfaSetupPromptVisible);
 
   return (
     <Page
@@ -81,6 +84,14 @@ export const SettingsHomePage = () => {
           )}
         />
       </Stack>
+      <Stack>
+        {isMfaSetupPromptVisible && (
+          <SettingsNavItem
+            label={t('Finish setting up recovery methods')}
+            href={`${path}/recovery-methods`}
+          />
+        )}
+      </Stack>
       <SettingsCard
         title={t('General')}
         description={t(
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index 353c06ab9..c2911eb3b 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -1,4 +1,5 @@
 import { Page } from '@/components/Page';
+import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import {
   Box,
   ChevronRightIcon,
@@ -13,6 +14,7 @@ import {
 import { useAnalyticsContext } from '@core/ui';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { MdOutlinePassword } from 'react-icons/md';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 export const RecoveryMethods: FC = () => {
@@ -64,58 +66,23 @@ export const RecoveryMethods: FC = () => {
           borderRadius: 2,
         }}
       >
-        {cards.map((card, idx) => {
-          console.log('card: ', card);
-          return (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                p: 2,
-                position: 'relative',
-                cursor: 'pointer',
-                '&:hover': { backgroundColor: 'action.hover' },
-              }}
-              onClick={() => {
-                capture(card.analyticsKey);
-                history.push(card.to);
-              }}
-              key={card.title}
-            >
-              <Box
-                sx={{
-                  mr: 2,
-                  color: 'primary.main',
-                  display: 'flex',
-                  alignItems: 'center',
+        <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
+          {cards.map((card, idx) => {
+            console.log('card: ', card);
+            return (
+              <CardMenuItem
+                onClick={() => {
+                  capture(card.analyticsKey);
+                  history.push(card.to);
                 }}
-              >
-                {card.icon}
-              </Box>
-              <Box sx={{ flex: 1 }}>
-                <Typography variant="h6" fontWeight={600}>
-                  {card.title}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  {card.description}
-                </Typography>
-              </Box>
-              <IconButton edge="end" size="large" sx={{ ml: 1 }}>
-                <ChevronRightIcon />
-              </IconButton>
-              {idx < cards.length - 1 && (
-                <Divider
-                  sx={{
-                    position: 'absolute',
-                    left: 64,
-                    right: 0,
-                    bottom: 0,
-                  }}
-                />
-              )}
-            </Box>
-          );
-        })}
+                icon={card.icon}
+                text={card.title}
+                description={card.description}
+                key={idx}
+              />
+            );
+          })}
+        </CardMenu>
       </Paper>
     </Page>
   );
diff --git a/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx b/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
index 454518e0d..81fbb54ad 100644
--- a/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
+++ b/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
@@ -79,6 +79,8 @@ export const SeedlessMfaManagementProvider = ({
 }: SeedlessMfaManagementContextProps) => {
   const { events, request } = useConnectionContext();
   const { walletDetails } = useWalletContext();
+  // TODO: FIX has no walletDetails
+  console.log('walletDetails: ', walletDetails);
   const { isFlagEnabled } = useFeatureFlagContext();
   const areMfaSettingsAvailable = isFlagEnabled(
     FeatureGates.SEEEDLESS_MFA_SETTINGS,
@@ -93,6 +95,11 @@ export const SeedlessMfaManagementProvider = ({
   const [recoveryMethods, setRecoveryMethods] = useState<RecoveryMethod[]>([]);
 
   const isMfaSetupPromptVisible = useMemo(() => {
+    // TODO: FIX the values
+    console.log('areMfaSettingsAvailable: ', areMfaSettingsAvailable);
+    console.log('hasLoadedRecoveryMethods: ', hasLoadedRecoveryMethods);
+    console.log(' walletDetails?.type: ', walletDetails?.type);
+    console.log('recoveryMethods: ', recoveryMethods);
     return (
       areMfaSettingsAvailable &&
       hasLoadedRecoveryMethods &&
@@ -110,6 +117,7 @@ export const SeedlessMfaManagementProvider = ({
     setIsLoadingRecoveryMethods(true);
 
     try {
+      console.log('try: ');
       const methods = await incrementalPromiseResolve(
         () =>
           request<GetRecoveryMethodsHandler>({
@@ -121,12 +129,15 @@ export const SeedlessMfaManagementProvider = ({
         (err) => err === 'Forbidden',
       );
 
+      console.log('methods: ', methods);
       setRecoveryMethods(methods);
       setHasLoadedRecoveryMethods(true);
-    } catch {
+    } catch (e) {
+      console.log('e: ', e);
       setRecoveryMethods([]);
       setHasLoadedRecoveryMethods(false);
     } finally {
+      console.log('finally: ');
       setIsLoadingRecoveryMethods(false);
     }
   }, [request]);

From 4640cadee24d30e5bf8eae49a29cd09905c7333b Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Mon, 25 Aug 2025 14:56:31 +0200
Subject: [PATCH 03/22] fix: providers order

---
 .../src/pages/Settings/components/Home/Home.tsx     |  1 +
 apps/next/src/popup/app.tsx                         |  2 +-
 .../src/contexts/SeedlessMfaManagementProvider.tsx  | 13 +------------
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 96cdf0f77..8e129b0c5 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -44,6 +44,7 @@ export const SettingsHomePage = () => {
   const { t } = useTranslation();
   const { lockWallet } = useSettingsContext();
   const { walletDetails } = useWalletContext();
+  console.log('SettingsHomePage walletDetails: ', walletDetails);
   const { contacts } = useContactsContext();
   const { path } = useRouteMatch();
   const { push } = useHistory();
diff --git a/apps/next/src/popup/app.tsx b/apps/next/src/popup/app.tsx
index e10703a0e..27f145582 100644
--- a/apps/next/src/popup/app.tsx
+++ b/apps/next/src/popup/app.tsx
@@ -99,7 +99,6 @@ export function App() {
           <ThemeProvider theme={preferredColorScheme} />,
           <AccountsContextProvider />,
           <NetworkContextProvider />,
-          <SeedlessMfaManagementProvider />,
           <LedgerContextProvider />,
           <KeystoneContextProvider />,
           <PersonalAvatarProvider />,
@@ -113,6 +112,7 @@ export function App() {
             OnboardingScreen={Onboarding}
           />,
           <WalletContextProvider LockedComponent={LockScreen} />,
+          <SeedlessMfaManagementProvider />,
           <NetworkFeeContextProvider />,
           <ApprovalsContextProvider />,
         ]) as ReactElement[]
diff --git a/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx b/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
index 81fbb54ad..454518e0d 100644
--- a/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
+++ b/packages/ui/src/contexts/SeedlessMfaManagementProvider.tsx
@@ -79,8 +79,6 @@ export const SeedlessMfaManagementProvider = ({
 }: SeedlessMfaManagementContextProps) => {
   const { events, request } = useConnectionContext();
   const { walletDetails } = useWalletContext();
-  // TODO: FIX has no walletDetails
-  console.log('walletDetails: ', walletDetails);
   const { isFlagEnabled } = useFeatureFlagContext();
   const areMfaSettingsAvailable = isFlagEnabled(
     FeatureGates.SEEEDLESS_MFA_SETTINGS,
@@ -95,11 +93,6 @@ export const SeedlessMfaManagementProvider = ({
   const [recoveryMethods, setRecoveryMethods] = useState<RecoveryMethod[]>([]);
 
   const isMfaSetupPromptVisible = useMemo(() => {
-    // TODO: FIX the values
-    console.log('areMfaSettingsAvailable: ', areMfaSettingsAvailable);
-    console.log('hasLoadedRecoveryMethods: ', hasLoadedRecoveryMethods);
-    console.log(' walletDetails?.type: ', walletDetails?.type);
-    console.log('recoveryMethods: ', recoveryMethods);
     return (
       areMfaSettingsAvailable &&
       hasLoadedRecoveryMethods &&
@@ -117,7 +110,6 @@ export const SeedlessMfaManagementProvider = ({
     setIsLoadingRecoveryMethods(true);
 
     try {
-      console.log('try: ');
       const methods = await incrementalPromiseResolve(
         () =>
           request<GetRecoveryMethodsHandler>({
@@ -129,15 +121,12 @@ export const SeedlessMfaManagementProvider = ({
         (err) => err === 'Forbidden',
       );
 
-      console.log('methods: ', methods);
       setRecoveryMethods(methods);
       setHasLoadedRecoveryMethods(true);
-    } catch (e) {
-      console.log('e: ', e);
+    } catch {
       setRecoveryMethods([]);
       setHasLoadedRecoveryMethods(false);
     } finally {
-      console.log('finally: ');
       setIsLoadingRecoveryMethods(false);
     }
   }, [request]);

From aab20b54b032554dedad952ef452fd47b5a0b1ad Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Wed, 27 Aug 2025 16:18:25 +0200
Subject: [PATCH 04/22] feat: add methods list, methods and details screen

---
 apps/next/src/pages/Settings/Settings.tsx     |   8 +-
 .../pages/Settings/components/Home/Home.tsx   |  23 +++-
 .../Authenticator/Authenticator.tsx           |  33 ++++-
 .../Authenticator/AuthenticatorDetails.tsx    |  14 ++
 .../Authenticator/AuthenticatorVerifyCode.tsx |  31 +++++
 .../AuthenticatorVerifyScreen.tsx             |  53 +++++---
 .../RecoveryMethods/FIDO/FIDODetails.tsx      |  13 ++
 .../RecoveryMethods/RecoveryMethod.tsx        |  36 +++++
 .../RecoveryMethods/RecoveryMethodCard.tsx    |  68 ++++++++++
 .../RecoveryMethods/RecoveryMethodList.tsx    |  69 ++++++++++
 .../RecoveryMethods/RecoveryMethods.tsx       | 123 ++++++++++++------
 11 files changed, 399 insertions(+), 72 deletions(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx

diff --git a/apps/next/src/pages/Settings/Settings.tsx b/apps/next/src/pages/Settings/Settings.tsx
index 3003f42be..29872c70c 100644
--- a/apps/next/src/pages/Settings/Settings.tsx
+++ b/apps/next/src/pages/Settings/Settings.tsx
@@ -10,6 +10,7 @@ import { Authenticator } from './components/RecoveryMethods/Authenticator';
 
 export const Settings: FC = () => {
   const { path } = useRouteMatch();
+  console.log('path: ', path);
   return (
     <Switch>
       <Route path={`${path}/avatar`} component={AvatarSelector} />
@@ -19,8 +20,13 @@ export const Settings: FC = () => {
       <Route
         path={`${path}/recovery-methods/authenticator`}
         component={Authenticator}
+        exact
+      />
+      <Route
+        path={`${path}/recovery-methods`}
+        component={RecoveryMethods}
+        exact
       />
-      <Route path={`${path}/recovery-methods`} component={RecoveryMethods} />
       <Route path={path} component={SettingsHomePage} />
     </Switch>
   );
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 8e129b0c5..d4595db94 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -15,6 +15,7 @@ import {
   useSettingsContext,
   useWalletContext,
   useSeedlessMfaManager,
+  useFeatureFlagContext,
 } from '@core/ui';
 
 import { LanguageSelector } from '@/components/LanguageSelector';
@@ -29,7 +30,7 @@ import {
 } from '@/config';
 
 import { getContactsPath } from '@/config/routes';
-import { SecretType } from '@core/types';
+import { FeatureGates, SecretType } from '@core/types';
 import {
   AvatarButton,
   Footer,
@@ -55,6 +56,9 @@ export const SettingsHomePage = () => {
   const [isCoreAiEnabled, setIsCoreAiEnabled] = useState(false);
   const { showTrendingTokens, setShowTrendingTokens } = useSettingsContext();
   const { isMfaSetupPromptVisible } = useSeedlessMfaManager();
+  const { featureFlags } = useFeatureFlagContext();
+  const areMfaSettingsAvailable =
+    featureFlags[FeatureGates.SEEEDLESS_MFA_SETTINGS];
   console.log('isMfaSetupPromptVisible: ', isMfaSetupPromptVisible);
 
   return (
@@ -85,6 +89,7 @@ export const SettingsHomePage = () => {
           )}
         />
       </Stack>
+
       <Stack>
         {isMfaSetupPromptVisible && (
           <SettingsNavItem
@@ -93,6 +98,7 @@ export const SettingsHomePage = () => {
           />
         )}
       </Stack>
+
       <SettingsCard
         title={t('General')}
         description={t(
@@ -198,11 +204,16 @@ export const SettingsHomePage = () => {
           />
         )}
         <SettingsNavItem label={t('Reset recovery phrase')} divider />
-        <SettingsNavItem
-          label={t('Recovery methods')}
-          divider
-          href={`${path}/recovery-methods`}
-        />
+
+        {walletDetails?.type === SecretType.Seedless &&
+          areMfaSettingsAvailable && (
+            <SettingsNavItem
+              label={t('Recovery methods')}
+              divider
+              href={`${path}/recovery-methods`}
+            />
+          )}
+
         <SettingsNavItem
           label={t('Participate in Core Analytics')}
           description={t(
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
index 1a75b2a42..b918e67ea 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
@@ -1,12 +1,14 @@
 import { Page } from '@/components/Page';
 import { Stack, Typography } from '@avalabs/k2-alpine';
-import { FC, useCallback, useEffect } from 'react';
+import { FC, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TotpResetChallenge } from '@core/types';
 import { useState } from 'react';
 import { useGoBack, useSeedlessMfaManager } from '@core/ui';
 import browser from 'webextension-polyfill';
 import { AuthenticatorVerifyScreen } from './AuthenticatorVerifyScreen';
+import { SeedlessTotpQRCode } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
+import { AuthenticatorVerifyCode } from './AuthenticatorVerifyCode';
 
 export const Authenticator: FC = () => {
   const { t } = useTranslation();
@@ -17,6 +19,7 @@ export const Authenticator: FC = () => {
     hasTotpConfigured,
   } = useSeedlessMfaManager();
   const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
+  const [showSecret, setShowSecret] = useState(false);
   console.log('totpChallenge: ', totpChallenge);
   const goBack = useGoBack();
 
@@ -44,10 +47,17 @@ export const Authenticator: FC = () => {
   }, [initAuthenticatorChange]);
 
   useEffect(() => {
-    console.log('init');
     initChange();
   }, [initChange]);
 
+  const totpSecret = useMemo(() => {
+    if (!totpChallenge) {
+      return '';
+    }
+
+    return new URL(totpChallenge.totpUrl).searchParams.get('secret') ?? '';
+  }, [totpChallenge]);
+
   return (
     <Page
       title={t('Scan QR code')}
@@ -59,11 +69,20 @@ export const Authenticator: FC = () => {
           'Open any authenticator app and scan the QR code below or enter the code manually',
         )}
       </Typography>
-      {/* <AuthenticatorVerifyScreen
-        onBackClick={goBack}
-        totpChallenge={totpChallenge}
-        onNextClick={() => console.log('Next clicked')}
-      /> */}
+      {totpChallenge && (
+        <AuthenticatorVerifyScreen
+          onBackClick={() => console.log('Back clicked')}
+          totpChallenge={totpChallenge}
+          onNextClick={() => console.log('Next clicked')}
+          onShowSecret={() => setShowSecret(true)}
+        />
+      )}
+      {showSecret && <AuthenticatorVerifyCode totpSecret={totpSecret} />}
+
+      {/* <SeedlessTotpQRCode
+				challengeUrl={totpChallenge?.totpUrl ?? ''}
+				onNext={() => console.log('next')}
+			/> */}
     </Page>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
new file mode 100644
index 000000000..bae76b3a7
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -0,0 +1,14 @@
+import { Page } from '@/components/Page';
+import { Button } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+export const AuthenticatorDetails = ({ method }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div>AuthenticatorDetails</div>
+      <Button>{t('Change Authenticator App')}</Button>
+      <Button>{t('Removes')}</Button>
+    </>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
new file mode 100644
index 000000000..26987db1b
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
@@ -0,0 +1,31 @@
+import { Stack, toast, Typography, useTheme } from '@avalabs/k2-alpine';
+import QRCode from 'qrcode.react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const AuthenticatorVerifyCode = ({ totpSecret }) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Stack maxWidth={300} textAlign="center" gap={1}>
+        <Typography variant="subtitle1" color="text.secondary">
+          {t('Alternatively, open any authenticator app and enter this code:')}
+        </Typography>
+        <Typography
+          variant="mono"
+          color="text.primary"
+          role="button"
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            navigator.clipboard.writeText(totpSecret);
+            toast.success(t('Code copied to clipboard'));
+          }}
+        >
+          {totpSecret}
+        </Typography>
+      </Stack>
+    </div>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
index 9caa9d833..b66a366ed 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -1,19 +1,42 @@
-import { useTheme } from '@avalabs/k2-alpine';
+import { Button, Stack, toast, Typography, useTheme } from '@avalabs/k2-alpine';
 import QRCode from 'qrcode.react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
-  const theme = useTheme();
-  return (
-    <div>
-      <h1>Authenticator Verify Screen</h1>
-      <QRCode
-        renderAs="svg"
-        fgColor={theme.palette.common.black}
-        bgColor={theme.palette.common.white}
-        value={totpChallenge.totpUrl}
-        level="H"
-        size={188}
-      />
-    </div>
-  );
+	const theme = useTheme();
+	const { t } = useTranslation();
+	
+	return (
+		<div>
+			<QRCode
+				renderAs="svg"
+				fgColor={theme.palette.common.black}
+				bgColor={theme.palette.common.white}
+				value={totpChallenge.totpUrl}
+				level="H"
+				size={188}
+			/>
+			<Button type='secondary' size='small'>{t('Enter code manually')}</Button>
+			{/* <Stack maxWidth={300} textAlign="center" gap={1}>
+				<Typography variant="subtitle1" color="text.secondary">
+					{t(
+						'Alternatively, open any authenticator app and enter this code:',
+					)}
+				</Typography>
+				<Typography
+					variant="mono"
+					color="text.primary"
+					role="button"
+					sx={{ cursor: 'pointer' }}
+					onClick={() => {
+						navigator.clipboard.writeText(totpSecret);
+						toast.success(t('Code copied to clipboard'));
+					}}
+				>
+					{totpSecret}
+				</Typography>
+			</Stack> */}
+		</div>
+	);
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
new file mode 100644
index 000000000..6d2744928
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
@@ -0,0 +1,13 @@
+import { Page } from '@/components/Page';
+import { Button } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+export const FIDODetails = ({ method }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div>FIDODetails</div>
+      <Button>{t('Remove')}</Button>
+    </>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
new file mode 100644
index 000000000..eb8044279
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -0,0 +1,36 @@
+import { Page } from '@/components/Page';
+import { Button } from '@avalabs/k2-alpine';
+import { useSeedlessMfaManager } from '@core/ui';
+import { useTranslation } from 'react-i18next';
+import { AuthenticatorDetails } from './Authenticator/AuthenticatorDetails';
+import { FIDODetails } from './FIDO/FIDODetails';
+
+export const RecoveryMethod = ({ method }) => {
+  console.log('RecoveryMethod: ', method);
+  const { t } = useTranslation();
+  const { hasTotpConfigured } = useSeedlessMfaManager();
+  return (
+    <Page
+      title={t('Recovery Method Details')}
+      withBackButton
+      contentProps={{ justifyContent: 'flex-start' }}
+    >
+      {method.type === 'totp' && <AuthenticatorDetails method={method} />}
+      {method.type === 'fido' && <FIDODetails method={method} />}
+      <Button
+        // ref={submitRef}
+        variant="contained"
+        color="primary"
+        size="extension"
+        fullWidth
+        // disabled={!isFormValid || isSubmitting}
+        // loading={isSubmitting}
+        // onClick={isFormValid ? handleSubmit : undefined}
+        sx={{ mt: 'auto' }}
+        disabled={!hasTotpConfigured}
+      >
+        {t('Remove recovery method')}
+      </Button>
+    </Page>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
new file mode 100644
index 000000000..94109c353
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
@@ -0,0 +1,68 @@
+import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
+import { Button } from '@avalabs/k2-alpine';
+import { useAnalyticsContext } from '@core/ui';
+import { useTranslation } from 'react-i18next';
+
+export const RecoveryMethodCard = ({ method, onClick, methodName }) => {
+  console.log('method: ', method);
+  const { capture } = useAnalyticsContext();
+  const { t } = useTranslation();
+  return (
+    <>
+      <CardMenuItem
+        onClick={onClick}
+        // icon={method.icon}
+        text={methodName || method.name}
+        description={`${t('Added ')} ${new Date(method.last_used_at)}`}
+        key={method}
+      />
+      {/* <Button
+        // ref={submitRef}
+        variant="contained"
+        color="primary"
+        size="extension"
+        fullWidth
+        // disabled={!isFormValid || isSubmitting}
+        // loading={isSubmitting}
+        // onClick={isFormValid ? handleSubmit : undefined}
+        sx={{ mt: 'auto' }}
+      >
+        {t('Remove')}
+      </Button> */}
+    </>
+    // <Paper
+    //   key={index}
+    //   elevation={1}
+    //   sx={{
+    //     padding: 2,
+    //     marginBottom: 2,
+    //     borderRadius: 2,
+    //     display: 'flex',
+    //     alignItems: 'center',
+    //     justifyContent: 'space-between',
+    //   }}
+    // >
+    //   <div>
+    //     <Typography variant="h6">
+    //       {method.type === 'totp' && t('Authenticator App')}
+    //       {method.type === 'fido' && t('Security Key')}
+    //       {method.type === 'passkey' && t('Passkey')}
+    //     </Typography>
+    //     <Typography variant="body2" color="text.secondary">
+    //       {t('Added on')} {new Date(method.addedAt).toLocaleDateString()}
+    //     </Typography>
+    //   </div>
+    //   <div>
+    //     <Button
+    //       variant="outlined"
+    //       color="error"
+    //       onClick={() => {
+    //         // Handle removal of recovery method
+    //       }}
+    //     >
+    //       {t('Remove')}
+    //     </Button>
+    //   </div>
+    // </Paper>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
new file mode 100644
index 000000000..6c2c1b62d
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -0,0 +1,69 @@
+import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
+import {
+  Divider,
+  EncryptedIcon,
+  PasswordIcon,
+  SecurityKeyIcon,
+} from '@avalabs/k2-alpine';
+import { useAnalyticsContext } from '@core/ui';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+
+export const RecoveryMethodList = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { capture } = useAnalyticsContext();
+  const { path } = useRouteMatch();
+
+  const recoveryMethodCards = [
+    {
+      icon: <PasswordIcon fontSize="large" />,
+      title: t('Passkey'),
+      description: t(
+        'Passkeys are used for quick, password-free recovery and enhanced security.',
+      ),
+      to: '/onboarding/import',
+      analyticsKey: 'AddPasskeyClicked',
+    },
+    {
+      icon: <EncryptedIcon fontSize="large" />,
+      title: t('Authenticator app'),
+      description: t(
+        'Authenticator apps generate secure, time-based codes for wallet recovery.',
+      ),
+      to: `${path}/authenticator`,
+      analyticsKey: 'AddAuthenticatorClicked',
+    },
+    {
+      icon: <SecurityKeyIcon fontSize="large" />,
+      title: t('Yubikey'),
+      description: t(
+        'YubiKeys are physical, hardware-based protection and strong authentication.',
+      ),
+      to: '/onboarding/import',
+      analyticsKey: 'AddYubikeyClicked',
+    },
+  ];
+
+  return (
+    <div>
+      <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
+        {recoveryMethodCards.map((card, idx) => {
+          return (
+            <CardMenuItem
+              onClick={() => {
+                capture(card.analyticsKey);
+                history.push(card.to);
+              }}
+              icon={card.icon}
+              text={card.title}
+              description={card.description}
+              key={idx}
+            />
+          );
+        })}
+      </CardMenu>
+    </div>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index c2911eb3b..04be4f610 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -2,6 +2,7 @@ import { Page } from '@/components/Page';
 import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import {
   Box,
+  Button,
   ChevronRightIcon,
   Divider,
   EncryptedIcon,
@@ -9,13 +10,22 @@ import {
   Paper,
   PasswordIcon,
   SecurityKeyIcon,
+  Skeleton,
   Typography,
 } from '@avalabs/k2-alpine';
-import { useAnalyticsContext } from '@core/ui';
-import { FC } from 'react';
+import { FeatureGates } from '@core/types';
+import {
+  useAnalyticsContext,
+  useFeatureFlagContext,
+  useSeedlessMfaManager,
+} from '@core/ui';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdOutlinePassword } from 'react-icons/md';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+import { RecoveryMethodList } from './RecoveryMethodList';
+import { RecoveryMethodCard } from './RecoveryMethodCard';
+import { RecoveryMethod } from './RecoveryMethod';
 
 export const RecoveryMethods: FC = () => {
   const { t } = useTranslation();
@@ -23,36 +33,24 @@ export const RecoveryMethods: FC = () => {
   const { capture } = useAnalyticsContext();
   const { path } = useRouteMatch();
   console.log('path: ', path);
+  const [selectedMethod, setSelectedMethod] = useState(null);
+  const {
+    isLoadingRecoveryMethods,
+    recoveryMethods,
+    hasFidoConfigured,
+    hasMfaConfigured,
+    hasTotpConfigured,
+  } = useSeedlessMfaManager();
+  // console.log('isLoadingRecoveryMethods: ', isLoadingRecoveryMethods);
+  // console.log('recoveryMethods: ', recoveryMethods);
+  // console.log('hasFidoConfigured: ', hasFidoConfigured);
+  // console.log('hasMfaConfigured: ', hasMfaConfigured);
+  // console.log('hasTotpConfigured: ', hasTotpConfigured);
 
-  const cards = [
-    {
-      icon: <PasswordIcon fontSize="large" />,
-      title: t('Passkey'),
-      description: t(
-        'Passkeys are used for quick, password-free recovery and enhanced security.',
-      ),
-      to: '/onboarding/import',
-      analyticsKey: 'AddPasskeyClicked',
-    },
-    {
-      icon: <EncryptedIcon fontSize="large" />,
-      title: t('Authenticator app'),
-      description: t(
-        'Authenticator apps generate secure, time-based codes for wallet recovery.',
-      ),
-      to: `${path}/authenticator`,
-      analyticsKey: 'AddAuthenticatorClicked',
-    },
-    {
-      icon: <SecurityKeyIcon fontSize="large" />,
-      title: t('Yubikey'),
-      description: t(
-        'YubiKeys are physical, hardware-based protection and strong authentication.',
-      ),
-      to: '/onboarding/import',
-      analyticsKey: 'AddYubikeyClicked',
-    },
-  ];
+  console.log('selectedMethod: ', selectedMethod);
+  if (selectedMethod) {
+    return <RecoveryMethod method={selectedMethod} />;
+  }
 
   return (
     <Page
@@ -64,25 +62,64 @@ export const RecoveryMethods: FC = () => {
         elevation={1}
         sx={{
           borderRadius: 2,
+          overflow: 'hidden',
         }}
       >
-        <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
-          {cards.map((card, idx) => {
-            console.log('card: ', card);
+        {isLoadingRecoveryMethods && (
+          <>
+            <Skeleton variant="rectangular" sx={{ width: 297, height: 220 }} />
+          </>
+        )}
+        {!isLoadingRecoveryMethods && !hasMfaConfigured ? (
+          <RecoveryMethodList />
+        ) : (
+          recoveryMethods.map((method) => {
+            if (method.type === 'totp') {
+              return (
+                <RecoveryMethodCard
+                  method={method}
+                  key="totp"
+                  methodName={t('Authenticator')}
+                  // methodName={t('Authenticator')}
+                  onClick={() => {
+                    capture('ConfigureTotpClicked');
+                    setSelectedMethod(method);
+                    // setScreen(RecoveryMethodScreen.Authenticator);
+                  }}
+                />
+              );
+            }
+
             return (
-              <CardMenuItem
+              <RecoveryMethodCard
+                method={method}
+                key={method.id}
+                // methodName={method.name}
                 onClick={() => {
-                  capture(card.analyticsKey);
-                  history.push(card.to);
+                  capture('ConfigureFidoClicked');
+                  console.log('method clicked: ', method);
+                  setSelectedMethod(method);
+                  // history.push(`${path}/recovery-method`);
+                  // setFidoDetails(method);
+                  // setScreen(RecoveryMethodScreen.FidoDetails);
                 }}
-                icon={card.icon}
-                text={card.title}
-                description={card.description}
-                key={idx}
               />
             );
-          })}
-        </CardMenu>
+          })
+        )}
+        <Button
+          // ref={submitRef}
+          variant="contained"
+          color="primary"
+          size="extension"
+          fullWidth
+          // disabled={!isFormValid || isSubmitting}
+          // loading={isSubmitting}
+          // onClick={isFormValid ? handleSubmit : undefined}
+          sx={{ mt: 'auto' }}
+        >
+          {t('Add recovery method')}
+        </Button>
       </Paper>
     </Page>
   );

From 9b038b1f23669616d374690671aa6373f9146898 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Wed, 27 Aug 2025 18:30:44 +0200
Subject: [PATCH 05/22] chore: general cleanup

---
 .../Authenticator/AuthenticatorDetails.tsx    | 19 ++--
 .../AuthenticatorVerifyScreen.tsx             | 36 ++++----
 .../RecoveryMethods/FIDO/FIDODetails.tsx      | 16 ++--
 .../RecoveryMethods/RecoveryMethodCard.tsx    | 92 ++++++-------------
 .../RecoveryMethods/RecoveryMethodList.tsx    | 13 ++-
 .../RecoveryMethods/RecoveryMethods.tsx       | 68 ++++----------
 packages/types/src/seedless.ts                |  1 +
 7 files changed, 93 insertions(+), 152 deletions(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
index bae76b3a7..17b3122b2 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -1,14 +1,13 @@
-import { Page } from '@/components/Page';
-import { Button } from '@avalabs/k2-alpine';
-import { useTranslation } from 'react-i18next';
+import { getIconForMethod } from '../RecoveryMethodCard';
+import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 
-export const AuthenticatorDetails = ({ method }) => {
-  const { t } = useTranslation();
+export const AuthenticatorDetails = ({ method, methodName }) => {
   return (
-    <>
-      <div>AuthenticatorDetails</div>
-      <Button>{t('Change Authenticator App')}</Button>
-      <Button>{t('Removes')}</Button>
-    </>
+    <CardMenuItem
+      onClick={() => {}}
+      icon={getIconForMethod(method)}
+      text={methodName}
+      key={method.toString()}
+    />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
index b66a366ed..f49501524 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -4,21 +4,23 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	
-	return (
-		<div>
-			<QRCode
-				renderAs="svg"
-				fgColor={theme.palette.common.black}
-				bgColor={theme.palette.common.white}
-				value={totpChallenge.totpUrl}
-				level="H"
-				size={188}
-			/>
-			<Button type='secondary' size='small'>{t('Enter code manually')}</Button>
-			{/* <Stack maxWidth={300} textAlign="center" gap={1}>
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <QRCode
+        renderAs="svg"
+        fgColor={theme.palette.common.black}
+        bgColor={theme.palette.common.white}
+        value={totpChallenge.totpUrl}
+        level="H"
+        size={188}
+      />
+      <Button type="secondary" size="small">
+        {t('Enter code manually')}
+      </Button>
+      {/* <Stack maxWidth={300} textAlign="center" gap={1}>
 				<Typography variant="subtitle1" color="text.secondary">
 					{t(
 						'Alternatively, open any authenticator app and enter this code:',
@@ -37,6 +39,6 @@ export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
 					{totpSecret}
 				</Typography>
 			</Stack> */}
-		</div>
-	);
+    </div>
+  );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
index 6d2744928..d5ed3b76b 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
@@ -1,13 +1,13 @@
-import { Page } from '@/components/Page';
-import { Button } from '@avalabs/k2-alpine';
-import { useTranslation } from 'react-i18next';
+import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
+import { getIconForMethod } from '../RecoveryMethodCard';
 
 export const FIDODetails = ({ method }) => {
-  const { t } = useTranslation();
   return (
-    <>
-      <div>FIDODetails</div>
-      <Button>{t('Remove')}</Button>
-    </>
+    <CardMenuItem
+      onClick={() => {}}
+      icon={getIconForMethod(method)}
+      text={method.name}
+      key={method.toString()}
+    />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
index 94109c353..a7a64b835 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
@@ -1,68 +1,34 @@
 import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
-import { Button } from '@avalabs/k2-alpine';
-import { useAnalyticsContext } from '@core/ui';
-import { useTranslation } from 'react-i18next';
+import { MethodIcons } from './RecoveryMethodList';
+import { RecoveryMethod } from '@core/types';
 
-export const RecoveryMethodCard = ({ method, onClick, methodName }) => {
-  console.log('method: ', method);
-  const { capture } = useAnalyticsContext();
-  const { t } = useTranslation();
+interface RecoveryMethodCardProps {
+  method: RecoveryMethod;
+  onClick: () => void;
+  methodName?: string;
+}
+
+export const getIconForMethod = (method) => {
+  if (method.type === 'totp') {
+    return MethodIcons.authenticator;
+  }
+  if (method.aaguid === '00000000-0000-0000-0000-000000000000') {
+    return MethodIcons.yubikey;
+  }
+  return MethodIcons.passkey;
+};
+
+export const RecoveryMethodCard = ({
+  method,
+  onClick,
+  methodName,
+}: RecoveryMethodCardProps) => {
   return (
-    <>
-      <CardMenuItem
-        onClick={onClick}
-        // icon={method.icon}
-        text={methodName || method.name}
-        description={`${t('Added ')} ${new Date(method.last_used_at)}`}
-        key={method}
-      />
-      {/* <Button
-        // ref={submitRef}
-        variant="contained"
-        color="primary"
-        size="extension"
-        fullWidth
-        // disabled={!isFormValid || isSubmitting}
-        // loading={isSubmitting}
-        // onClick={isFormValid ? handleSubmit : undefined}
-        sx={{ mt: 'auto' }}
-      >
-        {t('Remove')}
-      </Button> */}
-    </>
-    // <Paper
-    //   key={index}
-    //   elevation={1}
-    //   sx={{
-    //     padding: 2,
-    //     marginBottom: 2,
-    //     borderRadius: 2,
-    //     display: 'flex',
-    //     alignItems: 'center',
-    //     justifyContent: 'space-between',
-    //   }}
-    // >
-    //   <div>
-    //     <Typography variant="h6">
-    //       {method.type === 'totp' && t('Authenticator App')}
-    //       {method.type === 'fido' && t('Security Key')}
-    //       {method.type === 'passkey' && t('Passkey')}
-    //     </Typography>
-    //     <Typography variant="body2" color="text.secondary">
-    //       {t('Added on')} {new Date(method.addedAt).toLocaleDateString()}
-    //     </Typography>
-    //   </div>
-    //   <div>
-    //     <Button
-    //       variant="outlined"
-    //       color="error"
-    //       onClick={() => {
-    //         // Handle removal of recovery method
-    //       }}
-    //     >
-    //       {t('Remove')}
-    //     </Button>
-    //   </div>
-    // </Paper>
+    <CardMenuItem
+      onClick={onClick}
+      icon={getIconForMethod(method)}
+      text={methodName || method.type}
+      key={method.toString()}
+    />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index 6c2c1b62d..f78198338 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -6,10 +6,15 @@ import {
   SecurityKeyIcon,
 } from '@avalabs/k2-alpine';
 import { useAnalyticsContext } from '@core/ui';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
+export const MethodIcons = {
+  passkey: <PasswordIcon fontSize="large" />,
+  authenticator: <EncryptedIcon fontSize="large" />,
+  yubikey: <SecurityKeyIcon fontSize="large" />,
+};
+
 export const RecoveryMethodList = () => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -18,7 +23,7 @@ export const RecoveryMethodList = () => {
 
   const recoveryMethodCards = [
     {
-      icon: <PasswordIcon fontSize="large" />,
+      icon: MethodIcons.passkey,
       title: t('Passkey'),
       description: t(
         'Passkeys are used for quick, password-free recovery and enhanced security.',
@@ -27,7 +32,7 @@ export const RecoveryMethodList = () => {
       analyticsKey: 'AddPasskeyClicked',
     },
     {
-      icon: <EncryptedIcon fontSize="large" />,
+      icon: MethodIcons.authenticator,
       title: t('Authenticator app'),
       description: t(
         'Authenticator apps generate secure, time-based codes for wallet recovery.',
@@ -36,7 +41,7 @@ export const RecoveryMethodList = () => {
       analyticsKey: 'AddAuthenticatorClicked',
     },
     {
-      icon: <SecurityKeyIcon fontSize="large" />,
+      icon: MethodIcons.yubikey,
       title: t('Yubikey'),
       description: t(
         'YubiKeys are physical, hardware-based protection and strong authentication.',
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index 04be4f610..c5356f7a4 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -1,51 +1,28 @@
 import { Page } from '@/components/Page';
-import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
-import {
-  Box,
-  Button,
-  ChevronRightIcon,
-  Divider,
-  EncryptedIcon,
-  IconButton,
-  Paper,
-  PasswordIcon,
-  SecurityKeyIcon,
-  Skeleton,
-  Typography,
-} from '@avalabs/k2-alpine';
-import { FeatureGates } from '@core/types';
-import {
-  useAnalyticsContext,
-  useFeatureFlagContext,
-  useSeedlessMfaManager,
-} from '@core/ui';
+import { Button, Paper, Skeleton } from '@avalabs/k2-alpine';
+import { RecoveryMethod as RecoveryMethodType } from '@core/types';
+import { useAnalyticsContext, useSeedlessMfaManager } from '@core/ui';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MdOutlinePassword } from 'react-icons/md';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useRouteMatch } from 'react-router-dom';
 import { RecoveryMethodList } from './RecoveryMethodList';
 import { RecoveryMethodCard } from './RecoveryMethodCard';
 import { RecoveryMethod } from './RecoveryMethod';
 
 export const RecoveryMethods: FC = () => {
   const { t } = useTranslation();
-  const history = useHistory();
   const { capture } = useAnalyticsContext();
   const { path } = useRouteMatch();
   console.log('path: ', path);
-  const [selectedMethod, setSelectedMethod] = useState(null);
+  const [selectedMethod, setSelectedMethod] =
+    useState<RecoveryMethodType | null>(null);
   const {
     isLoadingRecoveryMethods,
     recoveryMethods,
-    hasFidoConfigured,
+    // hasFidoConfigured,
     hasMfaConfigured,
-    hasTotpConfigured,
+    // hasTotpConfigured,
   } = useSeedlessMfaManager();
-  // console.log('isLoadingRecoveryMethods: ', isLoadingRecoveryMethods);
-  // console.log('recoveryMethods: ', recoveryMethods);
-  // console.log('hasFidoConfigured: ', hasFidoConfigured);
-  // console.log('hasMfaConfigured: ', hasMfaConfigured);
-  // console.log('hasTotpConfigured: ', hasTotpConfigured);
 
   console.log('selectedMethod: ', selectedMethod);
   if (selectedMethod) {
@@ -80,11 +57,9 @@ export const RecoveryMethods: FC = () => {
                   method={method}
                   key="totp"
                   methodName={t('Authenticator')}
-                  // methodName={t('Authenticator')}
                   onClick={() => {
                     capture('ConfigureTotpClicked');
                     setSelectedMethod(method);
-                    // setScreen(RecoveryMethodScreen.Authenticator);
                   }}
                 />
               );
@@ -94,33 +69,26 @@ export const RecoveryMethods: FC = () => {
               <RecoveryMethodCard
                 method={method}
                 key={method.id}
-                // methodName={method.name}
+                methodName={method.name}
                 onClick={() => {
                   capture('ConfigureFidoClicked');
                   console.log('method clicked: ', method);
                   setSelectedMethod(method);
-                  // history.push(`${path}/recovery-method`);
-                  // setFidoDetails(method);
-                  // setScreen(RecoveryMethodScreen.FidoDetails);
                 }}
               />
             );
           })
         )}
-        <Button
-          // ref={submitRef}
-          variant="contained"
-          color="primary"
-          size="extension"
-          fullWidth
-          // disabled={!isFormValid || isSubmitting}
-          // loading={isSubmitting}
-          // onClick={isFormValid ? handleSubmit : undefined}
-          sx={{ mt: 'auto' }}
-        >
-          {t('Add recovery method')}
-        </Button>
       </Paper>
+      <Button
+        variant="contained"
+        color="primary"
+        size="extension"
+        fullWidth
+        sx={{ mt: 'auto' }}
+      >
+        {t('Add recovery method')}
+      </Button>
     </Page>
   );
 };
diff --git a/packages/types/src/seedless.ts b/packages/types/src/seedless.ts
index 56160a66b..9f60d274a 100644
--- a/packages/types/src/seedless.ts
+++ b/packages/types/src/seedless.ts
@@ -125,6 +125,7 @@ export type RecoveryMethodFido = {
   id: string;
   name: string;
   type: MfaRequestType.Fido;
+  aaguid?: string;
 };
 
 export type GetRecoveryMethodsOptions = {

From 231673c6a266606a0ab8e45f05ecb5915be842b1 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 29 Aug 2025 08:57:14 +0200
Subject: [PATCH 06/22] feaT: add fullscreen method placeholder

---
 apps/next/src/components/Page/Page.tsx        |   3 +
 .../Authenticator/AuthenticatorDetails.tsx    |  11 ++
 .../RecoveryMethods/FIDO/FIDODetails.tsx      |   7 +
 .../FullScreens/FullScreenContent.tsx         | 164 ++++++++++++++++++
 .../FullScreens/FullScreenRecoveryMethods.tsx |  25 +++
 .../FullScreens/RemoveTotp.tsx                | 127 ++++++++++++++
 .../RecoveryMethods/RecoveryMethod.tsx        |  42 ++++-
 .../RecoveryMethods/RecoveryMethods.tsx       |  10 +-
 apps/next/src/routing/AppRoutes.tsx           |   2 +
 9 files changed, 385 insertions(+), 6 deletions(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx

diff --git a/apps/next/src/components/Page/Page.tsx b/apps/next/src/components/Page/Page.tsx
index 5075b6079..3c22d2ae4 100644
--- a/apps/next/src/components/Page/Page.tsx
+++ b/apps/next/src/components/Page/Page.tsx
@@ -7,6 +7,7 @@ type PageProps = {
   description?: string;
   children: React.ReactNode;
   withBackButton?: boolean;
+  onBackClicked?: () => void;
   contentProps?: StackProps;
 };
 
@@ -24,6 +25,7 @@ export const Page = ({
   description,
   children,
   contentProps,
+  onBackClicked,
   ...htmlProps
 }: PageProps) => {
   const { ref, isIntersecting, isObserving } = useIsIntersecting();
@@ -41,6 +43,7 @@ export const Page = ({
         isObserving={isObserving}
         isIntersecting={isIntersecting}
         title={title}
+        onBackClicked={onBackClicked}
       />
       <NoScrollStack>
         <Stack px={1.5} pb={1.5} gap={3} flexGrow={1}>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
index 17b3122b2..835839979 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -1,6 +1,17 @@
 import { getIconForMethod } from '../RecoveryMethodCard';
 import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 
+export enum AuthenticatorState {
+  Initial = 'initial',
+  Initiated = 'initiated',
+  ConfirmChange = 'confirm-change',
+  ConfirmRemoval = 'confirm-removal',
+  Pending = 'pending',
+  Completing = 'completing',
+  VerifyCode = 'verify-code',
+  Failure = 'failure',
+}
+
 export const AuthenticatorDetails = ({ method, methodName }) => {
   return (
     <CardMenuItem
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
index d5ed3b76b..3cdf881f5 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
@@ -1,6 +1,13 @@
 import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import { getIconForMethod } from '../RecoveryMethodCard';
 
+export enum FIDOState {
+  Initial = 'initial',
+  Initiated = 'initiated',
+  ConfirmRemoval = 'confirm-removal',
+  Failure = 'failure',
+}
+
 export const FIDODetails = ({ method }) => {
   return (
     <CardMenuItem
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
new file mode 100644
index 000000000..579d68f92
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -0,0 +1,164 @@
+import { useSeedlessAuth } from '@core/ui';
+import { RemoveTotp } from './RemoveTotp';
+
+export const FullScreenContent = () => {
+  // const {
+  //   authenticate,
+  //   step,
+  //   methods,
+  //   chooseMfaMethod,
+  //   mfaDeviceName,
+  //   error,
+  //   verifyTotpCode,
+  //   completeFidoChallenge,
+  // } = useSeedlessAuth({
+  //   getOidcToken,
+  //   setIsLoading,
+  //   onSignerTokenObtained: onAuthSuccess,
+  // });
+
+  return <RemoveTotp />;
+  // const history = useHistory();
+  // const { t } = useTranslation();
+  // const { capture } = useAnalyticsContext();
+  // const { setCurrent, setTotal, setIsBackButtonVisible } =
+  //   useModalPageControl();
+  // const { phase = 'connect-avax' } = useParams<{ phase: ImportRoute }>();
+  // const { importLedger, isImporting } = useImportLedger();
+  // const openApp = useOpenApp();
+
+  // const [publicKeys, setPublicKeys] = useState<AddressPublicKeyJson[]>([]);
+  // const [extPublicKeys, setExtPublicKeys] = useState<ExtendedPublicKey[]>([]);
+
+  // useEffect(() => {
+  //   const step = PHASE_TO_STEP_NUMBER[phase];
+
+  //   if (step) {
+  //     setCurrent(step);
+  //     setTotal(TOTAL_STEPS);
+
+  //     // We don't want to display the back button on the first screen
+  //     // (it won't do anything, since history state is empty)
+  //     setIsBackButtonVisible(step > 1);
+  //   } else {
+  //     // If we're on troubleshooting screens, hide the page indicator
+  //     setTotal(0);
+  //   }
+  // }, [phase, setCurrent, setIsBackButtonVisible, setTotal]);
+
+  // const avalancheConnectorCallbacks = useMemo(
+  //   () => ({
+  //     onConnectionSuccess: () => capture(`${ANALYTICS_EVENT_PREFIX}Connected`),
+  //     onConnectionFailed: (err: Error) =>
+  //       err instanceof WalletExistsError
+  //         ? capture(`${ANALYTICS_EVENT_PREFIX}DuplicateWallet`)
+  //         : capture(`${ANALYTICS_EVENT_PREFIX}ConnectionFailed`),
+  //     onConnectionRetry: () => capture(`${ANALYTICS_EVENT_PREFIX}Retry`),
+  //   }),
+  //   [capture],
+  // );
+
+  // const solanaConnectorCallbacks = useMemo(
+  //   () => ({
+  //     onConnectionSuccess: () =>
+  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysDerived`),
+  //     onConnectionFailed: () =>
+  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysFailed`),
+  //     onConnectionRetry: () =>
+  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysRetry`),
+  //   }),
+  //   [capture],
+  // );
+
+  // const onSave = useCallback(
+  //   async (name: string) => {
+  //     try {
+  //       await importLedger({
+  //         name,
+  //         addressPublicKeys: publicKeys,
+  //         extendedPublicKeys: extPublicKeys,
+  //       });
+  //       openApp();
+  //       window.close();
+  //     } catch (err) {
+  //       toast.error(t('Unknown error has occurred. Please try again later.'));
+  //       console.error(err);
+  //     }
+  //   },
+  //   [extPublicKeys, importLedger, publicKeys, openApp, t],
+  // );
+
+  return (
+    <div>Fullscreen</div>
+    // <Switch>
+    //   <Route exact path={CONNECT_AVAX_PATHS}>
+    //     <ConnectAvalanche
+    //       connectorCallbacks={avalancheConnectorCallbacks}
+    //       onNext={({ addressPublicKeys, extendedPublicKeys }) => {
+    //         setPublicKeys(addressPublicKeys.map(({ key }) => key));
+    //         setExtPublicKeys(extendedPublicKeys ?? []);
+    //         history.push('/import-wallet/ledger/prompt-solana');
+    //       }}
+    //       onTroubleshoot={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingAvalanche`);
+    //         history.push(`${BASE_PATH}/troubleshooting-avalanche`);
+    //       }}
+    //     />
+    //   </Route>
+    //   <Route path={`${BASE_PATH}/prompt-solana`}>
+    //     <PromptSolana
+    //       onNext={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}SolanaSupportConfirmed`);
+    //         history.push(`${BASE_PATH}/connect-solana`);
+    //       }}
+    //       onSkip={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}SolanaSupportDenied`);
+    //         history.push(`${BASE_PATH}/name`);
+    //       }}
+    //     />
+    //   </Route>
+    //   <Route path={`${BASE_PATH}/connect-solana`}>
+    //     <ConnectSolana
+    //       connectorCallbacks={solanaConnectorCallbacks}
+    //       onNext={({ addressPublicKeys }) => {
+    //         setPublicKeys((prev) => [
+    //           ...prev,
+    //           ...addressPublicKeys.map(({ key }) => key),
+    //         ]);
+    //         history.push(`${BASE_PATH}/name`);
+    //       }}
+    //       onTroubleshoot={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingSolana`);
+    //         history.push(`${BASE_PATH}/troubleshooting-solana`);
+    //       }}
+    //     />
+    //   </Route>
+    //   <Route path={`${BASE_PATH}/troubleshooting-avalanche`}>
+    //     <Troubleshooting
+    //       appName="Avalanche"
+    //       onClose={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingAvalancheClosed`);
+    //         history.push(`${BASE_PATH}/connect-avax`);
+    //       }}
+    //     />
+    //   </Route>
+    //   <Route path={`${BASE_PATH}/troubleshooting-solana`}>
+    //     <Troubleshooting
+    //       appName="Solana"
+    //       onClose={() => {
+    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingSolanaClosed`);
+    //         history.push(`${BASE_PATH}/connect-solana`);
+    //       }}
+    //     />
+    //   </Route>
+    //   <Route path={`${BASE_PATH}/name`}>
+    //     <NameYourWalletScreen
+    //       step={PHASE_TO_STEP_NUMBER['name']}
+    //       totalSteps={TOTAL_STEPS}
+    //       isSaving={isImporting}
+    //       onNext={onSave}
+    //     />
+    //   </Route>
+    // </Switch>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
new file mode 100644
index 000000000..47d7f989c
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
@@ -0,0 +1,25 @@
+import { useHistory } from 'react-router-dom';
+
+import { FullscreenModal } from '@/components/FullscreenModal';
+import { FullscreenAnimatedBackground } from '@/components/FullscreenAnimatedBackground';
+
+import { FullScreenContent } from './FullScreenContent';
+
+export const FullScreenRecoveryMethods = () => {
+  const history = useHistory();
+
+  return (
+    <>
+      <FullscreenAnimatedBackground sx={{ backgroundSize: '80% 60%' }} />
+      <FullscreenModal
+        open
+        withCoreLogo
+        withAppInfo
+        withLanguageSelector
+        onBack={history.goBack}
+      >
+        <FullScreenContent />
+      </FullscreenModal>
+    </>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
new file mode 100644
index 000000000..eba2812c7
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  AlertCircleIcon,
+  Button,
+  CheckCircleIcon,
+  Stack,
+  Typography,
+} from '@avalabs/core-k2-components';
+
+import { useSeedlessMfaManager } from '@core/ui';
+
+enum RemoveTotpState {
+  Loading = 'loading',
+  IncompatibleWallet = 'incompatible-wallet',
+  NameYourDevice = 'name-your-device',
+  AddAuthenticator = 'add-authenticator',
+  Success = 'success',
+  Failure = 'failure',
+}
+
+export const RemoveTotp = () => {
+  const { t } = useTranslation();
+  const { removeTotp } = useSeedlessMfaManager();
+  const [state, setState] = useState(RemoveTotpState.Loading);
+
+  const remove = useCallback(async () => {
+    try {
+      await removeTotp();
+      setState(RemoveTotpState.Success);
+    } catch {
+      setState(RemoveTotpState.Failure);
+    }
+  }, [removeTotp]);
+
+  useEffect(() => {
+    remove();
+  }, [remove]);
+
+  return (
+    <Stack
+      sx={{
+        width: 375,
+        height: 600,
+        px: 2,
+        alignSelf: 'center',
+        borderRadius: 1,
+        backgroundColor: 'background.paper',
+      }}
+    >
+      {state === RemoveTotpState.Failure && (
+        <Stack
+          sx={{
+            width: 1,
+            height: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+            px: 3,
+          }}
+        >
+          <AlertCircleIcon size={72} />
+          <Stack sx={{ textAlign: 'center', gap: 0.5 }}>
+            <Typography variant="h5" sx={{ mb: 2 }}>
+              {t('Something Went Wrong')}
+            </Typography>
+            <Typography variant="body2">
+              {t('We encountered an unexpected issue.')}
+            </Typography>
+            <Typography variant="body2">{t('Please try again.')}</Typography>
+          </Stack>
+
+          <Button
+            fullWidth
+            sx={{ mt: 4 }}
+            onClick={remove}
+            data-testid="btn-try-again"
+          >
+            {t('Try again')}
+          </Button>
+          <Button
+            fullWidth
+            variant="text"
+            onClick={window.close}
+            data-testid="btn-close"
+          >
+            {t('Close')}
+          </Button>
+        </Stack>
+      )}
+      {state === RemoveTotpState.Success && (
+        <Stack
+          sx={{
+            width: 1,
+            height: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+            px: 2,
+            textAlign: 'center',
+          }}
+        >
+          <CheckCircleIcon size={72} sx={{ color: 'success.main' }} />
+          <Typography variant="h5">{t('Success!')}</Typography>
+          <Typography variant="body2">
+            {t('Authenticator app removed successfully!')}
+          </Typography>
+
+          <Button
+            fullWidth
+            onClick={window.close}
+            data-testid="btn-close"
+            sx={{ mt: 3 }}
+          >
+            {t('Close')}
+          </Button>
+        </Stack>
+      )}
+      {state === RemoveTotpState.Loading && (
+        <>
+          <>Loading</>
+          {/* {renderMfaPrompt()} */}
+        </>
+      )}
+    </Stack>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index eb8044279..02a9069ec 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -4,19 +4,54 @@ import { useSeedlessMfaManager } from '@core/ui';
 import { useTranslation } from 'react-i18next';
 import { AuthenticatorDetails } from './Authenticator/AuthenticatorDetails';
 import { FIDODetails } from './FIDO/FIDODetails';
+import { RecoveryMethod as RecoveryMethodType } from '@core/types';
+import { useCallback } from 'react';
+import { openFullscreenTab } from '@core/common';
 
-export const RecoveryMethod = ({ method }) => {
+interface RecoveryMethodProps {
+  method: RecoveryMethodType;
+  onBackClicked: () => void;
+}
+
+export const RecoveryMethod = ({
+  method,
+  onBackClicked,
+}: RecoveryMethodProps) => {
   console.log('RecoveryMethod: ', method);
   const { t } = useTranslation();
   const { hasTotpConfigured } = useSeedlessMfaManager();
+
+  const openRemoveTotpPopup = useCallback(async () => {
+    openFullscreenTab('remove-totp');
+  }, []);
+
   return (
     <Page
       title={t('Recovery Method Details')}
       withBackButton
       contentProps={{ justifyContent: 'flex-start' }}
+      onBackClicked={onBackClicked}
     >
-      {method.type === 'totp' && <AuthenticatorDetails method={method} />}
+      {method.type === 'totp' && (
+        <AuthenticatorDetails method={method} methodName={t('Authenticator')} />
+      )}
       {method.type === 'fido' && <FIDODetails method={method} />}
+      {method.type === 'totp' && (
+        <Button
+          // ref={submitRef}
+          variant="contained"
+          color="primary"
+          size="extension"
+          fullWidth
+          // disabled={!isFormValid || isSubmitting}
+          // loading={isSubmitting}
+          // onClick={isFormValid ? handleSubmit : undefined}
+          sx={{ mt: 'auto' }}
+          disabled={!hasTotpConfigured}
+        >
+          {t('Change Authenticator App')}
+        </Button>
+      )}
       <Button
         // ref={submitRef}
         variant="contained"
@@ -28,6 +63,9 @@ export const RecoveryMethod = ({ method }) => {
         // onClick={isFormValid ? handleSubmit : undefined}
         sx={{ mt: 'auto' }}
         disabled={!hasTotpConfigured}
+        onClick={() => {
+          openRemoveTotpPopup();
+        }}
       >
         {t('Remove recovery method')}
       </Button>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index c5356f7a4..dab8e8afc 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -4,7 +4,6 @@ import { RecoveryMethod as RecoveryMethodType } from '@core/types';
 import { useAnalyticsContext, useSeedlessMfaManager } from '@core/ui';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRouteMatch } from 'react-router-dom';
 import { RecoveryMethodList } from './RecoveryMethodList';
 import { RecoveryMethodCard } from './RecoveryMethodCard';
 import { RecoveryMethod } from './RecoveryMethod';
@@ -12,8 +11,6 @@ import { RecoveryMethod } from './RecoveryMethod';
 export const RecoveryMethods: FC = () => {
   const { t } = useTranslation();
   const { capture } = useAnalyticsContext();
-  const { path } = useRouteMatch();
-  console.log('path: ', path);
   const [selectedMethod, setSelectedMethod] =
     useState<RecoveryMethodType | null>(null);
   const {
@@ -26,7 +23,12 @@ export const RecoveryMethods: FC = () => {
 
   console.log('selectedMethod: ', selectedMethod);
   if (selectedMethod) {
-    return <RecoveryMethod method={selectedMethod} />;
+    return (
+      <RecoveryMethod
+        method={selectedMethod}
+        onBackClicked={() => setSelectedMethod(null)}
+      />
+    );
   }
 
   return (
diff --git a/apps/next/src/routing/AppRoutes.tsx b/apps/next/src/routing/AppRoutes.tsx
index f5cf0c096..a0c80984c 100644
--- a/apps/next/src/routing/AppRoutes.tsx
+++ b/apps/next/src/routing/AppRoutes.tsx
@@ -9,6 +9,7 @@ import { ImportLedgerFlow, ImportSeedphraseFlow } from '@/pages/Import';
 import AccountManagement from '@/pages/AccountManagement/AccountManagement';
 
 import { getContactsPath, getSendPath } from '@/config/routes';
+import { FullScreenRecoveryMethods } from '@/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods';
 
 export const AppRoutes = () => (
   <Switch>
@@ -19,6 +20,7 @@ export const AppRoutes = () => (
     <Route path="/import-wallet/seedphrase" component={ImportSeedphraseFlow} />
     <Route path="/import-wallet/ledger/:phase?" component={ImportLedgerFlow} />
     <Route path={getSendPath()} component={Send} />
+    <Route path="/remove-totp" component={FullScreenRecoveryMethods} />
     <Route path="/" component={Portfolio} />
   </Switch>
 );

From 165b318652b8a5395473f418a6b74e3af3c81eb2 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 5 Sep 2025 17:12:49 +0200
Subject: [PATCH 07/22] feat: functionality

---
 apps/next/src/pages/Settings/Settings.tsx     |   4 +-
 .../AuthenticatorVerifyScreen.tsx             |  54 ++++-----
 .../Authenticator/AuthenticatorVerifyTotp.tsx |  25 ++++
 .../RecoveryMethods/ConfiguredMethodList.tsx  |  43 +++++++
 .../components/RecoveryMethods/FIDO/FIDO.tsx  |  89 ++++++++++++++
 .../RecoveryMethods/FullScreens/AddFIDO.tsx   |  94 +++++++++++++++
 .../RecoveryMethods/FullScreens/AddTotp.tsx   | 109 ++++++++++++++++++
 .../FullScreens/FullScreenContent.tsx         |  63 +++++++++-
 .../FullScreens/FullScreenRecoveryMethods.tsx |  25 ----
 .../FullScreens/RecoveryMethodsFullScreen.tsx |  39 +++++++
 .../FullScreens/RemoveTotp.tsx                |  44 +++++--
 .../RecoveryMethods/RecoveryMethod.tsx        |  33 ++++--
 .../RecoveryMethods/RecoveryMethodList.tsx    |  25 +++-
 .../RecoveryMethods/RecoveryMethods.tsx       |  79 ++++++++++++-
 .../components/ConfirmPage.tsx                |  22 ++++
 .../pages/MFA/components/FIDOChallenge.tsx    |  16 ++-
 apps/next/src/routing/AppRoutes.tsx           |   7 +-
 17 files changed, 682 insertions(+), 89 deletions(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
 delete mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx

diff --git a/apps/next/src/pages/Settings/Settings.tsx b/apps/next/src/pages/Settings/Settings.tsx
index ca00df7a0..2c4ad53ff 100644
--- a/apps/next/src/pages/Settings/Settings.tsx
+++ b/apps/next/src/pages/Settings/Settings.tsx
@@ -7,6 +7,7 @@ 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';
 
 export const Settings: FC = () => {
   const { path } = useRouteMatch();
@@ -18,10 +19,11 @@ export const Settings: FC = () => {
       <Route path={`${path}/connected-sites`} component={ConnectedSites} />
       <Route path={`${path}/recovery-phrase`} component={RecoveryPhrase} />
       <Route
-        path={`${path}/recovery-methods/authenticator`}
+        path={`${path}/recovery-method/authenticator`}
         component={Authenticator}
         exact
       />
+      <Route path={`${path}/recovery-method/fido/:id`} component={FIDO} exact />
       <Route
         path={`${path}/recovery-methods`}
         component={RecoveryMethods}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
index f49501524..d1d5aac61 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -1,14 +1,20 @@
 import { Button, Stack, toast, Typography, useTheme } from '@avalabs/k2-alpine';
 import QRCode from 'qrcode.react';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
+export const AuthenticatorVerifyScreen = ({ totpChallenge, onNext }) => {
+  console.log('AuthenticatorVerifyScreen: ', totpChallenge);
   const theme = useTheme();
   const { t } = useTranslation();
 
   return (
-    <div>
+    <Stack
+      gap={4}
+      justifyContent="center"
+      alignItems="center"
+      height="100%"
+      width="100%"
+    >
       <QRCode
         renderAs="svg"
         fgColor={theme.palette.common.black}
@@ -17,28 +23,24 @@ export const AuthenticatorVerifyScreen = ({ totpChallenge }) => {
         level="H"
         size={188}
       />
-      <Button type="secondary" size="small">
-        {t('Enter code manually')}
-      </Button>
-      {/* <Stack maxWidth={300} textAlign="center" gap={1}>
-				<Typography variant="subtitle1" color="text.secondary">
-					{t(
-						'Alternatively, open any authenticator app and enter this code:',
-					)}
-				</Typography>
-				<Typography
-					variant="mono"
-					color="text.primary"
-					role="button"
-					sx={{ cursor: 'pointer' }}
-					onClick={() => {
-						navigator.clipboard.writeText(totpSecret);
-						toast.success(t('Code copied to clipboard'));
-					}}
-				>
-					{totpSecret}
-				</Typography>
-			</Stack> */}
-    </div>
+      <Stack maxWidth={300} textAlign="center" gap={1}>
+        <Typography variant="subtitle1" color="text.secondary">
+          {t('Alternatively, open any authenticator app and enter this code:')}
+        </Typography>
+        <Typography
+          variant="mono"
+          color="text.primary"
+          role="button"
+          sx={{ cursor: 'pointer' }}
+          onClick={() => {
+            navigator.clipboard.writeText(totpChallenge.totpSecret);
+            toast.success(t('Code copied to clipboard'));
+          }}
+        >
+          {totpChallenge.totpSecret}
+        </Typography>
+      </Stack>
+      <Button onClick={onNext}>{t('Next')}</Button>
+    </Stack>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
new file mode 100644
index 000000000..7ebff2cea
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
@@ -0,0 +1,25 @@
+import { TotpCodeField } from '@/components/TotpCodeField';
+import { useKeyboardShortcuts, useTotpErrorMessage } from '@core/ui';
+import { useState } from 'react';
+
+export const AuthenticatorVerifyTotp = ({ onChange, isLoading, error }) => {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const totpError = useTotpErrorMessage(error);
+  // const keyboardShortcuts = useKeyboardShortcuts({
+  //   Enter: () => onSubmit(code),
+  // });
+
+  return (
+    <TotpCodeField
+      error={isSubmitted && !!totpError}
+      helperText={isSubmitted && totpError}
+      onChange={(e) => {
+        onChange(e.target.value);
+        if (error && !isLoading) {
+          setIsSubmitted(false);
+        }
+      }}
+      // {...keyboardShortcuts}
+    />
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
new file mode 100644
index 000000000..5020759d0
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
@@ -0,0 +1,43 @@
+import { useTranslation } from 'react-i18next';
+import { RecoveryMethodCard } from './RecoveryMethodCard';
+import { useAnalyticsContext } from '@core/ui';
+import { RecoveryMethodScreen } from './RecoveryMethods';
+
+export const ConfiguredMethodList = ({
+  existingRecoveryMethods,
+  setSelectedMethod,
+  setScreen,
+}) => {
+  const { t } = useTranslation();
+  const { capture } = useAnalyticsContext();
+
+  return existingRecoveryMethods.map((method) => {
+    if (method.type === 'totp') {
+      return (
+        <RecoveryMethodCard
+          method={method}
+          key="totp"
+          methodName={t('Authenticator')}
+          onClick={() => {
+            capture('ConfigureTotpClicked');
+            setSelectedMethod(method);
+            setScreen(RecoveryMethodScreen.Method);
+          }}
+        />
+      );
+    }
+
+    return (
+      <RecoveryMethodCard
+        method={method}
+        key={method.id}
+        methodName={method.name}
+        onClick={() => {
+          capture('ConfigureFidoClicked');
+          setSelectedMethod(method);
+          setScreen(RecoveryMethodScreen.Method);
+        }}
+      />
+    );
+  });
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
new file mode 100644
index 000000000..b663256ff
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
@@ -0,0 +1,89 @@
+import { Page } from '@/components/Page';
+import { Button, Typography } from '@avalabs/k2-alpine';
+import { useConnectionContext, useSeedlessMfaManager } from '@core/ui';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useParams } from 'react-router-dom';
+import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
+import { AuthErrorCode, ExtensionRequest, MfaResponseData } from '@core/types';
+import { TotpCodeField } from '@/components/TotpCodeField';
+import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
+
+export const FIDO = () => {
+  const { removeFidoDevice } = useSeedlessMfaManager();
+  const { t } = useTranslation();
+  const [error, setError] = useState<AuthErrorCode>();
+  const [code, setCode] = useState();
+  const { request } = useConnectionContext();
+  console.log('code: ', code);
+  console.log('FIDO error: ', error);
+  const mfaEvents = useMFAEvents(setError);
+  console.log('mfaEvents: ', mfaEvents);
+  const { id } = useParams<{ id: string }>();
+  const { hash } = useLocation();
+  console.log('hash: ', hash);
+  const deviceId = `${id}${hash}`;
+  // const id =
+  //   'FidoKey#CWEYvVBjNFJSVB_Qjr3dcIs0mw6T6IcTASzEke_lbclVGTb-FRP5ZpUOXNMsRwBz7ZajS3NFeQH8pCa3h3mbJeUPWT8ocGMsdhF14ob2MB4dNBsGAfkchwRQTb1Vkv-B-t4KbPHtVD-dxncLdk6iwI6XVlXd2HAnekp_SB9fI-0=';
+  console.log('deviceId: ', deviceId);
+
+  useEffect(() => {
+    removeFidoDevice(deviceId).then((result) => {
+      console.log('result: ', result);
+    });
+  }, [deviceId, removeFidoDevice]);
+
+  const submit = useCallback(
+    (params: MfaResponseData) => {
+      // setIsVerifying(true);
+      // onError(undefined);
+
+      try {
+        request<SubmitMfaResponseHandler>({
+          method: ExtensionRequest.SEEDLESS_SUBMIT_MFA_RESPONSE,
+          params: [params],
+        });
+      } catch {
+        // onError(AuthErrorCode.TotpVerificationError);
+      } finally {
+        // setIsVerifying(false);
+      }
+    },
+    [request],
+  );
+
+  return (
+    <Page
+      title={t('Remove FIDO Device')}
+      withBackButton
+      contentProps={{ justifyContent: 'flex-start' }}
+    >
+      <Typography variant="caption">
+        {t(
+          'Open any authenticator app and scan the QR code below or enter the code manually',
+        )}
+      </Typography>
+      {mfaEvents.challenge && mfaEvents.challenge.type === 'totp' && (
+        <>
+          <TotpCodeField
+            onChange={(e) => {
+              setCode(e.target.value);
+            }}
+          />
+          <Button
+            onClick={() => {
+              // setIsSubmitted(true);
+              // setIsVerifying(true);
+              submit({
+                mfaId: mfaEvents.challenge.mfaId,
+                code,
+              });
+            }}
+          >
+            {t('Verify')}
+          </Button>
+        </>
+      )}
+    </Page>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
new file mode 100644
index 000000000..2a0548d58
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
@@ -0,0 +1,94 @@
+import {
+  AuthErrorCode,
+  ExtensionRequest,
+  MfaResponseData,
+  RecoveryMethodTypes,
+  TotpResetChallenge,
+} from '@core/types';
+import {
+  useConnectionContext,
+  useSeedlessActions,
+  useSeedlessMfaManager,
+} from '@core/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
+import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
+import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
+import { useSelectMFAMethod } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useSelectMFAMethod';
+import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
+import { AuthenticatorVerifyScreen } from '../Authenticator/AuthenticatorVerifyScreen';
+import { Button, Stack } from '@avalabs/k2-alpine';
+import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
+import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
+import { SEEDLESS_ACTIONS_OPTIONS } from '@/pages/Onboarding/config';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { useTranslation } from 'react-i18next';
+import { FullscreenModalActions } from '@/components/FullscreenModal';
+import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
+import { CompleteAuthenticatorChangeHandler } from '~/index';
+import { SeedlessNameFidoKey } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
+import { KeyType } from '@core/types';
+
+export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
+  const { request } = useConnectionContext();
+  const [error, setError] = useState<AuthErrorCode>();
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const { initAuthenticatorChange, addFidoDevice } = useSeedlessMfaManager();
+  const [step, setStep] = useState<'name' | 'register' | 'verify'>('name');
+  const [name, setName] = useState('');
+
+  const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
+  const mfaChallenge = useMFAEvents(setError);
+  console.log('mfaChallenge: ', mfaChallenge);
+  const [screenState, setScreenState] = useState<AuthenticatorState>(
+    AuthenticatorState.Initiated,
+  );
+
+  // const [name, setName] = useState('');
+
+  const [code, setCode] = useState('');
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  const registerFidoKey = useCallback(async () => {
+    try {
+      console.log('registerFidoKey name: ', name);
+      const result = await addFidoDevice(name, keyType);
+      console.log('result: ', result);
+      // const challenge = await initAuthenticatorChange();
+      // setTotpChallenge(challenge);
+      // setScreenState(AuthenticatorState.Pending);
+    } catch (e) {
+      console.log('e: ', e);
+      // setTotpChallenge(undefined);
+      setScreenState(AuthenticatorState.Failure);
+    }
+  }, [addFidoDevice, keyType, name]);
+
+  useEffect(() => {
+    registerFidoKey(name);
+  }, [name, registerFidoKey]);
+
+  return (
+    <Stack>
+      {isLoading && <InProgress textSize="body1" />}
+      {!name && (
+        <SeedlessNameFidoKey
+          keyType={keyType}
+          onNext={(preferredName) => {
+            setStep('register');
+            setName(preferredName);
+            // registerFidoKey();
+          }}
+        />
+      )}
+      {step === 'register' && <MFA fullscreen />}
+
+      {screenState === AuthenticatorState.Failure && (
+        <div>Error occurred. Please try again.</div>
+      )}
+    </Stack>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
new file mode 100644
index 000000000..90c93667e
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
@@ -0,0 +1,109 @@
+import {
+  AuthErrorCode,
+  ExtensionRequest,
+  MfaResponseData,
+  TotpResetChallenge,
+} from '@core/types';
+import {
+  useConnectionContext,
+  useSeedlessActions,
+  useSeedlessMfaManager,
+} from '@core/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
+import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
+import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
+import { useSelectMFAMethod } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useSelectMFAMethod';
+import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
+import { AuthenticatorVerifyScreen } from '../Authenticator/AuthenticatorVerifyScreen';
+import { Button, Stack } from '@avalabs/k2-alpine';
+import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
+import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
+import { SEEDLESS_ACTIONS_OPTIONS } from '@/pages/Onboarding/config';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { useTranslation } from 'react-i18next';
+import { FullscreenModalActions } from '@/components/FullscreenModal';
+import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
+import { CompleteAuthenticatorChangeHandler } from '~/index';
+
+export const AddTotp = () => {
+  const { request } = useConnectionContext();
+  const [error, setError] = useState<AuthErrorCode>();
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const { initAuthenticatorChange, completeAuthenticatorChange } =
+    useSeedlessMfaManager();
+
+  const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
+  console.log('totpChallenge: ', totpChallenge);
+  const mfaChallenge = useMFAEvents(setError);
+  console.log('mfaChallenge: ', mfaChallenge);
+  const [screenState, setScreenState] = useState<AuthenticatorState>(
+    AuthenticatorState.Initiated,
+  );
+
+  const [code, setCode] = useState('');
+  console.log('code: ', code);
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  const initChange = useCallback(async () => {
+    try {
+      const challenge = await initAuthenticatorChange();
+
+      setTotpChallenge(challenge);
+      setScreenState(AuthenticatorState.Pending);
+    } catch (e) {
+      setTotpChallenge(undefined);
+      setScreenState(AuthenticatorState.Failure);
+    }
+  }, [initAuthenticatorChange]);
+
+  useEffect(() => {
+    initChange();
+  }, [initChange]);
+
+  return (
+    <Stack>
+      {isLoading && <InProgress textSize="body1" />}
+      {!totpChallenge && <MFA fullscreen />}
+      {screenState === AuthenticatorState.Pending && totpChallenge && (
+        <AuthenticatorVerifyScreen
+          totpChallenge={totpChallenge}
+          onNext={() => setScreenState(AuthenticatorState.VerifyCode)}
+        />
+      )}
+      {screenState === AuthenticatorState.VerifyCode && (
+        <>
+          <AuthenticatorVerifyTotp
+            onChange={(c) => setCode(c)}
+            isLoading={isLoading}
+            error={error}
+          />
+          <FullscreenModalActions>
+            <Button
+              ref={submitButtonRef}
+              variant="contained"
+              color="secondary"
+              size="large"
+              onClick={() => {
+                setIsSubmitted(true);
+                setIsVerifying(true);
+                completeAuthenticatorChange(totpChallenge?.totpId, code);
+              }}
+              loading={isVerifying}
+              // disabled={!code || isVerifying}
+              fullWidth
+            >
+              {isVerifying ? t('Verifying...') : t('Verify')}
+            </Button>
+          </FullscreenModalActions>
+        </>
+      )}
+      {screenState === AuthenticatorState.Failure && (
+        <div>Error occurred. Please try again.</div>
+      )}
+    </Stack>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
index 579d68f92..7d2c0b427 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -1,7 +1,59 @@
 import { useSeedlessAuth } from '@core/ui';
 import { RemoveTotp } from './RemoveTotp';
+import {
+  FullscreenModalActions,
+  FullscreenModalTitle,
+} from '@/components/FullscreenModal';
+import { useTranslation } from 'react-i18next';
+import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
+import { RecoveryMethodsFullScreenParams } from './RecoveryMethodsFullScreen';
+import { useMemo } from 'react';
+import { AddTotp } from './AddTotp';
+import { Button } from '@avalabs/k2-alpine';
+import { AddFIDO } from './AddFIDO';
 
-export const FullScreenContent = () => {
+export type RecoveryMethodPages = 'removeTOTP' | 'addTOTP' | 'addFIDO'; // | 'addAuthenticator';
+export type FullScreenContentProps = {
+  [page in RecoveryMethodPages]: React.ReactNode;
+};
+
+export const FullScreenContent = ({
+  mfaType,
+  action,
+  keyType,
+}: RecoveryMethodsFullScreenParams) => {
+  const { t } = useTranslation();
+
+  const getPage = useMemo(() => {
+    if (mfaType === 'totp' && action === 'remove') {
+      return 'removeTOTP';
+    }
+    if (mfaType === 'totp' && action === 'add') {
+      return 'addTOTP';
+    }
+    if (mfaType === 'fido' && action === 'add') {
+      return 'addFIDO';
+    }
+  }, [action, mfaType]);
+
+  const page = getPage;
+
+  const headline = {
+    removeTOTP: t('Authenticator removal'),
+    addTOTP: t('Add Authenticator'),
+    addFIDO: t('Add FIDO Device'),
+  };
+  const content: FullScreenContentProps = {
+    removeTOTP: <RemoveTotp />,
+    addTOTP: <AddTotp />,
+    addFIDO: <AddFIDO keyType={keyType} />,
+    // MFAChoicePrompt: (
+    //   <MfaChoicePrompt
+    //     mfaChoice={mfaChoice.choice}
+    //     onChosen={selectMfaMethod}
+    //   />
+    // ),
+  };
   // const {
   //   authenticate,
   //   step,
@@ -17,7 +69,14 @@ export const FullScreenContent = () => {
   //   onSignerTokenObtained: onAuthSuccess,
   // });
 
-  return <RemoveTotp />;
+  return (
+    <>
+      <FullscreenModalTitle>{headline[page]}</FullscreenModalTitle>
+      {mfaType === 'totp' && action === 'remove' && content[page]}
+      {mfaType === 'totp' && action === 'add' && content[page]}
+      {mfaType === 'fido' && action === 'add' && content[page]}
+    </>
+  );
   // const history = useHistory();
   // const { t } = useTranslation();
   // const { capture } = useAnalyticsContext();
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
deleted file mode 100644
index 47d7f989c..000000000
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useHistory } from 'react-router-dom';
-
-import { FullscreenModal } from '@/components/FullscreenModal';
-import { FullscreenAnimatedBackground } from '@/components/FullscreenAnimatedBackground';
-
-import { FullScreenContent } from './FullScreenContent';
-
-export const FullScreenRecoveryMethods = () => {
-  const history = useHistory();
-
-  return (
-    <>
-      <FullscreenAnimatedBackground sx={{ backgroundSize: '80% 60%' }} />
-      <FullscreenModal
-        open
-        withCoreLogo
-        withAppInfo
-        withLanguageSelector
-        onBack={history.goBack}
-      >
-        <FullScreenContent />
-      </FullscreenModal>
-    </>
-  );
-};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
new file mode 100644
index 000000000..d41a3c439
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
@@ -0,0 +1,39 @@
+import { useHistory, useParams } from 'react-router-dom';
+
+import { FullscreenModal } from '@/components/FullscreenModal';
+import { FullscreenAnimatedBackground } from '@/components/FullscreenAnimatedBackground';
+
+import { FullScreenContent } from './FullScreenContent';
+
+export interface RecoveryMethodsFullScreenParams {
+  mfaType?: 'totp' | 'fido';
+  keyType?: 'yubikey' | 'passkey';
+  action?: 'remove' | 'add';
+}
+
+export const RecoveryMethodsFullScreen = () => {
+  const history = useHistory();
+  const { mfaType, action, keyType } =
+    useParams<RecoveryMethodsFullScreenParams>();
+  console.log('mfaType: ', mfaType);
+  console.log('action: ', action);
+
+  return (
+    <>
+      <FullscreenAnimatedBackground sx={{ backgroundSize: '80% 60%' }} />
+      <FullscreenModal
+        open
+        withCoreLogo
+        withAppInfo
+        withLanguageSelector
+        onBack={history.goBack}
+      >
+        <FullScreenContent
+          mfaType={mfaType}
+          action={action}
+          keyType={keyType}
+        />
+      </FullscreenModal>
+    </>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index eba2812c7..0b5cfa8a0 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -4,11 +4,17 @@ import {
   AlertCircleIcon,
   Button,
   CheckCircleIcon,
+  CircularProgress,
   Stack,
   Typography,
 } from '@avalabs/core-k2-components';
 
 import { useSeedlessMfaManager } from '@core/ui';
+import { AuthErrorCode, MfaRequestType } from '@core/types';
+import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
+import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { FIDOChallenge } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge';
 
 enum RemoveTotpState {
   Loading = 'loading',
@@ -23,9 +29,16 @@ export const RemoveTotp = () => {
   const { t } = useTranslation();
   const { removeTotp } = useSeedlessMfaManager();
   const [state, setState] = useState(RemoveTotpState.Loading);
+  const [error, setError] = useState<AuthErrorCode>();
+  console.log('error: ', error);
+  const mfaChoice = useMFAChoice();
+  console.log('mfaChoice: ', mfaChoice);
+  const mfaChallenge = useMFAEvents(setError);
+  console.log('mfaChallenge: ', mfaChallenge);
 
   const remove = useCallback(async () => {
     try {
+      console.log('remove called: ', remove);
       await removeTotp();
       setState(RemoveTotpState.Success);
     } catch {
@@ -38,16 +51,7 @@ export const RemoveTotp = () => {
   }, [remove]);
 
   return (
-    <Stack
-      sx={{
-        width: 375,
-        height: 600,
-        px: 2,
-        alignSelf: 'center',
-        borderRadius: 1,
-        backgroundColor: 'background.paper',
-      }}
-    >
+    <Stack>
       {state === RemoveTotpState.Failure && (
         <Stack
           sx={{
@@ -118,7 +122,25 @@ export const RemoveTotp = () => {
       )}
       {state === RemoveTotpState.Loading && (
         <>
-          <>Loading</>
+          <CircularProgress />
+          {/* Remove REFISGTER */}
+          {(mfaChallenge.challenge?.type === MfaRequestType.Fido ||
+            mfaChallenge.challenge?.type === MfaRequestType.FidoRegister) && (
+            <FIDOChallenge
+              challenge={mfaChallenge.challenge}
+              // name={mfaDeviceName}
+              onError={setError}
+              error={error}
+            />
+          )}
+          {/* {mfaChallenge.challenge?.type === MfaRequestType.Totp && (
+            <TOTPChallenge
+              onSubmit={submitTotp}
+              isLoading={isVerifying}
+              error={error}
+            />
+          )} */}
+
           {/* {renderMfaPrompt()} */}
         </>
       )}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index 26456c392..8c40aed90 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -1,5 +1,5 @@
 import { Page } from '@/components/Page';
-import { Button } from '@avalabs/k2-alpine';
+import { Button, Stack } from '@avalabs/k2-alpine';
 import { useSeedlessMfaManager } from '@core/ui';
 import { useTranslation } from 'react-i18next';
 import { AuthenticatorDetails } from './Authenticator/AuthenticatorDetails';
@@ -7,6 +7,7 @@ import { FIDODetails } from './FIDO/FIDODetails';
 import { RecoveryMethod as RecoveryMethodType } from '@core/types';
 import { useCallback } from 'react';
 import { openFullscreenTab } from '@core/common';
+import { useHistory } from 'react-router-dom';
 
 interface RecoveryMethodProps {
   method: RecoveryMethodType;
@@ -20,18 +21,23 @@ export const RecoveryMethod = ({
   console.log('RecoveryMethod: ', method);
   const { t } = useTranslation();
   const { hasTotpConfigured } = useSeedlessMfaManager();
+  const history = useHistory();
 
   const openRemoveTotpPopup = useCallback(async () => {
-    openFullscreenTab('remove-totp');
+    openFullscreenTab('update-recovery-method/totp/remove');
+  }, []);
+  const openAddTotpPopup = useCallback(async () => {
+    openFullscreenTab('update-recovery-method/totp/add');
   }, []);
 
   return (
-    <Page
-      title={t('Recovery Method Details')}
-      withBackButton
-      contentProps={{ justifyContent: 'flex-start' }}
-      onBack={onBackClicked}
-    >
+    // <Page
+    //   title={t('Recovery Method Details')}
+    //   withBackButton
+    //   contentProps={{ justifyContent: 'flex-start' }}
+    //   onBack={onBackClicked}
+    // >
+    <Stack>
       {method.type === 'totp' && (
         <AuthenticatorDetails method={method} methodName={t('Authenticator')} />
       )}
@@ -45,7 +51,9 @@ export const RecoveryMethod = ({
           fullWidth
           // disabled={!isFormValid || isSubmitting}
           // loading={isSubmitting}
-          // onClick={isFormValid ? handleSubmit : undefined}
+          onClick={() => {
+            openAddTotpPopup();
+          }}
           sx={{ mt: 'auto' }}
           disabled={!hasTotpConfigured}
         >
@@ -64,11 +72,14 @@ export const RecoveryMethod = ({
         sx={{ mt: 'auto' }}
         disabled={!hasTotpConfigured}
         onClick={() => {
-          openRemoveTotpPopup();
+          return method.type === 'totp'
+            ? openRemoveTotpPopup()
+            : history.push(`/settings/recovery-method/fido/${method.id}`);
         }}
       >
         {t('Remove recovery method')}
       </Button>
-    </Page>
+    </Stack>
+    // </Page>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index f78198338..d2e7c2ef3 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -5,6 +5,7 @@ import {
   PasswordIcon,
   SecurityKeyIcon,
 } from '@avalabs/k2-alpine';
+import { openFullscreenTab } from '@core/common';
 import { useAnalyticsContext } from '@core/ui';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useRouteMatch } from 'react-router-dom';
@@ -15,7 +16,11 @@ export const MethodIcons = {
   yubikey: <SecurityKeyIcon fontSize="large" />,
 };
 
-export const RecoveryMethodList = () => {
+export const RecoveryMethodList = ({
+  hasTotpConfigured,
+}: {
+  hasTotpConfigured: boolean;
+}) => {
   const { t } = useTranslation();
   const history = useHistory();
   const { capture } = useAnalyticsContext();
@@ -28,8 +33,9 @@ export const RecoveryMethodList = () => {
       description: t(
         'Passkeys are used for quick, password-free recovery and enhanced security.',
       ),
-      to: '/onboarding/import',
+      to: 'update-recovery-method/fido/add/passkey',
       analyticsKey: 'AddPasskeyClicked',
+      method: 'passkey',
     },
     {
       icon: MethodIcons.authenticator,
@@ -37,8 +43,10 @@ export const RecoveryMethodList = () => {
       description: t(
         'Authenticator apps generate secure, time-based codes for wallet recovery.',
       ),
-      to: `${path}/authenticator`,
+      // add url for in-extension version
+      to: `update-recovery-method/totp/add`,
       analyticsKey: 'AddAuthenticatorClicked',
+      method: 'authenticator',
     },
     {
       icon: MethodIcons.yubikey,
@@ -46,8 +54,9 @@ export const RecoveryMethodList = () => {
       description: t(
         'YubiKeys are physical, hardware-based protection and strong authentication.',
       ),
-      to: '/onboarding/import',
+      to: 'update-recovery-method/fido/add/yubikey',
       analyticsKey: 'AddYubikeyClicked',
+      method: 'yubikey',
     },
   ];
 
@@ -55,11 +64,17 @@ export const RecoveryMethodList = () => {
     <div>
       <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
         {recoveryMethodCards.map((card, idx) => {
+          // Hide Authenticator option if TOTP is already configured
+          if (card.method === 'authenticator' && hasTotpConfigured) {
+            return null;
+          }
+
           return (
             <CardMenuItem
               onClick={() => {
                 capture(card.analyticsKey);
-                history.push(card.to);
+                console.log('card.to: ', card.to);
+                openFullscreenTab(card.to);
               }}
               icon={card.icon}
               text={card.title}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index dab8e8afc..1584e7960 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -7,20 +7,88 @@ import { useTranslation } from 'react-i18next';
 import { RecoveryMethodList } from './RecoveryMethodList';
 import { RecoveryMethodCard } from './RecoveryMethodCard';
 import { RecoveryMethod } from './RecoveryMethod';
+import { ConfiguredMethodList } from './ConfiguredMethodList';
+
+export enum RecoveryMethodScreen {
+  ConfiguredList = 'configured-list',
+  NewList = 'new-list',
+  Method = 'method',
+  // AddNew = 'add-new',
+  // Authenticator = 'authenticator',
+  // FidoDetails = 'fido-details',
+}
 
 export const RecoveryMethods: FC = () => {
   const { t } = useTranslation();
   const { capture } = useAnalyticsContext();
   const [selectedMethod, setSelectedMethod] =
     useState<RecoveryMethodType | null>(null);
+  console.log('selectedMethod: ', selectedMethod);
   const {
     isLoadingRecoveryMethods,
-    recoveryMethods,
+    recoveryMethods: existingRecoveryMethods,
     // hasFidoConfigured,
     hasMfaConfigured,
-    // hasTotpConfigured,
+    hasTotpConfigured,
   } = useSeedlessMfaManager();
 
+  const [screen, setScreen] = useState(RecoveryMethodScreen.ConfiguredList);
+
+  return (
+    <Page
+      title={t('Recovery methods')}
+      withBackButton
+      contentProps={{ justifyContent: 'flex-start' }}
+    >
+      <Paper
+        elevation={1}
+        sx={{
+          borderRadius: 2,
+          overflow: 'hidden',
+        }}
+      >
+        {isLoadingRecoveryMethods && (
+          <>
+            <Skeleton variant="rectangular" sx={{ width: 297, height: 220 }} />
+          </>
+        )}
+
+        {screen === RecoveryMethodScreen.NewList && (
+          <RecoveryMethodList hasTotpConfigured={hasTotpConfigured} />
+        )}
+
+        {screen === RecoveryMethodScreen.ConfiguredList && (
+          <ConfiguredMethodList
+            existingRecoveryMethods={existingRecoveryMethods}
+            setSelectedMethod={setSelectedMethod}
+            setScreen={setScreen}
+          />
+        )}
+
+        {screen === RecoveryMethodScreen.Method && selectedMethod && (
+          <RecoveryMethod
+            method={selectedMethod}
+            onBackClicked={() => setSelectedMethod(null)}
+          />
+        )}
+      </Paper>
+      {screen === RecoveryMethodScreen.ConfiguredList && (
+        <Button
+          variant="contained"
+          color="primary"
+          size="extension"
+          fullWidth
+          sx={{ mt: 'auto' }}
+          onClick={() => {
+            capture('AddRecoveryMethodClicked');
+            setScreen(RecoveryMethodScreen.NewList);
+          }}
+        >
+          {t('Add recovery method')}
+        </Button>
+      )}
+    </Page>
+  );
   console.log('selectedMethod: ', selectedMethod);
   if (selectedMethod) {
     return (
@@ -50,9 +118,9 @@ export const RecoveryMethods: FC = () => {
           </>
         )}
         {!isLoadingRecoveryMethods && !hasMfaConfigured ? (
-          <RecoveryMethodList />
+          <RecoveryMethodList hasTotpConfigured={hasTotpConfigured} />
         ) : (
-          recoveryMethods.map((method) => {
+          existingRecoveryMethods.map((method) => {
             if (method.type === 'totp') {
               return (
                 <RecoveryMethodCard
@@ -88,6 +156,9 @@ export const RecoveryMethods: FC = () => {
         size="extension"
         fullWidth
         sx={{ mt: 'auto' }}
+        onClick={() => {
+          capture('AddRecoveryMethodClicked');
+        }}
       >
         {t('Add recovery method')}
       </Button>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
new file mode 100644
index 000000000..6020d47e4
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
@@ -0,0 +1,22 @@
+import { SlideUpDialog } from '@/components/Dialog';
+import { Page } from '@/components/Page';
+import { Button } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+export const ConfirmPage = ({ onNext, onBack }) => {
+  const { t } = useTranslation();
+  return (
+    <SlideUpDialog open>
+      <Page
+        title={t('Recovery methods')}
+        contentProps={{
+          alignItems: 'stretch',
+          justifyContent: 'flex-start',
+        }}
+      >
+        <Button onClick={onNext}>{t('Next')}</Button>
+        <Button onClick={onBack}>{t('Back')}</Button>
+      </Page>
+    </SlideUpDialog>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
index f264225d3..d8e1c1109 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
@@ -18,6 +18,8 @@ import { MdErrorOutline } from 'react-icons/md';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
 import { InProgress } from '../../../../InProgress';
 import { ChallengeComponentProps } from '../../../types';
+import { useParams } from 'react-router-dom';
+import { RecoveryMethodsFullScreenParams } from '@/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen';
 
 type Props = ChallengeComponentProps<
   MfaRequestType.Fido | MfaRequestType.FidoRegister
@@ -34,6 +36,7 @@ export const FIDOChallenge: FC<Props> = ({
   const { request } = useConnectionContext();
   const [force, setForce] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
+  const { keyType } = useParams<RecoveryMethodsFullScreenParams>();
 
   useEffect(() => {
     if (isVerifying && !force) {
@@ -44,8 +47,15 @@ export const FIDOChallenge: FC<Props> = ({
     setForce(false);
     onError(undefined);
 
-    launchFidoFlow(FIDOApiEndpoint.Authenticate, challenge.options)
+    launchFidoFlow(
+      challenge.type === MfaRequestType.Fido
+        ? FIDOApiEndpoint.Authenticate
+        : FIDOApiEndpoint.Register,
+      challenge.options,
+      challenge.type === MfaRequestType.FidoRegister ? keyType : undefined,
+    )
       .then((answer) => {
+        console.log('answer: ', answer);
         request<SubmitMfaResponseHandler>({
           method: ExtensionRequest.SEEDLESS_SUBMIT_MFA_RESPONSE,
           params: [
@@ -61,9 +71,11 @@ export const FIDOChallenge: FC<Props> = ({
     onError,
     request,
     isVerifying,
-    challenge.mfaId,
+    challenge?.mfaId,
     force,
     challenge.options,
+    challenge.type,
+    keyType,
   ]);
 
   return (
diff --git a/apps/next/src/routing/AppRoutes.tsx b/apps/next/src/routing/AppRoutes.tsx
index a0c80984c..2d4da2171 100644
--- a/apps/next/src/routing/AppRoutes.tsx
+++ b/apps/next/src/routing/AppRoutes.tsx
@@ -9,7 +9,7 @@ import { ImportLedgerFlow, ImportSeedphraseFlow } from '@/pages/Import';
 import AccountManagement from '@/pages/AccountManagement/AccountManagement';
 
 import { getContactsPath, getSendPath } from '@/config/routes';
-import { FullScreenRecoveryMethods } from '@/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenRecoveryMethods';
+import { RecoveryMethodsFullScreen } from '@/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen';
 
 export const AppRoutes = () => (
   <Switch>
@@ -20,7 +20,10 @@ export const AppRoutes = () => (
     <Route path="/import-wallet/seedphrase" component={ImportSeedphraseFlow} />
     <Route path="/import-wallet/ledger/:phase?" component={ImportLedgerFlow} />
     <Route path={getSendPath()} component={Send} />
-    <Route path="/remove-totp" component={FullScreenRecoveryMethods} />
+    <Route
+      path="/update-recovery-method/:mfaType?/:action?/:keyType?"
+      component={RecoveryMethodsFullScreen}
+    />
     <Route path="/" component={Portfolio} />
   </Switch>
 );

From 52904d1e90fd02c926b488f8ca020d4e9a51c60d Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Thu, 11 Sep 2025 19:14:29 +0200
Subject: [PATCH 08/22] feat: the recovery method management flow

---
 .../pages/Onboarding/components/CardMenu.tsx  |  22 +-
 .../screens/SeedlessNameFidoKey.tsx           |  10 +-
 .../subflows/SeedlessMfaLoginFlow.tsx         |   2 +
 .../pages/Settings/components/Home/Home.tsx   |  47 ++--
 .../Home/components/SettingsNavItem.tsx       |  14 +-
 .../Authenticator/Authenticator.tsx           | 134 ++++++++----
 .../Authenticator/AuthenticatorVerifyCode.tsx |  57 +++--
 .../AuthenticatorVerifyScreen.tsx             |  58 ++---
 .../Authenticator/AuthenticatorVerifyTotp.tsx |  60 ++++--
 .../RecoveryMethods/ConfiguredMethodList.tsx  |  68 +++---
 .../components/RecoveryMethods/FIDO/FIDO.tsx  |  89 +++++---
 .../RecoveryMethods/FullScreens/AddFIDO.tsx   | 118 ++++-------
 .../RecoveryMethods/FullScreens/AddTotp.tsx   |  81 +++----
 .../FullScreens/DefaultContent.tsx            |  68 ++++++
 .../FullScreens/FullScreenContent.tsx         | 200 ++----------------
 .../FullScreens/RemoveTotp.tsx                |  25 +--
 .../RecoveryMethods/RecoveryMethod.tsx        |  99 +++++----
 .../RecoveryMethods/RecoveryMethodCard.tsx    |   1 +
 .../RecoveryMethods/RecoveryMethodList.tsx    |  92 +++++---
 .../RecoveryMethods/RecoveryMethods.tsx       | 158 +++++---------
 .../components/RecoveryMethodFailure.tsx      |  17 ++
 .../components/SeedlessFlow/pages/MFA/MFA.tsx |   2 +-
 .../pages/MFA/components/FIDOChallenge.tsx    |   5 +-
 .../pages/MFA/components/TOTPChallenge.tsx    |   2 +-
 24 files changed, 743 insertions(+), 686 deletions(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/DefaultContent.tsx
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx

diff --git a/apps/next/src/pages/Onboarding/components/CardMenu.tsx b/apps/next/src/pages/Onboarding/components/CardMenu.tsx
index 881a9f6b3..8b80bf1f0 100644
--- a/apps/next/src/pages/Onboarding/components/CardMenu.tsx
+++ b/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': {
diff --git a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessNameFidoKey.tsx b/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessNameFidoKey.tsx
index cf97c5da7..f7431d9cd 100644
--- a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/screens/SeedlessNameFidoKey.tsx
+++ b/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"
diff --git a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx b/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx
index 5ba0b45a5..37d3268de 100644
--- a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx
+++ b/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(() => {
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 2464e6fd7..852626076 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -4,6 +4,7 @@ import {
   Stack,
   Switch,
   Typography,
+  useTheme,
 } from '@avalabs/k2-alpine';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -41,8 +42,10 @@ import {
 import { CurrencySelector } from '../CurrencySelector';
 import { ThemeSelector } from '../ThemeSelector';
 import { ViewPreferenceSelector } from '../ViewPreferenceSelector';
+import { Card } from '@/components/Card';
 
 export const SettingsHomePage = () => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const { lockWallet } = useSettingsContext();
   const { isDeveloperMode, setDeveloperMode } = useNetworkContext();
@@ -91,14 +94,31 @@ export const SettingsHomePage = () => {
         />
       </Stack>
 
-      <Stack>
-        {isMfaSetupPromptVisible && (
+      {isMfaSetupPromptVisible && (
+        <Card
+          sx={{
+            width: '100%',
+            px: theme.spacing(1.5),
+            py: theme.spacing(0.75),
+            gap: theme.spacing(1.5),
+          }}
+        >
           <SettingsNavItem
-            label={t('Finish setting up recovery methods')}
+            label={t('No recovery methods set up')}
             href={`${path}/recovery-methods`}
+            description={t('Finish setting up recovery methods')}
+            divider
+            secondaryAction={
+              <Button size="small" variant="contained" color="secondary">
+                {t('Set up ')}
+              </Button>
+            }
+            labelTpyographyVariant="subtitle3"
+            descriptionTpyographyVariant="caption2"
+            sx={{ borderBottom: 'none' }}
           />
-        )}
-      </Stack>
+        </Card>
+      )}
 
       <SettingsCard
         title={t('General')}
@@ -196,14 +216,15 @@ export const SettingsHomePage = () => {
           divider
           href={`${path}/change-password`}
         />
-        {(walletDetails?.type === SecretType.Mnemonic ||
-          walletDetails?.type === SecretType.Seedless) && (
-          <SettingsNavItem
-            label={t('Show recovery phrase')}
-            href={`${path}/recovery-phrase/show-phrase`}
-            divider
-          />
-        )}
+        {!isMfaSetupPromptVisible &&
+          (walletDetails?.type === SecretType.Mnemonic ||
+            walletDetails?.type === SecretType.Seedless) && (
+            <SettingsNavItem
+              label={t('Show recovery phrase')}
+              href={`${path}/recovery-phrase/show-phrase`}
+              divider
+            />
+          )}
         <SettingsNavItem label={t('Reset recovery phrase')} divider />
 
         {walletDetails?.type === SecretType.Seedless &&
diff --git a/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx b/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
index e0555bbe3..ecbaf8d2b 100644
--- a/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
+++ b/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
@@ -11,7 +11,13 @@ import { FC } from 'react';
 import { openNewTab } from '@core/common';
 import { useHistory } from 'react-router-dom';
 
-type OwnProps = { href?: string; label: string; description?: string };
+type OwnProps = {
+  href?: string;
+  label: string;
+  description?: string;
+  labelTpyographyVariant?: 'subtitle3';
+  descriptionTpyographyVariant?: 'caption2';
+};
 type SettingsNavItemProps = Omit<ListItemProps, 'onClick'> & OwnProps;
 
 export const SettingsNavItem: FC<SettingsNavItemProps> = ({
@@ -20,6 +26,8 @@ export const SettingsNavItem: FC<SettingsNavItemProps> = ({
   children,
   href,
   secondaryAction,
+  labelTpyographyVariant, // --- IGNORE ---
+  descriptionTpyographyVariant, // --- IGNORE ---
   ...props
 }) => {
   const history = useHistory();
@@ -56,10 +64,10 @@ export const SettingsNavItem: FC<SettingsNavItemProps> = ({
       <ListItemText
         slotProps={{
           primary: {
-            variant: 'subtitle1',
+            variant: labelTpyographyVariant || 'subtitle1',
           },
           secondary: {
-            variant: 'caption',
+            variant: descriptionTpyographyVariant || 'caption',
             marginTop: 0.5,
           },
         }}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
index b918e67ea..f54531c18 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
@@ -1,48 +1,43 @@
 import { Page } from '@/components/Page';
-import { Stack, Typography } from '@avalabs/k2-alpine';
+import { toast, Typography } from '@avalabs/k2-alpine';
 import { FC, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { TotpResetChallenge } from '@core/types';
+import { AuthErrorCode, TotpResetChallenge } from '@core/types';
 import { useState } from 'react';
 import { useGoBack, useSeedlessMfaManager } from '@core/ui';
-import browser from 'webextension-polyfill';
 import { AuthenticatorVerifyScreen } from './AuthenticatorVerifyScreen';
-import { SeedlessTotpQRCode } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
 import { AuthenticatorVerifyCode } from './AuthenticatorVerifyCode';
+import { AuthenticatorState } from './AuthenticatorDetails';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { RecoveryMethodFailure } from '../components/RecoveryMethodFailure';
+import { AuthenticatorVerifyTotp } from './AuthenticatorVerifyTotp';
+import { useHistory } from 'react-router-dom';
 
 export const Authenticator: FC = () => {
   const { t } = useTranslation();
-  const {
-    initAuthenticatorChange,
-    completeAuthenticatorChange,
-    hasFidoConfigured,
-    hasTotpConfigured,
-  } = useSeedlessMfaManager();
+  const history = useHistory();
+  const { initAuthenticatorChange, completeAuthenticatorChange } =
+    useSeedlessMfaManager();
   const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
   const [showSecret, setShowSecret] = useState(false);
-  console.log('totpChallenge: ', totpChallenge);
+  const [screenState, setScreenState] = useState<AuthenticatorState>(
+    AuthenticatorState.Initial,
+  );
+  const [code, setCode] = useState('');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [error, setError] = useState<AuthErrorCode>();
+
   const goBack = useGoBack();
 
   const initChange = useCallback(async () => {
-    console.log('initChange: ');
-    // if (hasFidoConfigured) {
-    //   browser.tabs.create({
-    //     url: `${ContextContainer.FULLSCREEN}#/update-recovery-methods`,
-    //   });
-    //   return;
-    // }
-
-    // setState(State.Initiated);
     try {
-      console.log('try: ');
       const challenge = await initAuthenticatorChange();
-      console.log('challenge: ', challenge);
+
       setTotpChallenge(challenge);
-      // setState(State.Pending);
-    } catch (e) {
-      console.log('catch: ', e);
+      setScreenState(AuthenticatorState.Initiated);
+    } catch {
       setTotpChallenge(undefined);
-      // setState(State.Failure);
+      setScreenState(AuthenticatorState.Failure);
     }
   }, [initAuthenticatorChange]);
 
@@ -58,31 +53,82 @@ export const Authenticator: FC = () => {
     return new URL(totpChallenge.totpUrl).searchParams.get('secret') ?? '';
   }, [totpChallenge]);
 
+  const headline = {
+    [AuthenticatorState.Initial]: t('Scan QR code'),
+    [AuthenticatorState.Initiated]: t('Scan QR code'),
+    [AuthenticatorState.VerifyCode]: t('Verify code'),
+    [AuthenticatorState.Failure]: t('Something went wrong'),
+  };
+
+  const description = {
+    [AuthenticatorState.Initial]: t('Setting up your authenticator app.'),
+    [AuthenticatorState.Initiated]: t(
+      'Open any authenticator app and scan the QR code below or enter the code manually',
+    ),
+    [AuthenticatorState.VerifyCode]: t(
+      'Enter the code generated from the authenticator app',
+    ),
+  };
+
+  const onBack = useCallback(() => {
+    goBack();
+  }, [goBack]);
+
+  const onCodeSubmit = useCallback(async () => {
+    setIsSubmitted(true);
+    if (!totpChallenge) {
+      setScreenState(AuthenticatorState.Failure);
+      return;
+    }
+    try {
+      await completeAuthenticatorChange(totpChallenge.totpId, code);
+      toast.success(t('Authenticator added!'));
+      history.push('/settings/recovery-methods');
+    } catch (e) {
+      setError(e as AuthErrorCode);
+    } finally {
+      setIsSubmitted(false);
+    }
+  }, [code, completeAuthenticatorChange, history, t, totpChallenge]);
+
   return (
     <Page
-      title={t('Scan QR code')}
+      title={headline[screenState]}
       withBackButton
-      contentProps={{ justifyContent: 'flex-start' }}
+      contentProps={{ justifyContent: 'flex-start', alignItems: 'start' }}
+      onBack={onBack}
     >
-      <Typography variant="caption">
-        {t(
-          'Open any authenticator app and scan the QR code below or enter the code manually',
+      <Typography variant="caption">{description[screenState]}</Typography>
+      {screenState === AuthenticatorState.Initial && (
+        <InProgress textSize="body1" />
+      )}
+      {screenState === AuthenticatorState.Initiated &&
+        !showSecret &&
+        totpChallenge && (
+          <AuthenticatorVerifyScreen
+            totpChallenge={totpChallenge}
+            onNext={() => setScreenState(AuthenticatorState.VerifyCode)}
+            onShowSecret={() => setShowSecret(true)}
+          />
         )}
-      </Typography>
-      {totpChallenge && (
-        <AuthenticatorVerifyScreen
-          onBackClick={() => console.log('Back clicked')}
-          totpChallenge={totpChallenge}
-          onNextClick={() => console.log('Next clicked')}
-          onShowSecret={() => setShowSecret(true)}
+      {screenState === AuthenticatorState.Initiated && showSecret && (
+        <AuthenticatorVerifyCode
+          totpSecret={totpSecret}
+          onNext={() => setScreenState(AuthenticatorState.VerifyCode)}
         />
       )}
-      {showSecret && <AuthenticatorVerifyCode totpSecret={totpSecret} />}
-
-      {/* <SeedlessTotpQRCode
-				challengeUrl={totpChallenge?.totpUrl ?? ''}
-				onNext={() => console.log('next')}
-			/> */}
+      {totpChallenge && screenState === AuthenticatorState.VerifyCode && (
+        <AuthenticatorVerifyTotp
+          onChange={(c) => {
+            setCode(c);
+            setError(undefined);
+          }}
+          error={error}
+          onSubmit={onCodeSubmit}
+          isSubmitted={isSubmitted}
+        />
+      )}
+      {screenState === AuthenticatorState.Failure && <RecoveryMethodFailure />}
     </Page>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
index 26987db1b..afb17d3d9 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
@@ -1,31 +1,54 @@
-import { Stack, toast, Typography, useTheme } from '@avalabs/k2-alpine';
-import QRCode from 'qrcode.react';
-import { useMemo } from 'react';
+import { Button, Paper, Stack, toast, Typography } from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
 
-export const AuthenticatorVerifyCode = ({ totpSecret }) => {
-  const theme = useTheme();
+export const AuthenticatorVerifyCode = ({ totpSecret, onNext }) => {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <Stack maxWidth={300} textAlign="center" gap={1}>
-        <Typography variant="subtitle1" color="text.secondary">
-          {t('Alternatively, open any authenticator app and enter this code:')}
-        </Typography>
+    <Stack
+      alignItems="center"
+      justifyContent="space-between"
+      height="100%"
+      width="100%"
+    >
+      <Paper
+        elevation={1}
+        sx={{
+          borderRadius: 2,
+          overflow: 'hidden',
+          width: '100%',
+          flexDirection: 'row',
+          px: 1.5,
+          py: 2,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          mt: 4,
+        }}
+      >
         <Typography
-          variant="mono"
+          variant="body2"
           color="text.primary"
-          role="button"
-          sx={{ cursor: 'pointer' }}
+          sx={{ wordBreak: 'break-all', maxWidth: '60%' }}
+        >
+          {totpSecret}
+        </Typography>
+        <Button
+          size="extension"
+          variant="contained"
+          color="secondary"
           onClick={() => {
             navigator.clipboard.writeText(totpSecret);
             toast.success(t('Code copied to clipboard'));
           }}
         >
-          {totpSecret}
-        </Typography>
-      </Stack>
-    </div>
+          {t('Copy')}
+        </Button>
+      </Paper>
+      {/** TODO: Put the description sections with ICONS after they put in the k2 alpine */}
+      <Button onClick={onNext} color="primary" variant="contained" fullWidth>
+        {t('Next')}
+      </Button>
+    </Stack>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
index d1d5aac61..fd1edb198 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -1,46 +1,46 @@
-import { Button, Stack, toast, Typography, useTheme } from '@avalabs/k2-alpine';
+import { Button, Stack, useTheme } from '@avalabs/k2-alpine';
 import QRCode from 'qrcode.react';
 import { useTranslation } from 'react-i18next';
 
-export const AuthenticatorVerifyScreen = ({ totpChallenge, onNext }) => {
+export const AuthenticatorVerifyScreen = ({
+  totpChallenge,
+  onShowSecret,
+  onNext,
+}) => {
   console.log('AuthenticatorVerifyScreen: ', totpChallenge);
   const theme = useTheme();
   const { t } = useTranslation();
 
   return (
     <Stack
-      gap={4}
-      justifyContent="center"
       alignItems="center"
+      justifyContent="space-between"
       height="100%"
       width="100%"
     >
-      <QRCode
-        renderAs="svg"
-        fgColor={theme.palette.common.black}
-        bgColor={theme.palette.common.white}
-        value={totpChallenge.totpUrl}
-        level="H"
-        size={188}
-      />
-      <Stack maxWidth={300} textAlign="center" gap={1}>
-        <Typography variant="subtitle1" color="text.secondary">
-          {t('Alternatively, open any authenticator app and enter this code:')}
-        </Typography>
-        <Typography
-          variant="mono"
-          color="text.primary"
-          role="button"
-          sx={{ cursor: 'pointer' }}
-          onClick={() => {
-            navigator.clipboard.writeText(totpChallenge.totpSecret);
-            toast.success(t('Code copied to clipboard'));
-          }}
-        >
-          {totpChallenge.totpSecret}
-        </Typography>
+      <Stack gap={4} mt={4}>
+        <QRCode
+          renderAs="svg"
+          fgColor={theme.palette.common.black}
+          bgColor={theme.palette.common.white}
+          value={totpChallenge.totpUrl}
+          level="H"
+          size={188}
+        />
+        <Stack maxWidth={300} textAlign="center" gap={1}>
+          <Button
+            color="secondary"
+            variant="contained"
+            size="small"
+            onClick={onShowSecret}
+          >
+            {t('Enter code manually')}
+          </Button>
+        </Stack>
       </Stack>
-      <Button onClick={onNext}>{t('Next')}</Button>
+      <Button onClick={onNext} color="primary" variant="contained" fullWidth>
+        {t('Next')}
+      </Button>
     </Stack>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
index 7ebff2cea..0fb00a192 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
@@ -1,25 +1,51 @@
 import { TotpCodeField } from '@/components/TotpCodeField';
+import { Button, Stack } from '@avalabs/k2-alpine';
+import { AuthErrorCode } from '@core/types';
 import { useKeyboardShortcuts, useTotpErrorMessage } from '@core/ui';
-import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export const AuthenticatorVerifyTotp = ({ onChange, isLoading, error }) => {
-  const [isSubmitted, setIsSubmitted] = useState(false);
+interface AuthenticatorVerifyTotpProps {
+  onChange: (code: string) => void;
+  error?: AuthErrorCode;
+  onSubmit?: () => void;
+  isSubmitted?: boolean;
+}
+export const AuthenticatorVerifyTotp = ({
+  onChange,
+  error,
+  onSubmit,
+  isSubmitted,
+}: AuthenticatorVerifyTotpProps) => {
+  console.log('error: ', error);
   const totpError = useTotpErrorMessage(error);
-  // const keyboardShortcuts = useKeyboardShortcuts({
-  //   Enter: () => onSubmit(code),
-  // });
+  console.log('totpError: ', totpError);
+  const keyboardShortcuts = useKeyboardShortcuts({
+    Enter: () => onSubmit && onSubmit(),
+  });
+  const { t } = useTranslation();
 
   return (
-    <TotpCodeField
-      error={isSubmitted && !!totpError}
-      helperText={isSubmitted && totpError}
-      onChange={(e) => {
-        onChange(e.target.value);
-        if (error && !isLoading) {
-          setIsSubmitted(false);
-        }
-      }}
-      // {...keyboardShortcuts}
-    />
+    <Stack mt={4} justifyContent="space-between" height="100%">
+      <TotpCodeField
+        error={!!totpError}
+        helperText={totpError}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        {...keyboardShortcuts}
+      />
+      {onSubmit && (
+        <Button
+          onClick={onSubmit}
+          color="primary"
+          variant="contained"
+          fullWidth
+          loading={isSubmitted}
+          disabled={isSubmitted}
+        >
+          {t('Next')}
+        </Button>
+      )}
+    </Stack>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
index 5020759d0..3cf4cb874 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { RecoveryMethodCard } from './RecoveryMethodCard';
 import { useAnalyticsContext } from '@core/ui';
 import { RecoveryMethodScreen } from './RecoveryMethods';
+import { Paper } from '@avalabs/k2-alpine';
 
 export const ConfiguredMethodList = ({
   existingRecoveryMethods,
@@ -11,33 +12,44 @@ export const ConfiguredMethodList = ({
   const { t } = useTranslation();
   const { capture } = useAnalyticsContext();
 
-  return existingRecoveryMethods.map((method) => {
-    if (method.type === 'totp') {
-      return (
-        <RecoveryMethodCard
-          method={method}
-          key="totp"
-          methodName={t('Authenticator')}
-          onClick={() => {
-            capture('ConfigureTotpClicked');
-            setSelectedMethod(method);
-            setScreen(RecoveryMethodScreen.Method);
-          }}
-        />
-      );
-    }
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        borderRadius: 2,
+        overflow: 'hidden',
+        width: '100%',
+      }}
+    >
+      {existingRecoveryMethods.map((method) => {
+        if (method.type === 'totp') {
+          return (
+            <RecoveryMethodCard
+              method={method}
+              key="totp"
+              methodName={t('Authenticator')}
+              onClick={() => {
+                capture('ConfigureTotpClicked');
+                setSelectedMethod(method);
+                setScreen(RecoveryMethodScreen.Method);
+              }}
+            />
+          );
+        }
 
-    return (
-      <RecoveryMethodCard
-        method={method}
-        key={method.id}
-        methodName={method.name}
-        onClick={() => {
-          capture('ConfigureFidoClicked');
-          setSelectedMethod(method);
-          setScreen(RecoveryMethodScreen.Method);
-        }}
-      />
-    );
-  });
+        return (
+          <RecoveryMethodCard
+            method={method}
+            key={method.id}
+            methodName={method.name}
+            onClick={() => {
+              capture('ConfigureFidoClicked');
+              setSelectedMethod(method);
+              setScreen(RecoveryMethodScreen.Method);
+            }}
+          />
+        );
+      })}
+    </Paper>
+  );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
index b663256ff..d648d8db9 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
@@ -1,57 +1,74 @@
 import { Page } from '@/components/Page';
-import { Button, Typography } from '@avalabs/k2-alpine';
-import { useConnectionContext, useSeedlessMfaManager } from '@core/ui';
-import { useCallback, useEffect, useState } from 'react';
+import { Button, Stack, toast, Typography } from '@avalabs/k2-alpine';
+import {
+  useConnectionContext,
+  useKeyboardShortcuts,
+  useSeedlessMfaManager,
+  useTotpErrorMessage,
+} from '@core/ui';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
 import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
 import { AuthErrorCode, ExtensionRequest, MfaResponseData } from '@core/types';
 import { TotpCodeField } from '@/components/TotpCodeField';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
 
 export const FIDO = () => {
+  const history = useHistory();
   const { removeFidoDevice } = useSeedlessMfaManager();
   const { t } = useTranslation();
   const [error, setError] = useState<AuthErrorCode>();
-  const [code, setCode] = useState();
+  const totpError = useTotpErrorMessage(error);
+  const [code, setCode] = useState('');
+  const [isVerifying, setIsVerifying] = useState(false);
+
   const { request } = useConnectionContext();
-  console.log('code: ', code);
-  console.log('FIDO error: ', error);
+
   const mfaEvents = useMFAEvents(setError);
-  console.log('mfaEvents: ', mfaEvents);
+
   const { id } = useParams<{ id: string }>();
   const { hash } = useLocation();
-  console.log('hash: ', hash);
+
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+  const keyboardShortcuts = useKeyboardShortcuts({
+    Enter: () => submitButtonRef.current?.click(),
+  });
+
   const deviceId = `${id}${hash}`;
-  // const id =
-  //   'FidoKey#CWEYvVBjNFJSVB_Qjr3dcIs0mw6T6IcTASzEke_lbclVGTb-FRP5ZpUOXNMsRwBz7ZajS3NFeQH8pCa3h3mbJeUPWT8ocGMsdhF14ob2MB4dNBsGAfkchwRQTb1Vkv-B-t4KbPHtVD-dxncLdk6iwI6XVlXd2HAnekp_SB9fI-0=';
-  console.log('deviceId: ', deviceId);
+
+  const remove = useCallback(async () => {
+    try {
+      await removeFidoDevice(deviceId);
+      toast.success(t('FIDO device removed!'));
+      history.push('/settings/recovery-methods');
+    } catch {
+      toast.error(t('Error occurred. Please try again.'));
+      history.push('/settings/recovery-methods');
+    }
+  }, [deviceId, history, removeFidoDevice, t]);
 
   useEffect(() => {
-    removeFidoDevice(deviceId).then((result) => {
-      console.log('result: ', result);
-    });
-  }, [deviceId, removeFidoDevice]);
+    remove();
+  }, [deviceId, remove, removeFidoDevice]);
 
-  const submit = useCallback(
-    (params: MfaResponseData) => {
-      // setIsVerifying(true);
-      // onError(undefined);
+  const submitCode = useCallback(
+    async (params: MfaResponseData) => {
+      setIsVerifying(true);
 
       try {
-        request<SubmitMfaResponseHandler>({
+        await request<SubmitMfaResponseHandler>({
           method: ExtensionRequest.SEEDLESS_SUBMIT_MFA_RESPONSE,
           params: [params],
         });
       } catch {
-        // onError(AuthErrorCode.TotpVerificationError);
+        setError(AuthErrorCode.TotpVerificationError);
       } finally {
-        // setIsVerifying(false);
+        setIsVerifying(false);
       }
     },
     [request],
   );
-
   return (
     <Page
       title={t('Remove FIDO Device')}
@@ -64,25 +81,39 @@ export const FIDO = () => {
         )}
       </Typography>
       {mfaEvents.challenge && mfaEvents.challenge.type === 'totp' && (
-        <>
+        <Stack
+          sx={{ height: '100%', justifyContent: 'space-between' }}
+          {...keyboardShortcuts}
+        >
           <TotpCodeField
+            error={!!totpError}
+            helperText={totpError}
             onChange={(e) => {
               setCode(e.target.value);
+              setError(undefined);
             }}
           />
           <Button
+            ref={submitButtonRef}
+            variant="contained"
+            color="primary"
+            size="large"
             onClick={() => {
-              // setIsSubmitted(true);
-              // setIsVerifying(true);
-              submit({
+              if (!mfaEvents.challenge) {
+                return;
+              }
+              submitCode({
                 mfaId: mfaEvents.challenge.mfaId,
                 code,
               });
             }}
+            loading={isVerifying}
+            disabled={!code || isVerifying}
+            fullWidth
           >
             {t('Verify')}
           </Button>
-        </>
+        </Stack>
       )}
     </Page>
   );
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
index 2a0548d58..6f863651d 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
@@ -1,93 +1,67 @@
-import {
-  AuthErrorCode,
-  ExtensionRequest,
-  MfaResponseData,
-  RecoveryMethodTypes,
-  TotpResetChallenge,
-} from '@core/types';
-import {
-  useConnectionContext,
-  useSeedlessActions,
-  useSeedlessMfaManager,
-} from '@core/ui';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
-import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
-import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
-import { useSelectMFAMethod } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useSelectMFAMethod';
+import { useSeedlessMfaManager } from '@core/ui';
+import { useCallback, useState } from 'react';
 import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
-import { AuthenticatorVerifyScreen } from '../Authenticator/AuthenticatorVerifyScreen';
-import { Button, Stack } from '@avalabs/k2-alpine';
-import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
-import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
-import { SEEDLESS_ACTIONS_OPTIONS } from '@/pages/Onboarding/config';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { Stack, toast, Typography } from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
-import { FullscreenModalActions } from '@/components/FullscreenModal';
-import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
-import { CompleteAuthenticatorChangeHandler } from '~/index';
 import { SeedlessNameFidoKey } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
 import { KeyType } from '@core/types';
+import { useHistory } from 'react-router-dom';
+
+export enum AddFIDOState {
+  Initial = 'initial',
+  Initiated = 'initiated',
+  Pending = 'pending',
+  Failure = 'failure',
+  Success = 'success',
+}
 
 export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
-  const { request } = useConnectionContext();
-  const [error, setError] = useState<AuthErrorCode>();
   const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(false);
-  const { initAuthenticatorChange, addFidoDevice } = useSeedlessMfaManager();
-  const [step, setStep] = useState<'name' | 'register' | 'verify'>('name');
-  const [name, setName] = useState('');
+  const { addFidoDevice } = useSeedlessMfaManager();
+  const history = useHistory();
 
-  const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
-  const mfaChallenge = useMFAEvents(setError);
-  console.log('mfaChallenge: ', mfaChallenge);
-  const [screenState, setScreenState] = useState<AuthenticatorState>(
-    AuthenticatorState.Initiated,
+  const [screenState, setScreenState] = useState<AddFIDOState>(
+    AddFIDOState.Initial,
   );
 
-  // const [name, setName] = useState('');
-
-  const [code, setCode] = useState('');
-  const submitButtonRef = useRef<HTMLButtonElement>(null);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [isVerifying, setIsVerifying] = useState(false);
-
-  const registerFidoKey = useCallback(async () => {
-    try {
-      console.log('registerFidoKey name: ', name);
-      const result = await addFidoDevice(name, keyType);
-      console.log('result: ', result);
-      // const challenge = await initAuthenticatorChange();
-      // setTotpChallenge(challenge);
-      // setScreenState(AuthenticatorState.Pending);
-    } catch (e) {
-      console.log('e: ', e);
-      // setTotpChallenge(undefined);
-      setScreenState(AuthenticatorState.Failure);
-    }
-  }, [addFidoDevice, keyType, name]);
-
-  useEffect(() => {
-    registerFidoKey(name);
-  }, [name, registerFidoKey]);
+  const registerFidoKey = useCallback(
+    async (deviceName: string) => {
+      try {
+        await addFidoDevice(deviceName, keyType);
+        toast.success(t(`${deviceName} (${keyType}) added!`), {
+          duration: Infinity,
+        });
+        history.push('/update-recovery-method');
+        return;
+      } catch (e) {
+        console.log('e: ', e);
+        setScreenState(AddFIDOState.Failure);
+      }
+    },
+    [addFidoDevice, history, keyType, t],
+  );
 
   return (
-    <Stack>
-      {isLoading && <InProgress textSize="body1" />}
-      {!name && (
+    <Stack sx={{ height: '100%' }}>
+      {/* <InProgress textSize="body1" /> */}
+      {screenState === AddFIDOState.Initial && (
         <SeedlessNameFidoKey
+          required
           keyType={keyType}
-          onNext={(preferredName) => {
-            setStep('register');
-            setName(preferredName);
-            // registerFidoKey();
+          onNext={(deviceName) => {
+            setScreenState(AddFIDOState.Initiated);
+            registerFidoKey(deviceName);
           }}
         />
       )}
-      {step === 'register' && <MFA fullscreen />}
+      {screenState === AddFIDOState.Initiated && <MFA fullscreen />}
 
-      {screenState === AuthenticatorState.Failure && (
-        <div>Error occurred. Please try again.</div>
+      {screenState === AddFIDOState.Failure && (
+        <Stack>
+          <Typography variant="body1" color="error">
+            {t('Error occurred. Please try again.')}
+          </Typography>
+        </Stack>
       )}
     </Stack>
   );
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
index 90c93667e..8e65513dd 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
@@ -1,36 +1,23 @@
-import {
-  AuthErrorCode,
-  ExtensionRequest,
-  MfaResponseData,
-  TotpResetChallenge,
-} from '@core/types';
-import {
-  useConnectionContext,
-  useSeedlessActions,
-  useSeedlessMfaManager,
-} from '@core/ui';
+import { AuthErrorCode, TotpResetChallenge } from '@core/types';
+import { useSeedlessMfaManager } from '@core/ui';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
-import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
-import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
-import { useSelectMFAMethod } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useSelectMFAMethod';
 import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
-import { AuthenticatorVerifyScreen } from '../Authenticator/AuthenticatorVerifyScreen';
-import { Button, Stack } from '@avalabs/k2-alpine';
+import { Button, Stack, toast } from '@avalabs/k2-alpine';
 import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
 import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
-import { SEEDLESS_ACTIONS_OPTIONS } from '@/pages/Onboarding/config';
 import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 import { useTranslation } from 'react-i18next';
 import { FullscreenModalActions } from '@/components/FullscreenModal';
-import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
-import { CompleteAuthenticatorChangeHandler } from '~/index';
+import { SeedlessTotpQRCode } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
+import { RecoveryMethodFailure } from '../components/RecoveryMethodFailure';
+import { useHistory } from 'react-router-dom';
 
 export const AddTotp = () => {
-  const { request } = useConnectionContext();
   const [error, setError] = useState<AuthErrorCode>();
+  const history = useHistory();
   const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const { initAuthenticatorChange, completeAuthenticatorChange } =
     useSeedlessMfaManager();
 
@@ -45,55 +32,71 @@ export const AddTotp = () => {
   const [code, setCode] = useState('');
   console.log('code: ', code);
   const submitButtonRef = useRef<HTMLButtonElement>(null);
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
 
   const initChange = useCallback(async () => {
     try {
       const challenge = await initAuthenticatorChange();
-
       setTotpChallenge(challenge);
       setScreenState(AuthenticatorState.Pending);
-    } catch (e) {
+    } catch {
       setTotpChallenge(undefined);
       setScreenState(AuthenticatorState.Failure);
     }
   }, [initAuthenticatorChange]);
 
+  const onVerify = useCallback(async () => {
+    console.log('totpChallenge: ', totpChallenge);
+    if (!totpChallenge) {
+      return;
+    }
+    try {
+      setIsVerifying(true);
+      await completeAuthenticatorChange(totpChallenge.totpId, code);
+      toast.success(t('Authenticator added!'), {
+        duration: Infinity,
+      });
+      history.push('update-recovery-method');
+    } catch (e) {
+      setError(e as AuthErrorCode);
+    } finally {
+      setIsVerifying(false);
+    }
+  }, [code, completeAuthenticatorChange, history, t, totpChallenge]);
+
   useEffect(() => {
     initChange();
+    setIsLoading(false);
   }, [initChange]);
 
   return (
-    <Stack>
+    <Stack sx={{ height: '100%' }}>
       {isLoading && <InProgress textSize="body1" />}
       {!totpChallenge && <MFA fullscreen />}
       {screenState === AuthenticatorState.Pending && totpChallenge && (
-        <AuthenticatorVerifyScreen
-          totpChallenge={totpChallenge}
+        <SeedlessTotpQRCode
+          challengeUrl={totpChallenge?.totpUrl ?? ''}
           onNext={() => setScreenState(AuthenticatorState.VerifyCode)}
         />
       )}
-      {screenState === AuthenticatorState.VerifyCode && (
+      {screenState === AuthenticatorState.VerifyCode && totpChallenge && (
         <>
           <AuthenticatorVerifyTotp
-            onChange={(c) => setCode(c)}
-            isLoading={isLoading}
+            onChange={(c) => {
+              setCode(c);
+              setError(undefined);
+            }}
             error={error}
           />
           <FullscreenModalActions>
             <Button
               ref={submitButtonRef}
               variant="contained"
-              color="secondary"
+              color="primary"
               size="large"
-              onClick={() => {
-                setIsSubmitted(true);
-                setIsVerifying(true);
-                completeAuthenticatorChange(totpChallenge?.totpId, code);
-              }}
+              onClick={onVerify}
               loading={isVerifying}
-              // disabled={!code || isVerifying}
+              disabled={!code || isVerifying}
               fullWidth
             >
               {isVerifying ? t('Verifying...') : t('Verify')}
@@ -101,9 +104,7 @@ export const AddTotp = () => {
           </FullscreenModalActions>
         </>
       )}
-      {screenState === AuthenticatorState.Failure && (
-        <div>Error occurred. Please try again.</div>
-      )}
+      {screenState === AuthenticatorState.Failure && <RecoveryMethodFailure />}
     </Stack>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/DefaultContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/DefaultContent.tsx
new file mode 100644
index 000000000..1443d3c10
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/DefaultContent.tsx
@@ -0,0 +1,68 @@
+import {
+  FullscreenModalActions,
+  FullscreenModalTitle,
+} from '@/components/FullscreenModal';
+import {
+  Button,
+  PasswordIcon,
+  SecurityKeyIcon,
+  Stack,
+} from '@avalabs/k2-alpine';
+import { useSeedlessMfaManager } from '@core/ui';
+import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
+
+export const DefaultContent = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { hasTotpConfigured, isLoadingRecoveryMethods } =
+    useSeedlessMfaManager();
+  return (
+    <>
+      <FullscreenModalTitle>
+        {t('Update your recovery methods')}
+      </FullscreenModalTitle>
+      <Stack
+        sx={{
+          height: '100%',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <FullscreenModalActions>
+          {!isLoadingRecoveryMethods && !hasTotpConfigured && (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => {
+                history.push('/update-recovery-method/totp/add');
+              }}
+              startIcon={<SecurityKeyIcon size={24} />}
+            >
+              {t('Add Authenticator')}
+            </Button>
+          )}
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              history.push('/update-recovery-method/fido/add/yubikey');
+            }}
+            startIcon={<SecurityKeyIcon size={24} />}
+          >
+            {t('Add Yubikey')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              history.push('/update-recovery-method/fido/add/passkey');
+            }}
+            startIcon={<PasswordIcon size={24} />}
+          >
+            {t('Add Passkey')}
+          </Button>
+        </FullscreenModalActions>
+      </Stack>
+    </>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
index 7d2c0b427..f43cae200 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -1,18 +1,17 @@
-import { useSeedlessAuth } from '@core/ui';
 import { RemoveTotp } from './RemoveTotp';
-import {
-  FullscreenModalActions,
-  FullscreenModalTitle,
-} from '@/components/FullscreenModal';
-import { useTranslation } from 'react-i18next';
-import { MfaChoicePrompt } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/MfaChoicePrompt';
+import { FullscreenModalTitle } from '@/components/FullscreenModal';
 import { RecoveryMethodsFullScreenParams } from './RecoveryMethodsFullScreen';
 import { useMemo } from 'react';
 import { AddTotp } from './AddTotp';
-import { Button } from '@avalabs/k2-alpine';
 import { AddFIDO } from './AddFIDO';
+import { DefaultContent } from './DefaultContent';
+
+export type RecoveryMethodPages =
+  | 'defaultContent'
+  | 'removeTOTP'
+  | 'addTOTP'
+  | 'addFIDO';
 
-export type RecoveryMethodPages = 'removeTOTP' | 'addTOTP' | 'addFIDO'; // | 'addAuthenticator';
 export type FullScreenContentProps = {
   [page in RecoveryMethodPages]: React.ReactNode;
 };
@@ -22,8 +21,8 @@ export const FullScreenContent = ({
   action,
   keyType,
 }: RecoveryMethodsFullScreenParams) => {
-  const { t } = useTranslation();
-
+  console.log('mfaType: ', mfaType);
+  console.log('action: ', action);
   const getPage = useMemo(() => {
     if (mfaType === 'totp' && action === 'remove') {
       return 'removeTOTP';
@@ -34,190 +33,25 @@ export const FullScreenContent = ({
     if (mfaType === 'fido' && action === 'add') {
       return 'addFIDO';
     }
+    return 'defaultContent';
   }, [action, mfaType]);
 
   const page = getPage;
 
-  const headline = {
-    removeTOTP: t('Authenticator removal'),
-    addTOTP: t('Add Authenticator'),
-    addFIDO: t('Add FIDO Device'),
-  };
+  const headline = {};
   const content: FullScreenContentProps = {
     removeTOTP: <RemoveTotp />,
     addTOTP: <AddTotp />,
     addFIDO: <AddFIDO keyType={keyType} />,
-    // MFAChoicePrompt: (
-    //   <MfaChoicePrompt
-    //     mfaChoice={mfaChoice.choice}
-    //     onChosen={selectMfaMethod}
-    //   />
-    // ),
+    defaultContent: <DefaultContent />,
   };
-  // const {
-  //   authenticate,
-  //   step,
-  //   methods,
-  //   chooseMfaMethod,
-  //   mfaDeviceName,
-  //   error,
-  //   verifyTotpCode,
-  //   completeFidoChallenge,
-  // } = useSeedlessAuth({
-  //   getOidcToken,
-  //   setIsLoading,
-  //   onSignerTokenObtained: onAuthSuccess,
-  // });
 
   return (
     <>
-      <FullscreenModalTitle>{headline[page]}</FullscreenModalTitle>
-      {mfaType === 'totp' && action === 'remove' && content[page]}
-      {mfaType === 'totp' && action === 'add' && content[page]}
-      {mfaType === 'fido' && action === 'add' && content[page]}
+      {headline[page] && (
+        <FullscreenModalTitle>{headline[page]}</FullscreenModalTitle>
+      )}
+      {content[page]}
     </>
   );
-  // const history = useHistory();
-  // const { t } = useTranslation();
-  // const { capture } = useAnalyticsContext();
-  // const { setCurrent, setTotal, setIsBackButtonVisible } =
-  //   useModalPageControl();
-  // const { phase = 'connect-avax' } = useParams<{ phase: ImportRoute }>();
-  // const { importLedger, isImporting } = useImportLedger();
-  // const openApp = useOpenApp();
-
-  // const [publicKeys, setPublicKeys] = useState<AddressPublicKeyJson[]>([]);
-  // const [extPublicKeys, setExtPublicKeys] = useState<ExtendedPublicKey[]>([]);
-
-  // useEffect(() => {
-  //   const step = PHASE_TO_STEP_NUMBER[phase];
-
-  //   if (step) {
-  //     setCurrent(step);
-  //     setTotal(TOTAL_STEPS);
-
-  //     // We don't want to display the back button on the first screen
-  //     // (it won't do anything, since history state is empty)
-  //     setIsBackButtonVisible(step > 1);
-  //   } else {
-  //     // If we're on troubleshooting screens, hide the page indicator
-  //     setTotal(0);
-  //   }
-  // }, [phase, setCurrent, setIsBackButtonVisible, setTotal]);
-
-  // const avalancheConnectorCallbacks = useMemo(
-  //   () => ({
-  //     onConnectionSuccess: () => capture(`${ANALYTICS_EVENT_PREFIX}Connected`),
-  //     onConnectionFailed: (err: Error) =>
-  //       err instanceof WalletExistsError
-  //         ? capture(`${ANALYTICS_EVENT_PREFIX}DuplicateWallet`)
-  //         : capture(`${ANALYTICS_EVENT_PREFIX}ConnectionFailed`),
-  //     onConnectionRetry: () => capture(`${ANALYTICS_EVENT_PREFIX}Retry`),
-  //   }),
-  //   [capture],
-  // );
-
-  // const solanaConnectorCallbacks = useMemo(
-  //   () => ({
-  //     onConnectionSuccess: () =>
-  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysDerived`),
-  //     onConnectionFailed: () =>
-  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysFailed`),
-  //     onConnectionRetry: () =>
-  //       capture(`${ANALYTICS_EVENT_PREFIX}SolanaKeysRetry`),
-  //   }),
-  //   [capture],
-  // );
-
-  // const onSave = useCallback(
-  //   async (name: string) => {
-  //     try {
-  //       await importLedger({
-  //         name,
-  //         addressPublicKeys: publicKeys,
-  //         extendedPublicKeys: extPublicKeys,
-  //       });
-  //       openApp();
-  //       window.close();
-  //     } catch (err) {
-  //       toast.error(t('Unknown error has occurred. Please try again later.'));
-  //       console.error(err);
-  //     }
-  //   },
-  //   [extPublicKeys, importLedger, publicKeys, openApp, t],
-  // );
-
-  return (
-    <div>Fullscreen</div>
-    // <Switch>
-    //   <Route exact path={CONNECT_AVAX_PATHS}>
-    //     <ConnectAvalanche
-    //       connectorCallbacks={avalancheConnectorCallbacks}
-    //       onNext={({ addressPublicKeys, extendedPublicKeys }) => {
-    //         setPublicKeys(addressPublicKeys.map(({ key }) => key));
-    //         setExtPublicKeys(extendedPublicKeys ?? []);
-    //         history.push('/import-wallet/ledger/prompt-solana');
-    //       }}
-    //       onTroubleshoot={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingAvalanche`);
-    //         history.push(`${BASE_PATH}/troubleshooting-avalanche`);
-    //       }}
-    //     />
-    //   </Route>
-    //   <Route path={`${BASE_PATH}/prompt-solana`}>
-    //     <PromptSolana
-    //       onNext={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}SolanaSupportConfirmed`);
-    //         history.push(`${BASE_PATH}/connect-solana`);
-    //       }}
-    //       onSkip={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}SolanaSupportDenied`);
-    //         history.push(`${BASE_PATH}/name`);
-    //       }}
-    //     />
-    //   </Route>
-    //   <Route path={`${BASE_PATH}/connect-solana`}>
-    //     <ConnectSolana
-    //       connectorCallbacks={solanaConnectorCallbacks}
-    //       onNext={({ addressPublicKeys }) => {
-    //         setPublicKeys((prev) => [
-    //           ...prev,
-    //           ...addressPublicKeys.map(({ key }) => key),
-    //         ]);
-    //         history.push(`${BASE_PATH}/name`);
-    //       }}
-    //       onTroubleshoot={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingSolana`);
-    //         history.push(`${BASE_PATH}/troubleshooting-solana`);
-    //       }}
-    //     />
-    //   </Route>
-    //   <Route path={`${BASE_PATH}/troubleshooting-avalanche`}>
-    //     <Troubleshooting
-    //       appName="Avalanche"
-    //       onClose={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingAvalancheClosed`);
-    //         history.push(`${BASE_PATH}/connect-avax`);
-    //       }}
-    //     />
-    //   </Route>
-    //   <Route path={`${BASE_PATH}/troubleshooting-solana`}>
-    //     <Troubleshooting
-    //       appName="Solana"
-    //       onClose={() => {
-    //         capture(`${ANALYTICS_EVENT_PREFIX}TroubleshootingSolanaClosed`);
-    //         history.push(`${BASE_PATH}/connect-solana`);
-    //       }}
-    //     />
-    //   </Route>
-    //   <Route path={`${BASE_PATH}/name`}>
-    //     <NameYourWalletScreen
-    //       step={PHASE_TO_STEP_NUMBER['name']}
-    //       totalSteps={TOTAL_STEPS}
-    //       isSaving={isImporting}
-    //       onNext={onSave}
-    //     />
-    //   </Route>
-    // </Switch>
-  );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index 0b5cfa8a0..213cbc380 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -4,8 +4,8 @@ import {
   AlertCircleIcon,
   Button,
   CheckCircleIcon,
-  CircularProgress,
   Stack,
+  toast,
   Typography,
 } from '@avalabs/core-k2-components';
 
@@ -13,8 +13,8 @@ import { useSeedlessMfaManager } from '@core/ui';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
 import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
 import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 import { FIDOChallenge } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge';
+import { useHistory } from 'react-router-dom';
 
 enum RemoveTotpState {
   Loading = 'loading',
@@ -26,6 +26,7 @@ enum RemoveTotpState {
 }
 
 export const RemoveTotp = () => {
+  const history = useHistory();
   const { t } = useTranslation();
   const { removeTotp } = useSeedlessMfaManager();
   const [state, setState] = useState(RemoveTotpState.Loading);
@@ -39,12 +40,15 @@ export const RemoveTotp = () => {
   const remove = useCallback(async () => {
     try {
       console.log('remove called: ', remove);
+      // throw new Error('Test error');
       await removeTotp();
       setState(RemoveTotpState.Success);
+      toast.success('Recovery method removed!', { duration: 20000 });
+      history.push('update-recovery-method');
     } catch {
       setState(RemoveTotpState.Failure);
     }
-  }, [removeTotp]);
+  }, [history, removeTotp]);
 
   useEffect(() => {
     remove();
@@ -122,26 +126,13 @@ export const RemoveTotp = () => {
       )}
       {state === RemoveTotpState.Loading && (
         <>
-          <CircularProgress />
-          {/* Remove REFISGTER */}
-          {(mfaChallenge.challenge?.type === MfaRequestType.Fido ||
-            mfaChallenge.challenge?.type === MfaRequestType.FidoRegister) && (
+          {mfaChallenge.challenge?.type === MfaRequestType.Fido && (
             <FIDOChallenge
               challenge={mfaChallenge.challenge}
-              // name={mfaDeviceName}
               onError={setError}
               error={error}
             />
           )}
-          {/* {mfaChallenge.challenge?.type === MfaRequestType.Totp && (
-            <TOTPChallenge
-              onSubmit={submitTotp}
-              isLoading={isVerifying}
-              error={error}
-            />
-          )} */}
-
-          {/* {renderMfaPrompt()} */}
         </>
       )}
     </Stack>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index 8c40aed90..682dca021 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -1,5 +1,4 @@
-import { Page } from '@/components/Page';
-import { Button, Stack } from '@avalabs/k2-alpine';
+import { Button, Paper, Stack } from '@avalabs/k2-alpine';
 import { useSeedlessMfaManager } from '@core/ui';
 import { useTranslation } from 'react-i18next';
 import { AuthenticatorDetails } from './Authenticator/AuthenticatorDetails';
@@ -11,18 +10,17 @@ import { useHistory } from 'react-router-dom';
 
 interface RecoveryMethodProps {
   method: RecoveryMethodType;
-  onBackClicked: () => void;
 }
 
-export const RecoveryMethod = ({
-  method,
-  onBackClicked,
-}: RecoveryMethodProps) => {
-  console.log('RecoveryMethod: ', method);
+export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
   const { t } = useTranslation();
-  const { hasTotpConfigured } = useSeedlessMfaManager();
+  const { hasTotpConfigured, hasFidoConfigured, recoveryMethods } =
+    useSeedlessMfaManager();
+  console.log('recoveryMethods: ', recoveryMethods);
   const history = useHistory();
 
+  const isRemovable =
+    recoveryMethods.length > 1 && hasFidoConfigured && hasTotpConfigured;
   const openRemoveTotpPopup = useCallback(async () => {
     openFullscreenTab('update-recovery-method/totp/remove');
   }, []);
@@ -31,55 +29,56 @@ export const RecoveryMethod = ({
   }, []);
 
   return (
-    // <Page
-    //   title={t('Recovery Method Details')}
-    //   withBackButton
-    //   contentProps={{ justifyContent: 'flex-start' }}
-    //   onBack={onBackClicked}
-    // >
-    <Stack>
-      {method.type === 'totp' && (
-        <AuthenticatorDetails method={method} methodName={t('Authenticator')} />
-      )}
-      {method.type === 'fido' && <FIDODetails method={method} />}
-      {method.type === 'totp' && (
+    <>
+      <Paper
+        elevation={1}
+        sx={{
+          borderRadius: 2,
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <Stack>
+          {method.type === 'totp' && (
+            <AuthenticatorDetails
+              method={method}
+              methodName={t('Authenticator')}
+            />
+          )}
+          {method.type === 'fido' && <FIDODetails method={method} />}
+        </Stack>
+      </Paper>
+      <Stack sx={{ width: '100%', marginTop: 'auto' }}>
+        {method.type === 'totp' && (
+          <Button
+            variant="contained"
+            color="primary"
+            size="extension"
+            fullWidth
+            onClick={() => {
+              openAddTotpPopup();
+            }}
+            disabled={!hasTotpConfigured}
+            sx={{ mb: 1.5 }}
+          >
+            {t('Change Authenticator App')}
+          </Button>
+        )}
         <Button
-          // ref={submitRef}
           variant="contained"
           color="primary"
           size="extension"
           fullWidth
-          // disabled={!isFormValid || isSubmitting}
-          // loading={isSubmitting}
+          disabled={!isRemovable}
           onClick={() => {
-            openAddTotpPopup();
+            return method.type === 'totp'
+              ? openRemoveTotpPopup()
+              : history.push(`/settings/recovery-method/fido/${method.id}`);
           }}
-          sx={{ mt: 'auto' }}
-          disabled={!hasTotpConfigured}
         >
-          {t('Change Authenticator App')}
+          {t('Remove recovery method')}
         </Button>
-      )}
-      <Button
-        // ref={submitRef}
-        variant="contained"
-        color="primary"
-        size="extension"
-        fullWidth
-        // disabled={!isFormValid || isSubmitting}
-        // loading={isSubmitting}
-        // onClick={isFormValid ? handleSubmit : undefined}
-        sx={{ mt: 'auto' }}
-        disabled={!hasTotpConfigured}
-        onClick={() => {
-          return method.type === 'totp'
-            ? openRemoveTotpPopup()
-            : history.push(`/settings/recovery-method/fido/${method.id}`);
-        }}
-      >
-        {t('Remove recovery method')}
-      </Button>
-    </Stack>
-    // </Page>
+      </Stack>
+    </>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
index a7a64b835..3e3aa0a02 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
@@ -29,6 +29,7 @@ export const RecoveryMethodCard = ({
       icon={getIconForMethod(method)}
       text={methodName || method.type}
       key={method.toString()}
+      size="small"
     />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index d2e7c2ef3..c26b78827 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -1,30 +1,36 @@
 import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import {
+  Button,
   Divider,
   EncryptedIcon,
+  Paper,
   PasswordIcon,
   SecurityKeyIcon,
 } from '@avalabs/k2-alpine';
 import { openFullscreenTab } from '@core/common';
 import { useAnalyticsContext } from '@core/ui';
 import { useTranslation } from 'react-i18next';
-import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 export const MethodIcons = {
-  passkey: <PasswordIcon fontSize="large" />,
-  authenticator: <EncryptedIcon fontSize="large" />,
-  yubikey: <SecurityKeyIcon fontSize="large" />,
+  passkey: <PasswordIcon size={24} />,
+  authenticator: <EncryptedIcon size={24} />,
+  yubikey: <SecurityKeyIcon size={24} />,
 };
 
 export const RecoveryMethodList = ({
   hasTotpConfigured,
+  hasMFAConfigured,
+  onNext,
 }: {
   hasTotpConfigured: boolean;
+  hasMFAConfigured: boolean;
+  onNext: () => void;
 }) => {
+  console.log('hasTotpConfigured: ', hasTotpConfigured);
   const { t } = useTranslation();
   const history = useHistory();
   const { capture } = useAnalyticsContext();
-  const { path } = useRouteMatch();
 
   const recoveryMethodCards = [
     {
@@ -44,9 +50,12 @@ export const RecoveryMethodList = ({
         'Authenticator apps generate secure, time-based codes for wallet recovery.',
       ),
       // add url for in-extension version
-      to: `update-recovery-method/totp/add`,
+      to: !hasMFAConfigured
+        ? '/settings/recovery-method/authenticator'
+        : 'update-recovery-method/totp/add',
       analyticsKey: 'AddAuthenticatorClicked',
       method: 'authenticator',
+      newTab: !hasMFAConfigured ? false : true,
     },
     {
       icon: MethodIcons.yubikey,
@@ -61,29 +70,54 @@ export const RecoveryMethodList = ({
   ];
 
   return (
-    <div>
-      <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
-        {recoveryMethodCards.map((card, idx) => {
-          // Hide Authenticator option if TOTP is already configured
-          if (card.method === 'authenticator' && hasTotpConfigured) {
-            return null;
-          }
+    <>
+      <Paper
+        elevation={1}
+        sx={{
+          borderRadius: 2,
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
+          {recoveryMethodCards.map((card, idx) => {
+            console.log('card: ', card);
+            // Hide Authenticator option if TOTP is already configured
+            if (card.method === 'authenticator' && hasTotpConfigured) {
+              return null;
+            }
 
-          return (
-            <CardMenuItem
-              onClick={() => {
-                capture(card.analyticsKey);
-                console.log('card.to: ', card.to);
-                openFullscreenTab(card.to);
-              }}
-              icon={card.icon}
-              text={card.title}
-              description={card.description}
-              key={idx}
-            />
-          );
-        })}
-      </CardMenu>
-    </div>
+            return (
+              <CardMenuItem
+                onClick={() => {
+                  capture(card.analyticsKey);
+                  console.log('card.to: ', card.to);
+                  if (card.newTab === false) {
+                    history.push(card.to);
+                    return;
+                  }
+                  openFullscreenTab(card.to);
+                }}
+                icon={card.icon}
+                text={card.title}
+                description={card.description}
+                key={idx}
+                size="small"
+              />
+            );
+          })}
+        </CardMenu>
+      </Paper>
+      <Button
+        variant="contained"
+        color="primary"
+        size="extension"
+        fullWidth
+        sx={{ mt: 'auto' }}
+        onClick={onNext}
+      >
+        {t('Add recovery method')}
+      </Button>
+    </>
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index 1584e7960..f727ecee1 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -2,12 +2,12 @@ import { Page } from '@/components/Page';
 import { Button, Paper, Skeleton } from '@avalabs/k2-alpine';
 import { RecoveryMethod as RecoveryMethodType } from '@core/types';
 import { useAnalyticsContext, useSeedlessMfaManager } from '@core/ui';
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RecoveryMethodList } from './RecoveryMethodList';
-import { RecoveryMethodCard } from './RecoveryMethodCard';
 import { RecoveryMethod } from './RecoveryMethod';
 import { ConfiguredMethodList } from './ConfiguredMethodList';
+import { useHistory } from 'react-router-dom';
 
 export enum RecoveryMethodScreen {
   ConfiguredList = 'configured-list',
@@ -21,9 +21,9 @@ export enum RecoveryMethodScreen {
 export const RecoveryMethods: FC = () => {
   const { t } = useTranslation();
   const { capture } = useAnalyticsContext();
+  const history = useHistory();
   const [selectedMethod, setSelectedMethod] =
     useState<RecoveryMethodType | null>(null);
-  console.log('selectedMethod: ', selectedMethod);
   const {
     isLoadingRecoveryMethods,
     recoveryMethods: existingRecoveryMethods,
@@ -31,33 +31,66 @@ export const RecoveryMethods: FC = () => {
     hasMfaConfigured,
     hasTotpConfigured,
   } = useSeedlessMfaManager();
+  console.log('hasMfaConfigured: ', hasMfaConfigured);
 
-  const [screen, setScreen] = useState(RecoveryMethodScreen.ConfiguredList);
+  const [screen, setScreen] = useState<RecoveryMethodScreen>();
+  console.log('screen: ', screen);
+
+  useEffect(() => {
+    if (isLoadingRecoveryMethods) {
+      return;
+    }
+    if (!hasMfaConfigured) {
+      setScreen(RecoveryMethodScreen.NewList);
+    }
+    if (hasMfaConfigured) {
+      setScreen(RecoveryMethodScreen.ConfiguredList);
+    }
+  }, [hasMfaConfigured, isLoadingRecoveryMethods]);
 
   return (
     <Page
       title={t('Recovery methods')}
       withBackButton
       contentProps={{ justifyContent: 'flex-start' }}
+      onBack={() => {
+        if (screen !== RecoveryMethodScreen.Method) {
+          history.push('/settings');
+          return;
+        }
+        if (hasMfaConfigured) {
+          setScreen(RecoveryMethodScreen.ConfiguredList);
+          return;
+        }
+        setScreen(RecoveryMethodScreen.NewList);
+      }}
     >
-      <Paper
-        elevation={1}
-        sx={{
-          borderRadius: 2,
-          overflow: 'hidden',
-        }}
-      >
-        {isLoadingRecoveryMethods && (
-          <>
-            <Skeleton variant="rectangular" sx={{ width: 297, height: 220 }} />
-          </>
-        )}
+      {isLoadingRecoveryMethods && (
+        <Paper
+          elevation={1}
+          sx={{
+            borderRadius: 2,
+            overflow: 'hidden',
+            width: '100%',
+          }}
+        >
+          <Skeleton variant="rectangular" sx={{ width: 297, height: 220 }} />
+        </Paper>
+      )}
 
-        {screen === RecoveryMethodScreen.NewList && (
-          <RecoveryMethodList hasTotpConfigured={hasTotpConfigured} />
-        )}
+      {!isLoadingRecoveryMethods && screen === RecoveryMethodScreen.NewList && (
+        <RecoveryMethodList
+          hasTotpConfigured={hasTotpConfigured}
+          hasMFAConfigured={hasMfaConfigured}
+          onNext={() => {
+            capture('AddRecoveryMethodClicked');
+            setScreen(RecoveryMethodScreen.NewList);
+          }}
+        />
+      )}
 
-        {screen === RecoveryMethodScreen.ConfiguredList && (
+      {!isLoadingRecoveryMethods &&
+        screen === RecoveryMethodScreen.ConfiguredList && (
           <ConfiguredMethodList
             existingRecoveryMethods={existingRecoveryMethods}
             setSelectedMethod={setSelectedMethod}
@@ -65,13 +98,9 @@ export const RecoveryMethods: FC = () => {
           />
         )}
 
-        {screen === RecoveryMethodScreen.Method && selectedMethod && (
-          <RecoveryMethod
-            method={selectedMethod}
-            onBackClicked={() => setSelectedMethod(null)}
-          />
-        )}
-      </Paper>
+      {!isLoadingRecoveryMethods &&
+        screen === RecoveryMethodScreen.Method &&
+        selectedMethod && <RecoveryMethod method={selectedMethod} />}
       {screen === RecoveryMethodScreen.ConfiguredList && (
         <Button
           variant="contained"
@@ -89,79 +118,4 @@ export const RecoveryMethods: FC = () => {
       )}
     </Page>
   );
-  console.log('selectedMethod: ', selectedMethod);
-  if (selectedMethod) {
-    return (
-      <RecoveryMethod
-        method={selectedMethod}
-        onBackClicked={() => setSelectedMethod(null)}
-      />
-    );
-  }
-
-  return (
-    <Page
-      title={t('Recovery methods')}
-      withBackButton
-      contentProps={{ justifyContent: 'flex-start' }}
-    >
-      <Paper
-        elevation={1}
-        sx={{
-          borderRadius: 2,
-          overflow: 'hidden',
-        }}
-      >
-        {isLoadingRecoveryMethods && (
-          <>
-            <Skeleton variant="rectangular" sx={{ width: 297, height: 220 }} />
-          </>
-        )}
-        {!isLoadingRecoveryMethods && !hasMfaConfigured ? (
-          <RecoveryMethodList hasTotpConfigured={hasTotpConfigured} />
-        ) : (
-          existingRecoveryMethods.map((method) => {
-            if (method.type === 'totp') {
-              return (
-                <RecoveryMethodCard
-                  method={method}
-                  key="totp"
-                  methodName={t('Authenticator')}
-                  onClick={() => {
-                    capture('ConfigureTotpClicked');
-                    setSelectedMethod(method);
-                  }}
-                />
-              );
-            }
-
-            return (
-              <RecoveryMethodCard
-                method={method}
-                key={method.id}
-                methodName={method.name}
-                onClick={() => {
-                  capture('ConfigureFidoClicked');
-                  console.log('method clicked: ', method);
-                  setSelectedMethod(method);
-                }}
-              />
-            );
-          })
-        )}
-      </Paper>
-      <Button
-        variant="contained"
-        color="primary"
-        size="extension"
-        fullWidth
-        sx={{ mt: 'auto' }}
-        onClick={() => {
-          capture('AddRecoveryMethodClicked');
-        }}
-      >
-        {t('Add recovery method')}
-      </Button>
-    </Page>
-  );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
new file mode 100644
index 000000000..18e71c179
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
@@ -0,0 +1,17 @@
+import { WarningMessage } from '@/components/WarningMessage';
+import { Stack } from '@avalabs/k2-alpine';
+import { useTranslation } from 'react-i18next';
+
+export const RecoveryMethodFailure = () => {
+  const { t } = useTranslation();
+  return (
+    <Stack
+      direction="column"
+      rowGap={3}
+      paddingBlock="28px 22px"
+      paddingInline="0px 30px"
+    >
+      <WarningMessage>{t('Error occurred. Please try again.')}</WarningMessage>
+    </Stack>
+  );
+};
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index ae9add3c7..7f3b5ed9a 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -45,7 +45,7 @@ export const MFA: FC<StageProps> = () => {
         />
       )}
 
-      {!mfaChoice.choice && (
+      {!mfaChoice.choice && !mfaChallenge && (
         <InProgress textSize="body1">
           {t('Fetching available authentication methods...')}
         </InProgress>
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
index d8e1c1109..4eb086377 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
@@ -52,10 +52,11 @@ export const FIDOChallenge: FC<Props> = ({
         ? FIDOApiEndpoint.Authenticate
         : FIDOApiEndpoint.Register,
       challenge.options,
-      challenge.type === MfaRequestType.FidoRegister ? keyType : undefined,
+      challenge.type === MfaRequestType.FidoRegister && keyType
+        ? keyType
+        : undefined,
     )
       .then((answer) => {
-        console.log('answer: ', answer);
         request<SubmitMfaResponseHandler>({
           method: ExtensionRequest.SEEDLESS_SUBMIT_MFA_RESPONSE,
           params: [
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/TOTPChallenge.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/TOTPChallenge.tsx
index 039bcf5cc..c75b3b114 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/TOTPChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/TOTPChallenge.tsx
@@ -78,7 +78,7 @@ export const TOTPChallenge: FC<Props> = ({ error, challenge, onError }) => {
         <Button
           ref={submitButtonRef}
           variant="contained"
-          color="secondary"
+          color="primary"
           size="large"
           onClick={() => {
             setIsSubmitted(true);

From d24a3d53c23f9241a6da1cd8a7602310355b7b27 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Thu, 11 Sep 2025 21:33:40 +0200
Subject: [PATCH 09/22] refactor: remove logs and add title

---
 .../RecoveryMethods/FullScreens/AddFIDO.tsx   |  8 ++----
 .../RecoveryMethods/FullScreens/AddTotp.tsx   | 25 ++++++++++---------
 .../FullScreens/FullScreenContent.tsx         |  9 ++++---
 .../FullScreens/RecoveryMethodsFullScreen.tsx |  3 +--
 .../FullScreens/RemoveTotp.tsx                |  7 ------
 .../components/SeedlessFlow/pages/MFA/MFA.tsx |  5 ++--
 .../pages/MFA/components/FIDOChallenge.tsx    |  3 ++-
 7 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
index 6f863651d..b07fda44d 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddFIDO.tsx
@@ -10,9 +10,7 @@ import { useHistory } from 'react-router-dom';
 export enum AddFIDOState {
   Initial = 'initial',
   Initiated = 'initiated',
-  Pending = 'pending',
   Failure = 'failure',
-  Success = 'success',
 }
 
 export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
@@ -33,8 +31,7 @@ export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
         });
         history.push('/update-recovery-method');
         return;
-      } catch (e) {
-        console.log('e: ', e);
+      } catch {
         setScreenState(AddFIDOState.Failure);
       }
     },
@@ -43,7 +40,6 @@ export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
 
   return (
     <Stack sx={{ height: '100%' }}>
-      {/* <InProgress textSize="body1" /> */}
       {screenState === AddFIDOState.Initial && (
         <SeedlessNameFidoKey
           required
@@ -54,7 +50,7 @@ export const AddFIDO = ({ keyType }: { keyType: KeyType }) => {
           }}
         />
       )}
-      {screenState === AddFIDOState.Initiated && <MFA fullscreen />}
+      {screenState === AddFIDOState.Initiated && <MFA />}
 
       {screenState === AddFIDOState.Failure && (
         <Stack>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
index 8e65513dd..496e18461 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
@@ -1,14 +1,16 @@
 import { AuthErrorCode, TotpResetChallenge } from '@core/types';
 import { useSeedlessMfaManager } from '@core/ui';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
 import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
 import { Button, Stack, toast } from '@avalabs/k2-alpine';
 import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
 import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 import { useTranslation } from 'react-i18next';
-import { FullscreenModalActions } from '@/components/FullscreenModal';
+import {
+  FullscreenModalActions,
+  FullscreenModalDescription,
+  FullscreenModalTitle,
+} from '@/components/FullscreenModal';
 import { SeedlessTotpQRCode } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
 import { RecoveryMethodFailure } from '../components/RecoveryMethodFailure';
 import { useHistory } from 'react-router-dom';
@@ -17,20 +19,18 @@ export const AddTotp = () => {
   const [error, setError] = useState<AuthErrorCode>();
   const history = useHistory();
   const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(true);
+
   const { initAuthenticatorChange, completeAuthenticatorChange } =
     useSeedlessMfaManager();
 
   const [totpChallenge, setTotpChallenge] = useState<TotpResetChallenge>();
-  console.log('totpChallenge: ', totpChallenge);
-  const mfaChallenge = useMFAEvents(setError);
-  console.log('mfaChallenge: ', mfaChallenge);
+
   const [screenState, setScreenState] = useState<AuthenticatorState>(
     AuthenticatorState.Initiated,
   );
 
   const [code, setCode] = useState('');
-  console.log('code: ', code);
+
   const submitButtonRef = useRef<HTMLButtonElement>(null);
   const [isVerifying, setIsVerifying] = useState(false);
 
@@ -46,7 +46,6 @@ export const AddTotp = () => {
   }, [initAuthenticatorChange]);
 
   const onVerify = useCallback(async () => {
-    console.log('totpChallenge: ', totpChallenge);
     if (!totpChallenge) {
       return;
     }
@@ -66,13 +65,11 @@ export const AddTotp = () => {
 
   useEffect(() => {
     initChange();
-    setIsLoading(false);
   }, [initChange]);
 
   return (
     <Stack sx={{ height: '100%' }}>
-      {isLoading && <InProgress textSize="body1" />}
-      {!totpChallenge && <MFA fullscreen />}
+      {!totpChallenge && <MFA />}
       {screenState === AuthenticatorState.Pending && totpChallenge && (
         <SeedlessTotpQRCode
           challengeUrl={totpChallenge?.totpUrl ?? ''}
@@ -81,6 +78,10 @@ export const AddTotp = () => {
       )}
       {screenState === AuthenticatorState.VerifyCode && totpChallenge && (
         <>
+          <FullscreenModalTitle>{t('Verify Code')}</FullscreenModalTitle>
+          <FullscreenModalDescription>
+            {t('Enter the code generated from your authenticator app.')}
+          </FullscreenModalDescription>
           <AuthenticatorVerifyTotp
             onChange={(c) => {
               setCode(c);
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
index f43cae200..0722ad940 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { AddTotp } from './AddTotp';
 import { AddFIDO } from './AddFIDO';
 import { DefaultContent } from './DefaultContent';
+import { KeyType } from '@core/types';
 
 export type RecoveryMethodPages =
   | 'defaultContent'
@@ -21,8 +22,6 @@ export const FullScreenContent = ({
   action,
   keyType,
 }: RecoveryMethodsFullScreenParams) => {
-  console.log('mfaType: ', mfaType);
-  console.log('action: ', action);
   const getPage = useMemo(() => {
     if (mfaType === 'totp' && action === 'remove') {
       return 'removeTOTP';
@@ -42,7 +41,11 @@ export const FullScreenContent = ({
   const content: FullScreenContentProps = {
     removeTOTP: <RemoveTotp />,
     addTOTP: <AddTotp />,
-    addFIDO: <AddFIDO keyType={keyType} />,
+    addFIDO: keyType ? (
+      <AddFIDO keyType={keyType as KeyType} />
+    ) : (
+      <DefaultContent />
+    ),
     defaultContent: <DefaultContent />,
   };
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
index d41a3c439..832c0218e 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
@@ -13,10 +13,9 @@ export interface RecoveryMethodsFullScreenParams {
 
 export const RecoveryMethodsFullScreen = () => {
   const history = useHistory();
+
   const { mfaType, action, keyType } =
     useParams<RecoveryMethodsFullScreenParams>();
-  console.log('mfaType: ', mfaType);
-  console.log('action: ', action);
 
   return (
     <>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index 213cbc380..367c4a935 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -11,7 +11,6 @@ import {
 
 import { useSeedlessMfaManager } from '@core/ui';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
-import { useMFAChoice } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAChoice';
 import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
 import { FIDOChallenge } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge';
 import { useHistory } from 'react-router-dom';
@@ -31,16 +30,10 @@ export const RemoveTotp = () => {
   const { removeTotp } = useSeedlessMfaManager();
   const [state, setState] = useState(RemoveTotpState.Loading);
   const [error, setError] = useState<AuthErrorCode>();
-  console.log('error: ', error);
-  const mfaChoice = useMFAChoice();
-  console.log('mfaChoice: ', mfaChoice);
   const mfaChallenge = useMFAEvents(setError);
-  console.log('mfaChallenge: ', mfaChallenge);
 
   const remove = useCallback(async () => {
     try {
-      console.log('remove called: ', remove);
-      // throw new Error('Test error');
       await removeTotp();
       setState(RemoveTotpState.Success);
       toast.success('Recovery method removed!', { duration: 20000 });
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index 7f3b5ed9a..ec649cd21 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -1,9 +1,8 @@
 import { FullscreenModal } from '@/components/FullscreenModal';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InProgress } from '../../../InProgress';
-import { StageProps } from '../../types';
 import { FIDOChallenge } from './components/FIDOChallenge';
 import { MfaChoicePrompt } from './components/MfaChoicePrompt';
 import { TOTPChallenge } from './components/TOTPChallenge';
@@ -11,7 +10,7 @@ import { useMFAChoice } from './hooks/useMFAChoice';
 import { useMFAEvents } from './hooks/useMFAEvent';
 import { useSelectMFAMethod } from './hooks/useSelectMFAMethod';
 
-export const MFA: FC<StageProps> = () => {
+export const MFA = () => {
   const [error, setError] = useState<AuthErrorCode>();
   const mfaChoice = useMFAChoice();
   const mfaChallenge = useMFAEvents(setError);
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
index 4eb086377..8fc6e80ce 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
@@ -9,6 +9,7 @@ import {
   AuthErrorCode,
   ExtensionRequest,
   FIDOApiEndpoint,
+  KeyType,
   MfaRequestType,
 } from '@core/types';
 import { useConnectionContext, useFidoErrorMessage } from '@core/ui';
@@ -53,7 +54,7 @@ export const FIDOChallenge: FC<Props> = ({
         : FIDOApiEndpoint.Register,
       challenge.options,
       challenge.type === MfaRequestType.FidoRegister && keyType
-        ? keyType
+        ? KeyType[keyType]
         : undefined,
     )
       .then((answer) => {

From 46734e27d47e42ba73578896dd137097d45bbc63 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Thu, 11 Sep 2025 23:01:44 +0200
Subject: [PATCH 10/22] chore: localization

---
 .../localization/locales/en/translation.json  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/apps/next/src/localization/locales/en/translation.json b/apps/next/src/localization/locales/en/translation.json
index 7c98af00e..a3697920c 100644
--- a/apps/next/src/localization/locales/en/translation.json
+++ b/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!",
@@ -64,7 +68,9 @@
   "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 +100,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 +181,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 +195,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 +220,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 +346,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 +355,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 +392,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 +424,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 +474,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 +490,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 +501,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 +610,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 +639,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",

From 1b7df97ae71593f2cd786907081927bea8a08056 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 08:49:04 +0200
Subject: [PATCH 11/22] chore: remoce logs

---
 apps/next/src/pages/Settings/Settings.tsx                   | 1 -
 apps/next/src/pages/Settings/components/Home/Home.tsx       | 2 --
 .../Authenticator/AuthenticatorVerifyScreen.tsx             | 1 -
 .../Authenticator/AuthenticatorVerifyTotp.tsx               | 2 --
 .../Settings/components/RecoveryMethods/RecoveryMethod.tsx  | 1 -
 .../components/RecoveryMethods/RecoveryMethodList.tsx       | 3 ---
 .../Settings/components/RecoveryMethods/RecoveryMethods.tsx | 6 ------
 .../src/services/seedless/SeedlessMfaService.ts             | 3 ---
 8 files changed, 19 deletions(-)

diff --git a/apps/next/src/pages/Settings/Settings.tsx b/apps/next/src/pages/Settings/Settings.tsx
index 159ddf30f..df7a9495c 100644
--- a/apps/next/src/pages/Settings/Settings.tsx
+++ b/apps/next/src/pages/Settings/Settings.tsx
@@ -12,7 +12,6 @@ import { NetworkManagement } from './components/NetworkManagement';
 
 export const Settings: FC = () => {
   const { path } = useRouteMatch();
-  console.log('path: ', path);
   return (
     <Switch>
       <Route path={`${path}/avatar`} component={AvatarSelector} />
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index c8e5ba910..fd9df2659 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -50,7 +50,6 @@ export const SettingsHomePage = () => {
   const { lockWallet } = useSettingsContext();
   const { isDeveloperMode, setDeveloperMode } = useNetworkContext();
   const { walletDetails } = useWalletContext();
-  console.log('SettingsHomePage walletDetails: ', walletDetails);
   const { contacts } = useContactsContext();
   const { path } = useRouteMatch();
   const { push } = useHistory();
@@ -63,7 +62,6 @@ export const SettingsHomePage = () => {
   const { featureFlags } = useFeatureFlagContext();
   const areMfaSettingsAvailable =
     featureFlags[FeatureGates.SEEEDLESS_MFA_SETTINGS];
-  console.log('isMfaSetupPromptVisible: ', isMfaSetupPromptVisible);
 
   return (
     <Page
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
index fd1edb198..8aea432aa 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyScreen.tsx
@@ -7,7 +7,6 @@ export const AuthenticatorVerifyScreen = ({
   onShowSecret,
   onNext,
 }) => {
-  console.log('AuthenticatorVerifyScreen: ', totpChallenge);
   const theme = useTheme();
   const { t } = useTranslation();
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
index 0fb00a192..805166b94 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
@@ -16,9 +16,7 @@ export const AuthenticatorVerifyTotp = ({
   onSubmit,
   isSubmitted,
 }: AuthenticatorVerifyTotpProps) => {
-  console.log('error: ', error);
   const totpError = useTotpErrorMessage(error);
-  console.log('totpError: ', totpError);
   const keyboardShortcuts = useKeyboardShortcuts({
     Enter: () => onSubmit && onSubmit(),
   });
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index 682dca021..9e993f5c5 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -16,7 +16,6 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
   const { t } = useTranslation();
   const { hasTotpConfigured, hasFidoConfigured, recoveryMethods } =
     useSeedlessMfaManager();
-  console.log('recoveryMethods: ', recoveryMethods);
   const history = useHistory();
 
   const isRemovable =
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index c26b78827..83dba84eb 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -27,7 +27,6 @@ export const RecoveryMethodList = ({
   hasMFAConfigured: boolean;
   onNext: () => void;
 }) => {
-  console.log('hasTotpConfigured: ', hasTotpConfigured);
   const { t } = useTranslation();
   const history = useHistory();
   const { capture } = useAnalyticsContext();
@@ -81,7 +80,6 @@ export const RecoveryMethodList = ({
       >
         <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
           {recoveryMethodCards.map((card, idx) => {
-            console.log('card: ', card);
             // Hide Authenticator option if TOTP is already configured
             if (card.method === 'authenticator' && hasTotpConfigured) {
               return null;
@@ -91,7 +89,6 @@ export const RecoveryMethodList = ({
               <CardMenuItem
                 onClick={() => {
                   capture(card.analyticsKey);
-                  console.log('card.to: ', card.to);
                   if (card.newTab === false) {
                     history.push(card.to);
                     return;
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index f727ecee1..7f4007f44 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -13,9 +13,6 @@ export enum RecoveryMethodScreen {
   ConfiguredList = 'configured-list',
   NewList = 'new-list',
   Method = 'method',
-  // AddNew = 'add-new',
-  // Authenticator = 'authenticator',
-  // FidoDetails = 'fido-details',
 }
 
 export const RecoveryMethods: FC = () => {
@@ -27,14 +24,11 @@ export const RecoveryMethods: FC = () => {
   const {
     isLoadingRecoveryMethods,
     recoveryMethods: existingRecoveryMethods,
-    // hasFidoConfigured,
     hasMfaConfigured,
     hasTotpConfigured,
   } = useSeedlessMfaManager();
-  console.log('hasMfaConfigured: ', hasMfaConfigured);
 
   const [screen, setScreen] = useState<RecoveryMethodScreen>();
-  console.log('screen: ', screen);
 
   useEffect(() => {
     if (isLoadingRecoveryMethods) {
diff --git a/packages/service-worker/src/services/seedless/SeedlessMfaService.ts b/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
index 887ecdaad..acb38a552 100644
--- a/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
+++ b/packages/service-worker/src/services/seedless/SeedlessMfaService.ts
@@ -168,12 +168,9 @@ export class SeedlessMfaService implements OnUnlock, OnLock {
   async initAuthenticatorChange(tabId?: number): Promise<TotpResetChallenge> {
     const session = await this.#getSession();
     const response = await session.resetTotpStart(TOTP_ISSUER);
-    console.log('response: ', response);
-    console.log('response.requiresMfa(): ', response.requiresMfa());
 
     if (response.requiresMfa()) {
       const methods = await this.getRecoveryMethods();
-      console.log('methods: ', methods);
       const method =
         methods.length === 1
           ? methods[0]

From fd60b1c33a2007bb52c001b1e17da6658290365c Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 09:19:54 +0200
Subject: [PATCH 12/22] refactor: loading states fullscreen back

---
 .../components/RecoveryMethods/FIDO/FIDO.tsx   |  2 ++
 .../FullScreens/RecoveryMethodsFullScreen.tsx  | 15 +++++++++++++--
 .../RecoveryMethods/FullScreens/RemoveTotp.tsx | 18 +++++++++++++++++-
 .../components/SeedlessFlow/pages/MFA/MFA.tsx  |  2 +-
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
index d648d8db9..8d145afcb 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
@@ -13,6 +13,7 @@ import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/compone
 import { AuthErrorCode, ExtensionRequest, MfaResponseData } from '@core/types';
 import { TotpCodeField } from '@/components/TotpCodeField';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 
 export const FIDO = () => {
   const history = useHistory();
@@ -80,6 +81,7 @@ export const FIDO = () => {
           'Open any authenticator app and scan the QR code below or enter the code manually',
         )}
       </Typography>
+      {(!mfaEvents || !mfaEvents.challenge) && <InProgress textSize="body1" />}
       {mfaEvents.challenge && mfaEvents.challenge.type === 'totp' && (
         <Stack
           sx={{ height: '100%', justifyContent: 'space-between' }}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
index 832c0218e..a74286ae0 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
@@ -1,9 +1,10 @@
-import { useHistory, useParams } from 'react-router-dom';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
 
 import { FullscreenModal } from '@/components/FullscreenModal';
 import { FullscreenAnimatedBackground } from '@/components/FullscreenAnimatedBackground';
 
 import { FullScreenContent } from './FullScreenContent';
+import { useOpenApp } from '@/hooks/useOpenApp';
 
 export interface RecoveryMethodsFullScreenParams {
   mfaType?: 'totp' | 'fido';
@@ -14,6 +15,11 @@ export interface RecoveryMethodsFullScreenParams {
 export const RecoveryMethodsFullScreen = () => {
   const history = useHistory();
 
+  const homeURL = '/update-recovery-method';
+  const location = useLocation();
+  const openApp = useOpenApp();
+  console.log('location: ', location);
+
   const { mfaType, action, keyType } =
     useParams<RecoveryMethodsFullScreenParams>();
 
@@ -25,7 +31,12 @@ export const RecoveryMethodsFullScreen = () => {
         withCoreLogo
         withAppInfo
         withLanguageSelector
-        onBack={history.goBack}
+        onBack={async () => {
+          if (location.pathname === homeURL) {
+            openApp();
+          }
+          history.push(homeURL);
+        }}
       >
         <FullScreenContent
           mfaType={mfaType}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index 367c4a935..3c90c83ea 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -14,6 +14,7 @@ import { AuthErrorCode, MfaRequestType } from '@core/types';
 import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
 import { FIDOChallenge } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge';
 import { useHistory } from 'react-router-dom';
+import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 
 enum RemoveTotpState {
   Loading = 'loading',
@@ -48,7 +49,22 @@ export const RemoveTotp = () => {
   }, [remove]);
 
   return (
-    <Stack>
+    <Stack sx={{ height: '100%' }}>
+      {(!mfaChallenge || !mfaChallenge.challenge) && (
+        <Stack
+          sx={{
+            width: 1,
+            height: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+            px: 2,
+            textAlign: 'center',
+          }}
+        >
+          <InProgress textSize="body1" />
+        </Stack>
+      )}
       {state === RemoveTotpState.Failure && (
         <Stack
           sx={{
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index ec649cd21..dec354bc7 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -44,7 +44,7 @@ export const MFA = () => {
         />
       )}
 
-      {!mfaChoice.choice && !mfaChallenge && (
+      {(!mfaChoice.choice || !mfaChallenge) && (
         <InProgress textSize="body1">
           {t('Fetching available authentication methods...')}
         </InProgress>

From 75dfd57e354fc49202bb520b735ed307b9aae0b9 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 12:02:10 +0200
Subject: [PATCH 13/22] chore: remove unused component and log

---
 .../FullScreens/RecoveryMethodsFullScreen.tsx |  1 -
 .../components/RecoveryMethodsList.tsx        | 55 -------------------
 2 files changed, 56 deletions(-)
 delete mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodsList.tsx

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
index a74286ae0..d021ee17d 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen.tsx
@@ -18,7 +18,6 @@ export const RecoveryMethodsFullScreen = () => {
   const homeURL = '/update-recovery-method';
   const location = useLocation();
   const openApp = useOpenApp();
-  console.log('location: ', location);
 
   const { mfaType, action, keyType } =
     useParams<RecoveryMethodsFullScreenParams>();
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodsList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodsList.tsx
deleted file mode 100644
index 511599c6c..000000000
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodsList.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Divider, EncryptedIcon } from '@avalabs/k2-alpine';
-import { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MdKey, MdOutlinePassword } from 'react-icons/md';
-
-import { Page } from '@/components/Page/Page';
-import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
-
-/** TODO: It came out that I don't need this component for seedless recovery, but I'm keeping it because it can be used later */
-export const RecoveryMethodsList: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Page
-      title={t('Recovery methods')}
-      contentProps={{
-        alignItems: 'stretch',
-        justifyContent: 'flex-start',
-      }}
-    >
-      <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
-        <CardMenuItem
-          onClick={() => {
-            // TODO: Navigate to passkey setup
-          }}
-          icon={<MdOutlinePassword size={24} />}
-          text={t('Passkey')}
-          description={t(
-            'Passkeys are used for quick, password-free recovery and enhanced security.',
-          )}
-        />
-        <CardMenuItem
-          onClick={() => {
-            // TODO: Navigate to authenticator app setup
-          }}
-          icon={<EncryptedIcon size={24} />}
-          text={t('Authenticator app')}
-          description={t(
-            'Authenticator apps generate secure, time-based codes for wallet recovery.',
-          )}
-        />
-        <CardMenuItem
-          onClick={() => {
-            // TODO: Navigate to yubikey setup
-          }}
-          icon={<MdKey size={24} />}
-          text={t('Yubikey')}
-          description={t(
-            'YubiKeys are physical, hardware-based protection and strong authentication.',
-          )}
-        />
-      </CardMenu>
-    </Page>
-  );
-};

From 0050344d36c10deeb3145ab2b2266c9ec364c92c Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 15:25:06 +0200
Subject: [PATCH 14/22] feat: add confirm pages

---
 .../RecoveryMethods/RecoveryMethod.tsx        | 44 ++++++++++++++++---
 .../components/ConfirmPage.tsx                | 31 ++++++++++---
 .../components/RecoveryMethodFailure.tsx      |  6 ++-
 3 files changed, 67 insertions(+), 14 deletions(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index 9e993f5c5..c4877845e 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -4,9 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { AuthenticatorDetails } from './Authenticator/AuthenticatorDetails';
 import { FIDODetails } from './FIDO/FIDODetails';
 import { RecoveryMethod as RecoveryMethodType } from '@core/types';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { openFullscreenTab } from '@core/common';
 import { useHistory } from 'react-router-dom';
+import { ConfirmPage } from './components/ConfirmPage';
 
 interface RecoveryMethodProps {
   method: RecoveryMethodType;
@@ -17,6 +18,8 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
   const { hasTotpConfigured, hasFidoConfigured, recoveryMethods } =
     useSeedlessMfaManager();
   const history = useHistory();
+  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+  const [isChangeOpen, setIsChangeOpen] = useState(false);
 
   const isRemovable =
     recoveryMethods.length > 1 && hasFidoConfigured && hasTotpConfigured;
@@ -27,8 +30,39 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
     openFullscreenTab('update-recovery-method/totp/add');
   }, []);
 
+  const onRemoveConfirm = useCallback(() => {
+    setIsConfirmOpen(false);
+    return method.type === 'totp'
+      ? openRemoveTotpPopup()
+      : history.push(`/settings/recovery-method/fido/${method.id}`);
+  }, [history, method, openRemoveTotpPopup]);
+
+  const onChangeConfirm = useCallback(() => {
+    openAddTotpPopup();
+  }, [openAddTotpPopup]);
+
   return (
     <>
+      {isConfirmOpen && (
+        <ConfirmPage
+          title={t('Are you sure you want to remove this recovery method?')}
+          onConfirm={onRemoveConfirm}
+          onCancel={() => setIsConfirmOpen(false)}
+          warning={t(
+            'You will no longer be able to use this method once you removed.',
+          )}
+        />
+      )}
+      {isChangeOpen && (
+        <ConfirmPage
+          title={t('Are you sure you want to change the authenticator?')}
+          onConfirm={onChangeConfirm}
+          onCancel={() => setIsChangeOpen(false)}
+          warning={t(
+            'You will no longer be able to use this authenticator once you switch. You will need to re-add an authenticator',
+          )}
+        />
+      )}
       <Paper
         elevation={1}
         sx={{
@@ -55,7 +89,7 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
             size="extension"
             fullWidth
             onClick={() => {
-              openAddTotpPopup();
+              setIsChangeOpen(true);
             }}
             disabled={!hasTotpConfigured}
             sx={{ mb: 1.5 }}
@@ -69,11 +103,7 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
           size="extension"
           fullWidth
           disabled={!isRemovable}
-          onClick={() => {
-            return method.type === 'totp'
-              ? openRemoveTotpPopup()
-              : history.push(`/settings/recovery-method/fido/${method.id}`);
-          }}
+          onClick={() => setIsConfirmOpen(true)}
         >
           {t('Remove recovery method')}
         </Button>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
index 6020d47e4..eabdf0529 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
@@ -1,21 +1,42 @@
 import { SlideUpDialog } from '@/components/Dialog';
 import { Page } from '@/components/Page';
-import { Button } from '@avalabs/k2-alpine';
+import { Button, Stack } from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
+import { RecoveryMethodFailure } from './RecoveryMethodFailure';
 
-export const ConfirmPage = ({ onNext, onBack }) => {
+export const ConfirmPage = ({ onConfirm, onCancel, title, warning }) => {
   const { t } = useTranslation();
   return (
     <SlideUpDialog open>
       <Page
-        title={t('Recovery methods')}
+        title={title}
         contentProps={{
           alignItems: 'stretch',
           justifyContent: 'flex-start',
         }}
+        onBack={onCancel}
       >
-        <Button onClick={onNext}>{t('Next')}</Button>
-        <Button onClick={onBack}>{t('Back')}</Button>
+        <Stack justifyContent="space-between" height="100%">
+          <RecoveryMethodFailure text={warning} />
+          <Stack gap={1}>
+            <Button
+              variant="contained"
+              color="primary"
+              size="extension"
+              onClick={onConfirm}
+            >
+              {t('Next')}
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              size="extension"
+              onClick={onCancel}
+            >
+              {t('Back')}
+            </Button>
+          </Stack>
+        </Stack>
       </Page>
     </SlideUpDialog>
   );
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
index 18e71c179..d2df65e13 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
@@ -2,7 +2,7 @@ import { WarningMessage } from '@/components/WarningMessage';
 import { Stack } from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
 
-export const RecoveryMethodFailure = () => {
+export const RecoveryMethodFailure = ({ text }: { text: string }) => {
   const { t } = useTranslation();
   return (
     <Stack
@@ -11,7 +11,9 @@ export const RecoveryMethodFailure = () => {
       paddingBlock="28px 22px"
       paddingInline="0px 30px"
     >
-      <WarningMessage>{t('Error occurred. Please try again.')}</WarningMessage>
+      <WarningMessage>
+        {text || t('Error occurred. Please try again.')}
+      </WarningMessage>
     </Stack>
   );
 };

From 70513498c69532c7c16ba58b935ad6fb5811cdd2 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 15:29:48 +0200
Subject: [PATCH 15/22] chore: translation

---
 apps/next/src/localization/locales/en/translation.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/next/src/localization/locales/en/translation.json b/apps/next/src/localization/locales/en/translation.json
index a3697920c..84b0804fb 100644
--- a/apps/next/src/localization/locales/en/translation.json
+++ b/apps/next/src/localization/locales/en/translation.json
@@ -61,9 +61,11 @@
   "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",
@@ -655,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.",

From 0232170d80c98d648a279a6a480da39a4e70adbf Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 17:08:03 +0200
Subject: [PATCH 16/22] fix: mfa loading

---
 .../ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index dec354bc7..ec649cd21 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -44,7 +44,7 @@ export const MFA = () => {
         />
       )}
 
-      {(!mfaChoice.choice || !mfaChallenge) && (
+      {!mfaChoice.choice && !mfaChallenge && (
         <InProgress textSize="body1">
           {t('Fetching available authentication methods...')}
         </InProgress>

From ce82f1d78dd6c42616401e2d146df20fbb6c5c76 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Fri, 12 Sep 2025 17:13:09 +0200
Subject: [PATCH 17/22] fix: typecheck

---
 .../RecoveryMethods/components/RecoveryMethodFailure.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
index d2df65e13..2c6fc938b 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/RecoveryMethodFailure.tsx
@@ -2,7 +2,7 @@ import { WarningMessage } from '@/components/WarningMessage';
 import { Stack } from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
 
-export const RecoveryMethodFailure = ({ text }: { text: string }) => {
+export const RecoveryMethodFailure = ({ text }: { text?: string }) => {
   const { t } = useTranslation();
   return (
     <Stack

From c9731a1515f5be5b780f93ac0250b6ed387326d3 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Wed, 24 Sep 2025 10:32:02 +0200
Subject: [PATCH 18/22] refactor: code reorganization

---
 .../pages/Onboarding/components/CardMenu.tsx  | 12 ++++--
 .../pages/Settings/components/Home/Home.tsx   |  4 +-
 .../Home/components/SettingsNavItem.tsx       | 12 +++---
 .../Authenticator/Authenticator.tsx           |  6 +--
 .../Authenticator/AuthenticatorDetails.tsx    |  1 -
 .../Authenticator/AuthenticatorVerifyCode.tsx | 40 ++++++++++--------
 .../Authenticator/AuthenticatorVerifyTotp.tsx |  2 +-
 .../components/RecoveryMethods/FIDO/FIDO.tsx  |  6 +--
 .../RecoveryMethods/FIDO/FIDODetails.tsx      |  1 -
 .../FullScreens/FullScreenContent.tsx         |  7 ++--
 .../FullScreens/RemoveTotp.tsx                |  4 +-
 .../RecoveryMethods/RecoveryMethod.tsx        | 20 ++++-----
 .../components/ConfirmPage.tsx                | 41 +++++++++----------
 .../components/SeedlessFlow/pages/MFA/MFA.tsx |  8 ++--
 .../components => common}/FIDOChallenge.tsx   |  4 +-
 .../pages/MFA/hooks => common}/useMFAEvent.ts |  0
 16 files changed, 83 insertions(+), 85 deletions(-)
 rename apps/next/src/pages/Settings/components/{RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components => common}/FIDOChallenge.tsx (94%)
 rename apps/next/src/pages/Settings/components/{RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks => common}/useMFAEvent.ts (100%)

diff --git a/apps/next/src/pages/Onboarding/components/CardMenu.tsx b/apps/next/src/pages/Onboarding/components/CardMenu.tsx
index 8b80bf1f0..6a219ec0e 100644
--- a/apps/next/src/pages/Onboarding/components/CardMenu.tsx
+++ b/apps/next/src/pages/Onboarding/components/CardMenu.tsx
@@ -34,7 +34,7 @@ type CardMenuItemProps = {
       link: string;
     }
   | {
-      onClick: () => void;
+      onClick?: () => void;
     }
 );
 
@@ -49,14 +49,18 @@ export const CardMenuItem: FC<CardMenuItemProps> = ({
   const theme = useTheme();
 
   const onClick =
-    'onClick' in props ? props.onClick : () => history.push(props.link);
+    'onClick' in props
+      ? props.onClick
+      : 'link' in props
+        ? () => history.push(props.link)
+        : undefined;
 
   return (
     <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),
+        gap: theme.spacing(size === 'small' ? 1.5 : 3),
+        paddingX: theme.spacing(size === 'small' ? 1.5 : 2.5),
       }}
     >
       {icon}
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index fd9df2659..1109e61e0 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -111,8 +111,8 @@ export const SettingsHomePage = () => {
                 {t('Set up ')}
               </Button>
             }
-            labelTpyographyVariant="subtitle3"
-            descriptionTpyographyVariant="caption2"
+            labelVariant="subtitle3"
+            descriptionVariant="caption2"
             sx={{ borderBottom: 'none' }}
           />
         </Card>
diff --git a/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx b/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
index ecbaf8d2b..685fa453f 100644
--- a/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
+++ b/apps/next/src/pages/Settings/components/Home/components/SettingsNavItem.tsx
@@ -15,8 +15,8 @@ type OwnProps = {
   href?: string;
   label: string;
   description?: string;
-  labelTpyographyVariant?: 'subtitle3';
-  descriptionTpyographyVariant?: 'caption2';
+  labelVariant?: 'subtitle3';
+  descriptionVariant?: 'caption2';
 };
 type SettingsNavItemProps = Omit<ListItemProps, 'onClick'> & OwnProps;
 
@@ -26,8 +26,8 @@ export const SettingsNavItem: FC<SettingsNavItemProps> = ({
   children,
   href,
   secondaryAction,
-  labelTpyographyVariant, // --- IGNORE ---
-  descriptionTpyographyVariant, // --- IGNORE ---
+  labelVariant,
+  descriptionVariant,
   ...props
 }) => {
   const history = useHistory();
@@ -64,10 +64,10 @@ export const SettingsNavItem: FC<SettingsNavItemProps> = ({
       <ListItemText
         slotProps={{
           primary: {
-            variant: labelTpyographyVariant || 'subtitle1',
+            variant: labelVariant || 'subtitle1',
           },
           secondary: {
-            variant: descriptionTpyographyVariant || 'caption',
+            variant: descriptionVariant || 'caption',
             marginTop: 0.5,
           },
         }}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
index f54531c18..0d8333c86 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
@@ -70,10 +70,6 @@ export const Authenticator: FC = () => {
     ),
   };
 
-  const onBack = useCallback(() => {
-    goBack();
-  }, [goBack]);
-
   const onCodeSubmit = useCallback(async () => {
     setIsSubmitted(true);
     if (!totpChallenge) {
@@ -96,7 +92,7 @@ export const Authenticator: FC = () => {
       title={headline[screenState]}
       withBackButton
       contentProps={{ justifyContent: 'flex-start', alignItems: 'start' }}
-      onBack={onBack}
+      onBack={goBack}
     >
       <Typography variant="caption">{description[screenState]}</Typography>
       {screenState === AuthenticatorState.Initial && (
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
index 835839979..a8c0e42e3 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -15,7 +15,6 @@ export enum AuthenticatorState {
 export const AuthenticatorDetails = ({ method, methodName }) => {
   return (
     <CardMenuItem
-      onClick={() => {}}
       icon={getIconForMethod(method)}
       text={methodName}
       key={method.toString()}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
index afb17d3d9..df3d56877 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyCode.tsx
@@ -1,6 +1,26 @@
-import { Button, Paper, Stack, toast, Typography } from '@avalabs/k2-alpine';
+import {
+  Button,
+  Paper,
+  Stack,
+  styled,
+  toast,
+  Typography,
+} from '@avalabs/k2-alpine';
 import { useTranslation } from 'react-i18next';
 
+const CodePaper = styled(Paper)(() => ({
+  borderRadius: 2,
+  overflow: 'hidden',
+  width: '100%',
+  flexDirection: 'row',
+  px: 1.5,
+  py: 2,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  mt: 4,
+}));
+
 export const AuthenticatorVerifyCode = ({ totpSecret, onNext }) => {
   const { t } = useTranslation();
 
@@ -11,21 +31,7 @@ export const AuthenticatorVerifyCode = ({ totpSecret, onNext }) => {
       height="100%"
       width="100%"
     >
-      <Paper
-        elevation={1}
-        sx={{
-          borderRadius: 2,
-          overflow: 'hidden',
-          width: '100%',
-          flexDirection: 'row',
-          px: 1.5,
-          py: 2,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          mt: 4,
-        }}
-      >
+      <CodePaper elevation={1} sx={{}}>
         <Typography
           variant="body2"
           color="text.primary"
@@ -44,7 +50,7 @@ export const AuthenticatorVerifyCode = ({ totpSecret, onNext }) => {
         >
           {t('Copy')}
         </Button>
-      </Paper>
+      </CodePaper>
       {/** TODO: Put the description sections with ICONS after they put in the k2 alpine */}
       <Button onClick={onNext} color="primary" variant="contained" fullWidth>
         {t('Next')}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
index 805166b94..e661e50c1 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorVerifyTotp.tsx
@@ -18,7 +18,7 @@ export const AuthenticatorVerifyTotp = ({
 }: AuthenticatorVerifyTotpProps) => {
   const totpError = useTotpErrorMessage(error);
   const keyboardShortcuts = useKeyboardShortcuts({
-    Enter: () => onSubmit && onSubmit(),
+    Enter: () => onSubmit?.(),
   });
   const { t } = useTranslation();
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
index 8d145afcb..1f92cc3ae 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
@@ -9,7 +9,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
-import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
+import { useMFAEvents } from '../../common/useMFAEvent';
 import { AuthErrorCode, ExtensionRequest, MfaResponseData } from '@core/types';
 import { TotpCodeField } from '@/components/TotpCodeField';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
@@ -42,16 +42,16 @@ export const FIDO = () => {
     try {
       await removeFidoDevice(deviceId);
       toast.success(t('FIDO device removed!'));
-      history.push('/settings/recovery-methods');
     } catch {
       toast.error(t('Error occurred. Please try again.'));
+    } finally {
       history.push('/settings/recovery-methods');
     }
   }, [deviceId, history, removeFidoDevice, t]);
 
   useEffect(() => {
     remove();
-  }, [deviceId, remove, removeFidoDevice]);
+  }, [remove]);
 
   const submitCode = useCallback(
     async (params: MfaResponseData) => {
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
index 3cdf881f5..4b3d7cf91 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
@@ -11,7 +11,6 @@ export enum FIDOState {
 export const FIDODetails = ({ method }) => {
   return (
     <CardMenuItem
-      onClick={() => {}}
       icon={getIconForMethod(method)}
       text={method.name}
       key={method.toString()}
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
index 0722ad940..cd28277e9 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -1,7 +1,6 @@
 import { RemoveTotp } from './RemoveTotp';
 import { FullscreenModalTitle } from '@/components/FullscreenModal';
 import { RecoveryMethodsFullScreenParams } from './RecoveryMethodsFullScreen';
-import { useMemo } from 'react';
 import { AddTotp } from './AddTotp';
 import { AddFIDO } from './AddFIDO';
 import { DefaultContent } from './DefaultContent';
@@ -22,7 +21,7 @@ export const FullScreenContent = ({
   action,
   keyType,
 }: RecoveryMethodsFullScreenParams) => {
-  const getPage = useMemo(() => {
+  const getPage = () => {
     if (mfaType === 'totp' && action === 'remove') {
       return 'removeTOTP';
     }
@@ -33,9 +32,9 @@ export const FullScreenContent = ({
       return 'addFIDO';
     }
     return 'defaultContent';
-  }, [action, mfaType]);
+  };
 
-  const page = getPage;
+  const page = getPage();
 
   const headline = {};
   const content: FullScreenContentProps = {
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index 3c90c83ea..5f0e1dd3e 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -11,8 +11,8 @@ import {
 
 import { useSeedlessMfaManager } from '@core/ui';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
-import { useMFAEvents } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent';
-import { FIDOChallenge } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge';
+import { useMFAEvents } from '../../common/useMFAEvent';
+import { FIDOChallenge } from '../../common/FIDOChallenge';
 import { useHistory } from 'react-router-dom';
 import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index c4877845e..7ee0fb842 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -13,6 +13,12 @@ interface RecoveryMethodProps {
   method: RecoveryMethodType;
 }
 
+const openRemoveTotpPopup = () =>
+  openFullscreenTab('update-recovery-method/totp/remove');
+
+const openAddTotpPopup = () =>
+  openFullscreenTab('update-recovery-method/totp/add');
+
 export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
   const { t } = useTranslation();
   const { hasTotpConfigured, hasFidoConfigured, recoveryMethods } =
@@ -23,23 +29,13 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
 
   const isRemovable =
     recoveryMethods.length > 1 && hasFidoConfigured && hasTotpConfigured;
-  const openRemoveTotpPopup = useCallback(async () => {
-    openFullscreenTab('update-recovery-method/totp/remove');
-  }, []);
-  const openAddTotpPopup = useCallback(async () => {
-    openFullscreenTab('update-recovery-method/totp/add');
-  }, []);
 
   const onRemoveConfirm = useCallback(() => {
     setIsConfirmOpen(false);
     return method.type === 'totp'
       ? openRemoveTotpPopup()
       : history.push(`/settings/recovery-method/fido/${method.id}`);
-  }, [history, method, openRemoveTotpPopup]);
-
-  const onChangeConfirm = useCallback(() => {
-    openAddTotpPopup();
-  }, [openAddTotpPopup]);
+  }, [history, method]);
 
   return (
     <>
@@ -56,7 +52,7 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
       {isChangeOpen && (
         <ConfirmPage
           title={t('Are you sure you want to change the authenticator?')}
-          onConfirm={onChangeConfirm}
+          onConfirm={openAddTotpPopup}
           onCancel={() => setIsChangeOpen(false)}
           warning={t(
             'You will no longer be able to use this authenticator once you switch. You will need to re-add an authenticator',
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
index eabdf0529..e4ab29475 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/ConfirmPage.tsx
@@ -11,31 +11,30 @@ export const ConfirmPage = ({ onConfirm, onCancel, title, warning }) => {
       <Page
         title={title}
         contentProps={{
+          height: 1,
           alignItems: 'stretch',
-          justifyContent: 'flex-start',
+          justifyContent: 'space-between',
         }}
         onBack={onCancel}
       >
-        <Stack justifyContent="space-between" height="100%">
-          <RecoveryMethodFailure text={warning} />
-          <Stack gap={1}>
-            <Button
-              variant="contained"
-              color="primary"
-              size="extension"
-              onClick={onConfirm}
-            >
-              {t('Next')}
-            </Button>
-            <Button
-              variant="contained"
-              color="secondary"
-              size="extension"
-              onClick={onCancel}
-            >
-              {t('Back')}
-            </Button>
-          </Stack>
+        <RecoveryMethodFailure text={warning} />
+        <Stack gap={1}>
+          <Button
+            variant="contained"
+            color="primary"
+            size="extension"
+            onClick={onConfirm}
+          >
+            {t('Next')}
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            size="extension"
+            onClick={onCancel}
+          >
+            {t('Back')}
+          </Button>
         </Stack>
       </Page>
     </SlideUpDialog>
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index ec649cd21..d1d461236 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -1,16 +1,16 @@
 import { FullscreenModal } from '@/components/FullscreenModal';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InProgress } from '../../../InProgress';
-import { FIDOChallenge } from './components/FIDOChallenge';
+import { FIDOChallenge } from '../../../../../../../common/FIDOChallenge';
 import { MfaChoicePrompt } from './components/MfaChoicePrompt';
 import { TOTPChallenge } from './components/TOTPChallenge';
 import { useMFAChoice } from './hooks/useMFAChoice';
-import { useMFAEvents } from './hooks/useMFAEvent';
+import { useMFAEvents } from '../../../../../../../common/useMFAEvent';
 import { useSelectMFAMethod } from './hooks/useSelectMFAMethod';
 
-export const MFA = () => {
+export const MFA: FC = () => {
   const [error, setError] = useState<AuthErrorCode>();
   const mfaChoice = useMFAChoice();
   const mfaChallenge = useMFAEvents(setError);
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx b/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
similarity index 94%
rename from apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
rename to apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
index ebc9b5e08..4fc0f91f6 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/components/FIDOChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
@@ -17,8 +17,8 @@ import { FC, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { MdErrorOutline } from 'react-icons/md';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
-import { InProgress } from '../../../../InProgress';
-import { ChallengeComponentProps } from '../../../types';
+import { InProgress } from '../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { ChallengeComponentProps } from '../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/types';
 import { useParams } from 'react-router-dom';
 import { RecoveryMethodsFullScreenParams } from '@/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen';
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent.ts b/apps/next/src/pages/Settings/components/common/useMFAEvent.ts
similarity index 100%
rename from apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/hooks/useMFAEvent.ts
rename to apps/next/src/pages/Settings/components/common/useMFAEvent.ts

From e21b54328ff0db87abc27495d852d4e7500b080e Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Thu, 25 Sep 2025 10:16:16 +0200
Subject: [PATCH 19/22] feat: handle feature flag changes

---
 .../subflows/SeedlessMfaLoginFlow.tsx         |  2 -
 .../pages/Settings/components/Home/Home.tsx   |  4 +-
 .../RecoveryMethods/RecoveryMethodList.tsx    | 77 ++++++++++++-------
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx b/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx
index 37d3268de..5ba0b45a5 100644
--- a/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx
+++ b/apps/next/src/pages/Onboarding/flows/SeedlessFlow/subflows/SeedlessMfaLoginFlow.tsx
@@ -26,8 +26,6 @@ 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(() => {
diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 1109e61e0..fc46e70a5 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -60,7 +60,7 @@ export const SettingsHomePage = () => {
   const { showTrendingTokens, setShowTrendingTokens } = useSettingsContext();
   const { isMfaSetupPromptVisible } = useSeedlessMfaManager();
   const { featureFlags } = useFeatureFlagContext();
-  const areMfaSettingsAvailable =
+  const isMfaSettingsAvailable =
     featureFlags[FeatureGates.SEEEDLESS_MFA_SETTINGS];
 
   return (
@@ -232,7 +232,7 @@ export const SettingsHomePage = () => {
         <SettingsNavItem label={t('Reset recovery phrase')} divider />
 
         {walletDetails?.type === SecretType.Seedless &&
-          areMfaSettingsAvailable && (
+          isMfaSettingsAvailable && (
             <SettingsNavItem
               label={t('Recovery methods')}
               divider
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index 83dba84eb..ed3cdf126 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -1,3 +1,4 @@
+import { WarningMessage } from '@/components/WarningMessage';
 import { CardMenu, CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import {
   Button,
@@ -8,7 +9,8 @@ import {
   SecurityKeyIcon,
 } from '@avalabs/k2-alpine';
 import { openFullscreenTab } from '@core/common';
-import { useAnalyticsContext } from '@core/ui';
+import { FeatureGates } from '@core/types';
+import { useAnalyticsContext, useFeatureFlagContext } from '@core/ui';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
@@ -30,6 +32,14 @@ export const RecoveryMethodList = ({
   const { t } = useTranslation();
   const history = useHistory();
   const { capture } = useAnalyticsContext();
+  const { featureFlags } = useFeatureFlagContext();
+  const isPasskeyOn = featureFlags[FeatureGates.SEEDLESS_MFA_PASSKEY];
+  const isYubikeyOn = featureFlags[FeatureGates.SEEDLESS_MFA_YUBIKEY];
+  const isAuthenticatorOn =
+    featureFlags[FeatureGates.SEEDLESS_MFA_AUTHENTICATOR];
+
+  const noMFAMethodsAvailable =
+    !isPasskeyOn && !isYubikeyOn && (!isAuthenticatorOn || hasTotpConfigured);
 
   const recoveryMethodCards = [
     {
@@ -41,6 +51,7 @@ export const RecoveryMethodList = ({
       to: 'update-recovery-method/fido/add/passkey',
       analyticsKey: 'AddPasskeyClicked',
       method: 'passkey',
+      isOn: isPasskeyOn,
     },
     {
       icon: MethodIcons.authenticator,
@@ -55,6 +66,7 @@ export const RecoveryMethodList = ({
       analyticsKey: 'AddAuthenticatorClicked',
       method: 'authenticator',
       newTab: !hasMFAConfigured ? false : true,
+      isOn: isAuthenticatorOn,
     },
     {
       icon: MethodIcons.yubikey,
@@ -65,6 +77,7 @@ export const RecoveryMethodList = ({
       to: 'update-recovery-method/fido/add/yubikey',
       analyticsKey: 'AddYubikeyClicked',
       method: 'yubikey',
+      isOn: isYubikeyOn,
     },
   ];
 
@@ -78,32 +91,43 @@ export const RecoveryMethodList = ({
           width: '100%',
         }}
       >
-        <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
-          {recoveryMethodCards.map((card, idx) => {
-            // Hide Authenticator option if TOTP is already configured
-            if (card.method === 'authenticator' && hasTotpConfigured) {
-              return null;
-            }
+        {!noMFAMethodsAvailable && (
+          <CardMenu divider={<Divider sx={{ ml: 8, mr: 3 }} />}>
+            {recoveryMethodCards.map((card, idx) => {
+              if (
+                (card.method === 'authenticator' && hasTotpConfigured) ||
+                !card.isOn
+              ) {
+                return null;
+              }
 
-            return (
-              <CardMenuItem
-                onClick={() => {
-                  capture(card.analyticsKey);
-                  if (card.newTab === false) {
-                    history.push(card.to);
-                    return;
-                  }
-                  openFullscreenTab(card.to);
-                }}
-                icon={card.icon}
-                text={card.title}
-                description={card.description}
-                key={idx}
-                size="small"
-              />
-            );
-          })}
-        </CardMenu>
+              return (
+                <CardMenuItem
+                  onClick={() => {
+                    capture(card.analyticsKey);
+                    if (card.newTab === false) {
+                      history.push(card.to);
+                      return;
+                    }
+                    openFullscreenTab(card.to);
+                  }}
+                  icon={card.icon}
+                  text={card.title}
+                  description={card.description}
+                  key={idx}
+                  size="small"
+                />
+              );
+            })}
+          </CardMenu>
+        )}
+        {noMFAMethodsAvailable && (
+          <WarningMessage sx={{ p: 2 }}>
+            {t(
+              'You cannot add a new recovery method for your wallet! Try again later!',
+            )}
+          </WarningMessage>
+        )}
       </Paper>
       <Button
         variant="contained"
@@ -112,6 +136,7 @@ export const RecoveryMethodList = ({
         fullWidth
         sx={{ mt: 'auto' }}
         onClick={onNext}
+        disabled={noMFAMethodsAvailable}
       >
         {t('Add recovery method')}
       </Button>

From 0cec53164fb322ed0cbb615d0f8bba7571b8473a Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Thu, 25 Sep 2025 10:21:35 +0200
Subject: [PATCH 20/22] chore: localization

---
 apps/next/src/localization/locales/en/translation.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/next/src/localization/locales/en/translation.json b/apps/next/src/localization/locales/en/translation.json
index 8e89e44ad..42511c7ba 100644
--- a/apps/next/src/localization/locales/en/translation.json
+++ b/apps/next/src/localization/locales/en/translation.json
@@ -724,6 +724,7 @@
   "You are about to exit the recovery phrase export process. Are you sure you want to exit?": "You are about to exit the recovery phrase export process. Are you sure you want to exit?",
   "You can now close this window and continue using Core.": "You can now close this window and continue using Core.",
   "You can now start buying, swapping, sending, receiving crypto and collectibles with no added fees": "You can now start buying, swapping, sending, receiving crypto and collectibles with no added fees",
+  "You cannot add a new recovery method for your wallet! Try again later!": "You cannot add a new recovery method for your wallet! Try again later!",
   "You do not have enough funds to cover the network fees.": "You do not have enough funds to cover the network fees.",
   "You may need to enable popups to continue, you can find this setting near the address bar.": "You may need to enable popups to continue, you can find this setting near the address bar.",
   "You must allow access to scan the QR code.": "You must allow access to scan the QR code.",

From e145939ddef1cf3287c5d6164ab0ca18335e80cc Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Mon, 20 Oct 2025 20:07:53 +0200
Subject: [PATCH 21/22] refactor: file move, type move

---
 .../Authenticator/Authenticator.tsx           | 38 ++++++++-----
 .../Authenticator/AuthenticatorDetails.tsx    | 11 ----
 .../components/RecoveryMethods/FIDO/FIDO.tsx  |  2 +-
 .../RecoveryMethods/FullScreens/AddTotp.tsx   |  2 +-
 .../FullScreens/FullScreenContent.tsx         | 55 +++++++++++--------
 .../FullScreens/RemoveTotp.tsx                |  6 +-
 .../components/SeedlessFlow/pages/Loading.tsx |  2 +-
 .../components/SeedlessFlow/pages/MFA/MFA.tsx |  2 +-
 .../components/common/FIDOChallenge.tsx       |  2 +-
 .../components => common}/InProgress.tsx      |  0
 10 files changed, 62 insertions(+), 58 deletions(-)
 rename apps/next/src/pages/Settings/components/{RecoveryPhrase/components/ShowPhrase/components => common}/InProgress.tsx (100%)

diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
index 0d8333c86..a0b88d41b 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/Authenticator.tsx
@@ -7,12 +7,22 @@ import { useState } from 'react';
 import { useGoBack, useSeedlessMfaManager } from '@core/ui';
 import { AuthenticatorVerifyScreen } from './AuthenticatorVerifyScreen';
 import { AuthenticatorVerifyCode } from './AuthenticatorVerifyCode';
-import { AuthenticatorState } from './AuthenticatorDetails';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { InProgress } from '../../common/InProgress';
 import { RecoveryMethodFailure } from '../components/RecoveryMethodFailure';
 import { AuthenticatorVerifyTotp } from './AuthenticatorVerifyTotp';
 import { useHistory } from 'react-router-dom';
 
+export enum AuthenticatorState {
+  Initial = 'initial',
+  Initiated = 'initiated',
+  ConfirmChange = 'confirm-change',
+  ConfirmRemoval = 'confirm-removal',
+  Pending = 'pending',
+  Completing = 'completing',
+  VerifyCode = 'verify-code',
+  Failure = 'failure',
+}
+
 export const Authenticator: FC = () => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -29,21 +39,19 @@ export const Authenticator: FC = () => {
 
   const goBack = useGoBack();
 
-  const initChange = useCallback(async () => {
-    try {
-      const challenge = await initAuthenticatorChange();
-
-      setTotpChallenge(challenge);
-      setScreenState(AuthenticatorState.Initiated);
-    } catch {
-      setTotpChallenge(undefined);
-      setScreenState(AuthenticatorState.Failure);
-    }
-  }, [initAuthenticatorChange]);
-
   useEffect(() => {
+    const initChange = async () => {
+      try {
+        const challenge = await initAuthenticatorChange();
+        setTotpChallenge(challenge);
+        setScreenState(AuthenticatorState.Initiated);
+      } catch {
+        setTotpChallenge(undefined);
+        setScreenState(AuthenticatorState.Failure);
+      }
+    };
     initChange();
-  }, [initChange]);
+  }, [initAuthenticatorChange]);
 
   const totpSecret = useMemo(() => {
     if (!totpChallenge) {
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
index a8c0e42e3..75ad1c2ba 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -1,17 +1,6 @@
 import { getIconForMethod } from '../RecoveryMethodCard';
 import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 
-export enum AuthenticatorState {
-  Initial = 'initial',
-  Initiated = 'initiated',
-  ConfirmChange = 'confirm-change',
-  ConfirmRemoval = 'confirm-removal',
-  Pending = 'pending',
-  Completing = 'completing',
-  VerifyCode = 'verify-code',
-  Failure = 'failure',
-}
-
 export const AuthenticatorDetails = ({ method, methodName }) => {
   return (
     <CardMenuItem
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
index 1f92cc3ae..034428d38 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDO.tsx
@@ -13,7 +13,7 @@ import { useMFAEvents } from '../../common/useMFAEvent';
 import { AuthErrorCode, ExtensionRequest, MfaResponseData } from '@core/types';
 import { TotpCodeField } from '@/components/TotpCodeField';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { InProgress } from '@/pages/Settings/components/common/InProgress';
 
 export const FIDO = () => {
   const history = useHistory();
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
index 496e18461..a6e077f1a 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/AddTotp.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { MFA } from '../../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA';
 import { Button, Stack, toast } from '@avalabs/k2-alpine';
 import { AuthenticatorVerifyTotp } from '../Authenticator/AuthenticatorVerifyTotp';
-import { AuthenticatorState } from '../Authenticator/AuthenticatorDetails';
 import { useTranslation } from 'react-i18next';
 import {
   FullscreenModalActions,
@@ -14,6 +13,7 @@ import {
 import { SeedlessTotpQRCode } from '@/pages/Onboarding/flows/SeedlessFlow/screens';
 import { RecoveryMethodFailure } from '../components/RecoveryMethodFailure';
 import { useHistory } from 'react-router-dom';
+import { AuthenticatorState } from '../Authenticator';
 
 export const AddTotp = () => {
   const [error, setError] = useState<AuthErrorCode>();
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
index cd28277e9..557f57743 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/FullScreenContent.tsx
@@ -5,6 +5,7 @@ import { AddTotp } from './AddTotp';
 import { AddFIDO } from './AddFIDO';
 import { DefaultContent } from './DefaultContent';
 import { KeyType } from '@core/types';
+import { useMemo } from 'react';
 
 export type RecoveryMethodPages =
   | 'defaultContent'
@@ -16,37 +17,43 @@ export type FullScreenContentProps = {
   [page in RecoveryMethodPages]: React.ReactNode;
 };
 
+const getFullScreenContent = (
+  mfaType?: 'totp' | 'fido',
+  action?: 'remove' | 'add',
+): RecoveryMethodPages => {
+  if (mfaType === 'totp' && action === 'remove') {
+    return 'removeTOTP';
+  }
+  if (mfaType === 'totp' && action === 'add') {
+    return 'addTOTP';
+  }
+  if (mfaType === 'fido' && action === 'add') {
+    return 'addFIDO';
+  }
+  return 'defaultContent';
+};
+
 export const FullScreenContent = ({
   mfaType,
   action,
   keyType,
 }: RecoveryMethodsFullScreenParams) => {
-  const getPage = () => {
-    if (mfaType === 'totp' && action === 'remove') {
-      return 'removeTOTP';
-    }
-    if (mfaType === 'totp' && action === 'add') {
-      return 'addTOTP';
-    }
-    if (mfaType === 'fido' && action === 'add') {
-      return 'addFIDO';
-    }
-    return 'defaultContent';
-  };
-
-  const page = getPage();
+  const page = getFullScreenContent(mfaType, action);
 
   const headline = {};
-  const content: FullScreenContentProps = {
-    removeTOTP: <RemoveTotp />,
-    addTOTP: <AddTotp />,
-    addFIDO: keyType ? (
-      <AddFIDO keyType={keyType as KeyType} />
-    ) : (
-      <DefaultContent />
-    ),
-    defaultContent: <DefaultContent />,
-  };
+  const content: FullScreenContentProps = useMemo(
+    () => ({
+      removeTOTP: <RemoveTotp />,
+      addTOTP: <AddTotp />,
+      addFIDO: keyType ? (
+        <AddFIDO keyType={keyType as KeyType} />
+      ) : (
+        <DefaultContent />
+      ),
+      defaultContent: <DefaultContent />,
+    }),
+    [keyType],
+  );
 
   return (
     <>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
index 5f0e1dd3e..04ececc92 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FullScreens/RemoveTotp.tsx
@@ -11,10 +11,10 @@ import {
 
 import { useSeedlessMfaManager } from '@core/ui';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
-import { useMFAEvents } from '../../common/useMFAEvent';
-import { FIDOChallenge } from '../../common/FIDOChallenge';
+import { useMFAEvents } from '@/pages/Settings/components/common/useMFAEvent';
+import { FIDOChallenge } from '@/pages/Settings/components/common/FIDOChallenge';
 import { useHistory } from 'react-router-dom';
-import { InProgress } from '../../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { InProgress } from '@/pages/Settings/components/common/InProgress';
 
 enum RemoveTotpState {
   Loading = 'loading',
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/Loading.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/Loading.tsx
index bf4b19720..d64faf2d9 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/Loading.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/Loading.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { InProgress } from '../../InProgress';
+import { InProgress } from '../../../../../../common/InProgress';
 import { StageProps } from '../types';
 import { OmniViewPage } from './OmniViewPage';
 
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
index d1d461236..00bf4803c 100644
--- a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/pages/MFA/MFA.tsx
@@ -2,7 +2,7 @@ import { FullscreenModal } from '@/components/FullscreenModal';
 import { AuthErrorCode, MfaRequestType } from '@core/types';
 import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { InProgress } from '../../../InProgress';
+import { InProgress } from '@/pages/Settings/components/common/InProgress';
 import { FIDOChallenge } from '../../../../../../../common/FIDOChallenge';
 import { MfaChoicePrompt } from './components/MfaChoicePrompt';
 import { TOTPChallenge } from './components/TOTPChallenge';
diff --git a/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx b/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
index 4fc0f91f6..1dff875bf 100644
--- a/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
+++ b/apps/next/src/pages/Settings/components/common/FIDOChallenge.tsx
@@ -17,7 +17,7 @@ import { FC, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { MdErrorOutline } from 'react-icons/md';
 import { SubmitMfaResponseHandler } from '~/services/seedless/handlers/submitMfaResponse';
-import { InProgress } from '../RecoveryPhrase/components/ShowPhrase/components/InProgress';
+import { InProgress } from './InProgress';
 import { ChallengeComponentProps } from '../RecoveryPhrase/components/ShowPhrase/components/SeedlessFlow/types';
 import { useParams } from 'react-router-dom';
 import { RecoveryMethodsFullScreenParams } from '@/pages/Settings/components/RecoveryMethods/FullScreens/RecoveryMethodsFullScreen';
diff --git a/apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/InProgress.tsx b/apps/next/src/pages/Settings/components/common/InProgress.tsx
similarity index 100%
rename from apps/next/src/pages/Settings/components/RecoveryPhrase/components/ShowPhrase/components/InProgress.tsx
rename to apps/next/src/pages/Settings/components/common/InProgress.tsx

From 116e782cf3cc7c4da05c8bf389718c44b447b681 Mon Sep 17 00:00:00 2001
From: Viktor Vasas <viktor.vasas@avalabs.org>
Date: Mon, 3 Nov 2025 17:32:47 +0100
Subject: [PATCH 22/22] fix: card style, back button

---
 .../pages/Settings/components/Home/Home.tsx   |  3 ++
 .../Authenticator/AuthenticatorDetails.tsx    |  8 ++--
 .../RecoveryMethods/ConfiguredMethodList.tsx  |  3 +-
 .../RecoveryMethods/FIDO/FIDODetails.tsx      |  7 +--
 .../RecoveryMethods/RecoveryMethod.tsx        |  3 +-
 .../RecoveryMethods/RecoveryMethodCard.tsx    | 10 ++--
 .../RecoveryMethods/RecoveryMethodList.tsx    |  3 +-
 .../RecoveryMethods/RecoveryMethods.tsx       |  2 +-
 .../RecoveryMethods/components/MethodCard.tsx | 48 +++++++++++++++++++
 9 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 apps/next/src/pages/Settings/components/RecoveryMethods/components/MethodCard.tsx

diff --git a/apps/next/src/pages/Settings/components/Home/Home.tsx b/apps/next/src/pages/Settings/components/Home/Home.tsx
index 4646e7789..69b534847 100644
--- a/apps/next/src/pages/Settings/components/Home/Home.tsx
+++ b/apps/next/src/pages/Settings/components/Home/Home.tsx
@@ -72,6 +72,9 @@ export const SettingsHomePage = () => {
         'Manage and customize your Core experience to your liking.',
       )}
       withBackButton
+      onBack={() => {
+        push('/');
+      }}
     >
       <Stack direction="row" justifyContent="space-between" gap={1.5}>
         <SwitchCard
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
index 75ad1c2ba..8ed6ef039 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/Authenticator/AuthenticatorDetails.tsx
@@ -1,12 +1,12 @@
+import { MethodCard } from '../components/MethodCard';
 import { getIconForMethod } from '../RecoveryMethodCard';
-import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
-
 export const AuthenticatorDetails = ({ method, methodName }) => {
   return (
-    <CardMenuItem
+    <MethodCard
       icon={getIconForMethod(method)}
-      text={methodName}
+      title={methodName}
       key={method.toString()}
+      showChevron={false}
     />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
index 3cf4cb874..b0da030b8 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/ConfiguredMethodList.tsx
@@ -14,11 +14,12 @@ export const ConfiguredMethodList = ({
 
   return (
     <Paper
-      elevation={1}
+      elevation={0}
       sx={{
         borderRadius: 2,
         overflow: 'hidden',
         width: '100%',
+        backgroundColor: 'surface.primary',
       }}
     >
       {existingRecoveryMethods.map((method) => {
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
index 4b3d7cf91..44b0f2248 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/FIDO/FIDODetails.tsx
@@ -1,5 +1,5 @@
-import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import { getIconForMethod } from '../RecoveryMethodCard';
+import { MethodCard } from '../components/MethodCard';
 
 export enum FIDOState {
   Initial = 'initial',
@@ -10,10 +10,11 @@ export enum FIDOState {
 
 export const FIDODetails = ({ method }) => {
   return (
-    <CardMenuItem
+    <MethodCard
       icon={getIconForMethod(method)}
-      text={method.name}
+      title={method.name}
       key={method.toString()}
+      showChevron={false}
     />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
index 7ee0fb842..13659000c 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethod.tsx
@@ -60,11 +60,12 @@ export const RecoveryMethod = ({ method }: RecoveryMethodProps) => {
         />
       )}
       <Paper
-        elevation={1}
+        elevation={0}
         sx={{
           borderRadius: 2,
           overflow: 'hidden',
           width: '100%',
+          backgroundColor: 'surface.primary',
         }}
       >
         <Stack>
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
index 3e3aa0a02..3faf2317d 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodCard.tsx
@@ -1,6 +1,6 @@
-import { CardMenuItem } from '@/pages/Onboarding/components/CardMenu';
 import { MethodIcons } from './RecoveryMethodList';
 import { RecoveryMethod } from '@core/types';
+import { MethodCard } from './components/MethodCard';
 
 interface RecoveryMethodCardProps {
   method: RecoveryMethod;
@@ -24,12 +24,10 @@ export const RecoveryMethodCard = ({
   methodName,
 }: RecoveryMethodCardProps) => {
   return (
-    <CardMenuItem
-      onClick={onClick}
+    <MethodCard
       icon={getIconForMethod(method)}
-      text={methodName || method.type}
-      key={method.toString()}
-      size="small"
+      title={methodName || method.type}
+      onClick={onClick}
     />
   );
 };
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
index ed3cdf126..85b213ce8 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethodList.tsx
@@ -84,11 +84,12 @@ export const RecoveryMethodList = ({
   return (
     <>
       <Paper
-        elevation={1}
+        elevation={0}
         sx={{
           borderRadius: 2,
           overflow: 'hidden',
           width: '100%',
+          backgroundColor: 'surface.primary',
         }}
       >
         {!noMFAMethodsAvailable && (
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
index 7f4007f44..e5119e69a 100644
--- a/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/RecoveryMethods.tsx
@@ -61,7 +61,7 @@ export const RecoveryMethods: FC = () => {
     >
       {isLoadingRecoveryMethods && (
         <Paper
-          elevation={1}
+          elevation={0}
           sx={{
             borderRadius: 2,
             overflow: 'hidden',
diff --git a/apps/next/src/pages/Settings/components/RecoveryMethods/components/MethodCard.tsx b/apps/next/src/pages/Settings/components/RecoveryMethods/components/MethodCard.tsx
new file mode 100644
index 000000000..14e722b18
--- /dev/null
+++ b/apps/next/src/pages/Settings/components/RecoveryMethods/components/MethodCard.tsx
@@ -0,0 +1,48 @@
+import {
+  Box,
+  ChevronRightIcon,
+  Stack,
+  styled,
+  Typography,
+} from '@avalabs/k2-alpine';
+import { FC, ReactElement } from 'react';
+
+interface MethodCardProps {
+  icon: ReactElement;
+  title: string;
+  onClick?: () => void;
+  showChevron?: boolean;
+}
+
+export const MethodCard: FC<MethodCardProps> = ({
+  icon,
+  title,
+  onClick,
+  showChevron = true,
+}) => {
+  return (
+    <StyledMethodCard onClick={onClick}>
+      <Stack direction="row" gap={1.5} alignItems="center">
+        {icon}
+        <Typography variant="subtitle3">{title}</Typography>
+      </Stack>
+      {showChevron && (
+        <ChevronRightIcon className="MethodCard-chevron" size={20} />
+      )}
+    </StyledMethodCard>
+  );
+};
+
+const StyledMethodCard = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: theme.spacing(1.5, 2),
+  color: theme.palette.text.primary,
+  cursor: 'pointer',
+
+  '& .MethodCard-chevron': {
+    color: theme.palette.text.secondary,
+  },
+}));