Skip to content

Commit d4b3a09

Browse files
pixeleatepixeleate
committed
feat(next-gen): onboarding - seedless missing pieces
1 parent 00bb596 commit d4b3a09

File tree

7 files changed

+149
-48
lines changed

7 files changed

+149
-48
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@
226226
"Do you really want to save?": "Do you really want to save?",
227227
"Do you want to add Solana to your wallet?": "Do you want to add Solana to your wallet?",
228228
"Do you want to allow <b>{{dappUrl}}</b> to access your wallet?": "Do you want to allow <b>{{dappUrl}}</b> to access your wallet?",
229+
"Do you want to go back?": "Do you want to go back?",
229230
"Do you want to sign this message?": "Do you want to sign this message?",
230231
"Done": "Done",
231232
"Download Ledger Live to update": "Download Ledger Live to update",
@@ -313,7 +314,9 @@
313314
"Get free gas": "Get free gas",
314315
"Get signature": "Get signature",
315316
"Get started by adding crypto to your wallet": "Get started by adding crypto to your wallet",
317+
"Go Back": "Go Back",
316318
"Go to cross-chain transfer": "Go to cross-chain transfer",
319+
"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.",
317320
"Governance": "Governance",
318321
"Grant access": "Grant access",
319322
"Header name": "Header name",
@@ -364,7 +367,6 @@
364367
"Invalid Solana address": "Invalid Solana address",
365368
"Invalid amount": "Invalid amount",
366369
"Invalid code": "Invalid code",
367-
"Invalid code. Please try again.": "Invalid code. Please try again.",
368370
"Invalid params": "Invalid params",
369371
"Invalid password": "Invalid password",
370372
"Invalid password. Please try again.": "Invalid password. Please try again.",
@@ -676,11 +678,13 @@
676678
"The amount cannot be lower than the bridging fee": "The amount cannot be lower than the bridging fee",
677679
"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.",
678680
"The bridging fee is unknown": "The bridging fee is unknown",
681+
"The code you entered is incorrect. Please try again": "The code you entered is incorrect. Please try again",
679682
"The displayed token list might be incomplete.": "The displayed token list might be incomplete.",
680683
"The export process could not be completed. Please try again.": "The export process could not be completed. Please try again.",
681684
"The field is required": "The field is required",
682685
"The key you entered is invalid. Please try again": "The key you entered is invalid. Please try again",
683686
"The operation either timed out or was not allowed. Please try again.": "The operation either timed out or was not allowed. Please try again.",
687+
"The operation was not completed. Please try again.": "The operation was not completed. Please try again.",
684688
"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.",
685689
"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",
686690
"The transaction has been reverted": "The transaction has been reverted",

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

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { WalletType } from '@avalabs/types';
2-
import { useEffect } from 'react';
2+
import { useEffect, useState } from 'react';
33
import { Route, Switch, useHistory } from 'react-router-dom';
44

55
import { useOnboardingContext } from '@core/ui';
@@ -13,6 +13,7 @@ import {
1313
SelectAvatarScreen,
1414
} from '../../common-screens';
1515
import { SeedlessMfaLoginFlow, SeedlessMfaSetupFlow } from './subflows';
16+
import { VerifyGoBackModal } from './screens/VerifyGoBackModal';
1617

