feat(next-gen): onboarding - seedless missing pieces

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

@@ -500,7 +500,6 @@
   "Invalid QR Code": "Invalid QR Code",
   "Invalid amount": "Invalid amount",
   "Invalid code": "Invalid code",
-  "Invalid code. Please try again.": "Invalid code. Please try again.",
   "Invalid key. Please re-enter the key.": "Invalid key. Please re-enter the key.",
   "Invalid mnemonic phrase": "Invalid mnemonic phrase",
   "Invalid params": "Invalid params",
@@ -963,9 +962,11 @@
   "The active account does not support Bitcoin.": "The active account does not support Bitcoin.",
   "The amount cannot be lower than the bridging fee": "The amount cannot be lower than the bridging fee",
   "The bridging fee is unknown": "The bridging fee is unknown",
+  "The code you entered is incorrect. Please try again": "The code you entered is incorrect. Please try again",
   "The inputs of this transaction are greater than the output. Continuing will cause you to lose funds associated with this UTXO.": "The inputs of this transaction are greater than the output. Continuing will cause you to lose funds associated with this UTXO.",
   "The operation either timed out or was not allowed.": "The operation either timed out or was not allowed.",
   "The operation either timed out or was not allowed. Please try again.": "The operation either timed out or was not allowed. Please try again.",
+  "The operation was not completed. Please try again.": "The operation was not completed. Please try again.",
   "The prices of some tokens are missing. The balance might not be accurate currently.": "The prices of some tokens are missing. The balance might not be accurate currently.",
   "The provided chainID does not match the selected network. Pressing “Continue” will reject the transaction. Please switch networks and try again.": "The provided chainID does not match the selected network. Pressing “Continue” will reject the transaction. Please switch networks and try again.",
   "The secret key can be assigned by the Fireblocks workspace admin": "The secret key can be assigned by the Fireblocks workspace admin",

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

@@ -226,6 +226,7 @@
   "Do you really want to save?": "Do you really want to save?",
   "Do you want to add Solana to your wallet?": "Do you want to add Solana to your wallet?",
   "Do you want to allow <b>{{dappUrl}}</b> to access your wallet?": "Do you want to allow <b>{{dappUrl}}</b> to access your wallet?",
+  "Do you want to go back?": "Do you want to go back?",
   "Do you want to sign this message?": "Do you want to sign this message?",
   "Done": "Done",
   "Download Ledger Live to update": "Download Ledger Live to update",
@@ -313,7 +314,9 @@
   "Get free gas": "Get free gas",
   "Get signature": "Get signature",
   "Get started by adding crypto to your wallet": "Get started by adding crypto to your wallet",
+  "Go Back": "Go Back",
   "Go to cross-chain transfer": "Go to cross-chain transfer",
+  "Going back will take you to the beginning of the onboarding flow. You will need to re-verify the MFA you just set up before continuing with account creation.": "Going back will take you to the beginning of the onboarding flow. You will need to re-verify the MFA you just set up before continuing with account creation.",
   "Governance": "Governance",
   "Grant access": "Grant access",
   "Header name": "Header name",
@@ -364,7 +367,6 @@
   "Invalid Solana address": "Invalid Solana address",
   "Invalid amount": "Invalid amount",
   "Invalid code": "Invalid code",
-  "Invalid code. Please try again.": "Invalid code. Please try again.",
   "Invalid params": "Invalid params",
   "Invalid password": "Invalid password",
   "Invalid password. Please try again.": "Invalid password. Please try again.",
@@ -676,11 +678,13 @@
   "The amount cannot be lower than the bridging fee": "The amount cannot be lower than the bridging fee",
   "The base fee is set by the network and changes frequently. Any difference between the set max base fee and the actual base fee will be refunded.": "The base fee is set by the network and changes frequently. Any difference between the set max base fee and the actual base fee will be refunded.",
   "The bridging fee is unknown": "The bridging fee is unknown",
+  "The code you entered is incorrect. Please try again": "The code you entered is incorrect. Please try again",
   "The displayed token list might be incomplete.": "The displayed token list might be incomplete.",
   "The export process could not be completed. Please try again.": "The export process could not be completed. Please try again.",
   "The field is required": "The field is required",
   "The key you entered is invalid. Please try again": "The key you entered is invalid. Please try again",
   "The operation either timed out or was not allowed. Please try again.": "The operation either timed out or was not allowed. Please try again.",
+  "The operation was not completed. Please try again.": "The operation was not completed. Please try again.",
   "The priority fee is an incentive paid to network operators to prioritize processing of this transaction.": "The priority fee is an incentive paid to network operators to prioritize processing of this transaction.",
   "The recovery phrase your entered is invalid. Please double check for spelling mistakes or the order of each word": "The recovery phrase your entered is invalid. Please double check for spelling mistakes or the order of each word",
   "The transaction has been reverted": "The transaction has been reverted",

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