1718
const BASE_PATH = '/onboarding/seedless';
1819
const TOTAL_STEPS = 6;
@@ -22,6 +23,8 @@ export const SeedlessFlow = () => {
2223
const { setOnboardingWalletType, oidcToken, onboardingState } =
2324
useOnboardingContext();
2425

26+
const [isVerifyGoBackModalOpen, setIsVerifyGoBackModalOpen] = useState(false);
27+
2528
useEffect(() => {
2629
setOnboardingWalletType(WalletType.Seedless);
2730

@@ -37,49 +40,60 @@ export const SeedlessFlow = () => {
3740
}, [oidcToken, history, onboardingState.isOnBoarded]);
3841

3942
return (
40-
<FullscreenModal
41-
open
42-
withCoreLogo
43-
withAppInfo
44-
withLanguageSelector
45-
onBack={history.goBack}
46-
>
47-
<Switch>
48-
<Route path={`${BASE_PATH}/login`}>
49-
<SeedlessMfaLoginFlow
50-
nextScreenPath={`${BASE_PATH}/wallet-details`}
51-
/>
52-
</Route>
53-
<Route path={`${BASE_PATH}/setup`}>
54-
<SeedlessMfaSetupFlow
55-
nextScreenPath={`${BASE_PATH}/wallet-details`}
56-
/>
57-
</Route>
58-
<Route path={`${BASE_PATH}/wallet-details`}>
59-
<ProvideWalletDetailsScreen
60-
step={3}
61-
totalSteps={TOTAL_STEPS}
62-
onNext={() => history.push(`${BASE_PATH}/customize-core`)}
63-
/>
64-
</Route>
65-
<Route path={`${BASE_PATH}/customize-core`}>
66-
<CustomizeCore
67-
step={4}
68-
totalSteps={TOTAL_STEPS}
69-
onNext={() => history.push(`${BASE_PATH}/select-avatar`)}
70-
/>
71-
</Route>
72-
<Route path={`${BASE_PATH}/select-avatar`}>
73-
<SelectAvatarScreen
74-
step={5}
75-
totalSteps={TOTAL_STEPS}
76-
onNext={() => history.push(`${BASE_PATH}/enjoy-your-wallet`)}
77-
/>
78-
</Route>
79-
<Route path={`${BASE_PATH}/enjoy-your-wallet`}>
80-
<EnjoyYourWalletScreen />
81-
</Route>
82-
</Switch>
83-
</FullscreenModal>
43+
<>
44+
<FullscreenModal
45+
open
46+
withCoreLogo
47+
withAppInfo
48+
withLanguageSelector
49+
onBack={() => setIsVerifyGoBackModalOpen(true)}
50+
>
51+
<Switch>
52+
<Route path={`${BASE_PATH}/login`}>
53+
<SeedlessMfaLoginFlow
54+
nextScreenPath={`${BASE_PATH}/wallet-details`}
55+
/>
56+
</Route>
57+
<Route path={`${BASE_PATH}/setup`}>
58+
<SeedlessMfaSetupFlow
59+
nextScreenPath={`${BASE_PATH}/wallet-details`}
60+
/>
61+
</Route>
62+
<Route path={`${BASE_PATH}/wallet-details`}>
63+
<ProvideWalletDetailsScreen
64+
step={3}
65+
totalSteps={TOTAL_STEPS}
66+
onNext={() => history.push(`${BASE_PATH}/customize-core`)}
67+
/>
68+
</Route>
69+
<Route path={`${BASE_PATH}/customize-core`}>
70+
<CustomizeCore
71+
step={4}
72+
totalSteps={TOTAL_STEPS}
73+
onNext={() => history.push(`${BASE_PATH}/select-avatar`)}
74+
/>
75+
</Route>
76+
<Route path={`${BASE_PATH}/select-avatar`}>
77+
<SelectAvatarScreen
78+
step={5}
79+
totalSteps={TOTAL_STEPS}
80+
onNext={() => history.push(`${BASE_PATH}/enjoy-your-wallet`)}
81+
/>
82+
</Route>
83+
<Route path={`${BASE_PATH}/enjoy-your-wallet`}>
84+
<EnjoyYourWalletScreen />
85+
</Route>
86+
</Switch>
87+
</FullscreenModal>
88+
<VerifyGoBackModal
89+
isOpen={isVerifyGoBackModalOpen}
90+
onBack={() => {
91+
history.push('/onboarding');
92+
}}
93+
onCancel={() => {
94+
setIsVerifyGoBackModalOpen(false);
95+
}}
96+
/>
97+
</>
8498
);
8599
};

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
} from '@/components/FullscreenModal';
1313
import { TotpCodeField } from '@/components/TotpCodeField';
1414
import { NavButton } from '@/pages/Onboarding/components/NavButton';
15+
import { Stack, Typography, useTheme } from '@avalabs/k2-alpine';
16+
import { FiAlertCircle } from 'react-icons/fi';
1517