@@ -1,5 +1,5 @@
 import { WalletType } from '@avalabs/types';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 
 import { useOnboardingContext } from '@core/ui';
@@ -13,6 +13,7 @@ import {
   SelectAvatarScreen,
 } from '../../common-screens';
 import { SeedlessMfaLoginFlow, SeedlessMfaSetupFlow } from './subflows';
+import { VerifyGoBackModal } from './screens/VerifyGoBackModal';
 
 const BASE_PATH = '/onboarding/seedless';
 const TOTAL_STEPS = 6;
@@ -22,6 +23,8 @@ export const SeedlessFlow = () => {
   const { setOnboardingWalletType, oidcToken, onboardingState } =
     useOnboardingContext();
 
+  const [isVerifyGoBackModalOpen, setIsVerifyGoBackModalOpen] = useState(false);
+
   useEffect(() => {
     setOnboardingWalletType(WalletType.Seedless);
 
@@ -37,49 +40,60 @@ export const SeedlessFlow = () => {
   }, [oidcToken, history, onboardingState.isOnBoarded]);
 
   return (
-    <FullscreenModal
-      open
-      withCoreLogo
-      withAppInfo
-      withLanguageSelector
-      onBack={history.goBack}
-    >
-      <Switch>
-        <Route path={`${BASE_PATH}/login`}>
-          <SeedlessMfaLoginFlow
-            nextScreenPath={`${BASE_PATH}/wallet-details`}
-          />
-        </Route>
-        <Route path={`${BASE_PATH}/setup`}>
-          <SeedlessMfaSetupFlow
-            nextScreenPath={`${BASE_PATH}/wallet-details`}
-          />
-        </Route>
-        <Route path={`${BASE_PATH}/wallet-details`}>
-          <ProvideWalletDetailsScreen
-            step={3}
-            totalSteps={TOTAL_STEPS}
-            onNext={() => history.push(`${BASE_PATH}/customize-core`)}
-          />
-        </Route>
-        <Route path={`${BASE_PATH}/customize-core`}>
-          <CustomizeCore
-            step={4}
-            totalSteps={TOTAL_STEPS}
-            onNext={() => history.push(`${BASE_PATH}/select-avatar`)}
-          />
-        </Route>
-        <Route path={`${BASE_PATH}/select-avatar`}>
-          <SelectAvatarScreen
-            step={5}
-            totalSteps={TOTAL_STEPS}
-            onNext={() => history.push(`${BASE_PATH}/enjoy-your-wallet`)}
-          />
-        </Route>
-        <Route path={`${BASE_PATH}/enjoy-your-wallet`}>
-          <EnjoyYourWalletScreen />
-        </Route>
-      </Switch>
-    </FullscreenModal>
+    <>
+      <FullscreenModal
+        open
+        withCoreLogo
+        withAppInfo
+        withLanguageSelector
+        onBack={() => setIsVerifyGoBackModalOpen(true)}
+      >
+        <Switch>
+          <Route path={`${BASE_PATH}/login`}>
+            <SeedlessMfaLoginFlow
+              nextScreenPath={`${BASE_PATH}/wallet-details`}
+            />
+          </Route>
+          <Route path={`${BASE_PATH}/setup`}>
+            <SeedlessMfaSetupFlow
+              nextScreenPath={`${BASE_PATH}/wallet-details`}
+            />
+          </Route>
+          <Route path={`${BASE_PATH}/wallet-details`}>
+            <ProvideWalletDetailsScreen
+              step={3}
+              totalSteps={TOTAL_STEPS}
+              onNext={() => history.push(`${BASE_PATH}/customize-core`)}
+            />
+          </Route>
+          <Route path={`${BASE_PATH}/customize-core`}>
+            <CustomizeCore
+              step={4}
+              totalSteps={TOTAL_STEPS}
+              onNext={() => history.push(`${BASE_PATH}/select-avatar`)}
+            />
+          </Route>
+          <Route path={`${BASE_PATH}/select-avatar`}>
+            <SelectAvatarScreen
+              step={5}
+              totalSteps={TOTAL_STEPS}
+              onNext={() => history.push(`${BASE_PATH}/enjoy-your-wallet`)}
+            />
+          </Route>
+          <Route path={`${BASE_PATH}/enjoy-your-wallet`}>
+            <EnjoyYourWalletScreen />
+          </Route>
+        </Switch>
+      </FullscreenModal>
+      <VerifyGoBackModal
+        isOpen={isVerifyGoBackModalOpen}
+        onBack={() => {
+          history.push('/onboarding');
+        }}
+        onCancel={() => {
+          setIsVerifyGoBackModalOpen(false);
+        }}
+      />
+    </>
   );
 };

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

@@ -12,6 +12,8 @@ import {
 } from '@/components/FullscreenModal';
 import { TotpCodeField } from '@/components/TotpCodeField';
 import { NavButton } from '@/pages/Onboarding/components/NavButton';
+import { Stack, Typography, useTheme } from '@avalabs/k2-alpine';
+import { FiAlertCircle } from 'react-icons/fi';
 
 type SeedlessVerifyWithTotpProps = {
   onSubmit: (code: string) => void;
@@ -24,6 +26,7 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
   isLoading,
   error,
 }) => {
+  const theme = useTheme();
   const { t } = useTranslation();
   const [code, setCode] = useState<string>('');
 
@@ -41,11 +44,12 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
       </FullscreenModalDescription>
       <FullscreenModalContent
         {...keyboardShortcuts}
+        gap={2}
+        alignItems="center"
         sx={{ overflow: 'visible' }} // do not cut off the field when shaking
       >
         <TotpCodeField
           error={isSubmitted && !!totpError}
-          helperText={isSubmitted && totpError}
           onChange={(e) => {
             setCode(e.target.value);
             if (error && !isLoading) {
@@ -59,6 +63,18 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
             }
           }}
         />
+        {isSubmitted && totpError && (
+          <Stack direction="row" alignItems="center" gap={1}>
+            <FiAlertCircle size={20} color={theme.palette.error.main} />
+            <Typography
+              variant="subtitle1"
+              color="error.main"
+              textAlign="center"
+            >
+              {totpError}
+            </Typography>
+          </Stack>
+        )}
       </FullscreenModalContent>
       <FullscreenModalActions>
         <NavButton

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

@@ -0,0 +1,62 @@
+import {
+  FullscreenModal,
+  FullscreenModalContent,
+} from '@/components/FullscreenModal';
+import { Button, Stack, Typography, useTheme } from '@avalabs/k2-alpine';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FiAlertCircle } from 'react-icons/fi';
+
+interface VerifyGoBackModalProps {
+  isOpen: boolean;
+  onBack: () => void;
+  onCancel: () => void;
+}
+
+export const VerifyGoBackModal: FC<VerifyGoBackModalProps> = ({
+  isOpen,
+  onBack,
+  onCancel,
+}: VerifyGoBackModalProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <FullscreenModal onBack={onBack} open={isOpen} onClose={onCancel}>
+      <FullscreenModalContent>
+        <Stack
+          gap={2}
+          alignItems="center"
+          justifyContent="center"
+          flexGrow={1}
+          padding={0}
+          marginTop={-8}
+        >
+          <FiAlertCircle size={30} color={theme.palette.error.main} />
+          <Stack gap={1} maxWidth={393}>
+            <Typography variant="h7" color="error.main" textAlign="center">
+              {t('Do you want to go back?')}
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              color="error.main"
+              textAlign="center"
+            >
+              {t(
+                'Going back will take you to the beginning of the onboarding flow. You will need to re-verify the MFA you just set up before continuing with account creation.',
+              )}
+            </Typography>
+          </Stack>
+          <Stack direction="row" justifyContent="flex-end" gap={2}>
+            <Button variant="contained" color="secondary" onClick={onCancel}>
+              {t('Cancel')}
+            </Button>
+            <Button variant="contained" color="primary" onClick={onBack}>
+              {t('Go Back')}
+            </Button>
+          </Stack>
+        </Stack>
+      </FullscreenModalContent>
+    </FullscreenModal>
+  );
+};

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

@@ -97,6 +97,7 @@ export const SeedlessFidoSetupFlow: FC<SeedlessFidoSetupFlowProps> = ({
           isLoading={isLoading}
           onRetry={() => registerFidoKey(name)}
           onCancel={history.goBack}
+          error={error}
         />
       )}
       {step === 'verify' && (

packages/ui/src/hooks/useFidoErrorMessage.ts

@@ -15,6 +15,10 @@ export const useFidoErrorMessage = (code?: AuthErrorCode): string => {
     );
   }
 
+  if (code === AuthErrorCode.FidoConfigurationError) {
+    return t('The operation was not completed. Please try again.');
+  }
+
   if (code === AuthErrorCode.UnknownError) {
     return t('An unexpected error occurred. Please try again.');
   }

packages/ui/src/hooks/useTotpErrorMessage.ts

@@ -5,7 +5,7 @@ export const useTotpErrorMessage = (code?: AuthErrorCode): string => {
   const { t } = useTranslation();
 
   if (code === AuthErrorCode.InvalidTotpCode) {
-    return t('Invalid code. Please try again.');
+    return t('The code you entered is incorrect. Please try again');
   }
 
   if (code === AuthErrorCode.TotpVerificationError) {