1618
type SeedlessVerifyWithTotpProps = {
1719
onSubmit: (code: string) => void;
@@ -24,6 +26,7 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
2426
isLoading,
2527
error,
2628
}) => {
29+
const theme = useTheme();
2730
const { t } = useTranslation();
2831
const [code, setCode] = useState<string>('');
2932

@@ -41,11 +44,12 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
4144
</FullscreenModalDescription>
4245
<FullscreenModalContent
4346
{...keyboardShortcuts}
47+
gap={2}
48+
alignItems="center"
4449
sx={{ overflow: 'visible' }} // do not cut off the field when shaking
4550
>
4651
<TotpCodeField
4752
error={isSubmitted && !!totpError}
48-
helperText={isSubmitted && totpError}
4953
onChange={(e) => {
5054
setCode(e.target.value);
5155
if (error && !isLoading) {
@@ -59,6 +63,18 @@ export const SeedlessVerifyWithTotp: FC<SeedlessVerifyWithTotpProps> = ({
5963
}
6064
}}
6165
/>
66+
{isSubmitted && totpError && (
67+
<Stack direction="row" alignItems="center" gap={1}>
68+
<FiAlertCircle size={20} color={theme.palette.error.main} />
69+
<Typography
70+
variant="subtitle1"
71+
color="error.main"
72+
textAlign="center"
73+
>
74+
{totpError}
75+
</Typography>
76+
</Stack>
77+
)}
6278
</FullscreenModalContent>
6379
<FullscreenModalActions>
6480
<NavButton

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {
2+
FullscreenModal,
3+
FullscreenModalContent,
4+
} from '@/components/FullscreenModal';
5+
import { Button, Stack, Typography, useTheme } from '@avalabs/k2-alpine';
6+
import { FC } from 'react';
7+
import { useTranslation } from 'react-i18next';
8+
import { FiAlertCircle } from 'react-icons/fi';
9+
10+
interface VerifyGoBackModalProps {
11+
isOpen: boolean;
12+
onBack: () => void;
13+
onCancel: () => void;
14+
}
15+
16+
export const VerifyGoBackModal: FC<VerifyGoBackModalProps> = ({
17+
isOpen,
18+
onBack,
19+
onCancel,
20+
}: VerifyGoBackModalProps) => {
21+
const theme = useTheme();
22+
const { t } = useTranslation();
23+
24+
return (
25+
<FullscreenModal onBack={onBack} open={isOpen} onClose={onCancel}>
26+
<FullscreenModalContent>
27+
<Stack
28+
gap={2}
29+
alignItems="center"
30+
justifyContent="center"
31+
flexGrow={1}
32+
padding={0}
33+
marginTop={-8}
34+
>
35+
<FiAlertCircle size={30} color={theme.palette.error.main} />
36+
<Stack gap={1} maxWidth={393}>
37+
<Typography variant="h7" color="error.main" textAlign="center">
38+
{t('Do you want to go back?')}
39+
</Typography>
40+
<Typography
41+
variant="subtitle1"
42+
color="error.main"
43+
textAlign="center"
44+
>
45+
{t(
46+
'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.',
47+
)}
48+
</Typography>
49+
</Stack>
50+
<Stack direction="row" justifyContent="flex-end" gap={2}>
51+
<Button variant="contained" color="secondary" onClick={onCancel}>
52+
{t('Cancel')}
53+
</Button>
54+
<Button variant="contained" color="primary" onClick={onBack}>
55+
{t('Go Back')}
56+
</Button>
57+
</Stack>
58+
</Stack>
59+
</FullscreenModalContent>
60+
</FullscreenModal>
61+
);
62+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export const SeedlessFidoSetupFlow: FC<SeedlessFidoSetupFlowProps> = ({
9797
isLoading={isLoading}
9898
onRetry={() => registerFidoKey(name)}
9999
onCancel={history.goBack}
100+
error={error}
100101
/>
101102
)}
102103
{step === 'verify' && (

‎packages/ui/src/hooks/useFidoErrorMessage.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export const useFidoErrorMessage = (code?: AuthErrorCode): string => {
1515
);
1616
}
1717

18+
if (code === AuthErrorCode.FidoConfigurationError) {
19+
return t('The operation was not completed. Please try again.');
20+
}
21+
1822
if (code === AuthErrorCode.UnknownError) {
1923
return t('An unexpected error occurred. Please try again.');
2024
}

‎packages/ui/src/hooks/useTotpErrorMessage.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export const useTotpErrorMessage = (code?: AuthErrorCode): string => {
55
const { t } = useTranslation();
66

77
if (code === AuthErrorCode.InvalidTotpCode) {
8-
return t('Invalid code. Please try again.');
8+
return t('The code you entered is incorrect. Please try again');
99
}
1010

1111
if (code === AuthErrorCode.TotpVerificationError) {

0 commit comments

Comments
 (0)