From 377c0ae290b3f79d6ea3f768670e35451bf39dea Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 16:28:49 +1100 Subject: [PATCH 01/41] Fixed: moving strucutre --- .../AddWelcome/AddRegister/PickUsername.tsx | 261 ----------------- src/ui/views/AddressImport/PickUsername.tsx | 255 ----------------- .../AddWelcome/AddRegister/AllSet.tsx | 0 .../AddWelcome/AddRegister}/GoogleBackup.tsx | 2 +- .../AddWelcome/AddRegister/RecoveryPhrase.tsx | 2 +- .../AddWelcome/AddRegister/RegisterHeader.tsx | 0 .../AddWelcome/AddRegister/RepeatPhrase.tsx | 0 .../AddWelcome/AddRegister/SetPassword.tsx | 6 +- .../AddWelcome/AddRegister/index.tsx | 4 +- .../AddressImport}/GoogleBackup.tsx | 2 +- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddWelcome/AddressImport/ImportPager.tsx | 4 +- .../AddressImport/RecoverPassword.tsx | 2 +- .../AddWelcome/AddressImport/SetPassword.tsx | 6 +- .../importComponent/Googledrive.tsx | 2 +- .../importComponent/JsonImport.tsx | 11 +- .../importComponent/KeyImport.tsx | 4 +- .../importComponent/SeedPhrase.tsx | 12 +- .../AddWelcome/AddressImport/index.tsx | 4 +- .../AddWelcome/ProxySync/ProxyQr.tsx | 0 .../AddWelcome/ProxySync/RegisterHeader.tsx | 0 .../AddWelcome/ProxySync/SetPassword.tsx | 4 +- .../AddWelcome/ProxySync/index.tsx | 2 +- .../AddWelcome/Sync/RegisterHeader.tsx | 0 .../AddWelcome/Sync/SetPassword.tsx | 4 +- .../AddWelcome/Sync/SyncQr.tsx | 0 .../{ => MainPages}/AddWelcome/Sync/index.tsx | 2 +- .../{ => MainPages}/AddWelcome/index.tsx | 11 +- .../AddressImport}/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 6 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 4 +- .../AddressImport/RecoverPassword.tsx | 4 +- .../AddressImport/SetPassword.tsx | 6 +- .../importComponent/Googledrive.tsx | 2 +- .../importComponent/JsonImport.tsx | 5 +- .../importComponent/KeyImport.tsx | 4 +- .../importComponent/SeedPhrase.tsx | 6 +- .../{ => MainPages}/AddressImport/index.tsx | 4 +- .../Forgot/Recover/RecoverPage.tsx | 2 +- .../Forgot/Recover/ShowKey.tsx | 4 +- .../{ => MainPages}/Forgot/Recover/index.tsx | 2 +- .../Forgot/Reset/ResetPage.tsx | 2 +- .../{ => MainPages}/Forgot/Reset/index.tsx | 2 +- src/ui/views/{ => MainPages}/Forgot/index.tsx | 8 +- .../views/{ => MainPages}/Forgot/stepBox.tsx | 0 .../Import/GoogleImport/DecryptWallet.tsx | 2 +- .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 6 +- .../Import}/GoogleImport/RecoveryPhrase.tsx | 0 .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../{ => MainPages}/Import/ImportPager.tsx | 4 +- .../Import/ImportRecoveryPhrase.tsx | 4 +- .../Import/RecoverPassword.tsx | 4 +- .../RecoverRegister/AllSet.tsx | 0 .../RecoverRegister/RecoveryPhrase.tsx | 2 +- .../RecoverRegister/RegisterHeader.tsx | 0 .../RecoverRegister/SetPassword.tsx | 6 +- .../{ => MainPages}/RecoverRegister/index.tsx | 7 +- .../views/{ => MainPages}/Register/AllSet.tsx | 0 .../Register}/GoogleBackup.tsx | 0 .../Register}/PickUsername.tsx | 2 +- .../Register/RecoveryPhrase.tsx | 2 +- .../Register/RegisterHeader.tsx | 0 .../Register/RegisterPager.tsx | 2 +- .../{ => MainPages}/Register/RepeatPhrase.tsx | 0 .../{ => MainPages}/Register/SetPassword.tsx | 8 +- .../{ => MainPages}/Reset/RecoverPassword.tsx | 4 +- .../Reset/ResetRecoveryPhrase.tsx | 4 +- src/ui/views/{ => MainPages}/Reset/index.tsx | 4 +- src/ui/views/{ => MainPages}/Sync/AllSet.tsx | 0 .../views/{ => MainPages}/Sync/Namespace.tsx | 0 .../{ => MainPages}/Sync/RegisterHeader.tsx | 0 .../{ => MainPages}/Sync/SetPassword.tsx | 4 +- src/ui/views/{ => MainPages}/Sync/SyncQr.tsx | 0 src/ui/views/{ => MainPages}/Sync/index.tsx | 2 +- .../{ => MainPages}/WelcomePage/index.tsx | 10 +- src/ui/views/MainRoute.tsx | 28 +- src/ui/views/RecoverRegister/PickUsername.tsx | 233 ---------------- src/ui/views/Register/PickUsername.tsx | 264 ------------------ 89 files changed, 132 insertions(+), 1149 deletions(-) delete mode 100644 src/ui/views/AddWelcome/AddRegister/PickUsername.tsx delete mode 100644 src/ui/views/AddressImport/PickUsername.tsx rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/AllSet.tsx (100%) rename src/ui/views/{AddressImport => MainPages/AddWelcome/AddRegister}/GoogleBackup.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RepeatPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/SetPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/index.tsx (97%) rename src/ui/views/{Register => MainPages/AddWelcome/AddressImport}/GoogleBackup.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/{Import => MainPages/AddWelcome/AddressImport}/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/ImportPager.tsx (96%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/RecoverPassword.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/SetPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/importComponent/Googledrive.tsx (97%) rename src/ui/views/{ => MainPages/AddWelcome}/AddressImport/importComponent/JsonImport.tsx (93%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/importComponent/KeyImport.tsx (94%) rename src/ui/views/{ => MainPages/AddWelcome}/AddressImport/importComponent/SeedPhrase.tsx (89%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/SyncQr.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/index.tsx (95%) rename src/ui/views/{AddWelcome/AddRegister => MainPages/AddressImport}/GoogleBackup.tsx (100%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/ImportPager.tsx (97%) rename src/ui/views/{ => MainPages}/AddressImport/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/importComponent/Googledrive.tsx (97%) rename src/ui/views/{AddWelcome => MainPages}/AddressImport/importComponent/JsonImport.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/importComponent/KeyImport.tsx (95%) rename src/ui/views/{AddWelcome => MainPages}/AddressImport/importComponent/SeedPhrase.tsx (96%) rename src/ui/views/{ => MainPages}/AddressImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/RecoverPage.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/ShowKey.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Reset/ResetPage.tsx (97%) rename src/ui/views/{ => MainPages}/Forgot/Reset/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/index.tsx (94%) rename src/ui/views/{ => MainPages}/Forgot/stepBox.tsx (100%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Import}/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/{ => MainPages}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Import/ImportPager.tsx (97%) rename src/ui/views/{ => MainPages}/Import/ImportRecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/Import/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/AllSet.tsx (100%) rename src/ui/views/{ => MainPages}/RecoverRegister/RecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/RecoverRegister/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/index.tsx (96%) rename src/ui/views/{ => MainPages}/Register/AllSet.tsx (100%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Register}/GoogleBackup.tsx (100%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Register}/PickUsername.tsx (99%) rename src/ui/views/{ => MainPages}/Register/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/Register/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/Register/RegisterPager.tsx (98%) rename src/ui/views/{ => MainPages}/Register/RepeatPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Register/SetPassword.tsx (97%) rename src/ui/views/{ => MainPages}/Reset/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/Reset/ResetRecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/Reset/index.tsx (97%) rename src/ui/views/{ => MainPages}/Sync/AllSet.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/Namespace.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/Sync/SyncQr.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/index.tsx (97%) rename src/ui/views/{ => MainPages}/WelcomePage/index.tsx (97%) delete mode 100644 src/ui/views/RecoverRegister/PickUsername.tsx delete mode 100644 src/ui/views/Register/PickUsername.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx deleted file mode 100644 index a38cddbf..00000000 --- a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import EmailIcon from '../../../assets/alternate-email.svg'; - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const usernameError = (errorMsg) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - - ); - const usernameCorrect = useMemo( - () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - - ), - [] - ); - const usernameLoading = () => ( - - - {chrome.i18n.getMessage('Checking')} - - ); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(usernameError(message)); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }; - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/AddressImport/PickUsername.tsx b/src/ui/views/AddressImport/PickUsername.tsx deleted file mode 100644 index 04e2178c..00000000 --- a/src/ui/views/AddressImport/PickUsername.tsx +++ /dev/null @@ -1,255 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../components/iconfont/IconClose'; -import EmailIcon from '../../assets/alternate-email.svg'; - -const useStyles = makeStyles((_theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const UsernameError = ({ errorMsg }: { errorMsg: string }) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - -); - -const usernameCorrect = () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - -); -const usernameLoading = () => ( - - - {chrome.i18n.getMessage('Checking')} - -); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }; - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/AddWelcome/AddRegister/AllSet.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/AllSet.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx diff --git a/src/ui/views/AddressImport/GoogleBackup.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx similarity index 98% rename from src/ui/views/AddressImport/GoogleBackup.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx index 26911a04..c7cf5362 100644 --- a/src/ui/views/AddressImport/GoogleBackup.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx index 4c5cd4b1..341b1e09 100644 --- a/src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/AddWelcome/AddRegister/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/RegisterHeader.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/RepeatPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/RepeatPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx index 3f765398..c983f098 100644 --- a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx @@ -26,9 +26,9 @@ import { type AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; +import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/AddWelcome/AddRegister/index.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddRegister/index.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx index 373c4f38..8d0f3b93 100644 --- a/src/ui/views/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx @@ -10,11 +10,11 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from './PickUsername'; +import PickUsername from '../../Register/PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; import RegisterHeader from './RegisterHeader'; import RepeatPhrase from './RepeatPhrase'; diff --git a/src/ui/views/Register/GoogleBackup.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx similarity index 98% rename from src/ui/views/Register/GoogleBackup.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx index 26911a04..c7cf5362 100644 --- a/src/ui/views/Register/GoogleBackup.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx index 723901e5..87130123 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx index 0276fb36..77f95d44 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx index 55ec2c12..02ee6e06 100644 --- a/src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx index eab1e689..85dd7c9b 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -9,7 +9,7 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import AllSet from '../../../Register/AllSet'; import RegisterHeader from '../../../Register/RegisterHeader'; diff --git a/src/ui/views/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx similarity index 96% rename from src/ui/views/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index bd0bfd5d..ed33e6bb 100644 --- a/src/ui/views/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -6,9 +6,9 @@ import KeyImport from './importComponent/KeyImport'; import JsonImport from './importComponent/JsonImport'; import Googledrive from './importComponent/Googledrive'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; +import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; import { useWallet } from 'ui/utils'; import * as bip39 from 'bip39'; import { storage } from '@/background/webapi'; diff --git a/src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx similarity index 99% rename from src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx index 902966a4..dd32f592 100644 --- a/src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx @@ -19,7 +19,7 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx index 18e3f49e..dc74e8d3 100644 --- a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx @@ -26,9 +26,9 @@ import { AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; +import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx index 5cc61168..89380d0c 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx @@ -1,5 +1,5 @@ import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; diff --git a/src/ui/views/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx similarity index 93% rename from src/ui/views/AddressImport/importComponent/JsonImport.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx index 09b8499f..b9470170 100644 --- a/src/ui/views/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx @@ -1,6 +1,6 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; import { Box, @@ -14,8 +14,8 @@ import { import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; import { LLSpinner } from 'ui/FRWComponent'; -import { jsonToKey } from '../../../utils/modules/passkey'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../../FRWComponent/PopupModal/errorModel'; +import { jsonToKey } from '../../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ form: { @@ -96,7 +96,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { setErrorMessage('Password incorrect'); return; } - const pkHex = Buffer.from(pk!.data()).toString('hex'); + const pkHex = Buffer.from(pk.data()).toString('hex'); const result = await findAddressWithPK(pkHex, address); console.log(result); setPk(pkHex); @@ -120,6 +120,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { } const result = hasJsonStructure(event); setIsInvalid(!result); + setErrorMessage(!result ? 'Not a valid json input' : ''); return result; }; diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx similarity index 94% rename from src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx index 5111453a..7b3fe8b9 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx @@ -1,6 +1,6 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; diff --git a/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx similarity index 89% rename from src/ui/views/AddressImport/importComponent/SeedPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx index dc6e4748..ebdd3359 100644 --- a/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,11 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; -import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { LLSpinner } from 'ui/FRWComponent'; -import KeyPathInput from '../../../FRWComponent/KeyPathInputs'; +import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; const useStyles = makeStyles((theme) => ({ form: { @@ -42,15 +42,14 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { setmnemonic(seed); const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - console.log('address ', address); const result = await findAddressWithSeed(seed, address, true); if (!result) { onOpen(); return; } + const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.SEED_PHRASE, mnemonic: seed })); onImport(accounts); } finally { @@ -74,7 +73,6 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { /> - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/Register/PickUsername.tsx b/src/ui/views/Register/PickUsername.tsx deleted file mode 100644 index e48e903a..00000000 --- a/src/ui/views/Register/PickUsername.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../components/iconfont/IconClose'; -import EmailIcon from '../../assets/alternate-email.svg'; - -const useStyles = makeStyles((_theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const usernameError = (errorMsg) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - - ); - const usernameCorrect = useMemo( - () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - - ), - [] - ); - const usernameLoading = useMemo( - () => ( - - - {chrome.i18n.getMessage('Checking')} - - ), - [] - ); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(usernameError(message)); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = useCallback(() => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }, [isLoading, usernameValid]); - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; From d1609a7525b6157e54feb883168fabbe04239da4 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 16:29:47 +1100 Subject: [PATCH 02/41] fixed: turnback on mix panel --- src/ui/views/MainPages/Register/SetPassword.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/views/MainPages/Register/SetPassword.tsx b/src/ui/views/MainPages/Register/SetPassword.tsx index 5e72fa41..85ee8172 100644 --- a/src/ui/views/MainPages/Register/SetPassword.tsx +++ b/src/ui/views/MainPages/Register/SetPassword.tsx @@ -193,7 +193,7 @@ const SetPassword = ({ handleClick, mnemonic, username, setExPassword }) => { await saveIndex(username); const accountKey = getAccountKey(mnemonic); // track the time until account_created is called - // mixpanelBrowserService.time('account_created'); + mixpanelBrowserService.time('account_created'); wallet.openapi .register(accountKey, username) .then((response) => { From b36d7d03bc58ea0afa9bc9e38dc06fb9e69952a7 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 18:34:33 +1100 Subject: [PATCH 03/41] fixed: static component --- src/ui/FRWComponent/MainPages/AllSet.tsx | 101 ++++++++ .../MainPages}/PickUsername.tsx | 4 +- .../MainPages}/RegisterHeader.tsx | 43 ++-- .../MainPages}/RepeatPhrase.tsx | 0 src/ui/FRWComponent/MainPages/index.ts | 4 + .../AddWelcome/AddRegister/AllSet.tsx | 56 ----- .../AddWelcome/AddRegister/RegisterHeader.tsx | 63 ----- .../AddWelcome/AddRegister/index.tsx | 7 +- .../AddressImport/GoogleImport/index.tsx | 3 +- .../AddWelcome/AddressImport/ImportPager.tsx | 22 +- .../importComponent/Googledrive.tsx | 9 +- .../importComponent/JsonImport.tsx | 15 +- .../importComponent/KeyImport.tsx | 9 +- .../importComponent/SeedPhrase.tsx | 9 +- .../AddWelcome/AddressImport/index.tsx | 4 +- .../AddWelcome/ProxySync/RegisterHeader.tsx | 63 ----- .../MainPages/AddWelcome/ProxySync/index.tsx | 6 +- .../AddWelcome/Sync/RegisterHeader.tsx | 63 ----- .../views/MainPages/AddWelcome/Sync/index.tsx | 6 +- src/ui/views/MainPages/AddWelcome/index.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 3 +- .../MainPages/AddressImport/ImportPager.tsx | 19 +- .../importComponent/Googledrive.tsx | 9 +- .../importComponent/JsonImport.tsx | 17 +- .../importComponent/KeyImport.tsx | 8 +- .../importComponent/SeedPhrase.tsx | 9 +- .../views/MainPages/AddressImport/index.tsx | 4 +- .../MainPages/Forgot/Recover/ShowKey.tsx | 2 +- .../views/MainPages/Forgot/Recover/index.tsx | 2 +- .../MainPages/Forgot/Reset/ResetPage.tsx | 2 +- src/ui/views/MainPages/Forgot/Reset/index.tsx | 2 +- src/ui/views/MainPages/Forgot/index.tsx | 2 +- .../MainPages/Import/GoogleImport/index.tsx | 5 +- src/ui/views/MainPages/Import/ImportPager.tsx | 5 +- .../MainPages/RecoverRegister/AllSet.tsx | 48 ---- .../RecoverRegister/RegisterHeader.tsx | 59 ----- .../views/MainPages/RecoverRegister/index.tsx | 6 +- src/ui/views/MainPages/Register/AllSet.tsx | 71 ------ .../views/MainPages/Register/RepeatPhrase.tsx | 230 ------------------ .../views/MainPages/Register/SetPassword.tsx | 2 +- .../Register/{RegisterPager.tsx => index.tsx} | 11 +- src/ui/views/MainPages/Reset/index.tsx | 5 +- src/ui/views/MainPages/Sync/AllSet.tsx | 48 ---- src/ui/views/MainPages/Sync/index.tsx | 6 +- src/ui/views/MainPages/WelcomePage/index.tsx | 3 +- src/ui/views/MainRoute.tsx | 4 +- 46 files changed, 233 insertions(+), 838 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/AllSet.tsx rename src/ui/{views/MainPages/Register => FRWComponent/MainPages}/PickUsername.tsx (98%) rename src/ui/{views/MainPages/Register => FRWComponent/MainPages}/RegisterHeader.tsx (59%) rename src/ui/{views/MainPages/AddWelcome/AddRegister => FRWComponent/MainPages}/RepeatPhrase.tsx (100%) create mode 100644 src/ui/FRWComponent/MainPages/index.ts delete mode 100644 src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/RecoverRegister/AllSet.tsx delete mode 100644 src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/Register/AllSet.tsx delete mode 100644 src/ui/views/MainPages/Register/RepeatPhrase.tsx rename src/ui/views/MainPages/Register/{RegisterPager.tsx => index.tsx} (94%) delete mode 100644 src/ui/views/MainPages/Sync/AllSet.tsx diff --git a/src/ui/FRWComponent/MainPages/AllSet.tsx b/src/ui/FRWComponent/MainPages/AllSet.tsx new file mode 100644 index 00000000..74d8abab --- /dev/null +++ b/src/ui/FRWComponent/MainPages/AllSet.tsx @@ -0,0 +1,101 @@ +import { Button, Typography, CardMedia } from '@mui/material'; +import { Box } from '@mui/system'; +import React, { useCallback, useEffect } from 'react'; + +import { storage } from 'background/webapi'; +import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; +import { useWallet, mixpanelBrowserService } from 'ui/utils'; + +interface AllSetProps { + handleClick: () => void; + variant?: 'register' | 'recover' | 'sync' | 'add'; +} + +const AllSet = ({ handleClick, variant = 'register' }: AllSetProps) => { + const wallet = useWallet(); + + const loadScript = useCallback(async () => { + if (variant === 'register') { + await wallet.getCadenceScripts(); + } + }, [wallet, variant]); + + const trackAccountRecovered = useCallback(async () => { + if (variant === 'register') { + mixpanelBrowserService.track('account_recovered', { + address: (await wallet.getMainAddress()) || '', + mechanism: 'multi-backup', + methods: [], + }); + } + }, [wallet, variant]); + + useEffect(() => { + const removeTempPass = () => { + if (variant === 'add') { + storage.set('tempPassword', ''); + } + }; + + if (variant === 'register') { + loadScript().then(() => { + trackAccountRecovered(); + }); + } else if (variant === 'add') { + removeTempPass(); + } + }, [variant, loadScript, trackAccountRecovered]); + + const getMessage = () => { + if (variant === 'recover') { + return { + title: chrome.i18n.getMessage('You__are') + ' ' + chrome.i18n.getMessage('all__set'), + subtitle: chrome.i18n.getMessage('Start__exploring__with__Lilico__now'), + }; + } + return { + title: chrome.i18n.getMessage('You__are') + chrome.i18n.getMessage('Allset'), + subtitle: chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now'), + }; + }; + + return ( + <> + + + + {getMessage().title.split(' ')[0]} + + {getMessage().title.split(' ')[1]} + + + + {getMessage().subtitle} + + + + + + + ); +}; + +export default AllSet; diff --git a/src/ui/views/MainPages/Register/PickUsername.tsx b/src/ui/FRWComponent/MainPages/PickUsername.tsx similarity index 98% rename from src/ui/views/MainPages/Register/PickUsername.tsx rename to src/ui/FRWComponent/MainPages/PickUsername.tsx index 8d8a5817..7e03a6ef 100644 --- a/src/ui/views/MainPages/Register/PickUsername.tsx +++ b/src/ui/FRWComponent/MainPages/PickUsername.tsx @@ -15,8 +15,8 @@ import EmailIcon from '@/ui/assets/alternate-email.svg'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../components/iconfont/IconClose'; const useStyles = makeStyles((_theme) => ({ customInputLabel: { diff --git a/src/ui/views/MainPages/Register/RegisterHeader.tsx b/src/ui/FRWComponent/MainPages/RegisterHeader.tsx similarity index 59% rename from src/ui/views/MainPages/Register/RegisterHeader.tsx rename to src/ui/FRWComponent/MainPages/RegisterHeader.tsx index fb499d7f..b5314494 100644 --- a/src/ui/views/MainPages/Register/RegisterHeader.tsx +++ b/src/ui/FRWComponent/MainPages/RegisterHeader.tsx @@ -1,9 +1,14 @@ import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; +import PhoneAndroidRoundedIcon from '@mui/icons-material/PhoneAndroidRounded'; import { Button, Typography } from '@mui/material'; import { Box } from '@mui/system'; import React from 'react'; -const RegisterHeader = () => { +interface RegisterHeaderProps { + showAppButton?: boolean; +} + +const RegisterHeader = ({ showAppButton = false }: RegisterHeaderProps) => { return ( <> { pt: '40px', }} > - {/* */} + {showAppButton && ( + + )}
diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx b/src/ui/FRWComponent/MainPages/RepeatPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx rename to src/ui/FRWComponent/MainPages/RepeatPhrase.tsx diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/MainPages/index.ts new file mode 100644 index 00000000..9a681cd7 --- /dev/null +++ b/src/ui/FRWComponent/MainPages/index.ts @@ -0,0 +1,4 @@ +export { default as AllSet } from './AllSet'; +export { default as PickUsername } from './PickUsername'; +export { default as RepeatPhrase } from './RepeatPhrase'; +export { default as RegisterHeader } from './RegisterHeader'; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx deleted file mode 100644 index b4bea0e9..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useEffect } from 'react'; - -import { storage } from 'background/webapi'; -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - const removeTempPass = () => { - storage.set('tempPassword', ''); - }; - - useEffect(() => { - removeTempPass(); - }, []); - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx index 8d0f3b93..f87e764b 100644 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx @@ -6,18 +6,15 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from '../../Register/PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; -import RegisterHeader from './RegisterHeader'; -import RepeatPhrase from './RepeatPhrase'; import SetPassword from './SetPassword'; enum Direction { @@ -107,7 +104,7 @@ const AddRegister = () => { /> ); case 5: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx index 85dd7c9b..4c5ce087 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -5,13 +5,12 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../../Register/AllSet'; -import RegisterHeader from '../../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index ed33e6bb..eac3b957 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -1,18 +1,18 @@ -import { useEffect, useState, useContext } from 'react'; -import React from 'react'; import { Box, Tabs, Tab, Typography } from '@mui/material'; -import SeedPhraseImport from './importComponent/SeedPhrase'; -import KeyImport from './importComponent/KeyImport'; -import JsonImport from './importComponent/JsonImport'; -import Googledrive from './importComponent/Googledrive'; +import * as bip39 from 'bip39'; +import React, { useEffect, useState, useContext } from 'react'; +import { Presets } from 'react-component-transition'; -import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; +import { storage } from '@/background/webapi'; +import { useWallet } from 'ui/utils'; import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import { useWallet } from 'ui/utils'; -import * as bip39 from 'bip39'; -import { storage } from '@/background/webapi'; -import { Presets } from 'react-component-transition'; +import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; + +import Googledrive from './importComponent/Googledrive'; +import JsonImport from './importComponent/JsonImport'; +import KeyImport from './importComponent/KeyImport'; +import SeedPhraseImport from './importComponent/SeedPhrase'; function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx index 89380d0c..873ca549 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; +import { useHistory } from 'react-router-dom'; + import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import { useHistory } from 'react-router-dom'; + +import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx index b9470170..e0f1dd6b 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx @@ -1,7 +1,4 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Box, Button, @@ -11,10 +8,14 @@ import { TextareaAutosize, InputAdornment, } from '@mui/material'; -import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import ErrorModel from '../../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; import { jsonToKey } from '../../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ @@ -92,7 +93,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const password = e.target[2].value; const address = e.target[5].value; const pk = await jsonToKey(keystore, password); - if (pk == null) { + if (pk === null) { setErrorMessage('Password incorrect'); return; } @@ -180,7 +181,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - {errorMesssage != '' && ( + {errorMesssage !== '' && ( { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx index 7b3fe8b9..aadcfe1c 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; + const useStyles = makeStyles((theme) => ({ form: { width: '100%', // Fix full width diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx index ebdd3359..622169d3 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx index 34faabe8..a0be5dde 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx @@ -4,18 +4,16 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import GoogleBackup from './GoogleBackup'; import ImportPager from './ImportPager'; -import PickUsername from '../../Register/PickUsername'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx index e51424c2..228ca5f1 100644 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../AddRegister/AllSet'; -import RegisterHeader from '../AddRegister/RegisterHeader'; import ProxyQr from './ProxyQr'; import SetPassword from './SetPassword'; @@ -93,7 +91,7 @@ const ProxySync = () => { /> ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx b/src/ui/views/MainPages/AddWelcome/Sync/index.tsx index f0960110..d4f31725 100644 --- a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/Sync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../AddRegister/AllSet'; -import RegisterHeader from '../AddRegister/RegisterHeader'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -91,7 +89,7 @@ const Sync = () => { /> ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/MainPages/AddWelcome/index.tsx index b0fad79c..821ff023 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/index.tsx @@ -8,7 +8,7 @@ import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import outside from '@/ui/FRWAssets/svg/importoutside.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const AddWelcome = () => { return ( diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx index d26babed..731ed764 100644 --- a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx @@ -5,11 +5,10 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 7913f5fe..98e4e481 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -1,15 +1,16 @@ -import { useEffect, useState, useContext } from 'react'; -import React from 'react'; import { Box, Tabs, Tab, Typography } from '@mui/material'; -import SeedPhraseImport from './importComponent/SeedPhrase'; -import KeyImport from './importComponent/KeyImport'; -import JsonImport from './importComponent/JsonImport'; -import Googledrive from './importComponent/Googledrive'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; +import React, { useEffect, useState, useContext } from 'react'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; -import { useWallet } from 'ui/utils'; import { storage } from '@/background/webapi'; +import { useWallet } from 'ui/utils'; + +import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; + +import Googledrive from './importComponent/Googledrive'; +import JsonImport from './importComponent/JsonImport'; +import KeyImport from './importComponent/KeyImport'; +import SeedPhraseImport from './importComponent/SeedPhrase'; function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx index 1092d267..d0cf7b39 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; +import { useHistory } from 'react-router-dom'; + import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import { useHistory } from 'react-router-dom'; + +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx index 137001ca..09500eeb 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx @@ -1,7 +1,4 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import React from 'react'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Box, Button, @@ -11,11 +8,15 @@ import { TextareaAutosize, InputAdornment, } from '@mui/material'; -import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; -import { jsonToKey } from '../../../../utils/modules/passkey'; + import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; +import { jsonToKey } from '../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ form: { @@ -92,7 +93,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const password = e.target[2].value; const address = e.target[5].value; const pk = await jsonToKey(keystore, password); - if (pk == null) { + if (pk === null) { setErrorMessage('Password incorrect'); return; } @@ -179,7 +180,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - {errorMesssage != '' && ( + {errorMesssage !== '' && ( { diff --git a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx index fc2e3477..5e450670 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx @@ -1,9 +1,9 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '@/ui/utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; import { LLSpinner } from 'ui/FRWComponent'; const useStyles = makeStyles((theme) => ({ diff --git a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx index 164aa672..d095031b 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddressImport/index.tsx b/src/ui/views/MainPages/AddressImport/index.tsx index 481d202d..9c2cc70a 100644 --- a/src/ui/views/MainPages/AddressImport/index.tsx +++ b/src/ui/views/MainPages/AddressImport/index.tsx @@ -4,16 +4,14 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import ImportPager from './ImportPager'; -import PickUsername from '../Register/PickUsername'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; diff --git a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx b/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx index 251f7186..75e2cbba 100644 --- a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx +++ b/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx @@ -4,10 +4,10 @@ import { Button, Typography, IconButton } from '@mui/material'; import { Box } from '@mui/system'; import React, { useState } from 'react'; +import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import { useWallet } from 'ui/utils'; import IconCopy from '../../../../../components/iconfont/IconCopy'; -import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; const ShowKey = ({ handleClick, mnemonic }) => { const usewallet = useWallet(); diff --git a/src/ui/views/MainPages/Forgot/Recover/index.tsx b/src/ui/views/MainPages/Forgot/Recover/index.tsx index 24e4bf03..e7a25549 100644 --- a/src/ui/views/MainPages/Forgot/Recover/index.tsx +++ b/src/ui/views/MainPages/Forgot/Recover/index.tsx @@ -3,13 +3,13 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import RegisterHeader from '../../Register/RegisterHeader'; import RecoverPage from './RecoverPage'; import ShowKey from './ShowKey'; diff --git a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx b/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx index 08b50766..8068d388 100644 --- a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx +++ b/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx @@ -2,10 +2,10 @@ import { Typography, Box, Drawer, Stack } from '@mui/material'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; +import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import { LLPrimaryButton, LLSecondaryButton, LLWarningButton } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import StepBox from '../stepBox'; interface AddOrEditAddressProps { diff --git a/src/ui/views/MainPages/Forgot/Reset/index.tsx b/src/ui/views/MainPages/Forgot/Reset/index.tsx index 7aa31d5b..4f9f4417 100644 --- a/src/ui/views/MainPages/Forgot/Reset/index.tsx +++ b/src/ui/views/MainPages/Forgot/Reset/index.tsx @@ -3,13 +3,13 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import RegisterHeader from '../../Register/RegisterHeader'; import ResetPage from './ResetPage'; diff --git a/src/ui/views/MainPages/Forgot/index.tsx b/src/ui/views/MainPages/Forgot/index.tsx index 56f94b43..3ae53a25 100644 --- a/src/ui/views/MainPages/Forgot/index.tsx +++ b/src/ui/views/MainPages/Forgot/index.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import recover from '@/ui/FRWAssets/svg/recover.svg'; import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const Forgot = () => { return ( diff --git a/src/ui/views/MainPages/Import/GoogleImport/index.tsx b/src/ui/views/MainPages/Import/GoogleImport/index.tsx index f716cce3..e267ab69 100644 --- a/src/ui/views/MainPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/Import/GoogleImport/index.tsx @@ -5,12 +5,11 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; @@ -92,7 +91,7 @@ const GoogleImport = () => { /> ); case 4: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/Import/ImportPager.tsx b/src/ui/views/MainPages/Import/ImportPager.tsx index fa96ce40..9d555fea 100644 --- a/src/ui/views/MainPages/Import/ImportPager.tsx +++ b/src/ui/views/MainPages/Import/ImportPager.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; @@ -11,8 +12,6 @@ import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import ImportRecoveryPhrase from './ImportRecoveryPhrase'; import RecoverPassword from './RecoverPassword'; @@ -100,7 +99,7 @@ const ImportPager = () => { ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/RecoverRegister/AllSet.tsx b/src/ui/views/MainPages/RecoverRegister/AllSet.tsx deleted file mode 100644 index 212b3055..00000000 --- a/src/ui/views/MainPages/RecoverRegister/AllSet.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - return ( - <> - - - : - - {chrome.i18n.getMessage('You__are') + ' '} - - {chrome.i18n.getMessage('all__set')} - - - - {chrome.i18n.getMessage('Start__exploring__with__Lilico__now')} - - {/* */} - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx b/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx deleted file mode 100644 index ebb9631a..00000000 --- a/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import PhoneAndroidRoundedIcon from '@mui/icons-material/PhoneAndroidRounded'; -import { Button } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; -const RegisterHeader = () => { - return ( - <> - - - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/RecoverRegister/index.tsx b/src/ui/views/MainPages/RecoverRegister/index.tsx index 5fb7671d..17c20703 100644 --- a/src/ui/views/MainPages/RecoverRegister/index.tsx +++ b/src/ui/views/MainPages/RecoverRegister/index.tsx @@ -7,14 +7,12 @@ import { useHistory } from 'react-router-dom'; import { storage } from '@/background/webapi'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, AllSet } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import lilicoIcon from '../../../../../_raw/images/icon-48.png'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import PickUsername from '../Register/PickUsername'; - -import AllSet from './AllSet'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; @@ -75,7 +73,7 @@ const RecoverRegister = () => { case 2: return ; case 3: - return ; + return ; default: return ; } diff --git a/src/ui/views/MainPages/Register/AllSet.tsx b/src/ui/views/MainPages/Register/AllSet.tsx deleted file mode 100644 index d04a6f72..00000000 --- a/src/ui/views/MainPages/Register/AllSet.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect } from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; -import { useWallet, mixpanelBrowserService } from 'ui/utils'; - -const AllSet = ({ handleClick }) => { - const wallet = useWallet(); - - const loadScript = useCallback(async () => { - await wallet.getCadenceScripts(); - }, [wallet]); - - const trackAccountRecovered = useCallback(async () => { - // I'm not sure if this is the best way to track this event - // It's hard to know at which point the user recovers the account - mixpanelBrowserService.track('account_recovered', { - address: (await wallet.getMainAddress()) || '', - mechanism: 'multi-backup', - methods: [], - }); - }, [wallet]); - - useEffect(() => { - loadScript().then(() => { - trackAccountRecovered(); - }); - }, [loadScript, trackAccountRecovered]); - - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/Register/RepeatPhrase.tsx b/src/ui/views/MainPages/Register/RepeatPhrase.tsx deleted file mode 100644 index 7cc83c5a..00000000 --- a/src/ui/views/MainPages/Register/RepeatPhrase.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback, useMemo } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const randomElement = (list: any[]) => { - return list[Math.floor(Math.random() * list.length)]; -}; - -const chunkArray = (myArray: any[], chunk_size: number) => { - const results: any[] = []; - while (myArray.length) { - results.push(myArray.splice(0, chunk_size)); - } - return results; -}; - -const RepeatPhrase = ({ handleClick, mnemonic }) => { - const [incorrect, setIncorrect] = useState(false); - const [chosenIndex, setChosen] = useState([]); - const [selectedPhrase, setSelect] = useState([]); - const [repeatArray, setRepeat] = useState([[], [], []]); - - const mnemonicArray = useMemo(() => mnemonic.split(' '), [mnemonic]); - const fullIndex = useMemo(() => [...Array(mnemonicArray.length).keys()], [mnemonicArray]); - const positionList = useMemo( - () => chunkArray(fullIndex, Math.floor(mnemonicArray.length / 3)), - [fullIndex, mnemonicArray] - ); - - const setSelected = useCallback( - (i, v) => { - const tempArray = selectedPhrase; - tempArray[i] = v; - setSelect([...tempArray]); - }, - [selectedPhrase] - ); - - const checkMatch = () => { - const correctMatch = chosenIndex.map((index) => mnemonicArray[index]); - if ( - selectedPhrase[0] === correctMatch[0] && - selectedPhrase[1] === correctMatch[1] && - selectedPhrase[2] === correctMatch[2] - ) { - handleClick(); - return; - } - handleRandom(); - setIncorrect(true); - setSelect([]); - - setTimeout(() => { - setIncorrect(false); - }, 5000); - }; - - const handleRandom = useCallback(() => { - const arr: number[] = []; - // [[0,1,2,3],[4,5,6,7],[8,9,10,11]] - const repeatIndex: number[][] = [[], [], []]; - const repeatMap: string[][] = [[], [], []]; - - const fullIndex = [...Array(mnemonicArray.length).keys()]; - positionList.forEach((list, i) => { - const picked = randomElement(list); - const exclude = fullIndex - .filter((item) => item !== picked) - .sort(() => { - return Math.random() - 0.5; - }); - arr.push(picked); - const shuffled = [exclude.pop(), exclude.pop(), exclude.pop(), picked].sort(() => { - return Math.random() - 0.5; - }); - repeatIndex[i] = shuffled; - repeatMap[i] = shuffled.map((index) => mnemonicArray[index]); - }); - setChosen(arr); - setRepeat(repeatMap); - }, [mnemonicArray, positionList]); - useEffect(() => { - handleRandom(); - }, [handleRandom]); - - return ( - <> - - - {chrome.i18n.getMessage('Verify') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage('Please_select_the_word_one_by_one_refering_to_its_order')} - - - - - {repeatArray.map((word, i) => { - return ( - - - {chrome.i18n.getMessage('Select_the_word_at')} - - {' #' + (chosenIndex[i] + 1) + ' '} - - - - {word.map((v, index) => { - return ( - - - - ); - })} - - - ); - })} - - - - - - - - - - {chrome.i18n.getMessage('Incorrect_recovery_phrases_please_try_again')} - - - - - - - - ); -}; - -export default RepeatPhrase; diff --git a/src/ui/views/MainPages/Register/SetPassword.tsx b/src/ui/views/MainPages/Register/SetPassword.tsx index 85ee8172..5e72fa41 100644 --- a/src/ui/views/MainPages/Register/SetPassword.tsx +++ b/src/ui/views/MainPages/Register/SetPassword.tsx @@ -193,7 +193,7 @@ const SetPassword = ({ handleClick, mnemonic, username, setExPassword }) => { await saveIndex(username); const accountKey = getAccountKey(mnemonic); // track the time until account_created is called - mixpanelBrowserService.time('account_created'); + // mixpanelBrowserService.time('account_created'); wallet.openapi .register(accountKey, username) .then((response) => { diff --git a/src/ui/views/MainPages/Register/RegisterPager.tsx b/src/ui/views/MainPages/Register/index.tsx similarity index 94% rename from src/ui/views/MainPages/Register/RegisterPager.tsx rename to src/ui/views/MainPages/Register/index.tsx index 4109c449..c5760b97 100644 --- a/src/ui/views/MainPages/Register/RegisterPager.tsx +++ b/src/ui/views/MainPages/Register/index.tsx @@ -6,17 +6,14 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from './PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; -import RegisterHeader from './RegisterHeader'; -import RepeatPhrase from './RepeatPhrase'; import SetPassword from './SetPassword'; enum Direction { @@ -24,7 +21,7 @@ enum Direction { Left, } -const RegisterPager = () => { +const Register = () => { const history = useHistory(); const wallet = useWallet(); const [activeIndex, onChange] = useState(0); @@ -98,7 +95,7 @@ const RegisterPager = () => { /> ); case 5: - return ; + return ; default: return
; } @@ -184,4 +181,4 @@ const RegisterPager = () => { ); }; -export default RegisterPager; +export default Register; diff --git a/src/ui/views/MainPages/Reset/index.tsx b/src/ui/views/MainPages/Reset/index.tsx index a412bdf9..5a57c34e 100644 --- a/src/ui/views/MainPages/Reset/index.tsx +++ b/src/ui/views/MainPages/Reset/index.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; @@ -11,8 +12,6 @@ import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import RecoverPassword from './RecoverPassword'; import ResetRecoveryPhrase from './ResetRecoveryPhrase'; @@ -87,7 +86,7 @@ const Reset = () => { case 1: return ; case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/Sync/AllSet.tsx b/src/ui/views/MainPages/Sync/AllSet.tsx deleted file mode 100644 index cca17c81..00000000 --- a/src/ui/views/MainPages/Sync/AllSet.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/Sync/index.tsx b/src/ui/views/MainPages/Sync/index.tsx index c9237479..e256d791 100644 --- a/src/ui/views/MainPages/Sync/index.tsx +++ b/src/ui/views/MainPages/Sync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -77,7 +75,7 @@ const Sync = () => { case 1: return ; case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/MainPages/WelcomePage/index.tsx index c0567c8d..39f8ce54 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/MainPages/WelcomePage/index.tsx @@ -7,8 +7,7 @@ import appicon from '@/ui/FRWAssets/image/appicon.png'; import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; - -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const WelcomePage = () => { return ( diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 2e343537..124448e1 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -13,7 +13,7 @@ import Forgot from './MainPages/Forgot'; import Recover from './MainPages/Forgot/Recover'; import Reset from './MainPages/Forgot/Reset'; import RecoverRegister from './MainPages/RecoverRegister'; -import RegisterPager from './MainPages/Register/RegisterPager'; +import Register from './MainPages/Register'; import Synce from './MainPages/Sync'; import WelcomePage from './MainPages/WelcomePage'; @@ -29,7 +29,7 @@ export const MainRoute: React.FC = () => { - + From a0986ce4fbc7f254a0b001c918f50b5072936b41 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:25:00 +1100 Subject: [PATCH 04/41] fixed: import component --- .../ImportComponents}/Googledrive.tsx | 22 +- .../ImportComponents}/JsonImport.tsx | 24 +-- .../MainPages/ImportComponents}/KeyImport.tsx | 18 +- .../ImportComponents/SeedPhraseImport.tsx} | 24 +-- .../MainPages/ImportComponents/index.ts | 4 + .../AddWelcome/AddressImport/ImportPager.tsx | 11 +- .../importComponent/JsonImport.tsx | 198 ------------------ .../importComponent/KeyImport.tsx | 101 --------- .../importComponent/SeedPhrase.tsx | 105 ---------- .../MainPages/AddressImport/ImportPager.tsx | 11 +- .../importComponent/Googledrive.tsx | 122 ----------- 11 files changed, 55 insertions(+), 585 deletions(-) rename src/ui/{views/MainPages/AddWelcome/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/Googledrive.tsx (84%) rename src/ui/{views/MainPages/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/JsonImport.tsx (89%) rename src/ui/{views/MainPages/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/KeyImport.tsx (85%) rename src/ui/{views/MainPages/AddressImport/importComponent/SeedPhrase.tsx => FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx} (83%) create mode 100644 src/ui/FRWComponent/MainPages/ImportComponents/index.ts delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx delete mode 100644 src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx similarity index 84% rename from src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx index 873ca549..04398b90 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx @@ -1,21 +1,21 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; +import { LLSpinner } from '@/ui/FRWComponent'; +import { useWallet } from '@/ui/utils'; -import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -26,12 +26,12 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); + const Googledrive = ({ setErrorMessage, setShowError }) => { - // const classes = useStyles(); const classes = useStyles(); const wallets = useWallet(); const history = useHistory(); @@ -57,11 +57,11 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { setShowError(true); setErrorMessage(chrome.i18n.getMessage('No__backup__found')); } - setLoading(false); } catch (e) { console.log(e); setShowError(true); setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); + } finally { setLoading(false); } }; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx similarity index 89% rename from src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index 09500eeb..80298d6f 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -9,23 +9,22 @@ import { InputAdornment, } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { LLSpinner } from 'ui/FRWComponent'; +import { LLSpinner } from '@/ui/FRWComponent'; +import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; +import { jsonToKey } from '@/ui/utils/modules/passkey'; -import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { jsonToKey } from '../../../../utils/modules/passkey'; - -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -37,7 +36,7 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 400, }, inputChild: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px 0', @@ -55,7 +54,7 @@ const useStyles = makeStyles((theme) => ({ }, }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); @@ -99,7 +98,6 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { } const pkHex = Buffer.from(pk!.data()).toString('hex'); const result = await findAddressWithPK(pkHex, address); - console.log(result); setPk(pkHex); if (!result) { onOpen(); diff --git a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx similarity index 85% rename from src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx index 5e450670..17161efb 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx @@ -1,19 +1,19 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; +import { LLSpinner } from '@/ui/FRWComponent'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { LLSpinner } from 'ui/FRWComponent'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -24,14 +24,13 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); + const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - // const classes = useStyles(); const classes = useStyles(); - const [isLoading, setLoading] = useState(false); const handleImport = async (e) => { @@ -49,7 +48,6 @@ const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { return; } const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.PRIVATE_KEY })); - console.log('accounts ==>', accounts); onImport(accounts); } finally { setLoading(false); diff --git a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx similarity index 83% rename from src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx index d095031b..203380b0 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx @@ -1,21 +1,20 @@ import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { LLSpinner } from 'ui/FRWComponent'; +import { LLSpinner } from '@/ui/FRWComponent'; +import KeyPathInput from '@/ui/FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithSeed } from '@/ui/utils/modules/findAddressWithPK'; -import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -26,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); @@ -43,10 +42,7 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { setmnemonic(seed); const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - - console.log('address ', address); const result = await findAddressWithSeed(seed, address, true); if (!result) { onOpen(); @@ -73,9 +69,7 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { className={classes.textarea} defaultValue={''} /> - - - - {errorMesssage !== '' && ( - { - setErrorMessage(''); - }} - errorName={chrome.i18n.getMessage('Error')} - errorMessage={errorMesssage} - /> - )} - - ); -}; - -export default JsonImport; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx deleted file mode 100644 index aadcfe1c..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; - -import { LLSpinner } from 'ui/FRWComponent'; - -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); -const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - // const classes = useStyles(); - const classes = useStyles(); - - const [isLoading, setLoading] = useState(false); - - const handleImport = async (e) => { - try { - setLoading(true); - e.preventDefault(); - const pk = e.target[0].value.replace(/^0x/, ''); - const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; - const inputValue = e.target[2].value; - setPk(pk); - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - const result = await findAddressWithPK(pk, address); - if (!result) { - onOpen(); - return; - } - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.PRIVATE_KEY })); - console.log('accounts ==>', accounts); - onImport(accounts); - } finally { - setLoading(false); - } - }; - - return ( - -
- - - - -
- ); -}; - -export default KeyImport; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx deleted file mode 100644 index 622169d3..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; - -import { LLSpinner } from 'ui/FRWComponent'; - -import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); - -const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { - const classes = useStyles(); - const [isLoading, setLoading] = useState(false); - - const handleImport = async (e) => { - try { - setLoading(true); - e.preventDefault(); - const seed = e.target[0].value.trim().split(/\s+/g).join(' '); - setmnemonic(seed); - const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; - const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - - const result = await findAddressWithSeed(seed, address, true); - if (!result) { - onOpen(); - return; - } - - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.SEED_PHRASE, mnemonic: seed })); - onImport(accounts); - } finally { - setLoading(false); - } - }; - - return ( - -
- - - - - - -
- ); -}; - -export default SeedPhraseImport; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 98e4e481..64c4cea8 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -2,16 +2,17 @@ import { Box, Tabs, Tab, Typography } from '@mui/material'; import React, { useEffect, useState, useContext } from 'react'; import { storage } from '@/background/webapi'; +import { + Googledrive, + KeyImport, + SeedPhraseImport, + JsonImport, +} from '@/ui/FRWComponent/MainPages/ImportComponents'; import { useWallet } from 'ui/utils'; import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; -import Googledrive from './importComponent/Googledrive'; -import JsonImport from './importComponent/JsonImport'; -import KeyImport from './importComponent/KeyImport'; -import SeedPhraseImport from './importComponent/SeedPhrase'; - function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx deleted file mode 100644 index d0cf7b39..00000000 --- a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); -const Googledrive = ({ setErrorMessage, setShowError }) => { - // const classes = useStyles(); - const classes = useStyles(); - const wallets = useWallet(); - const history = useHistory(); - - const [loading, setLoading] = useState(false); - - const getGoogle = async () => { - setLoading(true); - - try { - const accounts = await wallets.loadBackupAccounts(); - if (accounts.length > 0) { - history.push({ - pathname: '/import/google', - state: { - accounts: accounts, - }, - }); - } else { - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('No__backup__found')); - } - setLoading(false); - } catch (e) { - console.log(e); - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); - setLoading(false); - } - }; - - return ( - - - - - {chrome.i18n.getMessage('Restore__Backup__from__Google__Drive')} - - - - - ); -}; - -export default Googledrive; From 85f065d530fa16ee45dde9ef5c36126b1d7bb905 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:27:22 +1100 Subject: [PATCH 05/41] fixed: import pathing --- src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index 80298d6f..c68db04a 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -15,7 +15,8 @@ import { LLSpinner } from '@/ui/FRWComponent'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { jsonToKey } from '@/ui/utils/modules/passkey'; + +import { jsonToKey } from '../../../utils/modules/passkey'; const useStyles = makeStyles(() => ({ form: { From 7eed1aa533622e4279233bba9727260527c6bf8e Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:28:03 +1100 Subject: [PATCH 06/41] fixed: add todo --- src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index c68db04a..c8c3134c 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -16,6 +16,7 @@ import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; +//todo: update import of this js import { jsonToKey } from '../../../utils/modules/passkey'; const useStyles = makeStyles(() => ({ From 78d559ffddb260fd201ea80491f3191871cf91a4 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 20:58:16 +1100 Subject: [PATCH 07/41] fixed: import pager ui and function seperation --- .../ImportComponents/Googledrive.tsx | 3 +- .../ImportComponents/ImportPager.tsx | 121 ++++++++++++++ .../MainPages/ImportComponents/index.ts | 1 + .../AddWelcome/AddressImport/ImportPager.tsx | 124 +++------------ .../MainPages/AddressImport/ImportPager.tsx | 150 +++--------------- 5 files changed, 161 insertions(+), 238 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx index 04398b90..90ce2d2d 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx @@ -47,8 +47,9 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { + const prevPath = history.location.pathname; history.push({ - pathname: '/add/google', + pathname: prevPath === '/addressimport' ? '/import/google' : '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx new file mode 100644 index 00000000..f66bab54 --- /dev/null +++ b/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx @@ -0,0 +1,121 @@ +import { Box, Tabs, Tab, Typography } from '@mui/material'; +import React from 'react'; + +import { + Googledrive, + KeyImport, + SeedPhraseImport, + JsonImport, +} from '@/ui/FRWComponent/MainPages/ImportComponents'; +import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; + +function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +const BaseImportPager = ({ + selectedTab, + handleTabChange, + handleNotFoundPopup, + handleImport, + setmnemonic, + setPk, + setErrorMessage, + setShowError, + isSignLoading, + addressFound, + setAddressFound, + newKey, + setKeyNew, +}) => { + const sxStyles = { + fontFamily: 'Inter', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: '24px', + letterSpacing: '-0.252px', + textTransform: 'capitalize', + }; + + return ( + + + {chrome.i18n.getMessage('import_account')} + + {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} + + + + + + + + + + + + + + + + + + + + + + {!addressFound && ( + + )} + {!newKey && ( + + )} + + ); +}; + +export default BaseImportPager; diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts b/src/ui/FRWComponent/MainPages/ImportComponents/index.ts index 6b470ad3..82622273 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts +++ b/src/ui/FRWComponent/MainPages/ImportComponents/index.ts @@ -2,3 +2,4 @@ export { default as KeyImport } from './KeyImport'; export { default as SeedPhraseImport } from './SeedPhraseImport'; export { default as JsonImport } from './JsonImport'; export { default as Googledrive } from './Googledrive'; +export { default as ImportPager } from './ImportPager'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index 7ebd7848..568eed50 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -1,35 +1,9 @@ -import { Box, Tabs, Tab, Typography } from '@mui/material'; import * as bip39 from 'bip39'; -import React, { useEffect, useState, useContext } from 'react'; -import { Presets } from 'react-component-transition'; +import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import { - KeyImport, - SeedPhraseImport, - JsonImport, - Googledrive, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; -import { useWallet } from 'ui/utils'; - -import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} +import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import { useWallet } from '@/ui/utils'; const ImportPager = ({ setMnemonic, @@ -45,10 +19,8 @@ const ImportPager = ({ setShowError, }) => { const [selectedTab, setSelectedTab] = useState(0); - const [mnemonicValid, setMnemonicValid] = useState(true); const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); const [newKey, setKeyNew] = useState(true); const wallet = useWallet(); @@ -70,6 +42,7 @@ const ImportPager = ({ handleClick(); } }; + const setmnemonic = (mnemonic) => { setMnemonic(mnemonic); const formatted = mnemonic.trim().split(/\s+/g).join(' '); @@ -81,81 +54,22 @@ const ImportPager = ({ setAddressFound(!addressFound); }; - const sxStyles = { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }; - return ( - - - {chrome.i18n.getMessage('import_account')} - - {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} - - - - - - - - - - - - - - - - - - - - - - {!addressFound && ( - - )} - {!newKey && ( - - )} - + ); }; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 64c4cea8..d0bdb004 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -1,33 +1,7 @@ -import { Box, Tabs, Tab, Typography } from '@mui/material'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { storage } from '@/background/webapi'; -import { - Googledrive, - KeyImport, - SeedPhraseImport, - JsonImport, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; -import { useWallet } from 'ui/utils'; - -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} +import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import { useWallet } from '@/ui/utils'; const ImportPager = ({ setMnemonic, @@ -44,10 +18,7 @@ const ImportPager = ({ }) => { const [selectedTab, setSelectedTab] = useState(0); const [isImport, setImport] = useState(false); - - const [mnemonicValid, setMnemonicValid] = useState(true); const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); const [newKey, setKeyNew] = useState(true); const wallet = useWallet(); @@ -64,13 +35,11 @@ const ImportPager = ({ const signMnemonic = async (accountKey) => { try { const result = await wallet.signInWithMnemonic(accountKey[0].mnemonic); - console.log('result ->', result); setSignLoading(false); const userInfo = await wallet.getUserInfo(true); setUsername(userInfo.username); goPassword(); } catch (error) { - console.log(error); setSignLoading(false); if (error.message === 'NoUserFound') { setImport(false); @@ -83,13 +52,11 @@ const ImportPager = ({ const signPk = async (accountKey) => { try { const result = await wallet.signInWithPrivatekey(accountKey[0].pk); - console.log('result ->', result); setSignLoading(false); const userInfo = await wallet.getUserInfo(true); setUsername(userInfo.username); goPassword(); } catch (error) { - console.log(error); setSignLoading(false); if (error.message === 'NoUserFound') { setImport(false); @@ -106,7 +73,6 @@ const ImportPager = ({ const handleImport = async (accountKey?: any) => { setAccounts(accountKey); const result = await wallet.openapi.checkImport(accountKey[0].pubK); - console.log('result ', result); if (result.status === 409) { signIn(accountKey); } else { @@ -117,107 +83,27 @@ const ImportPager = ({ handleClick(); } }; - const setmnemonic = (mnemonic) => { - setMnemonic(mnemonic); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - setMnemonicValid(true); - storage.set('premnemonic', formatted); - }; - - const handleShowModel = (show) => { - setImport(show); - }; - - const handleAddressSelection = async (address) => { - const account = accounts.filter((account) => account.address === address)[0]; - const result = await wallet.openapi.checkImport(account.pubK); - if (result.status === 409) { - signIn([account]); - } else { - setAccounts([account]); - handleClick(); - } - }; const handleNotFoundPopup = async () => { setAddressFound(!addressFound); }; - const sxStyles = { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }; - return ( - - - {chrome.i18n.getMessage('import_account')} - - {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} - - - - - - - - - - - - - - - - - - - - - - {!addressFound && ( - - )} - {!newKey && ( - - )} - + ); }; From d4cf6f952577b448901ecc9aef603fdb1268b3a5 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 22:20:46 +1100 Subject: [PATCH 08/41] fixed: update move component --- .../FRWComponent/GeneralPages/NFTDrawer.tsx | 301 +++++++++++++++ src/ui/FRWComponent/GeneralPages/index.tsx | 1 + src/ui/views/MoveBoard/MoveEvm/index.tsx | 358 +++--------------- .../views/MoveBoard/MoveFromChild/index.tsx | 339 ++--------------- src/ui/views/MoveBoard/MoveToChild/index.tsx | 338 ++--------------- 5 files changed, 409 insertions(+), 928 deletions(-) create mode 100644 src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx create mode 100644 src/ui/FRWComponent/GeneralPages/index.tsx diff --git a/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx b/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx new file mode 100644 index 00000000..28c9e5e0 --- /dev/null +++ b/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx @@ -0,0 +1,301 @@ +// src/ui/views/MoveBoard/components/NFTMoveDrawer.tsx +import CloseIcon from '@mui/icons-material/Close'; +import { Box, Button, Typography, Drawer, IconButton, CardMedia, Skeleton } from '@mui/material'; +import React from 'react'; + +import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; +import selected from 'ui/FRWAssets/svg/selected.svg'; +import { LLSpinner } from 'ui/FRWComponent'; + +interface NFTMoveDrawerProps { + showMoveBoard: boolean; + handleCancelBtnClicked: () => void; + isLoading: boolean; + currentCollection: any; + collectionDetail: any; + nftIdArray: number[]; + onCollectionSelect: () => void; + onNFTSelect: (nftId: number) => void; + sending: boolean; + failed: boolean; + onMove: () => void; + moveType: 'toChild' | 'fromChild' | 'evm'; + AccountComponent: React.ReactNode; + nfts: any[]; + replaceIPFS?: (url: string) => string; +} + +export const NFTMoveDrawer: React.FC = ({ + showMoveBoard, + handleCancelBtnClicked, + isLoading, + currentCollection, + collectionDetail, + nftIdArray, + onCollectionSelect, + onNFTSelect, + sending, + failed, + onMove, + moveType, + AccountComponent, + nfts, + replaceIPFS = (url) => url, +}) => { + return ( + + {/* Header */} + + + + + {chrome.i18n.getMessage('select')} NFTs + + + + + + + + {AccountComponent} + + + + + {chrome.i18n.getMessage('collection')} + + + + {currentCollection && collectionDetail && ( + + )} + + + {!isLoading ? ( + + {nfts && nfts.length > 0 ? ( + nfts.map((nft) => ( + + + + )) + ) : ( + + + 0 NFTs + + + )} + + ) : ( + + )} + + + + + + + ); +}; + +const LoadingGrid = () => ( + + {[...Array(4)].map((_, index) => ( + + + + ))} + +); + +export default NFTMoveDrawer; diff --git a/src/ui/FRWComponent/GeneralPages/index.tsx b/src/ui/FRWComponent/GeneralPages/index.tsx new file mode 100644 index 00000000..88e7cfa8 --- /dev/null +++ b/src/ui/FRWComponent/GeneralPages/index.tsx @@ -0,0 +1 @@ +export { default as NFTDrawer } from './NFTDrawer'; diff --git a/src/ui/views/MoveBoard/MoveEvm/index.tsx b/src/ui/views/MoveBoard/MoveEvm/index.tsx index 8e6ccfa5..5fea351a 100644 --- a/src/ui/views/MoveBoard/MoveEvm/index.tsx +++ b/src/ui/views/MoveBoard/MoveEvm/index.tsx @@ -1,15 +1,12 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountBox from '../AccountBox'; @@ -42,6 +39,13 @@ const MoveEvm = (props: MoveBoardProps) => { transferAmount: 0, movingBetweenEVMAndFlow: true, }); + const [currentCollection, setCurrentCollection] = useState({ + CollectionName: '', + NftCount: 0, + id: '', + address: '', + logo: '', + }); const isLowStorage = isSufficient !== undefined && !isSufficient; // isSufficient is undefined when the storage check is not yet completed const isLowStorageAfterAction = sufficientAfterAction !== undefined && !sufficientAfterAction; @@ -181,318 +185,41 @@ const MoveEvm = (props: MoveBoardProps) => { updateCurrentCollection(); }, [collectionList, cadenceNft, selectedCollection, updateCurrentCollection]); - return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - + useEffect(() => { + if (collectionList && selectedCollection) { + const collection = collectionList.find((collection) => collection.id === selectedCollection); + if (collection) { + setCurrentCollection(collection); + } + } + }, [collectionList, selectedCollection]); - - - - {chrome.i18n.getMessage('collection')} - - - {collectionDetail && ( - - )} - - {!loading ? ( - - {collectInfo && - (collectInfo.nfts.length > 0 ? ( - collectInfo.nfts.map((items) => ( - - - - )) - ) : ( - - - 0 NFTs - - - ))} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="evm" + AccountComponent={ + + } + nfts={collectInfo?.nfts || []} /> - - - {selectCollection && ( { collectionList={collectionList} /> )} + - + ); }; diff --git a/src/ui/views/MoveBoard/MoveFromChild/index.tsx b/src/ui/views/MoveBoard/MoveFromChild/index.tsx index 8c793f5a..87b4632e 100644 --- a/src/ui/views/MoveBoard/MoveFromChild/index.tsx +++ b/src/ui/views/MoveBoard/MoveFromChild/index.tsx @@ -1,16 +1,13 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import { isValidEthereumAddress } from '@/shared/utils/address'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountMainBox from '../AccountMainBox'; @@ -314,307 +311,31 @@ const MoveFromChild = (props: MoveBoardProps) => { }; return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - - - - - {chrome.i18n.getMessage('collection')} - - - {currentCollection && collectionDetail && ( - - )} - - {!isLoading ? ( - - {collectionDetail && collectionDetail.nfts.length > 0 ? ( - collectionDetail.nfts.map((nft) => ( - - - - )) - ) : ( - - - 0 NFTs - - - )} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="fromChild" + AccountComponent={ + + } + nfts={collectionDetail?.nfts || []} + replaceIPFS={replaceIPFS} /> - - - + {selectCollection && ( { collectionList={collectionList} /> )} + + + - + ); }; diff --git a/src/ui/views/MoveBoard/MoveToChild/index.tsx b/src/ui/views/MoveBoard/MoveToChild/index.tsx index a6412419..66067568 100644 --- a/src/ui/views/MoveBoard/MoveToChild/index.tsx +++ b/src/ui/views/MoveBoard/MoveToChild/index.tsx @@ -1,16 +1,13 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import { isValidEthereumAddress } from '@/shared/utils/address'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountMainBox from '../AccountMainBox'; @@ -37,7 +34,7 @@ const MoveToChild = (props: MoveBoardProps) => { const [failed, setFailed] = useState(false); const [errorOpen, setShowError] = useState(false); const [selectCollection, setSelectCollection] = useState(false); - const [selectedAccount, setSelectedChildAccount] = useState(null); + const [selectedAccount, setSelectedChildAccount] = useState(null); const [currentCollection, setCurrentCollection] = useState({ CollectionName: '', NftCount: 0, @@ -45,7 +42,6 @@ const MoveToChild = (props: MoveBoardProps) => { address: '', logo: '', }); - // console.log('props.loggedInAccounts', props.current) const { sufficient: isSufficient, sufficientAfterAction } = useStorageCheck({ transferAmount: 0, movingBetweenEVMAndFlow: selectedAccount @@ -257,306 +253,30 @@ const MoveToChild = (props: MoveBoardProps) => { }; return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - - - - - {chrome.i18n.getMessage('collection')} - - - {currentCollection && collectionDetail && ( - - )} - - {!isLoading ? ( - - {collectionDetail && collectionDetail.nfts.length > 0 ? ( - collectionDetail.nfts.map((nft) => ( - - - - )) - ) : ( - - - 0 NFTs - - - )} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="toChild" + AccountComponent={ + + } + nfts={collectionDetail?.nfts || []} + replaceIPFS={replaceIPFS} /> - - - {selectCollection && ( { collectionList={collectionList} /> )} + - + ); }; From a7e182401d4ec72e032b5a9d1aea3597d1cfd74e Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 17:28:33 +1100 Subject: [PATCH 09/41] fixed: updatte welcome page --- src/ui/FRWComponent/MainPages/WelcomePage.tsx | 246 ++++++++++++++ src/ui/FRWComponent/MainPages/index.ts | 1 + src/ui/views/MainPages/AddWelcome/index.tsx | 238 +------------- src/ui/views/MainPages/WelcomePage/index.tsx | 302 +----------------- 4 files changed, 251 insertions(+), 536 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/WelcomePage.tsx diff --git a/src/ui/FRWComponent/MainPages/WelcomePage.tsx b/src/ui/FRWComponent/MainPages/WelcomePage.tsx new file mode 100644 index 00000000..13d9723d --- /dev/null +++ b/src/ui/FRWComponent/MainPages/WelcomePage.tsx @@ -0,0 +1,246 @@ +import { Typography, Button, CardMedia } from '@mui/material'; +import { Box } from '@mui/system'; +import React from 'react'; +import { Link } from 'react-router-dom'; + +import appicon from '@/ui/FRWAssets/image/appicon.png'; +import create from '@/ui/FRWAssets/svg/create.svg'; +import importPng from '@/ui/FRWAssets/svg/import.svg'; +import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; + +interface WelcomeLayoutProps { + registerPath: string; + syncPath: string; + importPath: string; +} + +const WelcomePage: React.FC = ({ registerPath, syncPath, importPath }) => { + return ( + + + + + + + + + + + + {chrome.i18n.getMessage('Welcome_to_lilico')} + + + + {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} + + {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} + + + + + + + + + + + + + + + ); +}; + +export default WelcomePage; diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/MainPages/index.ts index 9a681cd7..16082b3c 100644 --- a/src/ui/FRWComponent/MainPages/index.ts +++ b/src/ui/FRWComponent/MainPages/index.ts @@ -2,3 +2,4 @@ export { default as AllSet } from './AllSet'; export { default as PickUsername } from './PickUsername'; export { default as RepeatPhrase } from './RepeatPhrase'; export { default as RegisterHeader } from './RegisterHeader'; +export { default as WelcomePage } from './WelcomePage'; diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/MainPages/AddWelcome/index.tsx index 821ff023..710b9d4c 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/index.tsx @@ -1,243 +1,9 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; import React from 'react'; -import { Link } from 'react-router-dom'; -import appicon from '@/ui/FRWAssets/image/appicon.png'; -import create from '@/ui/FRWAssets/svg/create.svg'; -import importPng from '@/ui/FRWAssets/svg/import.svg'; -import outside from '@/ui/FRWAssets/svg/importoutside.svg'; -import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage } from '@/ui/FRWComponent/MainPages'; const AddWelcome = () => { - return ( - <> - - - - - - - - - - - - {chrome.i18n.getMessage('Welcome_to_lilico')} - - - - {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} - - {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} - - - - - - - - - - - - - - - - ); + return ; }; export default AddWelcome; diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/MainPages/WelcomePage/index.tsx index 39f8ce54..6af3ca1f 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/MainPages/WelcomePage/index.tsx @@ -1,307 +1,9 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; import React from 'react'; -import { Link } from 'react-router-dom'; -import appicon from '@/ui/FRWAssets/image/appicon.png'; -import create from '@/ui/FRWAssets/svg/create.svg'; -import importPng from '@/ui/FRWAssets/svg/import.svg'; -import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/MainPages'; const WelcomePage = () => { - return ( - <> - - - - - - - - - - - - {chrome.i18n.getMessage('Welcome_to_lilico')} - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')} - - {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} - - - - - - {/* */} - - - - - - - - {/* */} - - - {/* */} - - - - - ); + return ; }; export default WelcomePage; From eb9dc0d3e061d7227413897e36fa4a34797d79e2 Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 19:38:27 +1100 Subject: [PATCH 10/41] feat: updatte page name --- .../{MainPages => LandingPages}/AllSet.tsx | 0 .../ImportComponents/Googledrive.tsx | 0 .../ImportComponents/ImportPager.tsx | 2 +- .../ImportComponents/JsonImport.tsx | 0 .../ImportComponents/KeyImport.tsx | 0 .../ImportComponents/SeedPhraseImport.tsx | 0 .../ImportComponents/index.ts | 0 .../PickUsername.tsx | 0 .../RegisterHeader.tsx | 0 .../RepeatPhrase.tsx | 0 .../WelcomePage.tsx | 2 +- .../{MainPages => LandingPages}/index.ts | 0 .../AddWelcome/AddRegister/GoogleBackup.tsx | 0 .../AddWelcome/AddRegister/RecoveryPhrase.tsx | 0 .../AddWelcome/AddRegister/SetPassword.tsx | 0 .../AddWelcome/AddRegister/index.tsx | 2 +- .../AddWelcome/AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddWelcome/AddressImport/ImportPager.tsx | 2 +- .../AddressImport/RecoverPassword.tsx | 0 .../AddWelcome/AddressImport/SetPassword.tsx | 0 .../AddWelcome/AddressImport/index.tsx | 2 +- .../AddWelcome/ProxySync/ProxyQr.tsx | 0 .../AddWelcome/ProxySync/SetPassword.tsx | 0 .../AddWelcome/ProxySync/index.tsx | 2 +- .../AddWelcome/Sync/SetPassword.tsx | 0 .../AddWelcome/Sync/SyncQr.tsx | 0 .../AddWelcome/Sync/index.tsx | 2 +- .../AddWelcome/index.tsx | 2 +- .../AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 2 +- .../AddressImport/RecoverPassword.tsx | 0 .../AddressImport/SetPassword.tsx | 0 .../AddressImport/index.tsx | 2 +- .../Forgot/Recover/RecoverPage.tsx | 0 .../Forgot/Recover/ShowKey.tsx | 0 .../Forgot/Recover/index.tsx | 2 +- .../Forgot/Reset/ResetPage.tsx | 0 .../Forgot/Reset/index.tsx | 2 +- .../Forgot/index.tsx | 2 +- .../Forgot/stepBox.tsx | 0 .../Import/GoogleImport/DecryptWallet.tsx | 0 .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 0 .../Import/GoogleImport/RecoveryPhrase.tsx | 0 .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../Import/ImportPager.tsx | 2 +- .../Import/ImportRecoveryPhrase.tsx | 0 .../Import/RecoverPassword.tsx | 0 .../RecoverRegister/RecoveryPhrase.tsx | 0 .../RecoverRegister/SetPassword.tsx | 0 .../RecoverRegister/index.tsx | 2 +- .../Register/GoogleBackup.tsx | 0 .../Register/RecoveryPhrase.tsx | 0 .../Register/SetPassword.tsx | 0 .../Register/index.tsx | 2 +- .../Reset/RecoverPassword.tsx | 0 .../Reset/ResetRecoveryPhrase.tsx | 0 .../Reset/index.tsx | 2 +- .../Sync/Namespace.tsx | 0 .../Sync/RegisterHeader.tsx | 0 .../Sync/SetPassword.tsx | 0 .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 2 +- .../WelcomePage/index.tsx | 2 +- src/ui/views/MainRoute.tsx | 28 +++++++++---------- 77 files changed, 36 insertions(+), 36 deletions(-) rename src/ui/FRWComponent/{MainPages => LandingPages}/AllSet.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/Googledrive.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/ImportPager.tsx (98%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/JsonImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/KeyImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/SeedPhraseImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/index.ts (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/PickUsername.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/RegisterHeader.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/RepeatPhrase.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/WelcomePage.tsx (99%) rename src/ui/FRWComponent/{MainPages => LandingPages}/index.ts (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/ImportPager.tsx (95%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/SyncQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/index.tsx (74%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/ImportPager.tsx (96%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/RecoverPage.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/ShowKey.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Reset/ResetPage.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Reset/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/stepBox.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportPager.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportRecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Register/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/Reset/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Reset/ResetRecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Reset/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Sync/Namespace.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/SyncQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/WelcomePage/index.tsx (93%) diff --git a/src/ui/FRWComponent/MainPages/AllSet.tsx b/src/ui/FRWComponent/LandingPages/AllSet.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/AllSet.tsx rename to src/ui/FRWComponent/LandingPages/AllSet.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx similarity index 98% rename from src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx index f66bab54..304be1a2 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx @@ -6,7 +6,7 @@ import { KeyImport, SeedPhraseImport, JsonImport, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; +} from '@/ui/FRWComponent/LandingPages/ImportComponents'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; function TabPanel(props) { diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts b/src/ui/FRWComponent/LandingPages/ImportComponents/index.ts similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/index.ts rename to src/ui/FRWComponent/LandingPages/ImportComponents/index.ts diff --git a/src/ui/FRWComponent/MainPages/PickUsername.tsx b/src/ui/FRWComponent/LandingPages/PickUsername.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/PickUsername.tsx rename to src/ui/FRWComponent/LandingPages/PickUsername.tsx diff --git a/src/ui/FRWComponent/MainPages/RegisterHeader.tsx b/src/ui/FRWComponent/LandingPages/RegisterHeader.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/RegisterHeader.tsx rename to src/ui/FRWComponent/LandingPages/RegisterHeader.tsx diff --git a/src/ui/FRWComponent/MainPages/RepeatPhrase.tsx b/src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/RepeatPhrase.tsx rename to src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx diff --git a/src/ui/FRWComponent/MainPages/WelcomePage.tsx b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx similarity index 99% rename from src/ui/FRWComponent/MainPages/WelcomePage.tsx rename to src/ui/FRWComponent/LandingPages/WelcomePage.tsx index 13d9723d..7a84ff3f 100644 --- a/src/ui/FRWComponent/MainPages/WelcomePage.tsx +++ b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx @@ -7,7 +7,7 @@ import appicon from '@/ui/FRWAssets/image/appicon.png'; import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; interface WelcomeLayoutProps { registerPath: string; diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/LandingPages/index.ts similarity index 100% rename from src/ui/FRWComponent/MainPages/index.ts rename to src/ui/FRWComponent/LandingPages/index.ts diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx index f87e764b..3f673ef6 100644 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx @@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx index 4c5ce087..71e5cc58 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx similarity index 95% rename from src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx index 568eed50..adf4d45e 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx @@ -2,7 +2,7 @@ import * as bip39 from 'bip39'; import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; import { useWallet } from '@/ui/utils'; const ImportPager = ({ diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx index a0be5dde..e3869cbb 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { LLPinAlert } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx index 228ca5f1..215cfb7d 100644 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/Sync/SyncQr.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx diff --git a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/Sync/index.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/index.tsx index d4f31725..ee6c4e1f 100644 --- a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/LandingPages/AddWelcome/index.tsx similarity index 74% rename from src/ui/views/MainPages/AddWelcome/index.tsx rename to src/ui/views/LandingPages/AddWelcome/index.tsx index 710b9d4c..d2536d0f 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WelcomePage } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; const AddWelcome = () => { return ; diff --git a/src/ui/views/MainPages/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx index 731ed764..2215186f 100644 --- a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddressImport/ImportPager.tsx similarity index 96% rename from src/ui/views/MainPages/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddressImport/ImportPager.tsx index d0bdb004..174f739e 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/LandingPages/AddressImport/ImportPager.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; import { useWallet } from '@/ui/utils'; const ImportPager = ({ diff --git a/src/ui/views/MainPages/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddressImport/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/index.tsx b/src/ui/views/LandingPages/AddressImport/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddressImport/index.tsx index 9c2cc70a..d1659ea0 100644 --- a/src/ui/views/MainPages/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddressImport/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/Forgot/Recover/RecoverPage.tsx b/src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Recover/RecoverPage.tsx rename to src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx diff --git a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx b/src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx rename to src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx diff --git a/src/ui/views/MainPages/Forgot/Recover/index.tsx b/src/ui/views/LandingPages/Forgot/Recover/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/Recover/index.tsx rename to src/ui/views/LandingPages/Forgot/Recover/index.tsx index e7a25549..c7e133e7 100644 --- a/src/ui/views/MainPages/Forgot/Recover/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Recover/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx b/src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx rename to src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx diff --git a/src/ui/views/MainPages/Forgot/Reset/index.tsx b/src/ui/views/LandingPages/Forgot/Reset/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/Reset/index.tsx rename to src/ui/views/LandingPages/Forgot/Reset/index.tsx index 4f9f4417..363fdb89 100644 --- a/src/ui/views/MainPages/Forgot/Reset/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Reset/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/Forgot/index.tsx b/src/ui/views/LandingPages/Forgot/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/index.tsx rename to src/ui/views/LandingPages/Forgot/index.tsx index 3ae53a25..d17e1226 100644 --- a/src/ui/views/MainPages/Forgot/index.tsx +++ b/src/ui/views/LandingPages/Forgot/index.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import recover from '@/ui/FRWAssets/svg/recover.svg'; import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; const Forgot = () => { return ( diff --git a/src/ui/views/MainPages/Forgot/stepBox.tsx b/src/ui/views/LandingPages/Forgot/stepBox.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/stepBox.tsx rename to src/ui/views/LandingPages/Forgot/stepBox.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/Import/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/Import/GoogleImport/index.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/index.tsx index e267ab69..690a37ff 100644 --- a/src/ui/views/MainPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/Import/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; diff --git a/src/ui/views/MainPages/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportComponent/PrivateKey.tsx rename to src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx diff --git a/src/ui/views/MainPages/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportComponent/SeedPhrase.tsx rename to src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx diff --git a/src/ui/views/MainPages/Import/ImportPager.tsx b/src/ui/views/LandingPages/Import/ImportPager.tsx similarity index 98% rename from src/ui/views/MainPages/Import/ImportPager.tsx rename to src/ui/views/LandingPages/Import/ImportPager.tsx index 9d555fea..e91450cb 100644 --- a/src/ui/views/MainPages/Import/ImportPager.tsx +++ b/src/ui/views/LandingPages/Import/ImportPager.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportRecoveryPhrase.tsx rename to src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/Import/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Import/RecoverPassword.tsx rename to src/ui/views/LandingPages/Import/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/RecoverRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/RecoverRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/RecoverRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/SetPassword.tsx b/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/RecoverRegister/SetPassword.tsx rename to src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/index.tsx b/src/ui/views/LandingPages/RecoverRegister/index.tsx similarity index 98% rename from src/ui/views/MainPages/RecoverRegister/index.tsx rename to src/ui/views/LandingPages/RecoverRegister/index.tsx index 17c20703..0976d766 100644 --- a/src/ui/views/MainPages/RecoverRegister/index.tsx +++ b/src/ui/views/LandingPages/RecoverRegister/index.tsx @@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom'; import { storage } from '@/background/webapi'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, AllSet } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, AllSet } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import lilicoIcon from '../../../../../_raw/images/icon-48.png'; diff --git a/src/ui/views/MainPages/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/Register/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/Register/GoogleBackup.tsx rename to src/ui/views/LandingPages/Register/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Register/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Register/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Register/SetPassword.tsx b/src/ui/views/LandingPages/Register/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Register/SetPassword.tsx rename to src/ui/views/LandingPages/Register/SetPassword.tsx diff --git a/src/ui/views/MainPages/Register/index.tsx b/src/ui/views/LandingPages/Register/index.tsx similarity index 99% rename from src/ui/views/MainPages/Register/index.tsx rename to src/ui/views/LandingPages/Register/index.tsx index c5760b97..077de0e4 100644 --- a/src/ui/views/MainPages/Register/index.tsx +++ b/src/ui/views/LandingPages/Register/index.tsx @@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/Reset/RecoverPassword.tsx b/src/ui/views/LandingPages/Reset/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Reset/RecoverPassword.tsx rename to src/ui/views/LandingPages/Reset/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/Reset/ResetRecoveryPhrase.tsx b/src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Reset/ResetRecoveryPhrase.tsx rename to src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx similarity index 98% rename from src/ui/views/MainPages/Reset/index.tsx rename to src/ui/views/LandingPages/Reset/index.tsx index 5a57c34e..bee6f2b7 100644 --- a/src/ui/views/MainPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/Sync/Namespace.tsx b/src/ui/views/LandingPages/Sync/Namespace.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/Namespace.tsx rename to src/ui/views/LandingPages/Sync/Namespace.tsx diff --git a/src/ui/views/MainPages/Sync/RegisterHeader.tsx b/src/ui/views/LandingPages/Sync/RegisterHeader.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/RegisterHeader.tsx rename to src/ui/views/LandingPages/Sync/RegisterHeader.tsx diff --git a/src/ui/views/MainPages/Sync/SetPassword.tsx b/src/ui/views/LandingPages/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/Sync/SetPassword.tsx diff --git a/src/ui/views/MainPages/Sync/SyncQr.tsx b/src/ui/views/LandingPages/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/Sync/SyncQr.tsx diff --git a/src/ui/views/MainPages/Sync/index.tsx b/src/ui/views/LandingPages/Sync/index.tsx similarity index 98% rename from src/ui/views/MainPages/Sync/index.tsx rename to src/ui/views/LandingPages/Sync/index.tsx index e256d791..b7df88b8 100644 --- a/src/ui/views/MainPages/Sync/index.tsx +++ b/src/ui/views/LandingPages/Sync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/LandingPages/WelcomePage/index.tsx similarity index 93% rename from src/ui/views/MainPages/WelcomePage/index.tsx rename to src/ui/views/LandingPages/WelcomePage/index.tsx index 6af3ca1f..be6fe350 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/LandingPages'; const WelcomePage = () => { return ; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 124448e1..8090cc1e 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -1,21 +1,21 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import AddressImport from './MainPages//AddressImport'; -import GoogleImport from './MainPages/AddressImport/GoogleImport'; -import AddWelcome from './MainPages/AddWelcome'; -import AddRegister from './MainPages/AddWelcome/AddRegister'; -import AddImport from './MainPages/AddWelcome/AddressImport'; -import AddGoogle from './MainPages/AddWelcome/AddressImport/GoogleImport'; -import AddSync from './MainPages/AddWelcome/Sync'; +import AddressImport from './LandingPages//AddressImport'; +import GoogleImport from './LandingPages/AddressImport/GoogleImport'; +import AddWelcome from './LandingPages/AddWelcome'; +import AddRegister from './LandingPages/AddWelcome/AddRegister'; +import AddImport from './LandingPages/AddWelcome/AddressImport'; +import AddGoogle from './LandingPages/AddWelcome/AddressImport/GoogleImport'; +import AddSync from './LandingPages/AddWelcome/Sync'; // import ProxySync from './AddWelcome/ProxySync'; -import Forgot from './MainPages/Forgot'; -import Recover from './MainPages/Forgot/Recover'; -import Reset from './MainPages/Forgot/Reset'; -import RecoverRegister from './MainPages/RecoverRegister'; -import Register from './MainPages/Register'; -import Synce from './MainPages/Sync'; -import WelcomePage from './MainPages/WelcomePage'; +import Forgot from './LandingPages/Forgot'; +import Recover from './LandingPages/Forgot/Recover'; +import Reset from './LandingPages/Forgot/Reset'; +import RecoverRegister from './LandingPages/RecoverRegister'; +import Register from './LandingPages/Register'; +import Synce from './LandingPages/Sync'; +import WelcomePage from './LandingPages/WelcomePage'; import './MainRoute.css'; From b0da21a5a9b9647585e0f1ec37409b7df72f3baf Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 22:54:38 +1100 Subject: [PATCH 11/41] fixed: update file directory --- src/ui/utils/landingPage.ts | 17 +++++ .../AddRegister/GoogleBackup.tsx | 0 .../AddRegister/RecoveryPhrase.tsx | 0 .../AddRegister/SetPassword.tsx | 0 .../AddRegister/index.tsx | 0 .../AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 0 .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 0 .../AddressImport/SetPassword.tsx | 0 .../AddressImport/index.tsx | 0 .../ProxySync/ProxyQr.tsx | 0 .../ProxySync/SetPassword.tsx | 0 .../ProxySync/index.tsx | 0 .../Sync/SetPassword.tsx | 0 .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 0 .../{AddWelcome => AddAccountPage}/index.tsx | 0 .../AddressImport/GoogleBackup.tsx | 2 +- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 6 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 4 +- .../AddressImport/SetPassword.tsx | 6 +- .../{ => WelcomePage}/AddressImport/index.tsx | 2 +- .../Import/GoogleImport/DecryptWallet.tsx | 2 +- .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 12 +--- .../Import/GoogleImport/RecoveryPhrase.tsx | 2 +- .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../{ => WelcomePage}/Import/ImportPager.tsx | 4 +- .../Import/ImportRecoveryPhrase.tsx | 4 +- .../Import/RecoverPassword.tsx | 4 +- .../Register/GoogleBackup.tsx | 2 +- .../Register/RecoveryPhrase.tsx | 2 +- .../Register/SetPassword.tsx | 6 +- .../{ => WelcomePage}/Register/index.tsx | 68 +++++++++---------- .../{ => WelcomePage}/Sync/Namespace.tsx | 0 .../{ => WelcomePage}/Sync/RegisterHeader.tsx | 0 .../{ => WelcomePage}/Sync/SetPassword.tsx | 4 +- .../{ => WelcomePage}/Sync/SyncQr.tsx | 0 .../{ => WelcomePage}/Sync/index.tsx | 61 +++++++++-------- src/ui/views/MainRoute.tsx | 19 +++--- 52 files changed, 120 insertions(+), 115 deletions(-) create mode 100644 src/ui/utils/landingPage.ts rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/index.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleBackup.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportPager.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportRecoveryPhrase.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/GoogleBackup.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/index.tsx (76%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/Namespace.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/index.tsx (82%) diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.ts new file mode 100644 index 00000000..acede4b7 --- /dev/null +++ b/src/ui/utils/landingPage.ts @@ -0,0 +1,17 @@ +import { Box } from '@mui/material'; +import React from 'react'; + +export interface PageConfig { + component: React.ComponentType; + props: Record; +} + +export const getPageConfig = (pages: Record, index: number): PageConfig => { + return pages[index] || { component: () => React.createElement(Box), props: {} }; +}; + +export const renderPage = (pages: Record, index: number): JSX.Element => { + const pageConfig = getPageConfig(pages, index); + const Comp = pageConfig.component; + return React.createElement(Comp, pageConfig.props); +}; diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/index.tsx b/src/ui/views/LandingPages/AddAccountPage/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/index.tsx diff --git a/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx index 135de36c..c7cf5362 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx index 7c0d564d..4304cc8d 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 97% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx index e9d468dc..7897a52a 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx @@ -18,13 +18,13 @@ import { Box } from '@mui/system'; import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx index 0d3e5854..c9f387d1 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx index 2215186f..5c0d4af9 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx @@ -8,7 +8,7 @@ import Confetti from '@/ui/FRWComponent/Confetti'; import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/LandingPages/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx index 19e926ba..5fae56b9 100644 --- a/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import { storage } from 'background/webapi'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx index 33f80904..658df5ab 100644 --- a/src/ui/views/LandingPages/AddressImport/SetPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx @@ -21,14 +21,14 @@ import zxcvbn from 'zxcvbn'; import { storage } from '@/background/webapi'; import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx index d1659ea0..80f336aa 100644 --- a/src/ui/views/LandingPages/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx @@ -9,7 +9,7 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import ImportPager from './ImportPager'; import RecoverPassword from './RecoverPassword'; diff --git a/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx index 7c0d564d..4304cc8d 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx similarity index 97% rename from src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx index 4de8ccc4..58342335 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx @@ -22,16 +22,8 @@ import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import theme from '../../../../style/LLTheme'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx index bdf0ad9d..02ee6e06 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/GoogleImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx index 690a37ff..bef55074 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx @@ -9,7 +9,7 @@ import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx diff --git a/src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx diff --git a/src/ui/views/LandingPages/Import/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx similarity index 97% rename from src/ui/views/LandingPages/Import/ImportPager.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx index e91450cb..df7d1cbb 100644 --- a/src/ui/views/LandingPages/Import/ImportPager.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx @@ -10,8 +10,8 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; import ImportRecoveryPhrase from './ImportRecoveryPhrase'; import RecoverPassword from './RecoverPassword'; diff --git a/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx index 6453d754..0c4bfdcc 100644 --- a/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx @@ -8,8 +8,8 @@ import { storage } from '@/background/webapi'; import { LLNotFound, LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; import PrivateKey from './ImportComponent/PrivateKey'; import SeedPhrase from './ImportComponent/SeedPhrase'; diff --git a/src/ui/views/LandingPages/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx index dac94288..afb15ec7 100644 --- a/src/ui/views/LandingPages/Import/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx @@ -20,8 +20,8 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx similarity index 98% rename from src/ui/views/LandingPages/Register/GoogleBackup.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx index 135de36c..c7cf5362 100644 --- a/src/ui/views/LandingPages/Register/GoogleBackup.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Register/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx index d4ade609..dbde6982 100644 --- a/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/LandingPages/Register/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/Register/SetPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx index 5e72fa41..3259cdf8 100644 --- a/src/ui/views/LandingPages/Register/SetPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx @@ -21,14 +21,14 @@ import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; import { storage } from '@/background/webapi'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { type AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx similarity index 76% rename from src/ui/views/LandingPages/Register/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/index.tsx index 077de0e4..1f05891d 100644 --- a/src/ui/views/LandingPages/Register/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx @@ -1,16 +1,17 @@ import { IconButton, Typography } from '@mui/material'; import { Box } from '@mui/system'; import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react'; import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; @@ -27,7 +28,7 @@ const Register = () => { const [activeIndex, onChange] = useState(0); const [direction, setDirection] = useState(Direction.Right); const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); + const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); const getUsername = (username: string) => { @@ -66,41 +67,35 @@ const Register = () => { } }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 1: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 2: { + component: RepeatPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: SetPassword, + props: { handleClick: goNext, setExPassword: setPassword, mnemonic, username }, + }, + 4: { + component: GoogleBackup, + props: { handleClick: goNext, mnemonic, username, password }, + }, + 5: { + component: AllSet, + props: { handleClick: goNext, variant: 'register' }, + }, }; + const page = (index: number) => renderPage(pages, index); + useEffect(() => { loadView(); }, [loadView]); @@ -124,7 +119,6 @@ const Register = () => { - {/* height why not use auto */} ({ // root: { diff --git a/src/ui/views/LandingPages/Sync/SyncQr.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx similarity index 82% rename from src/ui/views/LandingPages/Sync/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Sync/index.tsx index b7df88b8..19b40b2d 100644 --- a/src/ui/views/LandingPages/Sync/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx @@ -6,10 +6,11 @@ import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -31,6 +32,35 @@ const Sync = () => { setUsername(username.toLowerCase()); }; + const goNext = () => { + setDirection(Direction.Right); + if (activeIndex < 2) { + onChange(activeIndex + 1); + } else { + window.close(); + } + }; + + const pages: Record = { + 0: { + component: SyncQr, + props: { + handleClick: goNext, + savedUsername: username, + confirmMnemonic: setMnemonic, + setUsername: getUsername, + }, + }, + 1: { + component: SetPassword, + props: { handleClick: goNext, mnemonic, username }, + }, + 2: { + component: AllSet, + props: { handleClick: goNext, variant: 'sync' }, + }, + }; + const loadView = useCallback(async () => { wallet .getCurrentAccount() @@ -43,14 +73,6 @@ const Sync = () => { return; }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; const goBack = () => { setDirection(Direction.Left); @@ -61,25 +83,7 @@ const Sync = () => { } }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - default: - return
; - } - }; + const page = (index: number) => renderPage(pages, index); useEffect(() => { loadView(); @@ -104,7 +108,6 @@ const Sync = () => { - {/* height why not use auto */} { - {/* */} From 3d86d2578e5e1ed0d52f69aa4d4c0f0a8c68a4a4 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 12 Dec 2024 01:01:58 +1100 Subject: [PATCH 12/41] Fixed: update register page landing --- .../LandingPages/LandingComponents.tsx | 88 ++++ src/ui/FRWComponent/LandingPages/index.ts | 1 + src/ui/utils/landingPage.ts | 49 ++- .../AddressImport/GoogleImport/index.tsx | 169 -------- .../WelcomePage/AddressImport/index.tsx | 285 +++---------- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../WelcomePage/GoogleImport/index.tsx | 71 ++++ .../Import/GoogleImport/DecryptWallet.tsx | 194 --------- .../Import/GoogleImport/GoogleAccounts.tsx | 111 ----- .../Import/GoogleImport/RecoverPassword.tsx | 382 ----------------- .../Import/GoogleImport/RecoveryPhrase.tsx | 240 ----------- .../WelcomePage/Import/GoogleImport/index.tsx | 172 -------- .../Import/ImportComponent/PrivateKey.tsx | 60 --- .../Import/ImportComponent/SeedPhrase.tsx | 63 --- .../WelcomePage/Import/ImportPager.tsx | 212 ---------- .../Import/ImportRecoveryPhrase.tsx | 328 --------------- .../WelcomePage/Import/RecoverPassword.tsx | 383 ------------------ .../WelcomePage/Register/index.tsx | 130 +----- .../LandingPages/WelcomePage/Sync/index.tsx | 104 +---- src/ui/views/MainRoute.tsx | 2 +- 23 files changed, 310 insertions(+), 2742 deletions(-) create mode 100644 src/ui/FRWComponent/LandingPages/LandingComponents.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/RecoveryPhrase.tsx (99%) create mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx diff --git a/src/ui/FRWComponent/LandingPages/LandingComponents.tsx b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx new file mode 100644 index 00000000..e5fc5941 --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx @@ -0,0 +1,88 @@ +import { Box, IconButton, Typography } from '@mui/material'; +import React from 'react'; + +import { LLPinAlert } from '@/ui/FRWComponent'; +import Confetti from '@/ui/FRWComponent/Confetti'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; + +import BackButtonIcon from '../../../components/iconfont/IconBackButton'; + +const LandingComponents = ({ + activeIndex, + direction, + showBackButton, + onBack, + children, + showConfetti, + showRegisterHeader, +}) => ( + + {showConfetti && } + {showRegisterHeader && } + + + + + + {showBackButton && ( + + + + )} + +
+ + + {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 + + + + + {children} + + + + + +); + +export default LandingComponents; diff --git a/src/ui/FRWComponent/LandingPages/index.ts b/src/ui/FRWComponent/LandingPages/index.ts index 16082b3c..79047df2 100644 --- a/src/ui/FRWComponent/LandingPages/index.ts +++ b/src/ui/FRWComponent/LandingPages/index.ts @@ -3,3 +3,4 @@ export { default as PickUsername } from './PickUsername'; export { default as RepeatPhrase } from './RepeatPhrase'; export { default as RegisterHeader } from './RegisterHeader'; export { default as WelcomePage } from './WelcomePage'; +export { default as LandingComponents } from './LandingComponents'; diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.ts index acede4b7..3066cf57 100644 --- a/src/ui/utils/landingPage.ts +++ b/src/ui/utils/landingPage.ts @@ -1,11 +1,17 @@ import { Box } from '@mui/material'; -import React from 'react'; +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; export interface PageConfig { component: React.ComponentType; props: Record; } +export enum Direction { + Right, + Left, +} + export const getPageConfig = (pages: Record, index: number): PageConfig => { return pages[index] || { component: () => React.createElement(Box), props: {} }; }; @@ -15,3 +21,44 @@ export const renderPage = (pages: Record, index: number): JS const Comp = pageConfig.component; return React.createElement(Comp, pageConfig.props); }; + +export const getDirectionType = (direction: Direction) => { + return direction === Direction.Left ? 'left' : 'right'; +}; + +export const useNavigation = (maxSteps: number) => { + const [activeIndex, setActiveIndex] = useState(0); + const [direction, setDirection] = useState(Direction.Right); + const history = useHistory(); + + const goNext = () => { + setDirection(Direction.Right); + if (activeIndex < maxSteps) { + setActiveIndex(activeIndex + 1); + } else { + window.close(); + } + }; + + const goBack = () => { + setDirection(Direction.Left); + if (activeIndex >= 1) { + setActiveIndex(activeIndex - 1); + } else { + history.goBack(); + } + }; + + const goCustom = (index: number) => { + setDirection(Direction.Right); + setActiveIndex(index); + }; + + return { + activeIndex, + direction: getDirectionType(direction), + goNext, + goBack, + goCustom, + }; +}; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index 5c0d4af9..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location?.state?.accounts; - setAccounts(users); - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx index 80f336aa..29c81ec6 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx @@ -1,36 +1,23 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import ImportPager from './ImportPager'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const AddressImport = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const { activeIndex, direction, goNext, goBack, goCustom } = useNavigation(4); const [mnemonic, setMnemonic] = useState(''); const [pk, setPk] = useState(null); const [username, setUsername] = useState(''); - const [, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [, setPassword] = useState(null); + const [errorMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); + const [showError, setShowError] = useState(false); const [accounts, setAccounts] = useState([]); const getUsername = (username: string) => { @@ -38,7 +25,6 @@ const AddressImport = () => { }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -51,86 +37,52 @@ const AddressImport = () => { }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const goPassword = () => { - setDirection(Direction.Right); - onChange(3); - }; - // const goGoogle = () => { - // setDirection(Direction.Right); - // onChange(4); - // }; - const goEnd = () => { - setDirection(Direction.Right); - onChange(4); - }; - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ( - - ); - case 3: - return ( - - ); - // case 4: - // return ; - case 4: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: ImportPager, + props: { + setMnemonic, + setPk, + setAccounts, + accounts, + mnemonic, + pk, + setUsername, + goPassword: () => goCustom(3), + handleClick: goNext, + setErrorMessage, + setShowError, + }, + }, + 1: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 2: { + component: SetPassword, + props: { + handleClick: goNext, + mnemonic, + pk, + username, + accounts, + goEnd: () => goNext(), + }, + }, + 3: { + component: RecoverPassword, + props: { + handleClick: goNext, + mnemonic, + pk, + username, + goEnd: () => goNext(), + }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, }; useEffect(() => { @@ -138,129 +90,16 @@ const AddressImport = () => { }, [loadView]); return ( - <> - - {activeIndex === 4 && } - - - - - - {/* height why not use auto */} - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - - - - - - - - - - - - - - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx index 4304cc8d..7c0d564d 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx index 7897a52a..cdd29bee 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx @@ -23,8 +23,8 @@ import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx index c9f387d1..0d3e5854 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx new file mode 100644 index 00000000..e453c3c5 --- /dev/null +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx @@ -0,0 +1,71 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; + +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; + +import DecryptWallet from './DecryptWallet'; +import GoogleAccounts from './GoogleAccounts'; +import RecoveryPassword from './RecoverPassword'; +import RecoveryPhrase from './RecoveryPhrase'; + +interface AccountsState { + accounts: string[]; +} + +const GoogleImport = () => { + const location = useLocation(); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(4); + const [mnemonic, setMnemonic] = useState(''); + const [accounts, setAccounts] = useState([]); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const getGoogleAccounts = useCallback(async () => { + const users = location?.state?.accounts; + setAccounts(users); + }, [location?.state?.accounts]); + + useEffect(() => { + getGoogleAccounts(); + }, [getGoogleAccounts]); + + const pages: Record = { + 0: { + component: GoogleAccounts, + props: { handleClick: goNext, accounts, setUsername }, + }, + 1: { + component: DecryptWallet, + props: { handleClick: goNext, setMnemonic, username, setNextPassword: setPassword }, + }, + 2: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: RecoveryPassword, + props: { handleClick: goNext, mnemonic, username, lastPassword: password }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, + }; + + return ( + + {renderPage(pages, activeIndex)} + + ); +}; + +export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx deleted file mode 100644 index 4304cc8d..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { Button, Typography, IconButton, Input, InputAdornment, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CancelIcon from '../../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const DecryptWallet = ({ handleClick, setMnemonic, username, setNextPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - // const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const decryptWallet = async () => { - setLoading(true); - // await wallet.boot(password); - // const formatted = mnemonic.trim().split(/\s+/g).join(' '); - // await wallet.createKeyringWithMnemonics(formatted); - try { - const mnemonic = await wallet.restoreAccount(username, password); - // console.log('mnemonic ->', mnemonic); - setLoading(false); - setMnemonic(mnemonic); - setNextPassword(password); - handleClick(); - } catch (e) { - setLoading(false); - setHelperText( - errorInfo(chrome.i18n.getMessage('Incorrect__decrypt__password__please__try__again')) - ); - } - }; - - useEffect(() => { - if (password.length < 8) { - setHelperText( - errorInfo(chrome.i18n.getMessage('The__decrypt__password__should__be__8__characters__long')) - ); - setCharacters(false); - } else { - setHelperText(
); - setCharacters(true); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage('Please__enter__your__password__to__decrypt')} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - - - - - ); -}; - -export default DecryptWallet; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index ae3c991f..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; -import { - Typography, - Avatar, - Box, - List, - ListItemIcon, - ListItemButton, - ListItemText, - IconButton, - ListItem, -} from '@mui/material'; -import React, { useState, useEffect, useCallback } from 'react'; - -import { useWallet } from 'ui/utils'; - -const FetchAvatar = ({ username }) => { - const [avatar, setAvatar] = useState( - `https://lilico.app/api/avatar/beam/120/${username}?colors=FFDD32,FC814A,7678ED,B3DEE2,BCF0DA` - ); - const wallet = useWallet(); - - const fetchUserAvatar = useCallback( - async (username) => { - const { data } = await wallet.openapi.searchUser(username); - const users = data.users; - if (users.length > 0 && users[0].avatar) { - setAvatar(users[0].avatar); - } - }, - [wallet] - ); - - useEffect(() => { - fetchUserAvatar(username); - }, [fetchUserAvatar, username]); - - return ; -}; - -const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { - const [canGoNext, setCanGoNext] = useState(true); - - return ( - <> - - - {chrome.i18n.getMessage('We__ve__found') + ' '} - - {accounts.length} - {chrome.i18n.getMessage('matching__accounts')} - - - - {chrome.i18n.getMessage('Select__the__account__which__you__want__to__restore__back')} - - - - - {accounts && - accounts.map((account) => { - return ( - - { - setUsername(account); - handleClick(); - }} - sx={{ - display: 'flex', - border: '2px solid #5E5E5E', - width: '100%', - borderRadius: '12px', - backgroundColor: '#333333', - transition: 'all .3s linear', - py: '8px', - px: '16px', - justifyContent: 'center', - mb: '12px', - }} - > - - - - - - - - - - - ); - })} - - - - - ); -}; - -export default GoogleAccounts; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index 58342335..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx +++ /dev/null @@ -1,382 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(lastPassword); - const [confirmPassword, setConfirmPassword] = useState(lastPassword); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - const [showDialog, setShowDialog] = useState(false); - const [isCheck, setCheck] = useState(true); - - const login = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.signInWithMnemonic(mnemonic); - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - if (e.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - useEffect(() => { - if (isCheck) { - setPassword(lastPassword); - setConfirmPassword(lastPassword); - } else { - setPassword(''); - setConfirmPassword(''); - } - }, [isCheck, lastPassword]); - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('Use__the__same__Google__Drive__password')} - - } - /> - - - - - ) : ( - - )} - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 02ee6e06..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Review') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx deleted file mode 100644 index bef55074..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location.state.accounts; - setAccounts(users); - }, [location.state.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - const heights = [500, 500, 600, 600, 500]; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx deleted file mode 100644 index 57c3f213..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Typography, FormControl, Input, Box } from '@mui/material'; -import React from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const PrivateKey = ({ helperText, msgBgColor, pk, setpk }) => { - return ( - - - {chrome.i18n.getMessage('This_is_the_private_key_you')} - - - - { - setpk(event.target.value); - }} - sx={{ - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }} - /> - - - {helperText} - - - - - - ); -}; - -export default PrivateKey; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx deleted file mode 100644 index ac2adc82..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Typography, FormControl, Input, Box } from '@mui/material'; -import React from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const SeedPhrase = ({ helperText, msgBgColor, mnemonic, setmnemonic }) => { - return ( - - - {chrome.i18n.getMessage('This__is__the__12__or__24__word__phrase__you__were__given')} - - - - - { - setmnemonic(event.target.value); - }} - sx={{ - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }} - /> - - - {helperText} - - - - - - ); -}; - -export default SeedPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx deleted file mode 100644 index df7d1cbb..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { IconButton, Typography, Button, Snackbar, Alert } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -import ImportRecoveryPhrase from './ImportRecoveryPhrase'; -import RecoverPassword from './RecoverPassword'; - -enum Direction { - Right, - Left, -} - -const ImportPager = () => { - const history = useHistory(); - const wallets = useWallet(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - const [pk, setPk] = useState(''); - const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [loading, setLoading] = useState(false); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogle = async () => { - setLoading(true); - - try { - const accounts = await wallets.loadBackupAccounts(); - if (accounts.length > 0) { - history.push({ - pathname: '/import/google', - state: { - accounts: accounts, - }, - }); - } else { - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('No__backup__found')); - } - setLoading(false); - } catch (e) { - console.error(e); - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); - setLoading(false); - } - }; - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 2 && } - - - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/3 - - - - - {page(activeIndex)} - - - - {activeIndex === 0 && ( - - )} - - - - {errMessage} - - - - - ); -}; - -export default ImportPager; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx deleted file mode 100644 index 0c4bfdcc..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import { Typography, Tabs, Tab, CircularProgress, Button, Snackbar, Alert } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import { storage } from '@/background/webapi'; -import { LLNotFound, LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -import PrivateKey from './ImportComponent/PrivateKey'; -import SeedPhrase from './ImportComponent/SeedPhrase'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - sxStyles: { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }, - inputBox: { - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const mnemonicError = (errorMsg) => ( - - - - {errorMsg} - - -); - -const MnemonicCorrect: React.FC = () => ( - - - - {chrome.i18n.getMessage('Recovery__phrase__valid')} - - -); - -const PrivateCorrect: React.FC = () => ( - - - - {chrome.i18n.getMessage('Private__key_valid')} - - -); - -const MnemonicLoading: React.FC = () => ( - - - {chrome.i18n.getMessage('Checking')} - -); - -const ImportRecoveryPhrase = ({ handleClick, confirmMnemonic, confirmPk, setUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [mnemonicValid, setMnemonicValid] = useState(true); - - const [mnemonic, setMnemonic] = useState(''); - - const [pk, setPk] = useState(''); - - const [isSignLoading, setSignLoading] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showDialog, setShowDialog] = useState(false); - const [showError, setShowError] = useState(false); - - const [helperText, setHelperText] = useState(
); - const [selectedTab, setSelectedTab] = useState(0); - - const signIn = async () => { - setSignLoading(true); - if (mnemonic) { - signMnemonic(); - } else { - signPk(); - } - }; - - const signMnemonic = async () => { - try { - const result = await wallet.signInWithMnemonic(mnemonic); - setSignLoading(false); - confirmMnemonic(mnemonic); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - const signPk = async () => { - const privateKey = pk.replace(/^0x/, ''); - try { - const result = await wallet.signInWithPrivatekey(privateKey); - setSignLoading(false); - confirmPk(privateKey); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setMnemonicValid(false); - setHelperText(mnemonicError(message)); - }, - [setLoading, setMnemonicValid, setHelperText] - ); - useEffect(() => { - setMnemonicValid(false); - setHelperText(); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - setLoading(false); - const length = mnemonic.trim().split(/\s+/g).length; - if (!(length === 12 || length === 24)) { - setErrorMessage( - chrome.i18n.getMessage('Recovery__phrases__word__count__must__be__12__or__24__words') - ); - return; - } - - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - if (!bip39.validateMnemonic(formatted)) { - setErrorMessage(chrome.i18n.getMessage('Mnemonic__phrase__is__invalid')); - return; - } - - setMnemonicValid(true); - setHelperText(); - storage.set('premnemonic', formatted); - setMnemonic(formatted); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [mnemonic, setErrorMessage]); - - useEffect(() => { - setMnemonicValid(false); - setHelperText(); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - setLoading(false); - const hexRegex = /^(0x)?[0-9a-fA-F]{64}$/; - const isvalid = hexRegex.test(pk); - if (isvalid) { - setMnemonicValid(true); - setHelperText(); - return; - } else { - setErrorMessage(chrome.i18n.getMessage('Private__is__invalid')); - return; - } - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [pk, setErrorMessage]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return mnemonicValid ? 'success.light' : 'error.light'; - }; - - const handleTabChange = (event, newValue) => { - setSelectedTab(newValue); - }; - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Sign__in__with')} - - {chrome.i18n.getMessage('Sign__in__Recovery__Phrase')} - - - - - - - - - - - - - - - - - setShowError(false)} - > - { - setShowError(false); - }} - > - Something went wrong, please try again later - - - - ) : ( - - )} - - ); -}; - -export default ImportRecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx deleted file mode 100644 index afb15ec7..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx +++ /dev/null @@ -1,383 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - try { - await wallet.boot(password); - if (pk) { - await wallet.importPrivateKey(pk); - } else { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - } - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx index 1f05891d..cb9d5659 100644 --- a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx @@ -1,42 +1,33 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; +import { + PickUsername, + RepeatPhrase, + AllSet, + LandingComponents, +} from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const Register = () => { - const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); + const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); + const history = useHistory(); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -49,24 +40,6 @@ const Register = () => { }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - const pages: Record = { 0: { component: PickUsername, @@ -94,84 +67,21 @@ const Register = () => { }, }; - const page = (index: number) => renderPage(pages, index); - useEffect(() => { loadView(); }, [loadView]); return ( - <> - - {activeIndex === 5 && } - - - - - - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx index 19b40b2d..bb03e356 100644 --- a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx @@ -1,46 +1,24 @@ -import { IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; -enum Direction { - Right, - Left, -} - const Sync = () => { - const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const pages: Record = { 0: { component: SyncQr, @@ -74,73 +52,21 @@ const Sync = () => { }); }, [wallet, history]); - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index: number) => renderPage(pages, index); - useEffect(() => { loadView(); }, [loadView]); return ( - <> - - {activeIndex === 2 && } - - - - - - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 694644df..783a6340 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -13,7 +13,7 @@ import Reset from './LandingPages/Forgot/Reset'; import RecoverRegister from './LandingPages/RecoverRegister'; import WelcomePage from './LandingPages/WelcomePage'; import AddressImport from './LandingPages/WelcomePage/AddressImport'; -import GoogleImport from './LandingPages/WelcomePage/AddressImport/GoogleImport'; +import GoogleImport from './LandingPages/WelcomePage/GoogleImport'; import Register from './LandingPages/WelcomePage/Register'; import Synce from './LandingPages/WelcomePage/Sync'; From 6011abca73397fc45249c0350cec6171df5f9e55 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 12 Dec 2024 03:05:05 +1100 Subject: [PATCH 13/41] fixed: update add account page --- .../AddAccountPage/AddRegister/index.tsx | 189 +++++------------- .../AddressImport/GoogleImport/index.tsx | 178 ----------------- .../AddAccountPage/AddressImport/index.tsx | 61 ------ .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddAccountPage/GoogleImport/index.tsx | 80 ++++++++ .../AddAccountPage/ProxySync/index.tsx | 1 + .../AddAccountPage/Sync/index.tsx | 155 ++++---------- src/ui/views/MainRoute.tsx | 2 +- 11 files changed, 170 insertions(+), 504 deletions(-) delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/RecoveryPhrase.tsx (99%) create mode 100644 src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx index 3f673ef6..bdf6b485 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx @@ -1,32 +1,25 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; import * as bip39 from 'bip39'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { + PickUsername, + RepeatPhrase, + AllSet, + LandingComponents, +} from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const AddRegister = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); + const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); @@ -36,7 +29,6 @@ const AddRegister = () => { }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -56,58 +48,37 @@ const AddRegister = () => { } }, []); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 1: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 2: { + component: RepeatPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: SetPassword, + props: { + handleClick: goNext, + setExPassword: setPassword, + tempPassword: password, + mnemonic, + username, + }, + }, + 4: { + component: GoogleBackup, + props: { handleClick: goNext, mnemonic, username, password }, + }, + 5: { + component: AllSet, + props: { handleClick: goNext, variant: 'add' }, + }, }; useEffect(() => { @@ -116,78 +87,16 @@ const AddRegister = () => { }, [loadView, loadTempPassword]); return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index 71e5cc58..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { storage } from 'background/webapi'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const loadTempPassword = useCallback(async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }, []); - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location.state.accounts; - const backupAccounts = localStorage.getItem('backupAccounts'); - if (backupAccounts) { - const accountList = JSON.parse(backupAccounts); - setAccounts(accountList); - } else { - setAccounts(users); - } - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - loadTempPassword(); - }, [getGoogleAccounts, loadTempPassword]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx index e3869cbb..de3b9141 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx @@ -100,67 +100,6 @@ const AddressImport = () => { setShowError(false); }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ( - - ); - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } - }; - useEffect(() => { loadView(); }, [loadView]); diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx index 87130123..723901e5 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx index 77f95d44..0276fb36 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx index 02ee6e06..bdf0ad9d 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx new file mode 100644 index 00000000..7812801b --- /dev/null +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx @@ -0,0 +1,80 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; + +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { storage } from 'background/webapi'; + +import DecryptWallet from './DecryptWallet'; +import GoogleAccounts from './GoogleAccounts'; +import RecoveryPassword from './RecoverPassword'; +import RecoveryPhrase from './RecoveryPhrase'; + +interface AccountsState { + accounts: string[]; +} + +const GoogleImport = () => { + const location = useLocation(); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(4); + const [mnemonic, setMnemonic] = useState(''); + const [accounts, setAccounts] = useState([]); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const loadTempPassword = useCallback(async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }, []); + + const getGoogleAccounts = useCallback(async () => { + const users = location?.state?.accounts; + setAccounts(users); + }, [location?.state?.accounts]); + + useEffect(() => { + getGoogleAccounts(); + loadTempPassword(); + }, [getGoogleAccounts, loadTempPassword]); + + const pages: Record = { + 0: { + component: GoogleAccounts, + props: { handleClick: goNext, accounts, setUsername }, + }, + 1: { + component: DecryptWallet, + props: { handleClick: goNext, setMnemonic, username }, + }, + 2: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: RecoveryPassword, + props: { handleClick: goNext, mnemonic, username, lastPassword: password }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, + }; + + return ( + + {renderPage(pages, activeIndex)} + + ); +}; + +export default GoogleImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx index 215cfb7d..2120c8c2 100644 --- a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx @@ -19,6 +19,7 @@ enum Direction { Left, } +// TODO: not applied to the new landing page yet const ProxySync = () => { const history = useHistory(); const wallet = useWallet(); diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx index ee6c4e1f..d5132c77 100644 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx @@ -1,40 +1,25 @@ -import { IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; -enum Direction { - Right, - Left, -} - const Sync = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - const [accountKey, setAccountKey] = useState(null); - const [deviceInfo, setDeviceInfo] = useState(null); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -45,113 +30,43 @@ const Sync = () => { .catch(() => { return; }); - }, [history, wallet]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - default: - return
; - } - }; + }, [wallet, history]); useEffect(() => { loadView(); }, [loadView]); - return ( - <> - - {activeIndex === 2 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - + const pages: Record = { + 0: { + component: SyncQr, + props: { + handleClick: goNext, + savedUsername: username, + confirmMnemonic: setMnemonic, + setUsername: getUsername, + }, + }, + 1: { + component: SetPassword, + props: { handleClick: goNext, mnemonic, username }, + }, + 2: { + component: AllSet, + props: { handleClick: goNext, variant: 'sync' }, + }, + }; - - - + return ( + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 783a6340..0ee283f1 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -4,7 +4,7 @@ import { Switch, Route } from 'react-router-dom'; import AddWelcome from './LandingPages/AddAccountPage'; import AddRegister from './LandingPages/AddAccountPage/AddRegister'; import AddImport from './LandingPages/AddAccountPage/AddressImport'; -import AddGoogle from './LandingPages/AddAccountPage/AddressImport/GoogleImport'; +import AddGoogle from './LandingPages/AddAccountPage/GoogleImport'; import AddSync from './LandingPages/AddAccountPage/Sync'; // import ProxySync from './AddWelcome/ProxySync'; import Forgot from './LandingPages/Forgot'; From 7e90299571c544eb5bbe493d500b8fa54919a8b4 Mon Sep 17 00:00:00 2001 From: zzggo Date: Mon, 16 Dec 2024 02:43:56 +1100 Subject: [PATCH 14/41] fixed: update welcome page structure and components --- .../ImportComponents/Googledrive.tsx | 3 +- .../FRWComponent/LandingPages/SetPassword.tsx | 222 +++++++++ .../utils/{landingPage.ts => landingPage.tsx} | 16 +- .../AddRegister/SetPassword.tsx | 329 ------------- .../AddressImport/SetPassword.tsx | 370 --------------- .../AddAccountPage/AddressImport/index.tsx | 256 ---------- .../AddAccountPage/Sync/SetPassword.tsx | 374 --------------- .../LandingPages/AddAccountPage/index.tsx | 9 - src/ui/views/LandingPages/Reset/index.tsx | 2 +- .../AddressImport}/GoogleBackup.tsx | 0 .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 0 .../Welcome/AddressImport/SetPassword.tsx | 240 ++++++++++ .../Welcome/AddressImport/index.tsx | 126 +++++ .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../GoogleImport/index.tsx | 38 +- .../ProxySync/ProxyQr.tsx | 0 .../ProxySync/SetPassword.tsx | 0 .../ProxySync/index.tsx | 0 .../Register}/GoogleBackup.tsx | 0 .../Register}/RecoveryPhrase.tsx | 0 .../Welcome/Register/SetPassword.tsx | 247 ++++++++++ .../Register}/index.tsx | 61 +-- .../LandingPages/Welcome/Sync/SetPassword.tsx | 198 ++++++++ .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 47 +- src/ui/views/LandingPages/Welcome/index.tsx | 15 + .../AddressImport/GoogleBackup.tsx | 170 ------- .../WelcomePage/AddressImport/ImportPager.tsx | 110 ----- .../AddressImport/RecoverPassword.tsx | 359 -------------- .../WelcomePage/AddressImport/SetPassword.tsx | 393 --------------- .../WelcomePage/AddressImport/index.tsx | 106 ----- .../GoogleImport/DecryptWallet.tsx | 194 -------- .../GoogleImport/GoogleAccounts.tsx | 109 ----- .../GoogleImport/RecoverPassword.tsx | 364 -------------- .../GoogleImport/RecoveryPhrase.tsx | 240 ---------- .../WelcomePage/GoogleImport/index.tsx | 71 --- .../WelcomePage/Register/GoogleBackup.tsx | 170 ------- .../WelcomePage/Register/RecoveryPhrase.tsx | 239 ---------- .../WelcomePage/Register/SetPassword.tsx | 383 --------------- .../WelcomePage/Register/index.tsx | 88 ---- .../WelcomePage/Sync/Namespace.tsx | 42 -- .../WelcomePage/Sync/RegisterHeader.tsx | 63 --- .../WelcomePage/Sync/SetPassword.tsx | 402 ---------------- .../LandingPages/WelcomePage/Sync/SyncQr.tsx | 449 ------------------ .../LandingPages/WelcomePage/Sync/index.tsx | 73 --- .../views/LandingPages/WelcomePage/index.tsx | 9 - src/ui/views/MainRoute.tsx | 34 +- src/ui/views/index.tsx | 1 - 52 files changed, 1129 insertions(+), 5493 deletions(-) create mode 100644 src/ui/FRWComponent/LandingPages/SetPassword.tsx rename src/ui/utils/{landingPage.ts => landingPage.tsx} (71%) delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/index.tsx rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/AddressImport}/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/AddressImport/RecoverPassword.tsx (100%) create mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx create mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/index.tsx rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/index.tsx (69%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/index.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage/AddressImport => Welcome/Register}/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/Register}/RecoveryPhrase.tsx (100%) create mode 100644 src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/Register}/index.tsx (61%) create mode 100644 src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/Sync/index.tsx (61%) create mode 100644 src/ui/views/LandingPages/Welcome/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/index.tsx diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx index 90ce2d2d..04398b90 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx @@ -47,9 +47,8 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { - const prevPath = history.location.pathname; history.push({ - pathname: prevPath === '/addressimport' ? '/import/google' : '/add/google', + pathname: '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/FRWComponent/LandingPages/SetPassword.tsx b/src/ui/FRWComponent/LandingPages/SetPassword.tsx new file mode 100644 index 00000000..6a6cb56e --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/SetPassword.tsx @@ -0,0 +1,222 @@ +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import { + Box, + LinearProgress, + Typography, + Input, + InputAdornment, + IconButton, + FormControlLabel, + Checkbox, + Link, + Button, + Snackbar, + Alert, +} from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React from 'react'; +import zxcvbn from 'zxcvbn'; + +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; +import { LLSpinner } from '@/ui/FRWComponent'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +// Password Indicator Component +interface PasswordIndicatorProps { + value: string; +} + +export const PasswordIndicator = ({ value }: PasswordIndicatorProps) => { + const score = zxcvbn(value).score; + const percentage = ((score + 1) / 5) * 100; + + const level = (score: number) => { + switch (score) { + case 0: + case 1: + return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; + case 2: + return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; + case 3: + return { text: chrome.i18n.getMessage('Great'), color: 'success' }; + case 4: + return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; + default: + return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; + } + }; + + return ( + + + + + + + {level(score).text} + + + + ); +}; + +// Password Input Component +interface PasswordInputProps { + value: string; + onChange: (value: string) => void; + isVisible: boolean; + setVisible: (visible: boolean) => void; + readOnly?: boolean; + placeholder?: string; + autoFocus?: boolean; + className?: string; +} + +export const PasswordInput = ({ + value, + onChange, + isVisible, + setVisible, + readOnly = false, + placeholder = chrome.i18n.getMessage('Create__a__password'), + autoFocus = false, + className, +}: PasswordInputProps) => { + const classes = useStyles(); + + return ( + onChange(e.target.value)} + endAdornment={ + + {value && } + setVisible(!isVisible)}> + {isVisible ? : } + + + } + /> + ); +}; + +// Terms Checkbox Component +interface TermsCheckboxProps { + onChange: (checked: boolean) => void; +} + +export const TermsCheckbox = ({ onChange }: TermsCheckboxProps) => ( + } + checkedIcon={} + onChange={(event) => onChange(event.target.checked)} + /> + } + label={ + + {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} + + {chrome.i18n.getMessage('Privacy__Policy')} + {' '} + {chrome.i18n.getMessage('and') + ' '} + + {chrome.i18n.getMessage('Terms__of__Service')} + {' '} + . + + } + /> +); + +// Error Snackbar Component +interface ErrorSnackbarProps { + open: boolean; + message: string; + onClose: () => void; +} + +export const ErrorSnackbar = ({ open, message, onClose }: ErrorSnackbarProps) => ( + + + {message} + + +); + +// Submit Button Component +interface SubmitButtonProps { + onClick: () => void; + isLoading: boolean; + disabled: boolean; + isLogin?: boolean; +} + +export const SubmitButton = ({ + onClick, + isLoading, + disabled, + isLogin = false, +}: SubmitButtonProps) => ( + +); diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.tsx similarity index 71% rename from src/ui/utils/landingPage.ts rename to src/ui/utils/landingPage.tsx index 3066cf57..f3899eab 100644 --- a/src/ui/utils/landingPage.ts +++ b/src/ui/utils/landingPage.tsx @@ -1,5 +1,5 @@ import { Box } from '@mui/material'; -import React, { useState } from 'react'; +import React, { type FC, useState } from 'react'; import { useHistory } from 'react-router-dom'; export interface PageConfig { @@ -12,14 +12,14 @@ export enum Direction { Left, } -export const getPageConfig = (pages: Record, index: number): PageConfig => { - return pages[index] || { component: () => React.createElement(Box), props: {} }; -}; +interface PageStepperProps { + activeIndex: number; + children: React.ReactNode; +} -export const renderPage = (pages: Record, index: number): JSX.Element => { - const pageConfig = getPageConfig(pages, index); - const Comp = pageConfig.component; - return React.createElement(Comp, pageConfig.props); +export const PageSlider: FC = ({ activeIndex, children }) => { + const pages = React.Children.toArray(children); + return {pages[activeIndex]}; }; export const getDirectionType = (direction: Direction) => { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx deleted file mode 100644 index c983f098..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx +++ /dev/null @@ -1,329 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Checkbox, - FormControlLabel, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(tempPassword); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - const accountKey = getAccountKey(mnemonic); - // track the time until account_created is called - mixpanelBrowserService.time('account_created'); - wallet.openapi - .register(accountKey, username) - .then((response) => { - return wallet.boot(password); - }) - .then((response) => { - setExPassword(password); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(mnemonic); - }) - .then((accounts) => { - handleClick(); - return wallet.openapi.createFlowAddress(); - }) - .then((address) => { - setLoading(false); - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - return ( - <> - - {chrome.i18n.getMessage('Confirm__Password')} - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - - {helperText} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx deleted file mode 100644 index dc74e8d3..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx +++ /dev/null @@ -1,370 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accounts, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const loadTempPassword = useCallback(async () => { - setPassword(tempPassword); - }, [tempPassword]); - - useEffect(() => { - loadTempPassword(); - }, [loadTempPassword]); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const handleImport = async () => { - setLoading(true); - const accountKeyStruct = { - public_key: accounts[0].pubK, - sign_algo: getSignAlgo(accounts[0].signAlgo), - hash_algo: getHashAlgo(accounts[0].hashAlgo), - weight: 1000, - }; - const result = await wallet.openapi.getLocation(); - const installationId = await wallet.openapi.getInstallationId(); - const userlocation = result.data; - const device_info = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - user_agent: 'Chrome', - zip: userlocation.zip, - }; - const address = accounts[0].address.replace(/^0x/, ''); - wallet.openapi - .importKey(accountKeyStruct, device_info, username, {}, address) - .then((response) => { - return wallet.boot(password); - }) - .then(async (response) => { - storage.remove('premnemonic'); - - await saveIndex(username); - if (pk) { - return wallet.importPrivateKey(pk); - } else { - return wallet.createKeyringWithMnemonics(mnemonic); - } - }) - .then((address) => { - setLoading(false); - if (pk) { - goEnd(); - } else { - handleClick(); - } - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx deleted file mode 100644 index de3b9141..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import { IconButton, Typography, Snackbar, Alert } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { storage } from 'background/webapi'; -import { LLPinAlert } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - -import GoogleBackup from './GoogleBackup'; -import ImportPager from './ImportPager'; -import RecoverPassword from './RecoverPassword'; -import SetPassword from './SetPassword'; - -enum Direction { - Right, - Left, -} - -const AddressImport = () => { - const history = useHistory(); - const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [pk, setPk] = useState(null); - const [username, setUsername] = useState(''); - const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [password, setPassword] = useState(null); - const [accounts, setAccounts] = useState([]); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - const loadView = useCallback(async () => { - // console.log(wallet); - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [history, wallet]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const goPassword = () => { - setDirection(Direction.Right); - onChange(3); - }; - const goGoogle = () => { - setDirection(Direction.Right); - onChange(4); - }; - const goEnd = () => { - setDirection(Direction.Right); - onChange(5); - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - - - - - - - - - - - - - - - - - - - - - - - {errMessage} - - - - - ); -}; - -export default AddressImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx deleted file mode 100644 index 59e87eb9..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx +++ /dev/null @@ -1,374 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setUsername, accountKey, deviceInfo }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const register = async () => { - setLoading(true); - await wallet.signInV3(mnemonic, accountKey, deviceInfo); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - await saveIndex(userInfo.username); - try { - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - return ( - <> - - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/index.tsx b/src/ui/views/LandingPages/AddAccountPage/index.tsx deleted file mode 100644 index d2536d0f..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; - -const AddWelcome = () => { - return ; -}; - -export default AddWelcome; diff --git a/src/ui/views/LandingPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx index bee6f2b7..e292a6cf 100644 --- a/src/ui/views/LandingPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -54,7 +54,7 @@ const Reset = () => { const accounts = await wallets.loadBackupAccounts(); if (accounts.length > 0) { history.push({ - pathname: '/import/google', + pathname: '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx new file mode 100644 index 00000000..76a55758 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx @@ -0,0 +1,240 @@ +import { Box, Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React, { useCallback, useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { useWallet, saveIndex } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accounts, goEnd }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isCheck, setCheck] = useState(false); + const [isLoading, setLoading] = useState(false); + const [notBot, setNotBot] = useState(true); + const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); + const [showError, setShowError] = useState(false); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isMatch, setMatch] = useState(false); + + const loadTempPassword = useCallback(async () => { + setPassword(tempPassword); + }, [tempPassword]); + + useEffect(() => { + loadTempPassword(); + }, [loadTempPassword]); + + const successInfo = (message) => ( + + + + {message} + + + ); + + const errorInfo = (message) => ( + + + + {message} + + + ); + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + + const handleImport = async () => { + setLoading(true); + try { + const accountKeyStruct = { + public_key: accounts[0].pubK, + sign_algo: getSignAlgo(accounts[0].signAlgo), + hash_algo: getHashAlgo(accounts[0].hashAlgo), + weight: 1000, + }; + const result = await wallet.openapi.getLocation(); + const installationId = await wallet.openapi.getInstallationId(); + const userlocation = result.data; + const device_info = { + city: userlocation.city, + continent: userlocation.country, + continentCode: userlocation.countryCode, + country: userlocation.country, + countryCode: userlocation.countryCode, + currency: userlocation.countryCode, + device_id: installationId, + district: '', + ip: userlocation.query, + isp: userlocation.as, + lat: userlocation.lat, + lon: userlocation.lon, + name: 'FRW Chrome Extension', + org: userlocation.org, + regionName: userlocation.regionName, + type: '2', + user_agent: 'Chrome', + zip: userlocation.zip, + }; + const address = accounts[0].address.replace(/^0x/, ''); + + await wallet.openapi.importKey(accountKeyStruct, device_info, username, {}, address); + await wallet.boot(password); + storage.remove('premnemonic'); + await saveIndex(username); + + if (pk) { + await wallet.importPrivateKey(pk); + goEnd(); + } else { + await wallet.createKeyringWithMnemonics(mnemonic); + handleClick(); + } + setLoading(false); + } catch (error) { + console.log('error', error); + setShowError(true); + setLoading(false); + } + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (!tempPassword) { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + } else { + setMatch(true); // Auto-match when using tempPassword + } + }, [confirmPassword, password, tempPassword]); + + return ( + <> + + + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + {!tempPassword && ( + + + + {helperMatch} + + + )} + + + + + + + + + setShowError(false)} /> + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx new file mode 100644 index 00000000..57cadb6f --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx @@ -0,0 +1,126 @@ +import { Snackbar, Alert, Box } from '@mui/material'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useHistory } from 'react-router-dom'; + +import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; +import { storage } from 'background/webapi'; +import { LLPinAlert } from 'ui/FRWComponent'; +import { useWallet } from 'ui/utils'; + +import GoogleBackup from './GoogleBackup'; +import ImportPager from './ImportPager'; +import RecoverPassword from './RecoverPassword'; +import SetPassword from './SetPassword'; + +const AddressImport = () => { + const history = useHistory(); + const wallet = useWallet(); + + const navigation = useNavigation(5); + + const [mnemonic, setMnemonic] = useState(''); + const [pk, setPk] = useState(null); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [accounts, setAccounts] = useState([]); + const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); + const [showError, setShowError] = useState(false); + + const getUsername = (username: string) => { + setUsername(username.toLowerCase()); + }; + + const loadTempPassword = useCallback(async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }, []); + + useEffect(() => { + loadTempPassword(); + }, []); + + const loadView = useCallback(async () => { + wallet + .getCurrentAccount() + .then((res) => { + if (res) { + history.push('/'); + } + }) + .catch(() => { + return; + }); + }, [wallet, history]); + + useEffect(() => { + loadView(); + }, [loadView]); + + const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + setShowError(false); + }; + + return ( + + + navigation.goCustom(3)} + handleClick={navigation.goNext} + setErrorMessage={setErrorMessage} + setShowError={setShowError} + /> + + navigation.goCustom(4)} + tempPassword={password} + mnemonic={mnemonic} + pk={pk} + username={username} + accounts={accounts} + goEnd={() => navigation.goCustom(5)} + /> + navigation.goCustom(5)} + accountKey={accounts} + /> + + + + + ); +}; + +export default AddressImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx similarity index 69% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx index 7812801b..dcaf15a3 100644 --- a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { useNavigation, PageSlider } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import DecryptWallet from './DecryptWallet'; @@ -40,29 +40,6 @@ const GoogleImport = () => { loadTempPassword(); }, [getGoogleAccounts, loadTempPassword]); - const pages: Record = { - 0: { - component: GoogleAccounts, - props: { handleClick: goNext, accounts, setUsername }, - }, - 1: { - component: DecryptWallet, - props: { handleClick: goNext, setMnemonic, username }, - }, - 2: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: RecoveryPassword, - props: { handleClick: goNext, mnemonic, username, lastPassword: password }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - return ( { showConfetti={activeIndex === 4} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + + + ); }; diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/index.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx new file mode 100644 index 00000000..e2c4b6f8 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx @@ -0,0 +1,247 @@ +import { Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import { Box } from '@mui/system'; +import HDWallet from 'ethereum-hdwallet'; +import React, { useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { type AccountKey } from 'background/service/networkModel'; +import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, + inputBox2: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassword = '' }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(tempPassword); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isMatch, setMatch] = useState(false); + const [isCheck, setCheck] = useState(false); + const [isLoading, setLoading] = useState(false); + const [notBot, setNotBot] = useState(true); + const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); + const [showError, setShowError] = useState(false); + + const getAccountKey = (mnemonic) => { + const hdwallet = HDWallet.fromMnemonic(mnemonic); + const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); + const key: AccountKey = { + hash_algo: 1, + sign_algo: 2, + weight: 1000, + public_key: publicKey, + }; + return key; + }; + + const successInfo = (message) => { + return ( + + + + {message} + + + ); + }; + + const errorInfo = (message) => { + return ( + + + + {message} + + + ); + }; + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + const handleErrorClose = () => setShowError(false); + + const register = async () => { + setLoading(true); + + await saveIndex(username); + const accountKey = getAccountKey(mnemonic); + // track the time until account_created is called + mixpanelBrowserService.time('account_created'); + wallet.openapi + .register(accountKey, username) + .then((response) => { + return wallet.boot(password); + }) + .then((response) => { + setExPassword(password); + storage.remove('premnemonic'); + return wallet.createKeyringWithMnemonics(mnemonic); + }) + .then((accounts) => { + handleClick(); + return wallet.openapi.createFlowAddress(); + }) + .then((address) => { + setLoading(false); + }) + .catch((error) => { + console.log('error', error); + setShowError(true); + setLoading(false); + }); + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (!tempPassword) { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + } else { + setMatch(true); // Auto-match when using tempPassword + } + }, [confirmPassword, password, tempPassword]); + + return ( + <> + + + {tempPassword ? ( + chrome.i18n.getMessage('Confirm__Password') + ) : ( + <> + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + )} + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + {!tempPassword && ( + + + + {helperMatch} + + + )} + + + + + + + + + + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx b/src/ui/views/LandingPages/Welcome/Register/index.tsx similarity index 61% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx rename to src/ui/views/LandingPages/Welcome/Register/index.tsx index bdf6b485..60871320 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Register/index.tsx @@ -8,7 +8,7 @@ import { AllSet, LandingComponents, } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; @@ -16,12 +16,12 @@ import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -const AddRegister = () => { +const Register = () => { const history = useHistory(); const wallet = useWallet(); const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); + const [password, setPassword] = useState(''); const [mnemonic] = useState(bip39.generateMnemonic()); const getUsername = (username: string) => { @@ -48,39 +48,6 @@ const AddRegister = () => { } }, []); - const pages: Record = { - 0: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 1: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 2: { - component: RepeatPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: SetPassword, - props: { - handleClick: goNext, - setExPassword: setPassword, - tempPassword: password, - mnemonic, - username, - }, - }, - 4: { - component: GoogleBackup, - props: { handleClick: goNext, mnemonic, username, password }, - }, - 5: { - component: AllSet, - props: { handleClick: goNext, variant: 'add' }, - }, - }; - useEffect(() => { loadView(); loadTempPassword(); @@ -95,9 +62,27 @@ const AddRegister = () => { showConfetti={activeIndex === 5} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + + + + ); }; -export default AddRegister; +export default Register; diff --git a/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx new file mode 100644 index 00000000..b2e24135 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx @@ -0,0 +1,198 @@ +import { Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import { Box } from '@mui/system'; +import React, { useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { + PasswordInput, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { useWallet, saveIndex } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, username, setUsername, accountKey, deviceInfo }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isMatch, setMatch] = useState(false); + const [isLoading, setLoading] = useState(false); + const [errorMessage, setErrorMessage] = useState('Something went wrong'); + const [showError, setShowError] = useState(false); + + const loadTempPassword = async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }; + + useEffect(() => { + loadTempPassword(); + }, []); + + const successInfo = (message) => ( + + + + {message} + + + ); + + const errorInfo = (message) => ( + + + + {message} + + + ); + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + + const register = async () => { + setLoading(true); + try { + await wallet.signInV3(mnemonic, accountKey, deviceInfo); + const userInfo = await wallet.getUserInfo(true); + setUsername(userInfo.username); + await saveIndex(userInfo.username); + await wallet.boot(password); + const formatted = mnemonic.trim().split(/\s+/g).join(' '); + await wallet.createKeyringWithMnemonics(formatted); + setLoading(false); + handleClick(); + } catch (e) { + setLoading(false); + setErrorMessage(e.message); + setShowError(true); + } + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + }, [confirmPassword, password]); + + return ( + <> + + + {chrome.i18n.getMessage('Welcome__Back')} + + {username} + + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + + + + {helperMatch} + + + + + + + + + setShowError(false)} /> + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx b/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx b/src/ui/views/LandingPages/Welcome/Sync/index.tsx similarity index 61% rename from src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx rename to src/ui/views/LandingPages/Welcome/Sync/index.tsx index d5132c77..503c66ab 100644 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Sync/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; import SetPassword from './SetPassword'; @@ -11,9 +11,12 @@ import SyncQr from './SyncQr'; const Sync = () => { const history = useHistory(); const wallet = useWallet(); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); - const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); + const [mnemonic, setMnemonic] = useState(''); + const [accountKey, setAccountKey] = useState(null); + const [deviceInfo, setDeviceInfo] = useState(null); const getUsername = (username: string) => { setUsername(username.toLowerCase()); @@ -36,26 +39,6 @@ const Sync = () => { loadView(); }, [loadView]); - const pages: Record = { - 0: { - component: SyncQr, - props: { - handleClick: goNext, - savedUsername: username, - confirmMnemonic: setMnemonic, - setUsername: getUsername, - }, - }, - 1: { - component: SetPassword, - props: { handleClick: goNext, mnemonic, username }, - }, - 2: { - component: AllSet, - props: { handleClick: goNext, variant: 'sync' }, - }, - }; - return ( { showConfetti={activeIndex === 2} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + ); }; diff --git a/src/ui/views/LandingPages/Welcome/index.tsx b/src/ui/views/LandingPages/Welcome/index.tsx new file mode 100644 index 00000000..beffff3c --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; + +const Welcome = () => { + return ( + + ); +}; + +export default Welcome; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx deleted file mode 100644 index c7cf5362..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleClick(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx deleted file mode 100644 index 174f739e..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useState } from 'react'; - -import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; -import { useWallet } from '@/ui/utils'; - -const ImportPager = ({ - setMnemonic, - setPk, - setAccounts, - accounts, - mnemonic, - pk, - setUsername, - goPassword, - handleClick, - setErrorMessage, - setShowError, -}) => { - const [selectedTab, setSelectedTab] = useState(0); - const [isImport, setImport] = useState(false); - const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); - const [newKey, setKeyNew] = useState(true); - const wallet = useWallet(); - - const signIn = async (accountKey) => { - setSignLoading(true); - if (accountKey[0].mnemonic) { - signMnemonic(accountKey); - } else { - signPk(accountKey); - } - }; - - const signMnemonic = async (accountKey) => { - try { - const result = await wallet.signInWithMnemonic(accountKey[0].mnemonic); - setSignLoading(false); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - goPassword(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setImport(false); - } else { - setKeyNew(false); - } - } - }; - - const signPk = async (accountKey) => { - try { - const result = await wallet.signInWithPrivatekey(accountKey[0].pk); - setSignLoading(false); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - goPassword(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setImport(false); - } else { - setKeyNew(false); - } - } - }; - - const handleTabChange = (event, newValue) => { - setSelectedTab(newValue); - }; - - const handleImport = async (accountKey?: any) => { - setAccounts(accountKey); - const result = await wallet.openapi.checkImport(accountKey[0].pubK); - if (result.status === 409) { - signIn(accountKey); - } else { - if (!accountKey[0].address) { - handleNotFoundPopup(); - return; - } - handleClick(); - } - }; - - const handleNotFoundPopup = async () => { - setAddressFound(!addressFound); - }; - - return ( - - ); -}; - -export default ImportPager; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx deleted file mode 100644 index 5fae56b9..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx +++ /dev/null @@ -1,359 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { storage } from 'background/webapi'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - try { - await wallet.boot(password); - await saveIndex(username); - if (pk) { - await wallet.importPrivateKey(pk); - } else { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - } - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx deleted file mode 100644 index 658df5ab..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx +++ /dev/null @@ -1,393 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, setExPassword, accounts, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const handleImport = async () => { - console.log('account key ', accounts); - setLoading(true); - if (accounts.length > 1) { - setLoading(true); - } else { - const accountKeyStruct = { - public_key: accounts[0].pubK, - sign_algo: getSignAlgo(accounts[0].signAlgo), - hash_algo: getHashAlgo(accounts[0].hashAlgo), - weight: 1000, - }; - const installationId = await wallet.openapi.getInstallationId(); - // console.log('location ', userlocation); - const device_info = { - device_id: installationId, - name: 'FRW Chrome Extension', - type: '2', - user_agent: 'Chrome', - }; - const address = accounts[0].address.replace(/^0x/, ''); - wallet.openapi - .importKey(accountKeyStruct, device_info, username, {}, address) - .then((response) => { - return wallet.boot(password); - }) - .then(async (response) => { - setExPassword(password); - storage.remove('premnemonic'); - - await saveIndex(username); - if (pk) { - return wallet.importPrivateKey(pk); - } else { - return wallet.createKeyringWithMnemonics(mnemonic); - } - }) - .then((address) => { - setLoading(false); - if (pk) { - goEnd(); - } else { - handleClick(); - } - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx deleted file mode 100644 index 29c81ec6..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import ImportPager from './ImportPager'; -import RecoverPassword from './RecoverPassword'; -import SetPassword from './SetPassword'; - -const AddressImport = () => { - const history = useHistory(); - const wallet = useWallet(); - const { activeIndex, direction, goNext, goBack, goCustom } = useNavigation(4); - const [mnemonic, setMnemonic] = useState(''); - const [pk, setPk] = useState(null); - const [username, setUsername] = useState(''); - const [errorMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [accounts, setAccounts] = useState([]); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - const pages: Record = { - 0: { - component: ImportPager, - props: { - setMnemonic, - setPk, - setAccounts, - accounts, - mnemonic, - pk, - setUsername, - goPassword: () => goCustom(3), - handleClick: goNext, - setErrorMessage, - setShowError, - }, - }, - 1: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 2: { - component: SetPassword, - props: { - handleClick: goNext, - mnemonic, - pk, - username, - accounts, - goEnd: () => goNext(), - }, - }, - 3: { - component: RecoverPassword, - props: { - handleClick: goNext, - mnemonic, - pk, - username, - goEnd: () => goNext(), - }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default AddressImport; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx deleted file mode 100644 index 7c0d564d..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { Button, Typography, IconButton, Input, InputAdornment, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const DecryptWallet = ({ handleClick, setMnemonic, username, setNextPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - // const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const decryptWallet = async () => { - setLoading(true); - // await wallet.boot(password); - // const formatted = mnemonic.trim().split(/\s+/g).join(' '); - // await wallet.createKeyringWithMnemonics(formatted); - try { - const mnemonic = await wallet.restoreAccount(username, password); - // console.log('mnemonic ->', mnemonic); - setLoading(false); - setMnemonic(mnemonic); - setNextPassword(password); - handleClick(); - } catch (e) { - setLoading(false); - setHelperText( - errorInfo(chrome.i18n.getMessage('Incorrect__decrypt__password__please__try__again')) - ); - } - }; - - useEffect(() => { - if (password.length < 8) { - setHelperText( - errorInfo(chrome.i18n.getMessage('The__decrypt__password__should__be__8__characters__long')) - ); - setCharacters(false); - } else { - setHelperText(
); - setCharacters(true); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage('Please__enter__your__password__to__decrypt')} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - - - - - ); -}; - -export default DecryptWallet; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index 2b91ed3a..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; -import { - Typography, - Avatar, - Box, - List, - ListItemIcon, - ListItemButton, - ListItemText, - IconButton, - ListItem, -} from '@mui/material'; -import React, { useState, useEffect, useCallback } from 'react'; - -import { useWallet } from 'ui/utils'; - -const FetchAvatar = ({ username }) => { - const [avatar, setAvatar] = useState( - `https://lilico.app/api/avatar/beam/120/${username}?colors=FFDD32,FC814A,7678ED,B3DEE2,BCF0DA` - ); - const wallet = useWallet(); - - const fetchUserAvatar = useCallback( - async (username) => { - const { data } = await wallet.openapi.searchUser(username); - const users = data.users; - if (users.length > 0 && users[0].avatar) { - setAvatar(users[0].avatar); - } - }, - [wallet] - ); - - useEffect(() => { - fetchUserAvatar(username); - }, [fetchUserAvatar, username]); - - return ; -}; - -const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { - return ( - <> - - - {chrome.i18n.getMessage('We__ve__found') + ' '} - - {accounts.length} - {chrome.i18n.getMessage('matching__accounts')} - - - - {chrome.i18n.getMessage('Select__the__account__which__you__want__to__restore__back')} - - - - - {accounts && - accounts.map((account) => { - return ( - - { - setUsername(account); - handleClick(); - }} - sx={{ - display: 'flex', - border: '2px solid #5E5E5E', - width: '100%', - borderRadius: '12px', - backgroundColor: '#333333', - transition: 'all .3s linear', - py: '8px', - px: '16px', - justifyContent: 'center', - mb: '12px', - }} - > - - - - - - - - - - - ); - })} - - - - - ); -}; - -export default GoogleAccounts; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index cdd29bee..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx +++ /dev/null @@ -1,364 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(lastPassword); - const [confirmPassword, setConfirmPassword] = useState(lastPassword); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - const [showDialog, setShowDialog] = useState(false); - const [isCheck, setCheck] = useState(true); - - const login = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.signInWithMnemonic(mnemonic); - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - if (e.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - useEffect(() => { - if (isCheck) { - setPassword(lastPassword); - setConfirmPassword(lastPassword); - } else { - setPassword(''); - setConfirmPassword(''); - } - }, [isCheck, lastPassword]); - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('Use__the__same__Google__Drive__password')} - - } - /> - - - - - ) : ( - - )} - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 0d3e5854..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Review') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx deleted file mode 100644 index e453c3c5..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const { activeIndex, direction, goNext, goBack } = useNavigation(4); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - - const getGoogleAccounts = useCallback(async () => { - const users = location?.state?.accounts; - setAccounts(users); - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const pages: Record = { - 0: { - component: GoogleAccounts, - props: { handleClick: goNext, accounts, setUsername }, - }, - 1: { - component: DecryptWallet, - props: { handleClick: goNext, setMnemonic, username, setNextPassword: setPassword }, - }, - 2: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: RecoveryPassword, - props: { handleClick: goNext, mnemonic, username, lastPassword: password }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx deleted file mode 100644 index c7cf5362..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleClick(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx deleted file mode 100644 index dbde6982..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(false); - const [isCoverBlur, coverBlur] = useState(true); - - return ( - <> - - - {chrome.i18n.getMessage('Recovery')} - - {chrome.i18n.getMessage('Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx deleted file mode 100644 index 3259cdf8..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx +++ /dev/null @@ -1,383 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setExPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - const accountKey = getAccountKey(mnemonic); - // track the time until account_created is called - // mixpanelBrowserService.time('account_created'); - wallet.openapi - .register(accountKey, username) - .then((response) => { - return wallet.boot(password); - }) - .then((response) => { - setExPassword(password); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(mnemonic); - }) - .then((accounts) => { - handleClick(); - return wallet.openapi.createFlowAddress(); - }) - .then((address) => { - setLoading(false); - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx deleted file mode 100644 index cb9d5659..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { - PickUsername, - RepeatPhrase, - AllSet, - LandingComponents, -} from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import GoogleBackup from './GoogleBackup'; -import RecoveryPhrase from './RecoveryPhrase'; -import SetPassword from './SetPassword'; - -const Register = () => { - const wallet = useWallet(); - const { activeIndex, direction, goNext, goBack } = useNavigation(5); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); - const [mnemonic] = useState(bip39.generateMnemonic()); - const history = useHistory(); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - const pages: Record = { - 0: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 1: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 2: { - component: RepeatPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: SetPassword, - props: { handleClick: goNext, setExPassword: setPassword, mnemonic, username }, - }, - 4: { - component: GoogleBackup, - props: { handleClick: goNext, mnemonic, username, password }, - }, - 5: { - component: AllSet, - props: { handleClick: goNext, variant: 'register' }, - }, - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default Register; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx deleted file mode 100644 index 1e692af8..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// Assuming the necessary imports and types are available -// For instance, Blockchain and ProposalNamespace types must be defined - -class Blockchain { - constructor(public namespace: string) { - // Constructor logic, if any - } - - // Additional methods or properties, if any -} - -interface ProposalNamespace { - chains: Set; - methods: Set; - events: Set; -} - -class FlowWallet { - // This assumes currentNetwork is defined and has an isMainnet property. - // You will need to adapt this based on your actual network handling logic. - static get blockchain(): Blockchain { - return new Blockchain(1 ? 'flow:mainnet' : 'flow:testnet'); - } - - static namespaces( - methods: Set, - events: Set = new Set() - ): Record { - const blockchains: Set = new Set([FlowWallet.blockchain]); - const namespaces: Record = { - [FlowWallet.blockchain.namespace]: { chains: blockchains, methods, events }, - }; - return namespaces; - } -} - -// Usage Example -const methods = new Set(['method1', 'method2']); -const events = new Set(['event1']); -const namespaces = FlowWallet.namespaces(methods, events); - -console.log(namespaces); diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx deleted file mode 100644 index 7b6f6567..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx +++ /dev/null @@ -1,402 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx deleted file mode 100644 index 6b288ffd..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx +++ /dev/null @@ -1,449 +0,0 @@ -import { Button, Typography, FormControl, Input, InputAdornment } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import { Core } from '@walletconnect/core'; -import SignClient from '@walletconnect/sign-client'; -import { PairingTypes, type SessionTypes } from '@walletconnect/types'; -import * as bip39 from 'bip39'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useCallback, useState } from 'react'; -import { QRCode } from 'react-qrcode-logo'; - -import { FCLWalletConnectMethod } from '@/ui/utils/type'; -import lilo from 'ui/FRWAssets/image/lilo.png'; -import { useWallet } from 'ui/utils'; - -interface AccountKey { - hashAlgo: number; - publicKey: string; - signAlgo: number; - weight: number; -} - -interface DeviceInfoRequest { - deviceId: string; - ip: string; - name: string; - type: string; - userAgent: string; - - continent?: string; - continentCode?: string; - country?: string; - countryCode?: string; - regionName?: string; - city?: string; - district?: string; - zip?: string; - lat?: number; - lon?: number; - timezone?: string; - currency?: string; - isp?: string; - org?: string; - device_id?: string; -} - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const SyncQr = ({ handleClick, savedUsername, confirmMnemonic, setUsername }) => { - const usewallet = useWallet(); - const classes = useStyles(); - const [Uri, setUri] = useState(''); - const [loading, setShowLoading] = useState(false); - const [session, setSession] = useState(); - const [mnemonic, setMnemonic] = useState(bip39.generateMnemonic()); - const [currentNetwork, setNetwork] = useState('mainnet'); - - const loadNetwork = useCallback(async () => { - const currentNetwork = await usewallet.getNetwork(); - setNetwork(currentNetwork); - }, [usewallet]); - - useEffect(() => { - loadNetwork(); - }, [loadNetwork]); - - const onSessionConnected = useCallback(async (_session: SessionTypes.Struct) => { - console.log('_session ', _session); - setShowLoading(true); - setSession(_session); - }, []); - - const _subscribeToEvents = useCallback( - async (_client: SignClient) => { - if (typeof _client === 'undefined') { - throw new Error('WalletConnect is not initialized'); - } - - _client.on('session_update', ({ topic, params }) => { - console.log('EVENT', 'session_update', { topic, params }); - const { namespaces } = params; - const _session = _client.session.get(topic); - const updatedSession = { ..._session, namespaces }; - onSessionConnected(updatedSession); - }); - console.log('EVENT _client ', _client); - }, - [onSessionConnected] - ); - - const getAccountKey = useCallback(() => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hashAlgo: 1, - signAlgo: 2, - weight: 1000, - publicKey: publicKey, - }; - return key; - }, [mnemonic]); - - const getDeviceInfo = useCallback(async (): Promise => { - const result = await usewallet.openapi.getLocation(); - const installationId = await usewallet.openapi.getInstallationId(); - const userlocation = result.data; - const deviceInfo: DeviceInfoRequest = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - deviceId: installationId, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - userAgent: 'Chrome', - zip: userlocation.zip, - }; - return deviceInfo; - }, [usewallet]); - - const sendRequest = useCallback( - async (wallet: SignClient, topic: string) => { - wallet - .request({ - topic: topic, - chainId: `flow:${currentNetwork}`, - request: { - method: FCLWalletConnectMethod.accountInfo, - params: [], - }, - }) - .then(async (result: any) => { - const jsonObject = JSON.parse(result); - if (jsonObject.method === FCLWalletConnectMethod.accountInfo) { - const accountKey: AccountKey = getAccountKey(); - const deviceInfo: DeviceInfoRequest = await getDeviceInfo(); - - wallet - .request({ - topic: topic, - chainId: `flow:${currentNetwork}`, - request: { - method: FCLWalletConnectMethod.addDeviceInfo, - params: { - method: '', - data: { - username: '', - accountKey: accountKey, - deviceInfo: deviceInfo, - }, - }, - }, - }) - .then(async (sent) => { - const ak = { - public_key: accountKey.publicKey, - hash_algo: accountKey.hashAlgo, - sign_algo: accountKey.signAlgo, - weight: accountKey.weight, - }; - usewallet - .signInV3(mnemonic, ak, deviceInfo) - .then(async (result) => { - confirmMnemonic(mnemonic); - const userInfo = await usewallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - }) - .catch((error) => { - console.error('Error in sign in wallet request:', error); - }); - }) - .catch((error) => { - console.error('Error in second wallet request:', error); - }); - } - }) - .catch((error) => { - console.error('Error in first wallet request:', error); - }); - }, - [ - confirmMnemonic, - currentNetwork, - getAccountKey, - getDeviceInfo, - handleClick, - mnemonic, - setUsername, - usewallet, - ] - ); - - useEffect(() => { - const createWeb3Wallet = async () => { - try { - const wallet = await SignClient.init({ - // @ts-ignore: Unreachable code error - core: new Core({ - projectId: process.env.WC_PROJECTID, - }), - metadata: { - name: 'Flow Walllet', - description: 'Digital wallet created for everyone.', - url: 'https://fcw-link.lilico.app', - icons: ['https://fcw-link.lilico.app/logo.png'], - }, - }); - await _subscribeToEvents(wallet); - - try { - const { uri, approval } = await wallet.connect({ - requiredNamespaces: { - flow: { - methods: [FCLWalletConnectMethod.accountInfo, FCLWalletConnectMethod.addDeviceInfo], - chains: [`flow:${currentNetwork}`], - events: [], - }, - }, - }); - - if (uri) { - console.log('uri ', uri); - await setUri(uri); - const session = await approval(); - await onSessionConnected(session); - - console.log('session ', session); - sendRequest(wallet, session.topic); - } - } catch (e) { - console.error(e); - } - } catch (e) { - console.error(e); - } - }; - createWeb3Wallet(); - }, []); - - return ( - <> - - - - - {chrome.i18n.getMessage('Sync_')}{' '} - - {chrome.i18n.getMessage('Lilico')} - - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage('Open_your_Flow_Reference_on_Mobil')} - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage(' Note_Your_recovery_phrase_will_not')} - - - - - {/* - {Uri} - - {copySuccess && {copySuccess}} - */} - {Uri && ( - - - - - - {loading && ( - - - {chrome.i18n.getMessage('Scan_Successfully')} - - - {chrome.i18n.getMessage('Sync_in_Process')} - - - )} - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('Scan_QR_Code_with_Mobile')} - - - )} - - - - - {/* */} - - ); -}; - -export default SyncQr; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx deleted file mode 100644 index bb03e356..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import SetPassword from './SetPassword'; -import SyncQr from './SyncQr'; - -const Sync = () => { - const wallet = useWallet(); - const history = useHistory(); - const { activeIndex, direction, goNext, goBack } = useNavigation(2); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const pages: Record = { - 0: { - component: SyncQr, - props: { - handleClick: goNext, - savedUsername: username, - confirmMnemonic: setMnemonic, - setUsername: getUsername, - }, - }, - 1: { - component: SetPassword, - props: { handleClick: goNext, mnemonic, username }, - }, - 2: { - component: AllSet, - props: { handleClick: goNext, variant: 'sync' }, - }, - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default Sync; diff --git a/src/ui/views/LandingPages/WelcomePage/index.tsx b/src/ui/views/LandingPages/WelcomePage/index.tsx deleted file mode 100644 index be6fe350..00000000 --- a/src/ui/views/LandingPages/WelcomePage/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/LandingPages'; - -const WelcomePage = () => { - return ; -}; - -export default WelcomePage; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 0ee283f1..5ec7de77 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -1,21 +1,15 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import AddWelcome from './LandingPages/AddAccountPage'; -import AddRegister from './LandingPages/AddAccountPage/AddRegister'; -import AddImport from './LandingPages/AddAccountPage/AddressImport'; -import AddGoogle from './LandingPages/AddAccountPage/GoogleImport'; -import AddSync from './LandingPages/AddAccountPage/Sync'; -// import ProxySync from './AddWelcome/ProxySync'; import Forgot from './LandingPages/Forgot'; import Recover from './LandingPages/Forgot/Recover'; import Reset from './LandingPages/Forgot/Reset'; import RecoverRegister from './LandingPages/RecoverRegister'; -import WelcomePage from './LandingPages/WelcomePage'; -import AddressImport from './LandingPages/WelcomePage/AddressImport'; -import GoogleImport from './LandingPages/WelcomePage/GoogleImport'; -import Register from './LandingPages/WelcomePage/Register'; -import Synce from './LandingPages/WelcomePage/Sync'; +import Welcome from './LandingPages/Welcome'; +import AddressImport from './LandingPages/Welcome/AddressImport'; +import AddGoogle from './LandingPages/Welcome/GoogleImport'; +import Register from './LandingPages/Welcome/Register'; +import Sync from './LandingPages/Welcome/Sync'; import './MainRoute.css'; @@ -28,22 +22,16 @@ export const MainRoute: React.FC = () => {
- - - - - - - - - + + + + + - - - +
); diff --git a/src/ui/views/index.tsx b/src/ui/views/index.tsx index 9b18799a..1285de3e 100644 --- a/src/ui/views/index.tsx +++ b/src/ui/views/index.tsx @@ -31,7 +31,6 @@ function Main() { - {/* */} From d2d7fe94454e75f9ddd0268cc5808b93f3d8b643 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 16:28:49 +1100 Subject: [PATCH 15/41] Fixed: moving strucutre --- .../AddWelcome/AddRegister/PickUsername.tsx | 261 ----------------- src/ui/views/AddressImport/PickUsername.tsx | 255 ----------------- .../AddWelcome/AddRegister/AllSet.tsx | 0 .../AddWelcome/AddRegister}/GoogleBackup.tsx | 2 +- .../AddWelcome/AddRegister/RecoveryPhrase.tsx | 2 +- .../AddWelcome/AddRegister/RegisterHeader.tsx | 0 .../AddWelcome/AddRegister/RepeatPhrase.tsx | 0 .../AddWelcome/AddRegister/SetPassword.tsx | 6 +- .../AddWelcome/AddRegister/index.tsx | 4 +- .../AddressImport}/GoogleBackup.tsx | 2 +- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddWelcome/AddressImport/ImportPager.tsx | 4 +- .../AddressImport/RecoverPassword.tsx | 2 +- .../AddWelcome/AddressImport/SetPassword.tsx | 6 +- .../importComponent/Googledrive.tsx | 2 +- .../importComponent/JsonImport.tsx | 11 +- .../importComponent/KeyImport.tsx | 4 +- .../importComponent/SeedPhrase.tsx | 12 +- .../AddWelcome/AddressImport/index.tsx | 4 +- .../AddWelcome/ProxySync/ProxyQr.tsx | 0 .../AddWelcome/ProxySync/RegisterHeader.tsx | 0 .../AddWelcome/ProxySync/SetPassword.tsx | 4 +- .../AddWelcome/ProxySync/index.tsx | 2 +- .../AddWelcome/Sync/RegisterHeader.tsx | 0 .../AddWelcome/Sync/SetPassword.tsx | 4 +- .../AddWelcome/Sync/SyncQr.tsx | 0 .../{ => MainPages}/AddWelcome/Sync/index.tsx | 2 +- .../{ => MainPages}/AddWelcome/index.tsx | 11 +- .../AddressImport}/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 6 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 4 +- .../AddressImport/RecoverPassword.tsx | 4 +- .../AddressImport/SetPassword.tsx | 6 +- .../importComponent/Googledrive.tsx | 2 +- .../importComponent/JsonImport.tsx | 5 +- .../importComponent/KeyImport.tsx | 4 +- .../importComponent/SeedPhrase.tsx | 6 +- .../{ => MainPages}/AddressImport/index.tsx | 4 +- .../Forgot/Recover/RecoverPage.tsx | 2 +- .../Forgot/Recover/ShowKey.tsx | 4 +- .../{ => MainPages}/Forgot/Recover/index.tsx | 2 +- .../Forgot/Reset/ResetPage.tsx | 2 +- .../{ => MainPages}/Forgot/Reset/index.tsx | 2 +- src/ui/views/{ => MainPages}/Forgot/index.tsx | 8 +- .../views/{ => MainPages}/Forgot/stepBox.tsx | 0 .../Import}/GoogleImport/DecryptWallet.tsx | 2 +- .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 6 +- .../Import}/GoogleImport/RecoveryPhrase.tsx | 0 .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../{ => MainPages}/Import/ImportPager.tsx | 4 +- .../Import/ImportRecoveryPhrase.tsx | 4 +- .../Import/RecoverPassword.tsx | 4 +- .../RecoverRegister/AllSet.tsx | 0 .../RecoverRegister/RecoveryPhrase.tsx | 2 +- .../RecoverRegister/RegisterHeader.tsx | 0 .../RecoverRegister/SetPassword.tsx | 6 +- .../{ => MainPages}/RecoverRegister/index.tsx | 7 +- .../views/{ => MainPages}/Register/AllSet.tsx | 0 .../Register}/GoogleBackup.tsx | 0 .../Register}/PickUsername.tsx | 2 +- .../Register/RecoveryPhrase.tsx | 2 +- .../Register/RegisterHeader.tsx | 0 .../Register/RegisterPager.tsx | 2 +- .../{ => MainPages}/Register/RepeatPhrase.tsx | 0 .../{ => MainPages}/Register/SetPassword.tsx | 7 +- .../{ => MainPages}/Reset/RecoverPassword.tsx | 4 +- .../Reset/ResetRecoveryPhrase.tsx | 4 +- src/ui/views/{ => MainPages}/Reset/index.tsx | 4 +- src/ui/views/{ => MainPages}/Sync/AllSet.tsx | 0 .../views/{ => MainPages}/Sync/Namespace.tsx | 0 .../{ => MainPages}/Sync/RegisterHeader.tsx | 0 .../{ => MainPages}/Sync/SetPassword.tsx | 4 +- src/ui/views/{ => MainPages}/Sync/SyncQr.tsx | 0 src/ui/views/{ => MainPages}/Sync/index.tsx | 2 +- .../{ => MainPages}/WelcomePage/index.tsx | 10 +- src/ui/views/MainRoute.tsx | 28 +- src/ui/views/RecoverRegister/PickUsername.tsx | 233 ---------------- src/ui/views/Register/PickUsername.tsx | 264 ------------------ 89 files changed, 131 insertions(+), 1149 deletions(-) delete mode 100644 src/ui/views/AddWelcome/AddRegister/PickUsername.tsx delete mode 100644 src/ui/views/AddressImport/PickUsername.tsx rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/AllSet.tsx (100%) rename src/ui/views/{AddressImport => MainPages/AddWelcome/AddRegister}/GoogleBackup.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/RepeatPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/SetPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddWelcome/AddRegister/index.tsx (97%) rename src/ui/views/{Register => MainPages/AddWelcome/AddressImport}/GoogleBackup.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/{Import => MainPages/AddWelcome/AddressImport}/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/ImportPager.tsx (96%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/RecoverPassword.tsx (99%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/SetPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/importComponent/Googledrive.tsx (97%) rename src/ui/views/{ => MainPages/AddWelcome}/AddressImport/importComponent/JsonImport.tsx (93%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/importComponent/KeyImport.tsx (94%) rename src/ui/views/{ => MainPages/AddWelcome}/AddressImport/importComponent/SeedPhrase.tsx (89%) rename src/ui/views/{ => MainPages}/AddWelcome/AddressImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/ProxySync/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/SyncQr.tsx (100%) rename src/ui/views/{ => MainPages}/AddWelcome/Sync/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddWelcome/index.tsx (95%) rename src/ui/views/{AddWelcome/AddRegister => MainPages/AddressImport}/GoogleBackup.tsx (100%) rename src/ui/views/{Import => MainPages/AddressImport}/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/ImportPager.tsx (97%) rename src/ui/views/{ => MainPages}/AddressImport/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/importComponent/Googledrive.tsx (97%) rename src/ui/views/{AddWelcome => MainPages}/AddressImport/importComponent/JsonImport.tsx (98%) rename src/ui/views/{ => MainPages}/AddressImport/importComponent/KeyImport.tsx (95%) rename src/ui/views/{AddWelcome => MainPages}/AddressImport/importComponent/SeedPhrase.tsx (96%) rename src/ui/views/{ => MainPages}/AddressImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/RecoverPage.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/ShowKey.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Recover/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/Reset/ResetPage.tsx (97%) rename src/ui/views/{ => MainPages}/Forgot/Reset/index.tsx (98%) rename src/ui/views/{ => MainPages}/Forgot/index.tsx (94%) rename src/ui/views/{ => MainPages}/Forgot/stepBox.tsx (100%) rename src/ui/views/{AddressImport => MainPages/Import}/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Import}/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/{ => MainPages}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/{ => MainPages}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Import/ImportPager.tsx (97%) rename src/ui/views/{ => MainPages}/Import/ImportRecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/Import/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/AllSet.tsx (100%) rename src/ui/views/{ => MainPages}/RecoverRegister/RecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/RecoverRegister/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/RecoverRegister/index.tsx (96%) rename src/ui/views/{ => MainPages}/Register/AllSet.tsx (100%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Register}/GoogleBackup.tsx (100%) rename src/ui/views/{AddWelcome/AddressImport => MainPages/Register}/PickUsername.tsx (99%) rename src/ui/views/{ => MainPages}/Register/RecoveryPhrase.tsx (99%) rename src/ui/views/{ => MainPages}/Register/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/Register/RegisterPager.tsx (98%) rename src/ui/views/{ => MainPages}/Register/RepeatPhrase.tsx (100%) rename src/ui/views/{ => MainPages}/Register/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/Reset/RecoverPassword.tsx (98%) rename src/ui/views/{ => MainPages}/Reset/ResetRecoveryPhrase.tsx (98%) rename src/ui/views/{ => MainPages}/Reset/index.tsx (97%) rename src/ui/views/{ => MainPages}/Sync/AllSet.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/Namespace.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/SetPassword.tsx (98%) rename src/ui/views/{ => MainPages}/Sync/SyncQr.tsx (100%) rename src/ui/views/{ => MainPages}/Sync/index.tsx (97%) rename src/ui/views/{ => MainPages}/WelcomePage/index.tsx (97%) delete mode 100644 src/ui/views/RecoverRegister/PickUsername.tsx delete mode 100644 src/ui/views/Register/PickUsername.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx deleted file mode 100644 index a38cddbf..00000000 --- a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import EmailIcon from '../../../assets/alternate-email.svg'; - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const usernameError = (errorMsg) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - - ); - const usernameCorrect = useMemo( - () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - - ), - [] - ); - const usernameLoading = () => ( - - - {chrome.i18n.getMessage('Checking')} - - ); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(usernameError(message)); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }; - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/AddressImport/PickUsername.tsx b/src/ui/views/AddressImport/PickUsername.tsx deleted file mode 100644 index 04e2178c..00000000 --- a/src/ui/views/AddressImport/PickUsername.tsx +++ /dev/null @@ -1,255 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../components/iconfont/IconClose'; -import EmailIcon from '../../assets/alternate-email.svg'; - -const useStyles = makeStyles((_theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const UsernameError = ({ errorMsg }: { errorMsg: string }) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - -); - -const usernameCorrect = () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - -); -const usernameLoading = () => ( - - - {chrome.i18n.getMessage('Checking')} - -); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }; - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/AddWelcome/AddRegister/AllSet.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/AllSet.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx diff --git a/src/ui/views/AddressImport/GoogleBackup.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx similarity index 98% rename from src/ui/views/AddressImport/GoogleBackup.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx index 26911a04..c7cf5362 100644 --- a/src/ui/views/AddressImport/GoogleBackup.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx index 4c5cd4b1..341b1e09 100644 --- a/src/ui/views/AddWelcome/AddRegister/RecoveryPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/AddWelcome/AddRegister/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/RegisterHeader.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/RepeatPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddRegister/RepeatPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx diff --git a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx index 7300e076..884f4008 100644 --- a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx @@ -26,9 +26,9 @@ import { type AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; +import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/AddWelcome/AddRegister/index.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddRegister/index.tsx rename to src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx index 373c4f38..8d0f3b93 100644 --- a/src/ui/views/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx @@ -10,11 +10,11 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from './PickUsername'; +import PickUsername from '../../Register/PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; import RegisterHeader from './RegisterHeader'; import RepeatPhrase from './RepeatPhrase'; diff --git a/src/ui/views/Register/GoogleBackup.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx similarity index 98% rename from src/ui/views/Register/GoogleBackup.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx index 26911a04..c7cf5362 100644 --- a/src/ui/views/Register/GoogleBackup.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx index 723901e5..87130123 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx index 0276fb36..77f95d44 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx index 55ec2c12..02ee6e06 100644 --- a/src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx index eab1e689..85dd7c9b 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -9,7 +9,7 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import AllSet from '../../../Register/AllSet'; import RegisterHeader from '../../../Register/RegisterHeader'; diff --git a/src/ui/views/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx similarity index 96% rename from src/ui/views/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index bd0bfd5d..ed33e6bb 100644 --- a/src/ui/views/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -6,9 +6,9 @@ import KeyImport from './importComponent/KeyImport'; import JsonImport from './importComponent/JsonImport'; import Googledrive from './importComponent/Googledrive'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; +import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; import { useWallet } from 'ui/utils'; import * as bip39 from 'bip39'; import { storage } from '@/background/webapi'; diff --git a/src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx similarity index 99% rename from src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx index 902966a4..dd32f592 100644 --- a/src/ui/views/AddWelcome/AddressImport/RecoverPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx @@ -19,7 +19,7 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx index 18e3f49e..dc74e8d3 100644 --- a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx @@ -26,9 +26,9 @@ import { AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; +import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx similarity index 97% rename from src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx index 5cc61168..89380d0c 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx @@ -1,5 +1,5 @@ import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; diff --git a/src/ui/views/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx similarity index 93% rename from src/ui/views/AddressImport/importComponent/JsonImport.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx index 09b8499f..b9470170 100644 --- a/src/ui/views/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx @@ -1,6 +1,6 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; import { Box, @@ -14,8 +14,8 @@ import { import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; import { LLSpinner } from 'ui/FRWComponent'; -import { jsonToKey } from '../../../utils/modules/passkey'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../../../FRWComponent/PopupModal/errorModel'; +import { jsonToKey } from '../../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ form: { @@ -96,7 +96,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { setErrorMessage('Password incorrect'); return; } - const pkHex = Buffer.from(pk!.data()).toString('hex'); + const pkHex = Buffer.from(pk.data()).toString('hex'); const result = await findAddressWithPK(pkHex, address); console.log(result); setPk(pkHex); @@ -120,6 +120,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { } const result = hasJsonStructure(event); setIsInvalid(!result); + setErrorMessage(!result ? 'Not a valid json input' : ''); return result; }; diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx similarity index 94% rename from src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx index 5111453a..7b3fe8b9 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx @@ -1,6 +1,6 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; diff --git a/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx similarity index 89% rename from src/ui/views/AddressImport/importComponent/SeedPhrase.tsx rename to src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx index dc6e4748..ebdd3359 100644 --- a/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,11 @@ import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; import React from 'react'; -import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { LLSpinner } from 'ui/FRWComponent'; -import KeyPathInput from '../../../FRWComponent/KeyPathInputs'; +import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; const useStyles = makeStyles((theme) => ({ form: { @@ -42,15 +42,14 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { setmnemonic(seed); const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - console.log('address ', address); const result = await findAddressWithSeed(seed, address, true); if (!result) { onOpen(); return; } + const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.SEED_PHRASE, mnemonic: seed })); onImport(accounts); } finally { @@ -74,7 +73,6 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { /> - - - - ); -}; - -export default PickUsername; diff --git a/src/ui/views/Register/PickUsername.tsx b/src/ui/views/Register/PickUsername.tsx deleted file mode 100644 index e48e903a..00000000 --- a/src/ui/views/Register/PickUsername.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { - CircularProgress, - IconButton, - Button, - Typography, - FormControl, - Input, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../components/iconfont/IconClose'; -import EmailIcon from '../../assets/alternate-email.svg'; - -const useStyles = makeStyles((_theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [usernameValid, setUsernameValid] = useState(false); - - const usernameError = (errorMsg) => ( - - - - {errorMsg} - {errorMsg.startsWith('This username is reserved') && ( - - hi@lilico.app - {chrome.i18n.getMessage('for__any__inquiry')} - - )} - - - ); - const usernameCorrect = useMemo( - () => ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - - ), - [] - ); - const usernameLoading = useMemo( - () => ( - - - {chrome.i18n.getMessage('Checking')} - - ), - [] - ); - - const [username, setUsername] = useState(savedUsername || ''); - const [helperText, setHelperText] = useState(
); - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setUsernameValid(false); - setHelperText(usernameError(message)); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - const runCheckUsername = useCallback( - (username) => { - wallet.openapi - .checkUsername(username.toLowerCase()) - .then((response) => { - setLoading(false); - if (response.data.username !== username.toLowerCase()) { - setLoading(false); - return; - } - if (response.data.unique) { - setUsernameValid(true); - setHelperText(usernameCorrect); - } else { - if (response.message === 'Username is reserved') { - setErrorMessage( - chrome.i18n.getMessage('This__username__is__reserved__Please__contact') - ); - } else { - setErrorMessage(chrome.i18n.getMessage('This__name__is__taken')); - } - } - }) - .catch(() => { - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, - [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(usernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - setLoading(false); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - setLoading(false); - return; - } - - const regex = /^[A-Za-z0-9]{3,15}$/; - if (!regex.test(username)) { - setErrorMessage( - chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers') - ); - setLoading(false); - return; - } - - runCheckUsername(username); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [username]); - - const msgBgColor = useCallback(() => { - if (isLoading) { - return 'neutral.light'; - } - return usernameValid ? 'success.light' : 'error.light'; - }, [isLoading, usernameValid]); - - return ( - <> - - - {chrome.i18n.getMessage('Pick__Your')} - - {chrome.i18n.getMessage('Username')} - - - - {chrome.i18n.getMessage('Your__username__will__be__used__to__send__and__receive')} - - - - - { - setUsername(event.target.value); - }} - startAdornment={ - - - - } - endAdornment={ - - { - setUsername(''); - }} - > - - - - } - /> - - - {helperText} - - - - - - - - - ); -}; - -export default PickUsername; From 7f7c89d91abf35d4b54a4f98d5baef6f1b2067a0 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 18:34:33 +1100 Subject: [PATCH 16/41] fixed: static component --- src/ui/FRWComponent/MainPages/AllSet.tsx | 101 ++++++++ .../MainPages}/PickUsername.tsx | 4 +- .../MainPages}/RegisterHeader.tsx | 43 ++-- .../MainPages}/RepeatPhrase.tsx | 0 src/ui/FRWComponent/MainPages/index.ts | 4 + .../AddWelcome/AddRegister/AllSet.tsx | 56 ----- .../AddWelcome/AddRegister/RegisterHeader.tsx | 63 ----- .../AddWelcome/AddRegister/index.tsx | 7 +- .../AddressImport/GoogleImport/index.tsx | 3 +- .../AddWelcome/AddressImport/ImportPager.tsx | 22 +- .../importComponent/Googledrive.tsx | 9 +- .../importComponent/JsonImport.tsx | 15 +- .../importComponent/KeyImport.tsx | 9 +- .../importComponent/SeedPhrase.tsx | 9 +- .../AddWelcome/AddressImport/index.tsx | 4 +- .../AddWelcome/ProxySync/RegisterHeader.tsx | 63 ----- .../MainPages/AddWelcome/ProxySync/index.tsx | 6 +- .../AddWelcome/Sync/RegisterHeader.tsx | 63 ----- .../views/MainPages/AddWelcome/Sync/index.tsx | 6 +- src/ui/views/MainPages/AddWelcome/index.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 3 +- .../MainPages/AddressImport/ImportPager.tsx | 19 +- .../importComponent/Googledrive.tsx | 9 +- .../importComponent/JsonImport.tsx | 17 +- .../importComponent/KeyImport.tsx | 8 +- .../importComponent/SeedPhrase.tsx | 9 +- .../views/MainPages/AddressImport/index.tsx | 4 +- .../MainPages/Forgot/Recover/ShowKey.tsx | 2 +- .../views/MainPages/Forgot/Recover/index.tsx | 2 +- .../MainPages/Forgot/Reset/ResetPage.tsx | 2 +- src/ui/views/MainPages/Forgot/Reset/index.tsx | 2 +- src/ui/views/MainPages/Forgot/index.tsx | 2 +- .../MainPages/Import/GoogleImport/index.tsx | 5 +- src/ui/views/MainPages/Import/ImportPager.tsx | 5 +- .../MainPages/RecoverRegister/AllSet.tsx | 48 ---- .../RecoverRegister/RegisterHeader.tsx | 59 ----- .../views/MainPages/RecoverRegister/index.tsx | 6 +- src/ui/views/MainPages/Register/AllSet.tsx | 61 ----- .../views/MainPages/Register/RepeatPhrase.tsx | 230 ------------------ .../Register/{RegisterPager.tsx => index.tsx} | 11 +- src/ui/views/MainPages/Reset/index.tsx | 5 +- src/ui/views/MainPages/Sync/AllSet.tsx | 48 ---- src/ui/views/MainPages/Sync/index.tsx | 6 +- src/ui/views/MainPages/WelcomePage/index.tsx | 3 +- src/ui/views/MainRoute.tsx | 4 +- 45 files changed, 232 insertions(+), 827 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/AllSet.tsx rename src/ui/{views/MainPages/Register => FRWComponent/MainPages}/PickUsername.tsx (98%) rename src/ui/{views/MainPages/Register => FRWComponent/MainPages}/RegisterHeader.tsx (59%) rename src/ui/{views/MainPages/AddWelcome/AddRegister => FRWComponent/MainPages}/RepeatPhrase.tsx (100%) create mode 100644 src/ui/FRWComponent/MainPages/index.ts delete mode 100644 src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/RecoverRegister/AllSet.tsx delete mode 100644 src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx delete mode 100644 src/ui/views/MainPages/Register/AllSet.tsx delete mode 100644 src/ui/views/MainPages/Register/RepeatPhrase.tsx rename src/ui/views/MainPages/Register/{RegisterPager.tsx => index.tsx} (94%) delete mode 100644 src/ui/views/MainPages/Sync/AllSet.tsx diff --git a/src/ui/FRWComponent/MainPages/AllSet.tsx b/src/ui/FRWComponent/MainPages/AllSet.tsx new file mode 100644 index 00000000..74d8abab --- /dev/null +++ b/src/ui/FRWComponent/MainPages/AllSet.tsx @@ -0,0 +1,101 @@ +import { Button, Typography, CardMedia } from '@mui/material'; +import { Box } from '@mui/system'; +import React, { useCallback, useEffect } from 'react'; + +import { storage } from 'background/webapi'; +import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; +import { useWallet, mixpanelBrowserService } from 'ui/utils'; + +interface AllSetProps { + handleClick: () => void; + variant?: 'register' | 'recover' | 'sync' | 'add'; +} + +const AllSet = ({ handleClick, variant = 'register' }: AllSetProps) => { + const wallet = useWallet(); + + const loadScript = useCallback(async () => { + if (variant === 'register') { + await wallet.getCadenceScripts(); + } + }, [wallet, variant]); + + const trackAccountRecovered = useCallback(async () => { + if (variant === 'register') { + mixpanelBrowserService.track('account_recovered', { + address: (await wallet.getMainAddress()) || '', + mechanism: 'multi-backup', + methods: [], + }); + } + }, [wallet, variant]); + + useEffect(() => { + const removeTempPass = () => { + if (variant === 'add') { + storage.set('tempPassword', ''); + } + }; + + if (variant === 'register') { + loadScript().then(() => { + trackAccountRecovered(); + }); + } else if (variant === 'add') { + removeTempPass(); + } + }, [variant, loadScript, trackAccountRecovered]); + + const getMessage = () => { + if (variant === 'recover') { + return { + title: chrome.i18n.getMessage('You__are') + ' ' + chrome.i18n.getMessage('all__set'), + subtitle: chrome.i18n.getMessage('Start__exploring__with__Lilico__now'), + }; + } + return { + title: chrome.i18n.getMessage('You__are') + chrome.i18n.getMessage('Allset'), + subtitle: chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now'), + }; + }; + + return ( + <> + + + + {getMessage().title.split(' ')[0]} + + {getMessage().title.split(' ')[1]} + + + + {getMessage().subtitle} + + + + + + + ); +}; + +export default AllSet; diff --git a/src/ui/views/MainPages/Register/PickUsername.tsx b/src/ui/FRWComponent/MainPages/PickUsername.tsx similarity index 98% rename from src/ui/views/MainPages/Register/PickUsername.tsx rename to src/ui/FRWComponent/MainPages/PickUsername.tsx index 8d8a5817..7e03a6ef 100644 --- a/src/ui/views/MainPages/Register/PickUsername.tsx +++ b/src/ui/FRWComponent/MainPages/PickUsername.tsx @@ -15,8 +15,8 @@ import EmailIcon from '@/ui/assets/alternate-email.svg'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../components/iconfont/IconClose'; const useStyles = makeStyles((_theme) => ({ customInputLabel: { diff --git a/src/ui/views/MainPages/Register/RegisterHeader.tsx b/src/ui/FRWComponent/MainPages/RegisterHeader.tsx similarity index 59% rename from src/ui/views/MainPages/Register/RegisterHeader.tsx rename to src/ui/FRWComponent/MainPages/RegisterHeader.tsx index fb499d7f..b5314494 100644 --- a/src/ui/views/MainPages/Register/RegisterHeader.tsx +++ b/src/ui/FRWComponent/MainPages/RegisterHeader.tsx @@ -1,9 +1,14 @@ import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; +import PhoneAndroidRoundedIcon from '@mui/icons-material/PhoneAndroidRounded'; import { Button, Typography } from '@mui/material'; import { Box } from '@mui/system'; import React from 'react'; -const RegisterHeader = () => { +interface RegisterHeaderProps { + showAppButton?: boolean; +} + +const RegisterHeader = ({ showAppButton = false }: RegisterHeaderProps) => { return ( <> { pt: '40px', }} > - {/* */} + {showAppButton && ( + + )}
diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx b/src/ui/FRWComponent/MainPages/RepeatPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/RepeatPhrase.tsx rename to src/ui/FRWComponent/MainPages/RepeatPhrase.tsx diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/MainPages/index.ts new file mode 100644 index 00000000..9a681cd7 --- /dev/null +++ b/src/ui/FRWComponent/MainPages/index.ts @@ -0,0 +1,4 @@ +export { default as AllSet } from './AllSet'; +export { default as PickUsername } from './PickUsername'; +export { default as RepeatPhrase } from './RepeatPhrase'; +export { default as RegisterHeader } from './RegisterHeader'; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx deleted file mode 100644 index b4bea0e9..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/AllSet.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useEffect } from 'react'; - -import { storage } from 'background/webapi'; -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - const removeTempPass = () => { - storage.set('tempPassword', ''); - }; - - useEffect(() => { - removeTempPass(); - }, []); - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx index 8d0f3b93..f87e764b 100644 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx @@ -6,18 +6,15 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from '../../Register/PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; -import RegisterHeader from './RegisterHeader'; -import RepeatPhrase from './RepeatPhrase'; import SetPassword from './SetPassword'; enum Direction { @@ -107,7 +104,7 @@ const AddRegister = () => { /> ); case 5: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx index 85dd7c9b..4c5ce087 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -5,13 +5,12 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../../Register/AllSet'; -import RegisterHeader from '../../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index ed33e6bb..eac3b957 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -1,18 +1,18 @@ -import { useEffect, useState, useContext } from 'react'; -import React from 'react'; import { Box, Tabs, Tab, Typography } from '@mui/material'; -import SeedPhraseImport from './importComponent/SeedPhrase'; -import KeyImport from './importComponent/KeyImport'; -import JsonImport from './importComponent/JsonImport'; -import Googledrive from './importComponent/Googledrive'; +import * as bip39 from 'bip39'; +import React, { useEffect, useState, useContext } from 'react'; +import { Presets } from 'react-component-transition'; -import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; +import { storage } from '@/background/webapi'; +import { useWallet } from 'ui/utils'; import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import { useWallet } from 'ui/utils'; -import * as bip39 from 'bip39'; -import { storage } from '@/background/webapi'; -import { Presets } from 'react-component-transition'; +import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; + +import Googledrive from './importComponent/Googledrive'; +import JsonImport from './importComponent/JsonImport'; +import KeyImport from './importComponent/KeyImport'; +import SeedPhraseImport from './importComponent/SeedPhrase'; function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx index 89380d0c..873ca549 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; +import { useHistory } from 'react-router-dom'; + import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import { useHistory } from 'react-router-dom'; + +import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx index b9470170..e0f1dd6b 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx @@ -1,7 +1,4 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Box, Button, @@ -11,10 +8,14 @@ import { TextareaAutosize, InputAdornment, } from '@mui/material'; -import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import ErrorModel from '../../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; import { jsonToKey } from '../../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ @@ -92,7 +93,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const password = e.target[2].value; const address = e.target[5].value; const pk = await jsonToKey(keystore, password); - if (pk == null) { + if (pk === null) { setErrorMessage('Password incorrect'); return; } @@ -180,7 +181,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - {errorMesssage != '' && ( + {errorMesssage !== '' && ( { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx index 7b3fe8b9..aadcfe1c 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; + const useStyles = makeStyles((theme) => ({ form: { width: '100%', // Fix full width diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx index ebdd3359..622169d3 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '../../../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx index 34faabe8..a0be5dde 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx @@ -4,18 +4,16 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import GoogleBackup from './GoogleBackup'; import ImportPager from './ImportPager'; -import PickUsername from '../../Register/PickUsername'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx index e51424c2..228ca5f1 100644 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../AddRegister/AllSet'; -import RegisterHeader from '../AddRegister/RegisterHeader'; import ProxyQr from './ProxyQr'; import SetPassword from './SetPassword'; @@ -93,7 +91,7 @@ const ProxySync = () => { /> ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx b/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/MainPages/AddWelcome/Sync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx b/src/ui/views/MainPages/AddWelcome/Sync/index.tsx index f0960110..d4f31725 100644 --- a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/Sync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../AddRegister/AllSet'; -import RegisterHeader from '../AddRegister/RegisterHeader'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -91,7 +89,7 @@ const Sync = () => { /> ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/MainPages/AddWelcome/index.tsx index b0fad79c..821ff023 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/index.tsx @@ -8,7 +8,7 @@ import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import outside from '@/ui/FRWAssets/svg/importoutside.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const AddWelcome = () => { return ( diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx index d26babed..731ed764 100644 --- a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx @@ -5,11 +5,10 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 7913f5fe..98e4e481 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -1,15 +1,16 @@ -import { useEffect, useState, useContext } from 'react'; -import React from 'react'; import { Box, Tabs, Tab, Typography } from '@mui/material'; -import SeedPhraseImport from './importComponent/SeedPhrase'; -import KeyImport from './importComponent/KeyImport'; -import JsonImport from './importComponent/JsonImport'; -import Googledrive from './importComponent/Googledrive'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; +import React, { useEffect, useState, useContext } from 'react'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; -import { useWallet } from 'ui/utils'; import { storage } from '@/background/webapi'; +import { useWallet } from 'ui/utils'; + +import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; +import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; + +import Googledrive from './importComponent/Googledrive'; +import JsonImport from './importComponent/JsonImport'; +import KeyImport from './importComponent/KeyImport'; +import SeedPhraseImport from './importComponent/SeedPhrase'; function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx index 1092d267..d0cf7b39 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; +import { useHistory } from 'react-router-dom'; + import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import { useHistory } from 'react-router-dom'; + +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx index 137001ca..09500eeb 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx @@ -1,7 +1,4 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import React from 'react'; +import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Box, Button, @@ -11,11 +8,15 @@ import { TextareaAutosize, InputAdornment, } from '@mui/material'; -import { Visibility, VisibilityOff } from '@mui/icons-material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; -import { jsonToKey } from '../../../../utils/modules/passkey'; + import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; +import { jsonToKey } from '../../../../utils/modules/passkey'; const useStyles = makeStyles((theme) => ({ form: { @@ -92,7 +93,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const password = e.target[2].value; const address = e.target[5].value; const pk = await jsonToKey(keystore, password); - if (pk == null) { + if (pk === null) { setErrorMessage('Password incorrect'); return; } @@ -179,7 +180,7 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - {errorMesssage != '' && ( + {errorMesssage !== '' && ( { diff --git a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx index fc2e3477..5e450670 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx @@ -1,9 +1,9 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '@/ui/utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; import { LLSpinner } from 'ui/FRWComponent'; const useStyles = makeStyles((theme) => ({ diff --git a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx index 164aa672..d095031b 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx @@ -1,11 +1,12 @@ -import { useEffect, useState, useContext } from 'react'; -import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import React from 'react'; import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; +import React, { useEffect, useState, useContext } from 'react'; + import { LLSpinner } from 'ui/FRWComponent'; + import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; +import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/views/MainPages/AddressImport/index.tsx b/src/ui/views/MainPages/AddressImport/index.tsx index 481d202d..9c2cc70a 100644 --- a/src/ui/views/MainPages/AddressImport/index.tsx +++ b/src/ui/views/MainPages/AddressImport/index.tsx @@ -4,16 +4,14 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import ImportPager from './ImportPager'; -import PickUsername from '../Register/PickUsername'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; diff --git a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx b/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx index 251f7186..75e2cbba 100644 --- a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx +++ b/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx @@ -4,10 +4,10 @@ import { Button, Typography, IconButton } from '@mui/material'; import { Box } from '@mui/system'; import React, { useState } from 'react'; +import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import { useWallet } from 'ui/utils'; import IconCopy from '../../../../../components/iconfont/IconCopy'; -import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; const ShowKey = ({ handleClick, mnemonic }) => { const usewallet = useWallet(); diff --git a/src/ui/views/MainPages/Forgot/Recover/index.tsx b/src/ui/views/MainPages/Forgot/Recover/index.tsx index 24e4bf03..e7a25549 100644 --- a/src/ui/views/MainPages/Forgot/Recover/index.tsx +++ b/src/ui/views/MainPages/Forgot/Recover/index.tsx @@ -3,13 +3,13 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import RegisterHeader from '../../Register/RegisterHeader'; import RecoverPage from './RecoverPage'; import ShowKey from './ShowKey'; diff --git a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx b/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx index 08b50766..8068d388 100644 --- a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx +++ b/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx @@ -2,10 +2,10 @@ import { Typography, Box, Drawer, Stack } from '@mui/material'; import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; +import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import { LLPrimaryButton, LLSecondaryButton, LLWarningButton } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import StepBox from '../stepBox'; interface AddOrEditAddressProps { diff --git a/src/ui/views/MainPages/Forgot/Reset/index.tsx b/src/ui/views/MainPages/Forgot/Reset/index.tsx index 7aa31d5b..4f9f4417 100644 --- a/src/ui/views/MainPages/Forgot/Reset/index.tsx +++ b/src/ui/views/MainPages/Forgot/Reset/index.tsx @@ -3,13 +3,13 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import RegisterHeader from '../../Register/RegisterHeader'; import ResetPage from './ResetPage'; diff --git a/src/ui/views/MainPages/Forgot/index.tsx b/src/ui/views/MainPages/Forgot/index.tsx index 56f94b43..3ae53a25 100644 --- a/src/ui/views/MainPages/Forgot/index.tsx +++ b/src/ui/views/MainPages/Forgot/index.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import recover from '@/ui/FRWAssets/svg/recover.svg'; import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const Forgot = () => { return ( diff --git a/src/ui/views/MainPages/Import/GoogleImport/index.tsx b/src/ui/views/MainPages/Import/GoogleImport/index.tsx index f716cce3..e267ab69 100644 --- a/src/ui/views/MainPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/MainPages/Import/GoogleImport/index.tsx @@ -5,12 +5,11 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import AllSet from '../../Register/AllSet'; -import RegisterHeader from '../../Register/RegisterHeader'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; @@ -92,7 +91,7 @@ const GoogleImport = () => { /> ); case 4: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/Import/ImportPager.tsx b/src/ui/views/MainPages/Import/ImportPager.tsx index fa96ce40..9d555fea 100644 --- a/src/ui/views/MainPages/Import/ImportPager.tsx +++ b/src/ui/views/MainPages/Import/ImportPager.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; @@ -11,8 +12,6 @@ import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import ImportRecoveryPhrase from './ImportRecoveryPhrase'; import RecoverPassword from './RecoverPassword'; @@ -100,7 +99,7 @@ const ImportPager = () => { ); case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/RecoverRegister/AllSet.tsx b/src/ui/views/MainPages/RecoverRegister/AllSet.tsx deleted file mode 100644 index 212b3055..00000000 --- a/src/ui/views/MainPages/RecoverRegister/AllSet.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - return ( - <> - - - : - - {chrome.i18n.getMessage('You__are') + ' '} - - {chrome.i18n.getMessage('all__set')} - - - - {chrome.i18n.getMessage('Start__exploring__with__Lilico__now')} - - {/* */} - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx b/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx deleted file mode 100644 index ebb9631a..00000000 --- a/src/ui/views/MainPages/RecoverRegister/RegisterHeader.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import PhoneAndroidRoundedIcon from '@mui/icons-material/PhoneAndroidRounded'; -import { Button } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; -const RegisterHeader = () => { - return ( - <> - - - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/MainPages/RecoverRegister/index.tsx b/src/ui/views/MainPages/RecoverRegister/index.tsx index 5fb7671d..17c20703 100644 --- a/src/ui/views/MainPages/RecoverRegister/index.tsx +++ b/src/ui/views/MainPages/RecoverRegister/index.tsx @@ -7,14 +7,12 @@ import { useHistory } from 'react-router-dom'; import { storage } from '@/background/webapi'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, AllSet } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import lilicoIcon from '../../../../../_raw/images/icon-48.png'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import PickUsername from '../Register/PickUsername'; - -import AllSet from './AllSet'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; @@ -75,7 +73,7 @@ const RecoverRegister = () => { case 2: return ; case 3: - return ; + return ; default: return ; } diff --git a/src/ui/views/MainPages/Register/AllSet.tsx b/src/ui/views/MainPages/Register/AllSet.tsx deleted file mode 100644 index 8fc7bed1..00000000 --- a/src/ui/views/MainPages/Register/AllSet.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect } from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; -import { useWallet } from 'ui/utils'; - -const AllSet = ({ handleClick }) => { - const wallet = useWallet(); - - const loadScript = useCallback(async () => { - await wallet.getCadenceScripts(); - }, [wallet]); - - useEffect(() => { - loadScript().then(() => { - wallet.trackAccountRecovered(); - }); - }, [loadScript, wallet]); - - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/Register/RepeatPhrase.tsx b/src/ui/views/MainPages/Register/RepeatPhrase.tsx deleted file mode 100644 index 7cc83c5a..00000000 --- a/src/ui/views/MainPages/Register/RepeatPhrase.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback, useMemo } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const randomElement = (list: any[]) => { - return list[Math.floor(Math.random() * list.length)]; -}; - -const chunkArray = (myArray: any[], chunk_size: number) => { - const results: any[] = []; - while (myArray.length) { - results.push(myArray.splice(0, chunk_size)); - } - return results; -}; - -const RepeatPhrase = ({ handleClick, mnemonic }) => { - const [incorrect, setIncorrect] = useState(false); - const [chosenIndex, setChosen] = useState([]); - const [selectedPhrase, setSelect] = useState([]); - const [repeatArray, setRepeat] = useState([[], [], []]); - - const mnemonicArray = useMemo(() => mnemonic.split(' '), [mnemonic]); - const fullIndex = useMemo(() => [...Array(mnemonicArray.length).keys()], [mnemonicArray]); - const positionList = useMemo( - () => chunkArray(fullIndex, Math.floor(mnemonicArray.length / 3)), - [fullIndex, mnemonicArray] - ); - - const setSelected = useCallback( - (i, v) => { - const tempArray = selectedPhrase; - tempArray[i] = v; - setSelect([...tempArray]); - }, - [selectedPhrase] - ); - - const checkMatch = () => { - const correctMatch = chosenIndex.map((index) => mnemonicArray[index]); - if ( - selectedPhrase[0] === correctMatch[0] && - selectedPhrase[1] === correctMatch[1] && - selectedPhrase[2] === correctMatch[2] - ) { - handleClick(); - return; - } - handleRandom(); - setIncorrect(true); - setSelect([]); - - setTimeout(() => { - setIncorrect(false); - }, 5000); - }; - - const handleRandom = useCallback(() => { - const arr: number[] = []; - // [[0,1,2,3],[4,5,6,7],[8,9,10,11]] - const repeatIndex: number[][] = [[], [], []]; - const repeatMap: string[][] = [[], [], []]; - - const fullIndex = [...Array(mnemonicArray.length).keys()]; - positionList.forEach((list, i) => { - const picked = randomElement(list); - const exclude = fullIndex - .filter((item) => item !== picked) - .sort(() => { - return Math.random() - 0.5; - }); - arr.push(picked); - const shuffled = [exclude.pop(), exclude.pop(), exclude.pop(), picked].sort(() => { - return Math.random() - 0.5; - }); - repeatIndex[i] = shuffled; - repeatMap[i] = shuffled.map((index) => mnemonicArray[index]); - }); - setChosen(arr); - setRepeat(repeatMap); - }, [mnemonicArray, positionList]); - useEffect(() => { - handleRandom(); - }, [handleRandom]); - - return ( - <> - - - {chrome.i18n.getMessage('Verify') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage('Please_select_the_word_one_by_one_refering_to_its_order')} - - - - - {repeatArray.map((word, i) => { - return ( - - - {chrome.i18n.getMessage('Select_the_word_at')} - - {' #' + (chosenIndex[i] + 1) + ' '} - - - - {word.map((v, index) => { - return ( - - - - ); - })} - - - ); - })} - - - - - - - - - - {chrome.i18n.getMessage('Incorrect_recovery_phrases_please_try_again')} - - - - - - - - ); -}; - -export default RepeatPhrase; diff --git a/src/ui/views/MainPages/Register/RegisterPager.tsx b/src/ui/views/MainPages/Register/index.tsx similarity index 94% rename from src/ui/views/MainPages/Register/RegisterPager.tsx rename to src/ui/views/MainPages/Register/index.tsx index 4109c449..c5760b97 100644 --- a/src/ui/views/MainPages/Register/RegisterPager.tsx +++ b/src/ui/views/MainPages/Register/index.tsx @@ -6,17 +6,14 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from './AllSet'; import GoogleBackup from './GoogleBackup'; -import PickUsername from './PickUsername'; import RecoveryPhrase from './RecoveryPhrase'; -import RegisterHeader from './RegisterHeader'; -import RepeatPhrase from './RepeatPhrase'; import SetPassword from './SetPassword'; enum Direction { @@ -24,7 +21,7 @@ enum Direction { Left, } -const RegisterPager = () => { +const Register = () => { const history = useHistory(); const wallet = useWallet(); const [activeIndex, onChange] = useState(0); @@ -98,7 +95,7 @@ const RegisterPager = () => { /> ); case 5: - return ; + return ; default: return
; } @@ -184,4 +181,4 @@ const RegisterPager = () => { ); }; -export default RegisterPager; +export default Register; diff --git a/src/ui/views/MainPages/Reset/index.tsx b/src/ui/views/MainPages/Reset/index.tsx index a412bdf9..5a57c34e 100644 --- a/src/ui/views/MainPages/Reset/index.tsx +++ b/src/ui/views/MainPages/Reset/index.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; @@ -11,8 +12,6 @@ import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import RecoverPassword from './RecoverPassword'; import ResetRecoveryPhrase from './ResetRecoveryPhrase'; @@ -87,7 +86,7 @@ const Reset = () => { case 1: return ; case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/Sync/AllSet.tsx b/src/ui/views/MainPages/Sync/AllSet.tsx deleted file mode 100644 index cca17c81..00000000 --- a/src/ui/views/MainPages/Sync/AllSet.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Button, Typography, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; - -const AllSet = ({ handleClick }) => { - return ( - <> - - - - {chrome.i18n.getMessage('You__are')} - - {chrome.i18n.getMessage('Allset')} - - - - {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} - - - - - - - ); -}; - -export default AllSet; diff --git a/src/ui/views/MainPages/Sync/index.tsx b/src/ui/views/MainPages/Sync/index.tsx index c9237479..e256d791 100644 --- a/src/ui/views/MainPages/Sync/index.tsx +++ b/src/ui/views/MainPages/Sync/index.tsx @@ -4,14 +4,12 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -77,7 +75,7 @@ const Sync = () => { case 1: return ; case 2: - return ; + return ; default: return
; } diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/MainPages/WelcomePage/index.tsx index 85186dfd..c21553b8 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/MainPages/WelcomePage/index.tsx @@ -7,8 +7,7 @@ import appicon from '@/ui/FRWAssets/image/appicon.png'; import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; - -import RegisterHeader from '../Register/RegisterHeader'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; const WelcomePage = () => { return ( diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 2e343537..124448e1 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -13,7 +13,7 @@ import Forgot from './MainPages/Forgot'; import Recover from './MainPages/Forgot/Recover'; import Reset from './MainPages/Forgot/Reset'; import RecoverRegister from './MainPages/RecoverRegister'; -import RegisterPager from './MainPages/Register/RegisterPager'; +import Register from './MainPages/Register'; import Synce from './MainPages/Sync'; import WelcomePage from './MainPages/WelcomePage'; @@ -29,7 +29,7 @@ export const MainRoute: React.FC = () => { - + From 2e59322c7178b489176d4ff1516062ce7094fbbc Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:25:00 +1100 Subject: [PATCH 17/41] fixed: import component --- .../ImportComponents}/Googledrive.tsx | 22 +- .../ImportComponents}/JsonImport.tsx | 24 +-- .../MainPages/ImportComponents}/KeyImport.tsx | 18 +- .../ImportComponents/SeedPhraseImport.tsx} | 24 +-- .../MainPages/ImportComponents/index.ts | 4 + .../AddWelcome/AddressImport/ImportPager.tsx | 11 +- .../importComponent/JsonImport.tsx | 198 ------------------ .../importComponent/KeyImport.tsx | 101 --------- .../importComponent/SeedPhrase.tsx | 105 ---------- .../MainPages/AddressImport/ImportPager.tsx | 11 +- .../importComponent/Googledrive.tsx | 122 ----------- 11 files changed, 55 insertions(+), 585 deletions(-) rename src/ui/{views/MainPages/AddWelcome/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/Googledrive.tsx (84%) rename src/ui/{views/MainPages/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/JsonImport.tsx (89%) rename src/ui/{views/MainPages/AddressImport/importComponent => FRWComponent/MainPages/ImportComponents}/KeyImport.tsx (85%) rename src/ui/{views/MainPages/AddressImport/importComponent/SeedPhrase.tsx => FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx} (83%) create mode 100644 src/ui/FRWComponent/MainPages/ImportComponents/index.ts delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/JsonImport.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx delete mode 100644 src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx delete mode 100644 src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx similarity index 84% rename from src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx index 873ca549..04398b90 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx @@ -1,21 +1,21 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; +import { LLSpinner } from '@/ui/FRWComponent'; +import { useWallet } from '@/ui/utils'; -import IconGoogleDrive from '../../../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -26,12 +26,12 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); + const Googledrive = ({ setErrorMessage, setShowError }) => { - // const classes = useStyles(); const classes = useStyles(); const wallets = useWallet(); const history = useHistory(); @@ -57,11 +57,11 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { setShowError(true); setErrorMessage(chrome.i18n.getMessage('No__backup__found')); } - setLoading(false); } catch (e) { console.log(e); setShowError(true); setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); + } finally { setLoading(false); } }; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx similarity index 89% rename from src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index 09500eeb..80298d6f 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -9,23 +9,22 @@ import { InputAdornment, } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { LLSpinner } from 'ui/FRWComponent'; +import { LLSpinner } from '@/ui/FRWComponent'; +import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; +import { jsonToKey } from '@/ui/utils/modules/passkey'; -import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import { findAddressWithPK } from '../../../../utils/modules/findAddressWithPK'; -import { jsonToKey } from '../../../../utils/modules/passkey'; - -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -37,7 +36,7 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 400, }, inputChild: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px 0', @@ -55,7 +54,7 @@ const useStyles = makeStyles((theme) => ({ }, }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); @@ -99,7 +98,6 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { } const pkHex = Buffer.from(pk!.data()).toString('hex'); const result = await findAddressWithPK(pkHex, address); - console.log(result); setPk(pkHex); if (!result) { onOpen(); diff --git a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx similarity index 85% rename from src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx index 5e450670..17161efb 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx @@ -1,19 +1,19 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; +import { LLSpinner } from '@/ui/FRWComponent'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { LLSpinner } from 'ui/FRWComponent'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -24,14 +24,13 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); + const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - // const classes = useStyles(); const classes = useStyles(); - const [isLoading, setLoading] = useState(false); const handleImport = async (e) => { @@ -49,7 +48,6 @@ const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { return; } const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.PRIVATE_KEY })); - console.log('accounts ==>', accounts); onImport(accounts); } finally { setLoading(false); diff --git a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx similarity index 83% rename from src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx rename to src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx index d095031b..203380b0 100644 --- a/src/ui/views/MainPages/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx @@ -1,21 +1,20 @@ import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { LLSpinner } from 'ui/FRWComponent'; +import { LLSpinner } from '@/ui/FRWComponent'; +import KeyPathInput from '@/ui/FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '@/ui/utils/modules/constants'; +import { findAddressWithSeed } from '@/ui/utils/modules/findAddressWithPK'; -import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; -import { KEY_TYPE } from '../../../../utils/modules/constants'; -import { findAddressWithSeed } from '../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(() => ({ form: { - width: '100%', // Fix full width + width: '100%', display: 'flex', flexDirection: 'column', }, textarea: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px', @@ -26,7 +25,7 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); @@ -43,10 +42,7 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { setmnemonic(seed); const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - - console.log('address ', address); const result = await findAddressWithSeed(seed, address, true); if (!result) { onOpen(); @@ -73,9 +69,7 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { className={classes.textarea} defaultValue={''} /> - - - - {errorMesssage !== '' && ( - { - setErrorMessage(''); - }} - errorName={chrome.i18n.getMessage('Error')} - errorMessage={errorMesssage} - /> - )} - - ); -}; - -export default JsonImport; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx deleted file mode 100644 index aadcfe1c..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; - -import { LLSpinner } from 'ui/FRWComponent'; - -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import { findAddressWithPK } from '../../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); -const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - // const classes = useStyles(); - const classes = useStyles(); - - const [isLoading, setLoading] = useState(false); - - const handleImport = async (e) => { - try { - setLoading(true); - e.preventDefault(); - const pk = e.target[0].value.replace(/^0x/, ''); - const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; - const inputValue = e.target[2].value; - setPk(pk); - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - const result = await findAddressWithPK(pk, address); - if (!result) { - onOpen(); - return; - } - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.PRIVATE_KEY })); - console.log('accounts ==>', accounts); - onImport(accounts); - } finally { - setLoading(false); - } - }; - - return ( - -
- - - - -
- ); -}; - -export default KeyImport; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx deleted file mode 100644 index 622169d3..00000000 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; - -import { LLSpinner } from 'ui/FRWComponent'; - -import KeyPathInput from '../../../../../FRWComponent/KeyPathInputs'; -import { KEY_TYPE } from '../../../../../utils/modules/constants'; -import { findAddressWithSeed } from '../../../../../utils/modules/findAddressWithPK'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); - -const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { - const classes = useStyles(); - const [isLoading, setLoading] = useState(false); - - const handleImport = async (e) => { - try { - setLoading(true); - e.preventDefault(); - const seed = e.target[0].value.trim().split(/\s+/g).join(' '); - setmnemonic(seed); - const flowAddressRegex = /^(0x)?[0-9a-fA-F]{16}$/; - const inputValue = e.target[2].value; - const address = flowAddressRegex.test(inputValue) ? inputValue : null; - - const result = await findAddressWithSeed(seed, address, true); - if (!result) { - onOpen(); - return; - } - - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.SEED_PHRASE, mnemonic: seed })); - onImport(accounts); - } finally { - setLoading(false); - } - }; - - return ( - -
- - - - - - -
- ); -}; - -export default SeedPhraseImport; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 98e4e481..64c4cea8 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -2,16 +2,17 @@ import { Box, Tabs, Tab, Typography } from '@mui/material'; import React, { useEffect, useState, useContext } from 'react'; import { storage } from '@/background/webapi'; +import { + Googledrive, + KeyImport, + SeedPhraseImport, + JsonImport, +} from '@/ui/FRWComponent/MainPages/ImportComponents'; import { useWallet } from 'ui/utils'; import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; -import Googledrive from './importComponent/Googledrive'; -import JsonImport from './importComponent/JsonImport'; -import KeyImport from './importComponent/KeyImport'; -import SeedPhraseImport from './importComponent/SeedPhrase'; - function TabPanel(props) { const { children, value, index, ...other } = props; diff --git a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx deleted file mode 100644 index d0cf7b39..00000000 --- a/src/ui/views/MainPages/AddressImport/importComponent/Googledrive.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useEffect, useState, useContext } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const useStyles = makeStyles((theme) => ({ - form: { - width: '100%', // Fix full width - display: 'flex', - flexDirection: 'column', - }, - textarea: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); -const Googledrive = ({ setErrorMessage, setShowError }) => { - // const classes = useStyles(); - const classes = useStyles(); - const wallets = useWallet(); - const history = useHistory(); - - const [loading, setLoading] = useState(false); - - const getGoogle = async () => { - setLoading(true); - - try { - const accounts = await wallets.loadBackupAccounts(); - if (accounts.length > 0) { - history.push({ - pathname: '/import/google', - state: { - accounts: accounts, - }, - }); - } else { - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('No__backup__found')); - } - setLoading(false); - } catch (e) { - console.log(e); - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); - setLoading(false); - } - }; - - return ( - - - - - {chrome.i18n.getMessage('Restore__Backup__from__Google__Drive')} - - - - - ); -}; - -export default Googledrive; From 95b852a7dcd7c9120a2e15876ebf8e55120fe232 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:27:22 +1100 Subject: [PATCH 18/41] fixed: import pathing --- src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index 80298d6f..c68db04a 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -15,7 +15,8 @@ import { LLSpinner } from '@/ui/FRWComponent'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; -import { jsonToKey } from '@/ui/utils/modules/passkey'; + +import { jsonToKey } from '../../../utils/modules/passkey'; const useStyles = makeStyles(() => ({ form: { From 78ee0143a372f3db7a44ff7b2229d8c4f66fd521 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 19:28:03 +1100 Subject: [PATCH 19/41] fixed: add todo --- src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx index c68db04a..c8c3134c 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx @@ -16,6 +16,7 @@ import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { KEY_TYPE } from '@/ui/utils/modules/constants'; import { findAddressWithPK } from '@/ui/utils/modules/findAddressWithPK'; +//todo: update import of this js import { jsonToKey } from '../../../utils/modules/passkey'; const useStyles = makeStyles(() => ({ From 84ce319b7d8d7c071a49bb804e34557403672516 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 20:58:16 +1100 Subject: [PATCH 20/41] fixed: import pager ui and function seperation --- .../ImportComponents/Googledrive.tsx | 3 +- .../ImportComponents/ImportPager.tsx | 121 ++++++++++++++ .../MainPages/ImportComponents/index.ts | 1 + .../AddWelcome/AddressImport/ImportPager.tsx | 124 +++------------ .../MainPages/AddressImport/ImportPager.tsx | 150 +++--------------- 5 files changed, 161 insertions(+), 238 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx index 04398b90..90ce2d2d 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx +++ b/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx @@ -47,8 +47,9 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { + const prevPath = history.location.pathname; history.push({ - pathname: '/add/google', + pathname: prevPath === '/addressimport' ? '/import/google' : '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx b/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx new file mode 100644 index 00000000..f66bab54 --- /dev/null +++ b/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx @@ -0,0 +1,121 @@ +import { Box, Tabs, Tab, Typography } from '@mui/material'; +import React from 'react'; + +import { + Googledrive, + KeyImport, + SeedPhraseImport, + JsonImport, +} from '@/ui/FRWComponent/MainPages/ImportComponents'; +import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; + +function TabPanel(props) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +const BaseImportPager = ({ + selectedTab, + handleTabChange, + handleNotFoundPopup, + handleImport, + setmnemonic, + setPk, + setErrorMessage, + setShowError, + isSignLoading, + addressFound, + setAddressFound, + newKey, + setKeyNew, +}) => { + const sxStyles = { + fontFamily: 'Inter', + fontSize: '18px', + fontStyle: 'normal', + fontWeight: 700, + lineHeight: '24px', + letterSpacing: '-0.252px', + textTransform: 'capitalize', + }; + + return ( + + + {chrome.i18n.getMessage('import_account')} + + {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} + + + + + + + + + + + + + + + + + + + + + + {!addressFound && ( + + )} + {!newKey && ( + + )} + + ); +}; + +export default BaseImportPager; diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts b/src/ui/FRWComponent/MainPages/ImportComponents/index.ts index 6b470ad3..82622273 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts +++ b/src/ui/FRWComponent/MainPages/ImportComponents/index.ts @@ -2,3 +2,4 @@ export { default as KeyImport } from './KeyImport'; export { default as SeedPhraseImport } from './SeedPhraseImport'; export { default as JsonImport } from './JsonImport'; export { default as Googledrive } from './Googledrive'; +export { default as ImportPager } from './ImportPager'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx index 7ebd7848..568eed50 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx @@ -1,35 +1,9 @@ -import { Box, Tabs, Tab, Typography } from '@mui/material'; import * as bip39 from 'bip39'; -import React, { useEffect, useState, useContext } from 'react'; -import { Presets } from 'react-component-transition'; +import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import { - KeyImport, - SeedPhraseImport, - JsonImport, - Googledrive, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; -import { useWallet } from 'ui/utils'; - -import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; -import ImportAddressModel from '../../../../FRWComponent/PopupModal/importAddressModal'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} +import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import { useWallet } from '@/ui/utils'; const ImportPager = ({ setMnemonic, @@ -45,10 +19,8 @@ const ImportPager = ({ setShowError, }) => { const [selectedTab, setSelectedTab] = useState(0); - const [mnemonicValid, setMnemonicValid] = useState(true); const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); const [newKey, setKeyNew] = useState(true); const wallet = useWallet(); @@ -70,6 +42,7 @@ const ImportPager = ({ handleClick(); } }; + const setmnemonic = (mnemonic) => { setMnemonic(mnemonic); const formatted = mnemonic.trim().split(/\s+/g).join(' '); @@ -81,81 +54,22 @@ const ImportPager = ({ setAddressFound(!addressFound); }; - const sxStyles = { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }; - return ( - - - {chrome.i18n.getMessage('import_account')} - - {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} - - - - - - - - - - - - - - - - - - - - - - {!addressFound && ( - - )} - {!newKey && ( - - )} - + ); }; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/MainPages/AddressImport/ImportPager.tsx index 64c4cea8..d0bdb004 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/MainPages/AddressImport/ImportPager.tsx @@ -1,33 +1,7 @@ -import { Box, Tabs, Tab, Typography } from '@mui/material'; -import React, { useEffect, useState, useContext } from 'react'; +import React, { useState } from 'react'; -import { storage } from '@/background/webapi'; -import { - Googledrive, - KeyImport, - SeedPhraseImport, - JsonImport, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; -import { useWallet } from 'ui/utils'; - -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; -import ImportAddressModel from '../../../FRWComponent/PopupModal/importAddressModal'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} +import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import { useWallet } from '@/ui/utils'; const ImportPager = ({ setMnemonic, @@ -44,10 +18,7 @@ const ImportPager = ({ }) => { const [selectedTab, setSelectedTab] = useState(0); const [isImport, setImport] = useState(false); - - const [mnemonicValid, setMnemonicValid] = useState(true); const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); const [newKey, setKeyNew] = useState(true); const wallet = useWallet(); @@ -64,13 +35,11 @@ const ImportPager = ({ const signMnemonic = async (accountKey) => { try { const result = await wallet.signInWithMnemonic(accountKey[0].mnemonic); - console.log('result ->', result); setSignLoading(false); const userInfo = await wallet.getUserInfo(true); setUsername(userInfo.username); goPassword(); } catch (error) { - console.log(error); setSignLoading(false); if (error.message === 'NoUserFound') { setImport(false); @@ -83,13 +52,11 @@ const ImportPager = ({ const signPk = async (accountKey) => { try { const result = await wallet.signInWithPrivatekey(accountKey[0].pk); - console.log('result ->', result); setSignLoading(false); const userInfo = await wallet.getUserInfo(true); setUsername(userInfo.username); goPassword(); } catch (error) { - console.log(error); setSignLoading(false); if (error.message === 'NoUserFound') { setImport(false); @@ -106,7 +73,6 @@ const ImportPager = ({ const handleImport = async (accountKey?: any) => { setAccounts(accountKey); const result = await wallet.openapi.checkImport(accountKey[0].pubK); - console.log('result ', result); if (result.status === 409) { signIn(accountKey); } else { @@ -117,107 +83,27 @@ const ImportPager = ({ handleClick(); } }; - const setmnemonic = (mnemonic) => { - setMnemonic(mnemonic); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - setMnemonicValid(true); - storage.set('premnemonic', formatted); - }; - - const handleShowModel = (show) => { - setImport(show); - }; - - const handleAddressSelection = async (address) => { - const account = accounts.filter((account) => account.address === address)[0]; - const result = await wallet.openapi.checkImport(account.pubK); - if (result.status === 409) { - signIn([account]); - } else { - setAccounts([account]); - handleClick(); - } - }; const handleNotFoundPopup = async () => { setAddressFound(!addressFound); }; - const sxStyles = { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }; - return ( - - - {chrome.i18n.getMessage('import_account')} - - {chrome.i18n.getMessage('Support_Flow_Wallet_Blocto')} - - - - - - - - - - - - - - - - - - - - - - {!addressFound && ( - - )} - {!newKey && ( - - )} - + ); }; From ecc04b955a47781ca174356091ac5a9ce24f7cc0 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 22:20:46 +1100 Subject: [PATCH 21/41] fixed: update move component --- .../FRWComponent/GeneralPages/NFTDrawer.tsx | 301 +++++++++++++++ src/ui/FRWComponent/GeneralPages/index.tsx | 1 + src/ui/views/MoveBoard/MoveEvm/index.tsx | 358 +++--------------- .../views/MoveBoard/MoveFromChild/index.tsx | 339 ++--------------- src/ui/views/MoveBoard/MoveToChild/index.tsx | 338 ++--------------- 5 files changed, 409 insertions(+), 928 deletions(-) create mode 100644 src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx create mode 100644 src/ui/FRWComponent/GeneralPages/index.tsx diff --git a/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx b/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx new file mode 100644 index 00000000..28c9e5e0 --- /dev/null +++ b/src/ui/FRWComponent/GeneralPages/NFTDrawer.tsx @@ -0,0 +1,301 @@ +// src/ui/views/MoveBoard/components/NFTMoveDrawer.tsx +import CloseIcon from '@mui/icons-material/Close'; +import { Box, Button, Typography, Drawer, IconButton, CardMedia, Skeleton } from '@mui/material'; +import React from 'react'; + +import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; +import selected from 'ui/FRWAssets/svg/selected.svg'; +import { LLSpinner } from 'ui/FRWComponent'; + +interface NFTMoveDrawerProps { + showMoveBoard: boolean; + handleCancelBtnClicked: () => void; + isLoading: boolean; + currentCollection: any; + collectionDetail: any; + nftIdArray: number[]; + onCollectionSelect: () => void; + onNFTSelect: (nftId: number) => void; + sending: boolean; + failed: boolean; + onMove: () => void; + moveType: 'toChild' | 'fromChild' | 'evm'; + AccountComponent: React.ReactNode; + nfts: any[]; + replaceIPFS?: (url: string) => string; +} + +export const NFTMoveDrawer: React.FC = ({ + showMoveBoard, + handleCancelBtnClicked, + isLoading, + currentCollection, + collectionDetail, + nftIdArray, + onCollectionSelect, + onNFTSelect, + sending, + failed, + onMove, + moveType, + AccountComponent, + nfts, + replaceIPFS = (url) => url, +}) => { + return ( + + {/* Header */} + + + + + {chrome.i18n.getMessage('select')} NFTs + + + + + + + + {AccountComponent} + + + + + {chrome.i18n.getMessage('collection')} + + + + {currentCollection && collectionDetail && ( + + )} + + + {!isLoading ? ( + + {nfts && nfts.length > 0 ? ( + nfts.map((nft) => ( + + + + )) + ) : ( + + + 0 NFTs + + + )} + + ) : ( + + )} + + + + + + + ); +}; + +const LoadingGrid = () => ( + + {[...Array(4)].map((_, index) => ( + + + + ))} + +); + +export default NFTMoveDrawer; diff --git a/src/ui/FRWComponent/GeneralPages/index.tsx b/src/ui/FRWComponent/GeneralPages/index.tsx new file mode 100644 index 00000000..88e7cfa8 --- /dev/null +++ b/src/ui/FRWComponent/GeneralPages/index.tsx @@ -0,0 +1 @@ +export { default as NFTDrawer } from './NFTDrawer'; diff --git a/src/ui/views/MoveBoard/MoveEvm/index.tsx b/src/ui/views/MoveBoard/MoveEvm/index.tsx index ee0f1790..5e9988d6 100644 --- a/src/ui/views/MoveBoard/MoveEvm/index.tsx +++ b/src/ui/views/MoveBoard/MoveEvm/index.tsx @@ -1,15 +1,12 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountBox from '../AccountBox'; @@ -43,6 +40,13 @@ const MoveEvm = (props: MoveBoardProps) => { // We are moving within the EVM network, the flag should be false movingBetweenEVMAndFlow: false, }); + const [currentCollection, setCurrentCollection] = useState({ + CollectionName: '', + NftCount: 0, + id: '', + address: '', + logo: '', + }); const isLowStorage = isSufficient !== undefined && !isSufficient; // isSufficient is undefined when the storage check is not yet completed const isLowStorageAfterAction = sufficientAfterAction !== undefined && !sufficientAfterAction; @@ -182,318 +186,41 @@ const MoveEvm = (props: MoveBoardProps) => { updateCurrentCollection(); }, [collectionList, cadenceNft, selectedCollection, updateCurrentCollection]); - return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - + useEffect(() => { + if (collectionList && selectedCollection) { + const collection = collectionList.find((collection) => collection.id === selectedCollection); + if (collection) { + setCurrentCollection(collection); + } + } + }, [collectionList, selectedCollection]); - - - - {chrome.i18n.getMessage('collection')} - - - {collectionDetail && ( - - )} - - {!loading ? ( - - {collectInfo && - (collectInfo.nfts.length > 0 ? ( - collectInfo.nfts.map((items) => ( - - - - )) - ) : ( - - - 0 NFTs - - - ))} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="evm" + AccountComponent={ + + } + nfts={collectInfo?.nfts || []} /> - - - {selectCollection && ( { collectionList={collectionList} /> )} + - + ); }; diff --git a/src/ui/views/MoveBoard/MoveFromChild/index.tsx b/src/ui/views/MoveBoard/MoveFromChild/index.tsx index 81bd156d..55eecd78 100644 --- a/src/ui/views/MoveBoard/MoveFromChild/index.tsx +++ b/src/ui/views/MoveBoard/MoveFromChild/index.tsx @@ -1,16 +1,13 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import { isValidEthereumAddress } from '@/shared/utils/address'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountMainBox from '../AccountMainBox'; @@ -315,307 +312,31 @@ const MoveFromChild = (props: MoveBoardProps) => { }; return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - - - - - {chrome.i18n.getMessage('collection')} - - - {currentCollection && collectionDetail && ( - - )} - - {!isLoading ? ( - - {collectionDetail && collectionDetail.nfts.length > 0 ? ( - collectionDetail.nfts.map((nft) => ( - - - - )) - ) : ( - - - 0 NFTs - - - )} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="fromChild" + AccountComponent={ + + } + nfts={collectionDetail?.nfts || []} + replaceIPFS={replaceIPFS} /> - - - + {selectCollection && ( { collectionList={collectionList} /> )} + + + - + ); }; diff --git a/src/ui/views/MoveBoard/MoveToChild/index.tsx b/src/ui/views/MoveBoard/MoveToChild/index.tsx index a6412419..66067568 100644 --- a/src/ui/views/MoveBoard/MoveToChild/index.tsx +++ b/src/ui/views/MoveBoard/MoveToChild/index.tsx @@ -1,16 +1,13 @@ -import CloseIcon from '@mui/icons-material/Close'; -import { Box, Button, Skeleton, Typography, Drawer, IconButton, CardMedia } from '@mui/material'; +import { Box } from '@mui/material'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import { isValidEthereumAddress } from '@/shared/utils/address'; +import { NFTDrawer } from '@/ui/FRWComponent/GeneralPages'; import WarningSnackbar from '@/ui/FRWComponent/WarningSnackbar'; import { WarningStorageLowSnackbar } from '@/ui/FRWComponent/WarningStorageLowSnackbar'; import { useStorageCheck } from '@/ui/utils/useStorageCheck'; import alertMark from 'ui/FRWAssets/svg/alertMark.svg'; -import moveSelectDrop from 'ui/FRWAssets/svg/moveSelectDrop.svg'; -import selected from 'ui/FRWAssets/svg/selected.svg'; -import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; import AccountMainBox from '../AccountMainBox'; @@ -37,7 +34,7 @@ const MoveToChild = (props: MoveBoardProps) => { const [failed, setFailed] = useState(false); const [errorOpen, setShowError] = useState(false); const [selectCollection, setSelectCollection] = useState(false); - const [selectedAccount, setSelectedChildAccount] = useState(null); + const [selectedAccount, setSelectedChildAccount] = useState(null); const [currentCollection, setCurrentCollection] = useState({ CollectionName: '', NftCount: 0, @@ -45,7 +42,6 @@ const MoveToChild = (props: MoveBoardProps) => { address: '', logo: '', }); - // console.log('props.loggedInAccounts', props.current) const { sufficient: isSufficient, sufficientAfterAction } = useStorageCheck({ transferAmount: 0, movingBetweenEVMAndFlow: selectedAccount @@ -257,306 +253,30 @@ const MoveToChild = (props: MoveBoardProps) => { }; return ( - - - - - - {chrome.i18n.getMessage('select')} NFTs - - - - - - - - - - - - - {chrome.i18n.getMessage('collection')} - - - {currentCollection && collectionDetail && ( - - )} - - {!isLoading ? ( - - {collectionDetail && collectionDetail.nfts.length > 0 ? ( - collectionDetail.nfts.map((nft) => ( - - - - )) - ) : ( - - - 0 NFTs - - - )} - - ) : ( - - - - - - - - - - - - - - - )} - - + setSelectCollection(true)} + onNFTSelect={toggleSelectNft} + sending={sending} + failed={failed} + onMove={moveNFT} + moveType="toChild" + AccountComponent={ + + } + nfts={collectionDetail?.nfts || []} + replaceIPFS={replaceIPFS} /> - - - {selectCollection && ( { collectionList={collectionList} /> )} + - + ); }; From 84f5e0a137dddad862935b41efb68dfa7b9af29f Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 17:28:33 +1100 Subject: [PATCH 22/41] fixed: updatte welcome page --- src/ui/FRWComponent/MainPages/WelcomePage.tsx | 246 ++++++++++++++ src/ui/FRWComponent/MainPages/index.ts | 1 + src/ui/views/MainPages/AddWelcome/index.tsx | 238 +------------- src/ui/views/MainPages/WelcomePage/index.tsx | 307 +----------------- 4 files changed, 251 insertions(+), 541 deletions(-) create mode 100644 src/ui/FRWComponent/MainPages/WelcomePage.tsx diff --git a/src/ui/FRWComponent/MainPages/WelcomePage.tsx b/src/ui/FRWComponent/MainPages/WelcomePage.tsx new file mode 100644 index 00000000..13d9723d --- /dev/null +++ b/src/ui/FRWComponent/MainPages/WelcomePage.tsx @@ -0,0 +1,246 @@ +import { Typography, Button, CardMedia } from '@mui/material'; +import { Box } from '@mui/system'; +import React from 'react'; +import { Link } from 'react-router-dom'; + +import appicon from '@/ui/FRWAssets/image/appicon.png'; +import create from '@/ui/FRWAssets/svg/create.svg'; +import importPng from '@/ui/FRWAssets/svg/import.svg'; +import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; +import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; + +interface WelcomeLayoutProps { + registerPath: string; + syncPath: string; + importPath: string; +} + +const WelcomePage: React.FC = ({ registerPath, syncPath, importPath }) => { + return ( + + + + + + + + + + + + {chrome.i18n.getMessage('Welcome_to_lilico')} + + + + {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} + + {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} + + + + + + + + + + + + + + + ); +}; + +export default WelcomePage; diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/MainPages/index.ts index 9a681cd7..16082b3c 100644 --- a/src/ui/FRWComponent/MainPages/index.ts +++ b/src/ui/FRWComponent/MainPages/index.ts @@ -2,3 +2,4 @@ export { default as AllSet } from './AllSet'; export { default as PickUsername } from './PickUsername'; export { default as RepeatPhrase } from './RepeatPhrase'; export { default as RegisterHeader } from './RegisterHeader'; +export { default as WelcomePage } from './WelcomePage'; diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/MainPages/AddWelcome/index.tsx index 821ff023..710b9d4c 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/MainPages/AddWelcome/index.tsx @@ -1,243 +1,9 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; import React from 'react'; -import { Link } from 'react-router-dom'; -import appicon from '@/ui/FRWAssets/image/appicon.png'; -import create from '@/ui/FRWAssets/svg/create.svg'; -import importPng from '@/ui/FRWAssets/svg/import.svg'; -import outside from '@/ui/FRWAssets/svg/importoutside.svg'; -import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage } from '@/ui/FRWComponent/MainPages'; const AddWelcome = () => { - return ( - <> - - - - - - - - - - - - {chrome.i18n.getMessage('Welcome_to_lilico')} - - - - {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} - - {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} - - - - - - - - - - - - - - - - ); + return ; }; export default AddWelcome; diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/MainPages/WelcomePage/index.tsx index c21553b8..6af3ca1f 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/MainPages/WelcomePage/index.tsx @@ -1,312 +1,9 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; import React from 'react'; -import { Link } from 'react-router-dom'; -import appicon from '@/ui/FRWAssets/image/appicon.png'; -import create from '@/ui/FRWAssets/svg/create.svg'; -import importPng from '@/ui/FRWAssets/svg/import.svg'; -import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/MainPages'; const WelcomePage = () => { - return ( - <> - - - - - - - - - - - - {chrome.i18n.getMessage('Welcome_to_lilico')} - - - - {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')} - - {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} - - - - - - {/* */} - - - - - - - - {/* */} - - - {/* */} - - - - - ); + return ; }; export default WelcomePage; From 751728b1230f9c95a97efe2b10eac9215854473a Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 19:38:27 +1100 Subject: [PATCH 23/41] feat: updatte page name --- .../{MainPages => LandingPages}/AllSet.tsx | 0 .../ImportComponents/Googledrive.tsx | 0 .../ImportComponents/ImportPager.tsx | 2 +- .../ImportComponents/JsonImport.tsx | 0 .../ImportComponents/KeyImport.tsx | 0 .../ImportComponents/SeedPhraseImport.tsx | 0 .../ImportComponents/index.ts | 0 .../PickUsername.tsx | 0 .../RegisterHeader.tsx | 0 .../RepeatPhrase.tsx | 0 .../WelcomePage.tsx | 2 +- .../{MainPages => LandingPages}/index.ts | 0 .../AddWelcome/AddRegister/GoogleBackup.tsx | 0 .../AddWelcome/AddRegister/RecoveryPhrase.tsx | 0 .../AddWelcome/AddRegister/SetPassword.tsx | 0 .../AddWelcome/AddRegister/index.tsx | 2 +- .../AddWelcome/AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddWelcome/AddressImport/ImportPager.tsx | 2 +- .../AddressImport/RecoverPassword.tsx | 0 .../AddWelcome/AddressImport/SetPassword.tsx | 0 .../AddWelcome/AddressImport/index.tsx | 2 +- .../AddWelcome/ProxySync/ProxyQr.tsx | 0 .../AddWelcome/ProxySync/SetPassword.tsx | 0 .../AddWelcome/ProxySync/index.tsx | 2 +- .../AddWelcome/Sync/SetPassword.tsx | 0 .../AddWelcome/Sync/SyncQr.tsx | 0 .../AddWelcome/Sync/index.tsx | 2 +- .../AddWelcome/index.tsx | 2 +- .../AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 2 +- .../AddressImport/RecoverPassword.tsx | 0 .../AddressImport/SetPassword.tsx | 0 .../AddressImport/index.tsx | 2 +- .../Forgot/Recover/RecoverPage.tsx | 0 .../Forgot/Recover/ShowKey.tsx | 0 .../Forgot/Recover/index.tsx | 2 +- .../Forgot/Reset/ResetPage.tsx | 0 .../Forgot/Reset/index.tsx | 2 +- .../Forgot/index.tsx | 2 +- .../Forgot/stepBox.tsx | 0 .../Import/GoogleImport/DecryptWallet.tsx | 0 .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 0 .../Import/GoogleImport/RecoveryPhrase.tsx | 0 .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../Import/ImportPager.tsx | 2 +- .../Import/ImportRecoveryPhrase.tsx | 0 .../Import/RecoverPassword.tsx | 0 .../RecoverRegister/RecoveryPhrase.tsx | 0 .../RecoverRegister/SetPassword.tsx | 0 .../RecoverRegister/index.tsx | 2 +- .../Register/GoogleBackup.tsx | 0 .../Register/RecoveryPhrase.tsx | 0 .../Register/SetPassword.tsx | 0 .../Register/index.tsx | 2 +- .../Reset/RecoverPassword.tsx | 0 .../Reset/ResetRecoveryPhrase.tsx | 0 .../Reset/index.tsx | 2 +- .../Sync/Namespace.tsx | 0 .../Sync/RegisterHeader.tsx | 0 .../Sync/SetPassword.tsx | 0 .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 2 +- .../WelcomePage/index.tsx | 2 +- src/ui/views/MainRoute.tsx | 28 +++++++++---------- 77 files changed, 36 insertions(+), 36 deletions(-) rename src/ui/FRWComponent/{MainPages => LandingPages}/AllSet.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/Googledrive.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/ImportPager.tsx (98%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/JsonImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/KeyImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/SeedPhraseImport.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/ImportComponents/index.ts (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/PickUsername.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/RegisterHeader.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/RepeatPhrase.tsx (100%) rename src/ui/FRWComponent/{MainPages => LandingPages}/WelcomePage.tsx (99%) rename src/ui/FRWComponent/{MainPages => LandingPages}/index.ts (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddRegister/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/ImportPager.tsx (95%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/AddressImport/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/ProxySync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/SyncQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/Sync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddWelcome/index.tsx (74%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/ImportPager.tsx (96%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/AddressImport/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/RecoverPage.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/ShowKey.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Recover/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Reset/ResetPage.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Forgot/Reset/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Forgot/stepBox.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportPager.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Import/ImportRecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Import/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/RecoverRegister/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Register/GoogleBackup.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/RecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Register/index.tsx (99%) rename src/ui/views/{MainPages => LandingPages}/Reset/RecoverPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Reset/ResetRecoveryPhrase.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Reset/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/Sync/Namespace.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/SetPassword.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/SyncQr.tsx (100%) rename src/ui/views/{MainPages => LandingPages}/Sync/index.tsx (98%) rename src/ui/views/{MainPages => LandingPages}/WelcomePage/index.tsx (93%) diff --git a/src/ui/FRWComponent/MainPages/AllSet.tsx b/src/ui/FRWComponent/LandingPages/AllSet.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/AllSet.tsx rename to src/ui/FRWComponent/LandingPages/AllSet.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/Googledrive.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx similarity index 98% rename from src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx index f66bab54..304be1a2 100644 --- a/src/ui/FRWComponent/MainPages/ImportComponents/ImportPager.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx @@ -6,7 +6,7 @@ import { KeyImport, SeedPhraseImport, JsonImport, -} from '@/ui/FRWComponent/MainPages/ImportComponents'; +} from '@/ui/FRWComponent/LandingPages/ImportComponents'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; function TabPanel(props) { diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/JsonImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/KeyImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/SeedPhraseImport.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx diff --git a/src/ui/FRWComponent/MainPages/ImportComponents/index.ts b/src/ui/FRWComponent/LandingPages/ImportComponents/index.ts similarity index 100% rename from src/ui/FRWComponent/MainPages/ImportComponents/index.ts rename to src/ui/FRWComponent/LandingPages/ImportComponents/index.ts diff --git a/src/ui/FRWComponent/MainPages/PickUsername.tsx b/src/ui/FRWComponent/LandingPages/PickUsername.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/PickUsername.tsx rename to src/ui/FRWComponent/LandingPages/PickUsername.tsx diff --git a/src/ui/FRWComponent/MainPages/RegisterHeader.tsx b/src/ui/FRWComponent/LandingPages/RegisterHeader.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/RegisterHeader.tsx rename to src/ui/FRWComponent/LandingPages/RegisterHeader.tsx diff --git a/src/ui/FRWComponent/MainPages/RepeatPhrase.tsx b/src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx similarity index 100% rename from src/ui/FRWComponent/MainPages/RepeatPhrase.tsx rename to src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx diff --git a/src/ui/FRWComponent/MainPages/WelcomePage.tsx b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx similarity index 99% rename from src/ui/FRWComponent/MainPages/WelcomePage.tsx rename to src/ui/FRWComponent/LandingPages/WelcomePage.tsx index 13d9723d..7a84ff3f 100644 --- a/src/ui/FRWComponent/MainPages/WelcomePage.tsx +++ b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx @@ -7,7 +7,7 @@ import appicon from '@/ui/FRWAssets/image/appicon.png'; import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; interface WelcomeLayoutProps { registerPath: string; diff --git a/src/ui/FRWComponent/MainPages/index.ts b/src/ui/FRWComponent/LandingPages/index.ts similarity index 100% rename from src/ui/FRWComponent/MainPages/index.ts rename to src/ui/FRWComponent/LandingPages/index.ts diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx index f87e764b..3f673ef6 100644 --- a/src/ui/views/MainPages/AddWelcome/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx @@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx index 4c5ce087..71e5cc58 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx similarity index 95% rename from src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx index 568eed50..adf4d45e 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx @@ -2,7 +2,7 @@ import * as bip39 from 'bip39'; import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; import { useWallet } from '@/ui/utils'; const ImportPager = ({ diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx index a0be5dde..e3869cbb 100644 --- a/src/ui/views/MainPages/AddWelcome/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { storage } from 'background/webapi'; import { LLPinAlert } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx rename to src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx index 228ca5f1..215cfb7d 100644 --- a/src/ui/views/MainPages/AddWelcome/ProxySync/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddWelcome/Sync/SyncQr.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/MainPages/AddWelcome/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx diff --git a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx b/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddWelcome/Sync/index.tsx rename to src/ui/views/LandingPages/AddWelcome/Sync/index.tsx index d4f31725..ee6c4e1f 100644 --- a/src/ui/views/MainPages/AddWelcome/Sync/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/AddWelcome/index.tsx b/src/ui/views/LandingPages/AddWelcome/index.tsx similarity index 74% rename from src/ui/views/MainPages/AddWelcome/index.tsx rename to src/ui/views/LandingPages/AddWelcome/index.tsx index 710b9d4c..d2536d0f 100644 --- a/src/ui/views/MainPages/AddWelcome/index.tsx +++ b/src/ui/views/LandingPages/AddWelcome/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WelcomePage } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; const AddWelcome = () => { return ; diff --git a/src/ui/views/MainPages/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx index 731ed764..2215186f 100644 --- a/src/ui/views/MainPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; diff --git a/src/ui/views/MainPages/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddressImport/ImportPager.tsx similarity index 96% rename from src/ui/views/MainPages/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddressImport/ImportPager.tsx index d0bdb004..174f739e 100644 --- a/src/ui/views/MainPages/AddressImport/ImportPager.tsx +++ b/src/ui/views/LandingPages/AddressImport/ImportPager.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import BaseImportPager from '@/ui/FRWComponent/MainPages/ImportComponents/ImportPager'; +import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; import { useWallet } from '@/ui/utils'; const ImportPager = ({ diff --git a/src/ui/views/MainPages/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddressImport/SetPassword.tsx diff --git a/src/ui/views/MainPages/AddressImport/index.tsx b/src/ui/views/LandingPages/AddressImport/index.tsx similarity index 99% rename from src/ui/views/MainPages/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddressImport/index.tsx index 9c2cc70a..d1659ea0 100644 --- a/src/ui/views/MainPages/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddressImport/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/Forgot/Recover/RecoverPage.tsx b/src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Recover/RecoverPage.tsx rename to src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx diff --git a/src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx b/src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Recover/ShowKey.tsx rename to src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx diff --git a/src/ui/views/MainPages/Forgot/Recover/index.tsx b/src/ui/views/LandingPages/Forgot/Recover/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/Recover/index.tsx rename to src/ui/views/LandingPages/Forgot/Recover/index.tsx index e7a25549..c7e133e7 100644 --- a/src/ui/views/MainPages/Forgot/Recover/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Recover/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx b/src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/Reset/ResetPage.tsx rename to src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx diff --git a/src/ui/views/MainPages/Forgot/Reset/index.tsx b/src/ui/views/LandingPages/Forgot/Reset/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/Reset/index.tsx rename to src/ui/views/LandingPages/Forgot/Reset/index.tsx index 4f9f4417..363fdb89 100644 --- a/src/ui/views/MainPages/Forgot/Reset/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Reset/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/MainPages/Forgot/index.tsx b/src/ui/views/LandingPages/Forgot/index.tsx similarity index 98% rename from src/ui/views/MainPages/Forgot/index.tsx rename to src/ui/views/LandingPages/Forgot/index.tsx index 3ae53a25..d17e1226 100644 --- a/src/ui/views/MainPages/Forgot/index.tsx +++ b/src/ui/views/LandingPages/Forgot/index.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import recover from '@/ui/FRWAssets/svg/recover.svg'; import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; const Forgot = () => { return ( diff --git a/src/ui/views/MainPages/Forgot/stepBox.tsx b/src/ui/views/LandingPages/Forgot/stepBox.tsx similarity index 100% rename from src/ui/views/MainPages/Forgot/stepBox.tsx rename to src/ui/views/LandingPages/Forgot/stepBox.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/Import/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/MainPages/Import/GoogleImport/index.tsx rename to src/ui/views/LandingPages/Import/GoogleImport/index.tsx index e267ab69..690a37ff 100644 --- a/src/ui/views/MainPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/Import/GoogleImport/index.tsx @@ -5,7 +5,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; diff --git a/src/ui/views/MainPages/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportComponent/PrivateKey.tsx rename to src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx diff --git a/src/ui/views/MainPages/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportComponent/SeedPhrase.tsx rename to src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx diff --git a/src/ui/views/MainPages/Import/ImportPager.tsx b/src/ui/views/LandingPages/Import/ImportPager.tsx similarity index 98% rename from src/ui/views/MainPages/Import/ImportPager.tsx rename to src/ui/views/LandingPages/Import/ImportPager.tsx index 9d555fea..e91450cb 100644 --- a/src/ui/views/MainPages/Import/ImportPager.tsx +++ b/src/ui/views/LandingPages/Import/ImportPager.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Import/ImportRecoveryPhrase.tsx rename to src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/Import/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Import/RecoverPassword.tsx rename to src/ui/views/LandingPages/Import/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/RecoverRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/RecoverRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/RecoverRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/SetPassword.tsx b/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/RecoverRegister/SetPassword.tsx rename to src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx diff --git a/src/ui/views/MainPages/RecoverRegister/index.tsx b/src/ui/views/LandingPages/RecoverRegister/index.tsx similarity index 98% rename from src/ui/views/MainPages/RecoverRegister/index.tsx rename to src/ui/views/LandingPages/RecoverRegister/index.tsx index 17c20703..0976d766 100644 --- a/src/ui/views/MainPages/RecoverRegister/index.tsx +++ b/src/ui/views/LandingPages/RecoverRegister/index.tsx @@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom'; import { storage } from '@/background/webapi'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, AllSet } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, AllSet } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import lilicoIcon from '../../../../../_raw/images/icon-48.png'; diff --git a/src/ui/views/MainPages/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/Register/GoogleBackup.tsx similarity index 100% rename from src/ui/views/MainPages/Register/GoogleBackup.tsx rename to src/ui/views/LandingPages/Register/GoogleBackup.tsx diff --git a/src/ui/views/MainPages/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Register/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Register/RecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Register/SetPassword.tsx b/src/ui/views/LandingPages/Register/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Register/SetPassword.tsx rename to src/ui/views/LandingPages/Register/SetPassword.tsx diff --git a/src/ui/views/MainPages/Register/index.tsx b/src/ui/views/LandingPages/Register/index.tsx similarity index 99% rename from src/ui/views/MainPages/Register/index.tsx rename to src/ui/views/LandingPages/Register/index.tsx index c5760b97..077de0e4 100644 --- a/src/ui/views/MainPages/Register/index.tsx +++ b/src/ui/views/LandingPages/Register/index.tsx @@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/Reset/RecoverPassword.tsx b/src/ui/views/LandingPages/Reset/RecoverPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Reset/RecoverPassword.tsx rename to src/ui/views/LandingPages/Reset/RecoverPassword.tsx diff --git a/src/ui/views/MainPages/Reset/ResetRecoveryPhrase.tsx b/src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx similarity index 100% rename from src/ui/views/MainPages/Reset/ResetRecoveryPhrase.tsx rename to src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx diff --git a/src/ui/views/MainPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx similarity index 98% rename from src/ui/views/MainPages/Reset/index.tsx rename to src/ui/views/LandingPages/Reset/index.tsx index 5a57c34e..bee6f2b7 100644 --- a/src/ui/views/MainPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; diff --git a/src/ui/views/MainPages/Sync/Namespace.tsx b/src/ui/views/LandingPages/Sync/Namespace.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/Namespace.tsx rename to src/ui/views/LandingPages/Sync/Namespace.tsx diff --git a/src/ui/views/MainPages/Sync/RegisterHeader.tsx b/src/ui/views/LandingPages/Sync/RegisterHeader.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/RegisterHeader.tsx rename to src/ui/views/LandingPages/Sync/RegisterHeader.tsx diff --git a/src/ui/views/MainPages/Sync/SetPassword.tsx b/src/ui/views/LandingPages/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/Sync/SetPassword.tsx diff --git a/src/ui/views/MainPages/Sync/SyncQr.tsx b/src/ui/views/LandingPages/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/MainPages/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/Sync/SyncQr.tsx diff --git a/src/ui/views/MainPages/Sync/index.tsx b/src/ui/views/LandingPages/Sync/index.tsx similarity index 98% rename from src/ui/views/MainPages/Sync/index.tsx rename to src/ui/views/LandingPages/Sync/index.tsx index e256d791..b7df88b8 100644 --- a/src/ui/views/MainPages/Sync/index.tsx +++ b/src/ui/views/LandingPages/Sync/index.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/MainPages'; +import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/MainPages/WelcomePage/index.tsx b/src/ui/views/LandingPages/WelcomePage/index.tsx similarity index 93% rename from src/ui/views/MainPages/WelcomePage/index.tsx rename to src/ui/views/LandingPages/WelcomePage/index.tsx index 6af3ca1f..be6fe350 100644 --- a/src/ui/views/MainPages/WelcomePage/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/MainPages'; +import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/LandingPages'; const WelcomePage = () => { return ; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 124448e1..8090cc1e 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -1,21 +1,21 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import AddressImport from './MainPages//AddressImport'; -import GoogleImport from './MainPages/AddressImport/GoogleImport'; -import AddWelcome from './MainPages/AddWelcome'; -import AddRegister from './MainPages/AddWelcome/AddRegister'; -import AddImport from './MainPages/AddWelcome/AddressImport'; -import AddGoogle from './MainPages/AddWelcome/AddressImport/GoogleImport'; -import AddSync from './MainPages/AddWelcome/Sync'; +import AddressImport from './LandingPages//AddressImport'; +import GoogleImport from './LandingPages/AddressImport/GoogleImport'; +import AddWelcome from './LandingPages/AddWelcome'; +import AddRegister from './LandingPages/AddWelcome/AddRegister'; +import AddImport from './LandingPages/AddWelcome/AddressImport'; +import AddGoogle from './LandingPages/AddWelcome/AddressImport/GoogleImport'; +import AddSync from './LandingPages/AddWelcome/Sync'; // import ProxySync from './AddWelcome/ProxySync'; -import Forgot from './MainPages/Forgot'; -import Recover from './MainPages/Forgot/Recover'; -import Reset from './MainPages/Forgot/Reset'; -import RecoverRegister from './MainPages/RecoverRegister'; -import Register from './MainPages/Register'; -import Synce from './MainPages/Sync'; -import WelcomePage from './MainPages/WelcomePage'; +import Forgot from './LandingPages/Forgot'; +import Recover from './LandingPages/Forgot/Recover'; +import Reset from './LandingPages/Forgot/Reset'; +import RecoverRegister from './LandingPages/RecoverRegister'; +import Register from './LandingPages/Register'; +import Synce from './LandingPages/Sync'; +import WelcomePage from './LandingPages/WelcomePage'; import './MainRoute.css'; From e42cd6dc9247b372b35b328acd3b3461453cdf61 Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 11 Dec 2024 22:54:38 +1100 Subject: [PATCH 24/41] fixed: update file directory --- src/ui/utils/landingPage.ts | 17 +++++ .../AddRegister/GoogleBackup.tsx | 0 .../AddRegister/RecoveryPhrase.tsx | 0 .../AddRegister/SetPassword.tsx | 0 .../AddRegister/index.tsx | 0 .../AddressImport/GoogleBackup.tsx | 0 .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../AddressImport/GoogleImport/index.tsx | 0 .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 0 .../AddressImport/SetPassword.tsx | 0 .../AddressImport/index.tsx | 0 .../ProxySync/ProxyQr.tsx | 0 .../ProxySync/SetPassword.tsx | 0 .../ProxySync/index.tsx | 0 .../Sync/SetPassword.tsx | 0 .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 0 .../{AddWelcome => AddAccountPage}/index.tsx | 0 .../AddressImport/GoogleBackup.tsx | 2 +- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 6 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddressImport/GoogleImport/index.tsx | 2 +- .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 4 +- .../AddressImport/SetPassword.tsx | 6 +- .../{ => WelcomePage}/AddressImport/index.tsx | 2 +- .../Import/GoogleImport/DecryptWallet.tsx | 2 +- .../Import/GoogleImport/GoogleAccounts.tsx | 0 .../Import/GoogleImport/RecoverPassword.tsx | 12 +--- .../Import/GoogleImport/RecoveryPhrase.tsx | 2 +- .../Import/GoogleImport/index.tsx | 2 +- .../Import/ImportComponent/PrivateKey.tsx | 0 .../Import/ImportComponent/SeedPhrase.tsx | 0 .../{ => WelcomePage}/Import/ImportPager.tsx | 4 +- .../Import/ImportRecoveryPhrase.tsx | 4 +- .../Import/RecoverPassword.tsx | 4 +- .../Register/GoogleBackup.tsx | 2 +- .../Register/RecoveryPhrase.tsx | 2 +- .../Register/SetPassword.tsx | 6 +- .../{ => WelcomePage}/Register/index.tsx | 68 +++++++++---------- .../{ => WelcomePage}/Sync/Namespace.tsx | 0 .../{ => WelcomePage}/Sync/RegisterHeader.tsx | 0 .../{ => WelcomePage}/Sync/SetPassword.tsx | 4 +- .../{ => WelcomePage}/Sync/SyncQr.tsx | 0 .../{ => WelcomePage}/Sync/index.tsx | 61 +++++++++-------- src/ui/views/MainRoute.tsx | 19 +++--- 52 files changed, 120 insertions(+), 115 deletions(-) create mode 100644 src/ui/utils/landingPage.ts rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddRegister/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/GoogleImport/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/AddressImport/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/ProxySync/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/Sync/index.tsx (100%) rename src/ui/views/LandingPages/{AddWelcome => AddAccountPage}/index.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleBackup.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/GoogleImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/AddressImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/RecoverPassword.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/GoogleImport/index.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportComponent/PrivateKey.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportComponent/SeedPhrase.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportPager.tsx (97%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/ImportRecoveryPhrase.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Import/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/GoogleBackup.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/RecoveryPhrase.tsx (99%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Register/index.tsx (76%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/Namespace.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/RegisterHeader.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/SetPassword.tsx (98%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{ => WelcomePage}/Sync/index.tsx (82%) diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.ts new file mode 100644 index 00000000..acede4b7 --- /dev/null +++ b/src/ui/utils/landingPage.ts @@ -0,0 +1,17 @@ +import { Box } from '@mui/material'; +import React from 'react'; + +export interface PageConfig { + component: React.ComponentType; + props: Record; +} + +export const getPageConfig = (pages: Record, index: number): PageConfig => { + return pages[index] || { component: () => React.createElement(Box), props: {} }; +}; + +export const renderPage = (pages: Record, index: number): JSX.Element => { + const pageConfig = getPageConfig(pages, index); + const Comp = pageConfig.component; + return React.createElement(Comp, pageConfig.props); +}; diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddRegister/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/AddressImport/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/ProxySync/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/SetPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/Sync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/Sync/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx diff --git a/src/ui/views/LandingPages/AddWelcome/index.tsx b/src/ui/views/LandingPages/AddAccountPage/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddWelcome/index.tsx rename to src/ui/views/LandingPages/AddAccountPage/index.tsx diff --git a/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx index 135de36c..c7cf5362 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleBackup.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx index 7c0d564d..4304cc8d 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx similarity index 97% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx index e9d468dc..7897a52a 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx @@ -18,13 +18,13 @@ import { Box } from '@mui/system'; import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx index 0d3e5854..c9f387d1 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx index 2215186f..5c0d4af9 100644 --- a/src/ui/views/LandingPages/AddressImport/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx @@ -8,7 +8,7 @@ import Confetti from '@/ui/FRWComponent/Confetti'; import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/LandingPages/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx index 19e926ba..5fae56b9 100644 --- a/src/ui/views/LandingPages/AddressImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import { storage } from 'background/webapi'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/SetPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx index 33f80904..658df5ab 100644 --- a/src/ui/views/LandingPages/AddressImport/SetPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx @@ -21,14 +21,14 @@ import zxcvbn from 'zxcvbn'; import { storage } from '@/background/webapi'; import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/AddressImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx index d1659ea0..80f336aa 100644 --- a/src/ui/views/LandingPages/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx @@ -9,7 +9,7 @@ import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import ImportPager from './ImportPager'; import RecoverPassword from './RecoverPassword'; diff --git a/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx index 7c0d564d..4304cc8d 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx similarity index 97% rename from src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx index 4de8ccc4..58342335 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx @@ -22,16 +22,8 @@ import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import theme from '../../../../style/LLTheme'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); +import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx index bdf0ad9d..02ee6e06 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/GoogleImport/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx index 690a37ff..bef55074 100644 --- a/src/ui/views/LandingPages/Import/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx @@ -9,7 +9,7 @@ import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; diff --git a/src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/ImportComponent/PrivateKey.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx diff --git a/src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/Import/ImportComponent/SeedPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx diff --git a/src/ui/views/LandingPages/Import/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx similarity index 97% rename from src/ui/views/LandingPages/Import/ImportPager.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx index e91450cb..df7d1cbb 100644 --- a/src/ui/views/LandingPages/Import/ImportPager.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx @@ -10,8 +10,8 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; import ImportRecoveryPhrase from './ImportRecoveryPhrase'; import RecoverPassword from './RecoverPassword'; diff --git a/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx index 6453d754..0c4bfdcc 100644 --- a/src/ui/views/LandingPages/Import/ImportRecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx @@ -8,8 +8,8 @@ import { storage } from '@/background/webapi'; import { LLNotFound, LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; import PrivateKey from './ImportComponent/PrivateKey'; import SeedPhrase from './ImportComponent/SeedPhrase'; diff --git a/src/ui/views/LandingPages/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/Import/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx index dac94288..afb15ec7 100644 --- a/src/ui/views/LandingPages/Import/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx @@ -20,8 +20,8 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx similarity index 98% rename from src/ui/views/LandingPages/Register/GoogleBackup.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx index 135de36c..c7cf5362 100644 --- a/src/ui/views/LandingPages/Register/GoogleBackup.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx @@ -7,7 +7,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { const wallets = useWallet(); diff --git a/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Register/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx index d4ade609..dbde6982 100644 --- a/src/ui/views/LandingPages/Register/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/LandingPages/Register/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/Register/SetPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx index 1a8cd905..b78ad1b1 100644 --- a/src/ui/views/LandingPages/Register/SetPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx @@ -21,14 +21,14 @@ import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; import { storage } from '@/background/webapi'; +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { type AccountKey } from 'background/service/networkModel'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx similarity index 76% rename from src/ui/views/LandingPages/Register/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Register/index.tsx index 077de0e4..1f05891d 100644 --- a/src/ui/views/LandingPages/Register/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx @@ -1,16 +1,17 @@ import { IconButton, Typography } from '@mui/material'; import { Box } from '@mui/system'; import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react'; import { useHistory } from 'react-router-dom'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; @@ -27,7 +28,7 @@ const Register = () => { const [activeIndex, onChange] = useState(0); const [direction, setDirection] = useState(Direction.Right); const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); + const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); const getUsername = (username: string) => { @@ -66,41 +67,35 @@ const Register = () => { } }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 1: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 2: { + component: RepeatPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: SetPassword, + props: { handleClick: goNext, setExPassword: setPassword, mnemonic, username }, + }, + 4: { + component: GoogleBackup, + props: { handleClick: goNext, mnemonic, username, password }, + }, + 5: { + component: AllSet, + props: { handleClick: goNext, variant: 'register' }, + }, }; + const page = (index: number) => renderPage(pages, index); + useEffect(() => { loadView(); }, [loadView]); @@ -124,7 +119,6 @@ const Register = () => { - {/* height why not use auto */} ({ // root: { diff --git a/src/ui/views/LandingPages/Sync/SyncQr.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx similarity index 82% rename from src/ui/views/LandingPages/Sync/index.tsx rename to src/ui/views/LandingPages/WelcomePage/Sync/index.tsx index b7df88b8..19b40b2d 100644 --- a/src/ui/views/LandingPages/Sync/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx @@ -6,10 +6,11 @@ import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; @@ -31,6 +32,35 @@ const Sync = () => { setUsername(username.toLowerCase()); }; + const goNext = () => { + setDirection(Direction.Right); + if (activeIndex < 2) { + onChange(activeIndex + 1); + } else { + window.close(); + } + }; + + const pages: Record = { + 0: { + component: SyncQr, + props: { + handleClick: goNext, + savedUsername: username, + confirmMnemonic: setMnemonic, + setUsername: getUsername, + }, + }, + 1: { + component: SetPassword, + props: { handleClick: goNext, mnemonic, username }, + }, + 2: { + component: AllSet, + props: { handleClick: goNext, variant: 'sync' }, + }, + }; + const loadView = useCallback(async () => { wallet .getCurrentAccount() @@ -43,14 +73,6 @@ const Sync = () => { return; }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; const goBack = () => { setDirection(Direction.Left); @@ -61,25 +83,7 @@ const Sync = () => { } }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - default: - return
; - } - }; + const page = (index: number) => renderPage(pages, index); useEffect(() => { loadView(); @@ -104,7 +108,6 @@ const Sync = () => { - {/* height why not use auto */} { - {/* */} From ad97ec76cb0ab7cd8ab41212115f5b74f0263530 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 12 Dec 2024 01:01:58 +1100 Subject: [PATCH 25/41] Fixed: update register page landing --- .../LandingPages/LandingComponents.tsx | 88 ++++ src/ui/FRWComponent/LandingPages/index.ts | 1 + src/ui/utils/landingPage.ts | 49 ++- .../AddressImport/GoogleImport/index.tsx | 169 -------- .../WelcomePage/AddressImport/index.tsx | 285 +++---------- .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../WelcomePage/GoogleImport/index.tsx | 71 ++++ .../Import/GoogleImport/DecryptWallet.tsx | 194 --------- .../Import/GoogleImport/GoogleAccounts.tsx | 111 ----- .../Import/GoogleImport/RecoverPassword.tsx | 382 ----------------- .../Import/GoogleImport/RecoveryPhrase.tsx | 240 ----------- .../WelcomePage/Import/GoogleImport/index.tsx | 172 -------- .../Import/ImportComponent/PrivateKey.tsx | 60 --- .../Import/ImportComponent/SeedPhrase.tsx | 63 --- .../WelcomePage/Import/ImportPager.tsx | 212 ---------- .../Import/ImportRecoveryPhrase.tsx | 328 --------------- .../WelcomePage/Import/RecoverPassword.tsx | 383 ------------------ .../WelcomePage/Register/index.tsx | 130 +----- .../LandingPages/WelcomePage/Sync/index.tsx | 104 +---- src/ui/views/MainRoute.tsx | 2 +- 23 files changed, 310 insertions(+), 2742 deletions(-) create mode 100644 src/ui/FRWComponent/LandingPages/LandingComponents.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/WelcomePage/{AddressImport => }/GoogleImport/RecoveryPhrase.tsx (99%) create mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx diff --git a/src/ui/FRWComponent/LandingPages/LandingComponents.tsx b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx new file mode 100644 index 00000000..e5fc5941 --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx @@ -0,0 +1,88 @@ +import { Box, IconButton, Typography } from '@mui/material'; +import React from 'react'; + +import { LLPinAlert } from '@/ui/FRWComponent'; +import Confetti from '@/ui/FRWComponent/Confetti'; +import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; + +import BackButtonIcon from '../../../components/iconfont/IconBackButton'; + +const LandingComponents = ({ + activeIndex, + direction, + showBackButton, + onBack, + children, + showConfetti, + showRegisterHeader, +}) => ( + + {showConfetti && } + {showRegisterHeader && } + + + + + + {showBackButton && ( + + + + )} + +
+ + + {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 + + + + + {children} + + + + + +); + +export default LandingComponents; diff --git a/src/ui/FRWComponent/LandingPages/index.ts b/src/ui/FRWComponent/LandingPages/index.ts index 16082b3c..79047df2 100644 --- a/src/ui/FRWComponent/LandingPages/index.ts +++ b/src/ui/FRWComponent/LandingPages/index.ts @@ -3,3 +3,4 @@ export { default as PickUsername } from './PickUsername'; export { default as RepeatPhrase } from './RepeatPhrase'; export { default as RegisterHeader } from './RegisterHeader'; export { default as WelcomePage } from './WelcomePage'; +export { default as LandingComponents } from './LandingComponents'; diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.ts index acede4b7..3066cf57 100644 --- a/src/ui/utils/landingPage.ts +++ b/src/ui/utils/landingPage.ts @@ -1,11 +1,17 @@ import { Box } from '@mui/material'; -import React from 'react'; +import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; export interface PageConfig { component: React.ComponentType; props: Record; } +export enum Direction { + Right, + Left, +} + export const getPageConfig = (pages: Record, index: number): PageConfig => { return pages[index] || { component: () => React.createElement(Box), props: {} }; }; @@ -15,3 +21,44 @@ export const renderPage = (pages: Record, index: number): JS const Comp = pageConfig.component; return React.createElement(Comp, pageConfig.props); }; + +export const getDirectionType = (direction: Direction) => { + return direction === Direction.Left ? 'left' : 'right'; +}; + +export const useNavigation = (maxSteps: number) => { + const [activeIndex, setActiveIndex] = useState(0); + const [direction, setDirection] = useState(Direction.Right); + const history = useHistory(); + + const goNext = () => { + setDirection(Direction.Right); + if (activeIndex < maxSteps) { + setActiveIndex(activeIndex + 1); + } else { + window.close(); + } + }; + + const goBack = () => { + setDirection(Direction.Left); + if (activeIndex >= 1) { + setActiveIndex(activeIndex - 1); + } else { + history.goBack(); + } + }; + + const goCustom = (index: number) => { + setDirection(Direction.Right); + setActiveIndex(index); + }; + + return { + activeIndex, + direction: getDirectionType(direction), + goNext, + goBack, + goCustom, + }; +}; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index 5c0d4af9..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location?.state?.accounts; - setAccounts(users); - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx index 80f336aa..29c81ec6 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx @@ -1,36 +1,23 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import ImportPager from './ImportPager'; import RecoverPassword from './RecoverPassword'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const AddressImport = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const { activeIndex, direction, goNext, goBack, goCustom } = useNavigation(4); const [mnemonic, setMnemonic] = useState(''); const [pk, setPk] = useState(null); const [username, setUsername] = useState(''); - const [, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [, setPassword] = useState(null); + const [errorMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); + const [showError, setShowError] = useState(false); const [accounts, setAccounts] = useState([]); const getUsername = (username: string) => { @@ -38,7 +25,6 @@ const AddressImport = () => { }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -51,86 +37,52 @@ const AddressImport = () => { }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const goPassword = () => { - setDirection(Direction.Right); - onChange(3); - }; - // const goGoogle = () => { - // setDirection(Direction.Right); - // onChange(4); - // }; - const goEnd = () => { - setDirection(Direction.Right); - onChange(4); - }; - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ( - - ); - case 3: - return ( - - ); - // case 4: - // return ; - case 4: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: ImportPager, + props: { + setMnemonic, + setPk, + setAccounts, + accounts, + mnemonic, + pk, + setUsername, + goPassword: () => goCustom(3), + handleClick: goNext, + setErrorMessage, + setShowError, + }, + }, + 1: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 2: { + component: SetPassword, + props: { + handleClick: goNext, + mnemonic, + pk, + username, + accounts, + goEnd: () => goNext(), + }, + }, + 3: { + component: RecoverPassword, + props: { + handleClick: goNext, + mnemonic, + pk, + username, + goEnd: () => goNext(), + }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, }; useEffect(() => { @@ -138,129 +90,16 @@ const AddressImport = () => { }, [loadView]); return ( - <> - - {activeIndex === 4 && } - - - - - - {/* height why not use auto */} - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - - - - - - - - - - - - - - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx index 4304cc8d..7c0d564d 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx index 7897a52a..cdd29bee 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx @@ -23,8 +23,8 @@ import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx index c9f387d1..0d3e5854 100644 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx new file mode 100644 index 00000000..e453c3c5 --- /dev/null +++ b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx @@ -0,0 +1,71 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; + +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; + +import DecryptWallet from './DecryptWallet'; +import GoogleAccounts from './GoogleAccounts'; +import RecoveryPassword from './RecoverPassword'; +import RecoveryPhrase from './RecoveryPhrase'; + +interface AccountsState { + accounts: string[]; +} + +const GoogleImport = () => { + const location = useLocation(); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(4); + const [mnemonic, setMnemonic] = useState(''); + const [accounts, setAccounts] = useState([]); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const getGoogleAccounts = useCallback(async () => { + const users = location?.state?.accounts; + setAccounts(users); + }, [location?.state?.accounts]); + + useEffect(() => { + getGoogleAccounts(); + }, [getGoogleAccounts]); + + const pages: Record = { + 0: { + component: GoogleAccounts, + props: { handleClick: goNext, accounts, setUsername }, + }, + 1: { + component: DecryptWallet, + props: { handleClick: goNext, setMnemonic, username, setNextPassword: setPassword }, + }, + 2: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: RecoveryPassword, + props: { handleClick: goNext, mnemonic, username, lastPassword: password }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, + }; + + return ( + + {renderPage(pages, activeIndex)} + + ); +}; + +export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx deleted file mode 100644 index 4304cc8d..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/DecryptWallet.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { Button, Typography, IconButton, Input, InputAdornment, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CancelIcon from '../../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const DecryptWallet = ({ handleClick, setMnemonic, username, setNextPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - // const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const decryptWallet = async () => { - setLoading(true); - // await wallet.boot(password); - // const formatted = mnemonic.trim().split(/\s+/g).join(' '); - // await wallet.createKeyringWithMnemonics(formatted); - try { - const mnemonic = await wallet.restoreAccount(username, password); - // console.log('mnemonic ->', mnemonic); - setLoading(false); - setMnemonic(mnemonic); - setNextPassword(password); - handleClick(); - } catch (e) { - setLoading(false); - setHelperText( - errorInfo(chrome.i18n.getMessage('Incorrect__decrypt__password__please__try__again')) - ); - } - }; - - useEffect(() => { - if (password.length < 8) { - setHelperText( - errorInfo(chrome.i18n.getMessage('The__decrypt__password__should__be__8__characters__long')) - ); - setCharacters(false); - } else { - setHelperText(
); - setCharacters(true); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage('Please__enter__your__password__to__decrypt')} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - - - - - ); -}; - -export default DecryptWallet; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index ae3c991f..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/GoogleAccounts.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; -import { - Typography, - Avatar, - Box, - List, - ListItemIcon, - ListItemButton, - ListItemText, - IconButton, - ListItem, -} from '@mui/material'; -import React, { useState, useEffect, useCallback } from 'react'; - -import { useWallet } from 'ui/utils'; - -const FetchAvatar = ({ username }) => { - const [avatar, setAvatar] = useState( - `https://lilico.app/api/avatar/beam/120/${username}?colors=FFDD32,FC814A,7678ED,B3DEE2,BCF0DA` - ); - const wallet = useWallet(); - - const fetchUserAvatar = useCallback( - async (username) => { - const { data } = await wallet.openapi.searchUser(username); - const users = data.users; - if (users.length > 0 && users[0].avatar) { - setAvatar(users[0].avatar); - } - }, - [wallet] - ); - - useEffect(() => { - fetchUserAvatar(username); - }, [fetchUserAvatar, username]); - - return ; -}; - -const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { - const [canGoNext, setCanGoNext] = useState(true); - - return ( - <> - - - {chrome.i18n.getMessage('We__ve__found') + ' '} - - {accounts.length} - {chrome.i18n.getMessage('matching__accounts')} - - - - {chrome.i18n.getMessage('Select__the__account__which__you__want__to__restore__back')} - - - - - {accounts && - accounts.map((account) => { - return ( - - { - setUsername(account); - handleClick(); - }} - sx={{ - display: 'flex', - border: '2px solid #5E5E5E', - width: '100%', - borderRadius: '12px', - backgroundColor: '#333333', - transition: 'all .3s linear', - py: '8px', - px: '16px', - justifyContent: 'center', - mb: '12px', - }} - > - - - - - - - - - - - ); - })} - - - - - ); -}; - -export default GoogleAccounts; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index 58342335..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoverPassword.tsx +++ /dev/null @@ -1,382 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(lastPassword); - const [confirmPassword, setConfirmPassword] = useState(lastPassword); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - const [showDialog, setShowDialog] = useState(false); - const [isCheck, setCheck] = useState(true); - - const login = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.signInWithMnemonic(mnemonic); - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - if (e.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - useEffect(() => { - if (isCheck) { - setPassword(lastPassword); - setConfirmPassword(lastPassword); - } else { - setPassword(''); - setConfirmPassword(''); - } - }, [isCheck, lastPassword]); - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('Use__the__same__Google__Drive__password')} - - } - /> - - - - - ) : ( - - )} - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 02ee6e06..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/RecoveryPhrase.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Review') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx deleted file mode 100644 index bef55074..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/GoogleImport/index.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location.state.accounts; - setAccounts(users); - }, [location.state.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - const heights = [500, 500, 600, 600, 500]; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx deleted file mode 100644 index 57c3f213..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/PrivateKey.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Typography, FormControl, Input, Box } from '@mui/material'; -import React from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const PrivateKey = ({ helperText, msgBgColor, pk, setpk }) => { - return ( - - - {chrome.i18n.getMessage('This_is_the_private_key_you')} - - - - { - setpk(event.target.value); - }} - sx={{ - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }} - /> - - - {helperText} - - - - - - ); -}; - -export default PrivateKey; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx deleted file mode 100644 index ac2adc82..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportComponent/SeedPhrase.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { Typography, FormControl, Input, Box } from '@mui/material'; -import React from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -const SeedPhrase = ({ helperText, msgBgColor, mnemonic, setmnemonic }) => { - return ( - - - {chrome.i18n.getMessage('This__is__the__12__or__24__word__phrase__you__were__given')} - - - - - { - setmnemonic(event.target.value); - }} - sx={{ - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }} - /> - - - {helperText} - - - - - - ); -}; - -export default SeedPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx deleted file mode 100644 index df7d1cbb..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportPager.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { IconButton, Typography, Button, Snackbar, Alert } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLPinAlert, LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -import ImportRecoveryPhrase from './ImportRecoveryPhrase'; -import RecoverPassword from './RecoverPassword'; - -enum Direction { - Right, - Left, -} - -const ImportPager = () => { - const history = useHistory(); - const wallets = useWallet(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - const [pk, setPk] = useState(''); - const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [loading, setLoading] = useState(false); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogle = async () => { - setLoading(true); - - try { - const accounts = await wallets.loadBackupAccounts(); - if (accounts.length > 0) { - history.push({ - pathname: '/import/google', - state: { - accounts: accounts, - }, - }); - } else { - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('No__backup__found')); - } - setLoading(false); - } catch (e) { - console.error(e); - setShowError(true); - setErrorMessage(chrome.i18n.getMessage('Something__is__wrong')); - setLoading(false); - } - }; - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 2 && } - - - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/3 - - - - - {page(activeIndex)} - - - - {activeIndex === 0 && ( - - )} - - - - {errMessage} - - - - - ); -}; - -export default ImportPager; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx deleted file mode 100644 index 0c4bfdcc..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/ImportRecoveryPhrase.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import { Typography, Tabs, Tab, CircularProgress, Button, Snackbar, Alert } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; - -import { storage } from '@/background/webapi'; -import { LLNotFound, LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -import PrivateKey from './ImportComponent/PrivateKey'; -import SeedPhrase from './ImportComponent/SeedPhrase'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - sxStyles: { - fontFamily: 'Inter', - fontSize: '18px', - fontStyle: 'normal', - fontWeight: 700, - lineHeight: '24px', - letterSpacing: '-0.252px', - textTransform: 'capitalize', - }, - inputBox: { - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const mnemonicError = (errorMsg) => ( - - - - {errorMsg} - - -); - -const MnemonicCorrect: React.FC = () => ( - - - - {chrome.i18n.getMessage('Recovery__phrase__valid')} - - -); - -const PrivateCorrect: React.FC = () => ( - - - - {chrome.i18n.getMessage('Private__key_valid')} - - -); - -const MnemonicLoading: React.FC = () => ( - - - {chrome.i18n.getMessage('Checking')} - -); - -const ImportRecoveryPhrase = ({ handleClick, confirmMnemonic, confirmPk, setUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [mnemonicValid, setMnemonicValid] = useState(true); - - const [mnemonic, setMnemonic] = useState(''); - - const [pk, setPk] = useState(''); - - const [isSignLoading, setSignLoading] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showDialog, setShowDialog] = useState(false); - const [showError, setShowError] = useState(false); - - const [helperText, setHelperText] = useState(
); - const [selectedTab, setSelectedTab] = useState(0); - - const signIn = async () => { - setSignLoading(true); - if (mnemonic) { - signMnemonic(); - } else { - signPk(); - } - }; - - const signMnemonic = async () => { - try { - const result = await wallet.signInWithMnemonic(mnemonic); - setSignLoading(false); - confirmMnemonic(mnemonic); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - const signPk = async () => { - const privateKey = pk.replace(/^0x/, ''); - try { - const result = await wallet.signInWithPrivatekey(privateKey); - setSignLoading(false); - confirmPk(privateKey); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setMnemonicValid(false); - setHelperText(mnemonicError(message)); - }, - [setLoading, setMnemonicValid, setHelperText] - ); - useEffect(() => { - setMnemonicValid(false); - setHelperText(); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - setLoading(false); - const length = mnemonic.trim().split(/\s+/g).length; - if (!(length === 12 || length === 24)) { - setErrorMessage( - chrome.i18n.getMessage('Recovery__phrases__word__count__must__be__12__or__24__words') - ); - return; - } - - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - if (!bip39.validateMnemonic(formatted)) { - setErrorMessage(chrome.i18n.getMessage('Mnemonic__phrase__is__invalid')); - return; - } - - setMnemonicValid(true); - setHelperText(); - storage.set('premnemonic', formatted); - setMnemonic(formatted); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [mnemonic, setErrorMessage]); - - useEffect(() => { - setMnemonicValid(false); - setHelperText(); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - setLoading(false); - const hexRegex = /^(0x)?[0-9a-fA-F]{64}$/; - const isvalid = hexRegex.test(pk); - if (isvalid) { - setMnemonicValid(true); - setHelperText(); - return; - } else { - setErrorMessage(chrome.i18n.getMessage('Private__is__invalid')); - return; - } - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [pk, setErrorMessage]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return mnemonicValid ? 'success.light' : 'error.light'; - }; - - const handleTabChange = (event, newValue) => { - setSelectedTab(newValue); - }; - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Sign__in__with')} - - {chrome.i18n.getMessage('Sign__in__Recovery__Phrase')} - - - - - - - - - - - - - - - - - setShowError(false)} - > - { - setShowError(false); - }} - > - Something went wrong, please try again later - - - - ) : ( - - )} - - ); -}; - -export default ImportRecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx deleted file mode 100644 index afb15ec7..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Import/RecoverPassword.tsx +++ /dev/null @@ -1,383 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - try { - await wallet.boot(password); - if (pk) { - await wallet.importPrivateKey(pk); - } else { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - } - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx index 1f05891d..cb9d5659 100644 --- a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx @@ -1,42 +1,33 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState, Dispatch, SetStateAction } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; +import { + PickUsername, + RepeatPhrase, + AllSet, + LandingComponents, +} from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const Register = () => { - const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); + const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); + const history = useHistory(); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -49,24 +40,6 @@ const Register = () => { }); }, [wallet, history]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - const pages: Record = { 0: { component: PickUsername, @@ -94,84 +67,21 @@ const Register = () => { }, }; - const page = (index: number) => renderPage(pages, index); - useEffect(() => { loadView(); }, [loadView]); return ( - <> - - {activeIndex === 5 && } - - - - - - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx index 19b40b2d..bb03e356 100644 --- a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx +++ b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx @@ -1,46 +1,24 @@ -import { IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { type PageConfig, renderPage } from '@/ui/utils/landingPage'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; -enum Direction { - Right, - Left, -} - const Sync = () => { - const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const pages: Record = { 0: { component: SyncQr, @@ -74,73 +52,21 @@ const Sync = () => { }); }, [wallet, history]); - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index: number) => renderPage(pages, index); - useEffect(() => { loadView(); }, [loadView]); return ( - <> - - {activeIndex === 2 && } - - - - - - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 694644df..783a6340 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -13,7 +13,7 @@ import Reset from './LandingPages/Forgot/Reset'; import RecoverRegister from './LandingPages/RecoverRegister'; import WelcomePage from './LandingPages/WelcomePage'; import AddressImport from './LandingPages/WelcomePage/AddressImport'; -import GoogleImport from './LandingPages/WelcomePage/AddressImport/GoogleImport'; +import GoogleImport from './LandingPages/WelcomePage/GoogleImport'; import Register from './LandingPages/WelcomePage/Register'; import Synce from './LandingPages/WelcomePage/Sync'; From 902a92696de9a575542a89f08e793989eea28bad Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 12 Dec 2024 03:05:05 +1100 Subject: [PATCH 26/41] fixed: update add account page --- .../AddAccountPage/AddRegister/index.tsx | 189 +++++------------- .../AddressImport/GoogleImport/index.tsx | 178 ----------------- .../AddAccountPage/AddressImport/index.tsx | 61 ------ .../GoogleImport/DecryptWallet.tsx | 2 +- .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 4 +- .../GoogleImport/RecoveryPhrase.tsx | 2 +- .../AddAccountPage/GoogleImport/index.tsx | 80 ++++++++ .../AddAccountPage/ProxySync/index.tsx | 1 + .../AddAccountPage/Sync/index.tsx | 155 ++++---------- src/ui/views/MainRoute.tsx | 2 +- 11 files changed, 170 insertions(+), 504 deletions(-) delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/DecryptWallet.tsx (98%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/RecoverPassword.tsx (98%) rename src/ui/views/LandingPages/AddAccountPage/{AddressImport => }/GoogleImport/RecoveryPhrase.tsx (99%) create mode 100644 src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx index 3f673ef6..bdf6b485 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx @@ -1,32 +1,25 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; import * as bip39 from 'bip39'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, RepeatPhrase, AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; +import { + PickUsername, + RepeatPhrase, + AllSet, + LandingComponents, +} from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -enum Direction { - Right, - Left, -} - const AddRegister = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); + const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); const [password, setPassword] = useState(null); const [mnemonic] = useState(bip39.generateMnemonic()); @@ -36,7 +29,6 @@ const AddRegister = () => { }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -56,58 +48,37 @@ const AddRegister = () => { } }, []); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } + const pages: Record = { + 0: { + component: PickUsername, + props: { handleClick: goNext, savedUsername: username, getUsername }, + }, + 1: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 2: { + component: RepeatPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: SetPassword, + props: { + handleClick: goNext, + setExPassword: setPassword, + tempPassword: password, + mnemonic, + username, + }, + }, + 4: { + component: GoogleBackup, + props: { handleClick: goNext, mnemonic, username, password }, + }, + 5: { + component: AllSet, + props: { handleClick: goNext, variant: 'add' }, + }, }; useEffect(() => { @@ -116,78 +87,16 @@ const AddRegister = () => { }, [loadView, loadTempPassword]); return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index 71e5cc58..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import { IconButton, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { LLPinAlert } from '@/ui/FRWComponent'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { storage } from 'background/webapi'; - -import BackButtonIcon from '../../../../../../components/iconfont/IconBackButton'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 4) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const loadTempPassword = useCallback(async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }, []); - - const getGoogleAccounts = useCallback(async () => { - // const backupFile = await storage.get('googleBackup'); - // await setBackup(backupFile); - const users = location.state.accounts; - const backupAccounts = localStorage.getItem('backupAccounts'); - if (backupAccounts) { - const accountList = JSON.parse(backupAccounts); - setAccounts(accountList); - } else { - setAccounts(users); - } - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - loadTempPassword(); - }, [getGoogleAccounts, loadTempPassword]); - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ( - - ); - case 4: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 4 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx index e3869cbb..de3b9141 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx @@ -100,67 +100,6 @@ const AddressImport = () => { setShowError(false); }; - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ( - - ); - case 3: - return ( - - ); - case 4: - return ( - - ); - case 5: - return ; - default: - return
; - } - }; - useEffect(() => { loadView(); }, [loadView]); diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx index 87130123..723901e5 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx index 77f95d44..0276fb36 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx @@ -21,8 +21,8 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import { useWallet, saveIndex } from 'ui/utils'; -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx index 02ee6e06..bdf0ad9d 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleImport/RecoveryPhrase.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleClick, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx new file mode 100644 index 00000000..7812801b --- /dev/null +++ b/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx @@ -0,0 +1,80 @@ +import React, { useCallback, useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; + +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { storage } from 'background/webapi'; + +import DecryptWallet from './DecryptWallet'; +import GoogleAccounts from './GoogleAccounts'; +import RecoveryPassword from './RecoverPassword'; +import RecoveryPhrase from './RecoveryPhrase'; + +interface AccountsState { + accounts: string[]; +} + +const GoogleImport = () => { + const location = useLocation(); + const history = useHistory(); + const { activeIndex, direction, goNext, goBack } = useNavigation(4); + const [mnemonic, setMnemonic] = useState(''); + const [accounts, setAccounts] = useState([]); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const loadTempPassword = useCallback(async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }, []); + + const getGoogleAccounts = useCallback(async () => { + const users = location?.state?.accounts; + setAccounts(users); + }, [location?.state?.accounts]); + + useEffect(() => { + getGoogleAccounts(); + loadTempPassword(); + }, [getGoogleAccounts, loadTempPassword]); + + const pages: Record = { + 0: { + component: GoogleAccounts, + props: { handleClick: goNext, accounts, setUsername }, + }, + 1: { + component: DecryptWallet, + props: { handleClick: goNext, setMnemonic, username }, + }, + 2: { + component: RecoveryPhrase, + props: { handleClick: goNext, mnemonic }, + }, + 3: { + component: RecoveryPassword, + props: { handleClick: goNext, mnemonic, username, lastPassword: password }, + }, + 4: { + component: AllSet, + props: { handleClick: goNext }, + }, + }; + + return ( + + {renderPage(pages, activeIndex)} + + ); +}; + +export default GoogleImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx index 215cfb7d..2120c8c2 100644 --- a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx @@ -19,6 +19,7 @@ enum Direction { Left, } +// TODO: not applied to the new landing page yet const ProxySync = () => { const history = useHistory(); const wallet = useWallet(); diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx index ee6c4e1f..d5132c77 100644 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx +++ b/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx @@ -1,40 +1,25 @@ -import { IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { LLPinAlert } from 'ui/FRWComponent'; +import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; -enum Direction { - Right, - Left, -} - const Sync = () => { const history = useHistory(); const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - const [accountKey, setAccountKey] = useState(null); - const [deviceInfo, setDeviceInfo] = useState(null); const getUsername = (username: string) => { setUsername(username.toLowerCase()); }; const loadView = useCallback(async () => { - // console.log(wallet); wallet .getCurrentAccount() .then((res) => { @@ -45,113 +30,43 @@ const Sync = () => { .catch(() => { return; }); - }, [history, wallet]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - default: - return
; - } - }; + }, [wallet, history]); useEffect(() => { loadView(); }, [loadView]); - return ( - <> - - {activeIndex === 2 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - + const pages: Record = { + 0: { + component: SyncQr, + props: { + handleClick: goNext, + savedUsername: username, + confirmMnemonic: setMnemonic, + setUsername: getUsername, + }, + }, + 1: { + component: SetPassword, + props: { handleClick: goNext, mnemonic, username }, + }, + 2: { + component: AllSet, + props: { handleClick: goNext, variant: 'sync' }, + }, + }; - - - + return ( + + {renderPage(pages, activeIndex)} + ); }; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 783a6340..0ee283f1 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -4,7 +4,7 @@ import { Switch, Route } from 'react-router-dom'; import AddWelcome from './LandingPages/AddAccountPage'; import AddRegister from './LandingPages/AddAccountPage/AddRegister'; import AddImport from './LandingPages/AddAccountPage/AddressImport'; -import AddGoogle from './LandingPages/AddAccountPage/AddressImport/GoogleImport'; +import AddGoogle from './LandingPages/AddAccountPage/GoogleImport'; import AddSync from './LandingPages/AddAccountPage/Sync'; // import ProxySync from './AddWelcome/ProxySync'; import Forgot from './LandingPages/Forgot'; From b28ef8ad14919e8ae183a26192587b836f8a4ac0 Mon Sep 17 00:00:00 2001 From: zzggo Date: Mon, 16 Dec 2024 02:43:56 +1100 Subject: [PATCH 27/41] fixed: update welcome page structure and components --- .../ImportComponents/Googledrive.tsx | 3 +- .../FRWComponent/LandingPages/SetPassword.tsx | 222 +++++++++ .../utils/{landingPage.ts => landingPage.tsx} | 16 +- .../AddRegister/SetPassword.tsx | 328 ------------- .../AddressImport/SetPassword.tsx | 370 -------------- .../AddAccountPage/AddressImport/index.tsx | 256 ---------- .../AddAccountPage/Sync/SetPassword.tsx | 374 --------------- .../LandingPages/AddAccountPage/index.tsx | 9 - src/ui/views/LandingPages/Reset/index.tsx | 2 +- .../AddressImport}/GoogleBackup.tsx | 0 .../AddressImport/ImportPager.tsx | 0 .../AddressImport/RecoverPassword.tsx | 0 .../Welcome/AddressImport/SetPassword.tsx | 240 ++++++++++ .../Welcome/AddressImport/index.tsx | 126 +++++ .../GoogleImport/DecryptWallet.tsx | 0 .../GoogleImport/GoogleAccounts.tsx | 0 .../GoogleImport/RecoverPassword.tsx | 0 .../GoogleImport/RecoveryPhrase.tsx | 0 .../GoogleImport/index.tsx | 38 +- .../ProxySync/ProxyQr.tsx | 0 .../ProxySync/SetPassword.tsx | 0 .../ProxySync/index.tsx | 0 .../Register}/GoogleBackup.tsx | 0 .../Register}/RecoveryPhrase.tsx | 0 .../Welcome/Register/SetPassword.tsx | 247 ++++++++++ .../Register}/index.tsx | 61 +-- .../LandingPages/Welcome/Sync/SetPassword.tsx | 198 ++++++++ .../Sync/SyncQr.tsx | 0 .../Sync/index.tsx | 47 +- src/ui/views/LandingPages/Welcome/index.tsx | 15 + .../AddressImport/GoogleBackup.tsx | 170 ------- .../WelcomePage/AddressImport/ImportPager.tsx | 110 ----- .../AddressImport/RecoverPassword.tsx | 359 -------------- .../WelcomePage/AddressImport/SetPassword.tsx | 393 --------------- .../WelcomePage/AddressImport/index.tsx | 106 ----- .../GoogleImport/DecryptWallet.tsx | 194 -------- .../GoogleImport/GoogleAccounts.tsx | 109 ----- .../GoogleImport/RecoverPassword.tsx | 364 -------------- .../GoogleImport/RecoveryPhrase.tsx | 240 ---------- .../WelcomePage/GoogleImport/index.tsx | 71 --- .../WelcomePage/Register/GoogleBackup.tsx | 170 ------- .../WelcomePage/Register/RecoveryPhrase.tsx | 239 ---------- .../WelcomePage/Register/SetPassword.tsx | 381 --------------- .../WelcomePage/Register/index.tsx | 88 ---- .../WelcomePage/Sync/Namespace.tsx | 42 -- .../WelcomePage/Sync/RegisterHeader.tsx | 63 --- .../WelcomePage/Sync/SetPassword.tsx | 402 ---------------- .../LandingPages/WelcomePage/Sync/SyncQr.tsx | 450 ------------------ .../LandingPages/WelcomePage/Sync/index.tsx | 73 --- .../views/LandingPages/WelcomePage/index.tsx | 9 - src/ui/views/MainRoute.tsx | 34 +- src/ui/views/index.tsx | 1 - 52 files changed, 1129 insertions(+), 5491 deletions(-) create mode 100644 src/ui/FRWComponent/LandingPages/SetPassword.tsx rename src/ui/utils/{landingPage.ts => landingPage.tsx} (71%) delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/AddAccountPage/index.tsx rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/AddressImport}/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/AddressImport/ImportPager.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/AddressImport/RecoverPassword.tsx (100%) create mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx create mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/index.tsx rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/DecryptWallet.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/GoogleImport/index.tsx (69%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/ProxyQr.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/SetPassword.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/ProxySync/index.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage/AddressImport => Welcome/Register}/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/Register}/RecoveryPhrase.tsx (100%) create mode 100644 src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx rename src/ui/views/LandingPages/{AddAccountPage/AddRegister => Welcome/Register}/index.tsx (61%) create mode 100644 src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/Sync/SyncQr.tsx (100%) rename src/ui/views/LandingPages/{AddAccountPage => Welcome}/Sync/index.tsx (61%) create mode 100644 src/ui/views/LandingPages/Welcome/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Register/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/Sync/index.tsx delete mode 100644 src/ui/views/LandingPages/WelcomePage/index.tsx diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx index 90ce2d2d..04398b90 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx @@ -47,9 +47,8 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { - const prevPath = history.location.pathname; history.push({ - pathname: prevPath === '/addressimport' ? '/import/google' : '/add/google', + pathname: '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/FRWComponent/LandingPages/SetPassword.tsx b/src/ui/FRWComponent/LandingPages/SetPassword.tsx new file mode 100644 index 00000000..6a6cb56e --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/SetPassword.tsx @@ -0,0 +1,222 @@ +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import { + Box, + LinearProgress, + Typography, + Input, + InputAdornment, + IconButton, + FormControlLabel, + Checkbox, + Link, + Button, + Snackbar, + Alert, +} from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React from 'react'; +import zxcvbn from 'zxcvbn'; + +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; +import { LLSpinner } from '@/ui/FRWComponent'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +// Password Indicator Component +interface PasswordIndicatorProps { + value: string; +} + +export const PasswordIndicator = ({ value }: PasswordIndicatorProps) => { + const score = zxcvbn(value).score; + const percentage = ((score + 1) / 5) * 100; + + const level = (score: number) => { + switch (score) { + case 0: + case 1: + return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; + case 2: + return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; + case 3: + return { text: chrome.i18n.getMessage('Great'), color: 'success' }; + case 4: + return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; + default: + return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; + } + }; + + return ( + + + + + + + {level(score).text} + + + + ); +}; + +// Password Input Component +interface PasswordInputProps { + value: string; + onChange: (value: string) => void; + isVisible: boolean; + setVisible: (visible: boolean) => void; + readOnly?: boolean; + placeholder?: string; + autoFocus?: boolean; + className?: string; +} + +export const PasswordInput = ({ + value, + onChange, + isVisible, + setVisible, + readOnly = false, + placeholder = chrome.i18n.getMessage('Create__a__password'), + autoFocus = false, + className, +}: PasswordInputProps) => { + const classes = useStyles(); + + return ( + onChange(e.target.value)} + endAdornment={ + + {value && } + setVisible(!isVisible)}> + {isVisible ? : } + + + } + /> + ); +}; + +// Terms Checkbox Component +interface TermsCheckboxProps { + onChange: (checked: boolean) => void; +} + +export const TermsCheckbox = ({ onChange }: TermsCheckboxProps) => ( + } + checkedIcon={} + onChange={(event) => onChange(event.target.checked)} + /> + } + label={ + + {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} + + {chrome.i18n.getMessage('Privacy__Policy')} + {' '} + {chrome.i18n.getMessage('and') + ' '} + + {chrome.i18n.getMessage('Terms__of__Service')} + {' '} + . + + } + /> +); + +// Error Snackbar Component +interface ErrorSnackbarProps { + open: boolean; + message: string; + onClose: () => void; +} + +export const ErrorSnackbar = ({ open, message, onClose }: ErrorSnackbarProps) => ( + + + {message} + + +); + +// Submit Button Component +interface SubmitButtonProps { + onClick: () => void; + isLoading: boolean; + disabled: boolean; + isLogin?: boolean; +} + +export const SubmitButton = ({ + onClick, + isLoading, + disabled, + isLogin = false, +}: SubmitButtonProps) => ( + +); diff --git a/src/ui/utils/landingPage.ts b/src/ui/utils/landingPage.tsx similarity index 71% rename from src/ui/utils/landingPage.ts rename to src/ui/utils/landingPage.tsx index 3066cf57..f3899eab 100644 --- a/src/ui/utils/landingPage.ts +++ b/src/ui/utils/landingPage.tsx @@ -1,5 +1,5 @@ import { Box } from '@mui/material'; -import React, { useState } from 'react'; +import React, { type FC, useState } from 'react'; import { useHistory } from 'react-router-dom'; export interface PageConfig { @@ -12,14 +12,14 @@ export enum Direction { Left, } -export const getPageConfig = (pages: Record, index: number): PageConfig => { - return pages[index] || { component: () => React.createElement(Box), props: {} }; -}; +interface PageStepperProps { + activeIndex: number; + children: React.ReactNode; +} -export const renderPage = (pages: Record, index: number): JSX.Element => { - const pageConfig = getPageConfig(pages, index); - const Comp = pageConfig.component; - return React.createElement(Comp, pageConfig.props); +export const PageSlider: FC = ({ activeIndex, children }) => { + const pages = React.Children.toArray(children); + return {pages[activeIndex]}; }; export const getDirectionType = (direction: Direction) => { diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx deleted file mode 100644 index 884f4008..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/SetPassword.tsx +++ /dev/null @@ -1,328 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Checkbox, - FormControlLabel, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(tempPassword); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - const accountKey = getAccountKey(mnemonic); - // track the time until account_created is called - wallet.openapi - .register(accountKey, username) - .then((response) => { - return wallet.boot(password); - }) - .then((response) => { - setExPassword(password); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(mnemonic); - }) - .then((accounts) => { - handleClick(); - return wallet.openapi.createFlowAddress(); - }) - .then((address) => { - setLoading(false); - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - return ( - <> - - {chrome.i18n.getMessage('Confirm__Password')} - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - - {helperText} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx deleted file mode 100644 index dc74e8d3..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/SetPassword.tsx +++ /dev/null @@ -1,370 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useCallback, useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../../FRWAssets/icons/CustomCheckboxIcons'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accounts, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const loadTempPassword = useCallback(async () => { - setPassword(tempPassword); - }, [tempPassword]); - - useEffect(() => { - loadTempPassword(); - }, [loadTempPassword]); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const handleImport = async () => { - setLoading(true); - const accountKeyStruct = { - public_key: accounts[0].pubK, - sign_algo: getSignAlgo(accounts[0].signAlgo), - hash_algo: getHashAlgo(accounts[0].hashAlgo), - weight: 1000, - }; - const result = await wallet.openapi.getLocation(); - const installationId = await wallet.openapi.getInstallationId(); - const userlocation = result.data; - const device_info = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - user_agent: 'Chrome', - zip: userlocation.zip, - }; - const address = accounts[0].address.replace(/^0x/, ''); - wallet.openapi - .importKey(accountKeyStruct, device_info, username, {}, address) - .then((response) => { - return wallet.boot(password); - }) - .then(async (response) => { - storage.remove('premnemonic'); - - await saveIndex(username); - if (pk) { - return wallet.importPrivateKey(pk); - } else { - return wallet.createKeyringWithMnemonics(mnemonic); - } - }) - .then((address) => { - setLoading(false); - if (pk) { - goEnd(); - } else { - handleClick(); - } - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx b/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx deleted file mode 100644 index de3b9141..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/AddressImport/index.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import { IconButton, Typography, Snackbar, Alert } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, PickUsername, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { storage } from 'background/webapi'; -import { LLPinAlert } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - -import GoogleBackup from './GoogleBackup'; -import ImportPager from './ImportPager'; -import RecoverPassword from './RecoverPassword'; -import SetPassword from './SetPassword'; - -enum Direction { - Right, - Left, -} - -const AddressImport = () => { - const history = useHistory(); - const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [pk, setPk] = useState(null); - const [username, setUsername] = useState(''); - const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [password, setPassword] = useState(null); - const [accounts, setAccounts] = useState([]); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - const loadView = useCallback(async () => { - // console.log(wallet); - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [history, wallet]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 5) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - const goPassword = () => { - setDirection(Direction.Right); - onChange(3); - }; - const goGoogle = () => { - setDirection(Direction.Right); - onChange(4); - }; - const goEnd = () => { - setDirection(Direction.Right); - onChange(5); - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - - - - - - - - - - - - - - - - - - - - - - - {errMessage} - - - - - ); -}; - -export default AddressImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx b/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx deleted file mode 100644 index 59e87eb9..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/SetPassword.tsx +++ /dev/null @@ -1,374 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setUsername, accountKey, deviceInfo }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const register = async () => { - setLoading(true); - await wallet.signInV3(mnemonic, accountKey, deviceInfo); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - await saveIndex(userInfo.username); - try { - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - return ( - <> - - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/index.tsx b/src/ui/views/LandingPages/AddAccountPage/index.tsx deleted file mode 100644 index d2536d0f..00000000 --- a/src/ui/views/LandingPages/AddAccountPage/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; - -const AddWelcome = () => { - return ; -}; - -export default AddWelcome; diff --git a/src/ui/views/LandingPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx index bee6f2b7..e292a6cf 100644 --- a/src/ui/views/LandingPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -54,7 +54,7 @@ const Reset = () => { const accounts = await wallets.loadBackupAccounts(); if (accounts.length > 0) { history.push({ - pathname: '/import/google', + pathname: '/add/google', state: { accounts: accounts, }, diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/GoogleBackup.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx new file mode 100644 index 00000000..76a55758 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx @@ -0,0 +1,240 @@ +import { Box, Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React, { useCallback, useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { useWallet, saveIndex } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accounts, goEnd }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isCheck, setCheck] = useState(false); + const [isLoading, setLoading] = useState(false); + const [notBot, setNotBot] = useState(true); + const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); + const [showError, setShowError] = useState(false); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isMatch, setMatch] = useState(false); + + const loadTempPassword = useCallback(async () => { + setPassword(tempPassword); + }, [tempPassword]); + + useEffect(() => { + loadTempPassword(); + }, [loadTempPassword]); + + const successInfo = (message) => ( + + + + {message} + + + ); + + const errorInfo = (message) => ( + + + + {message} + + + ); + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + + const handleImport = async () => { + setLoading(true); + try { + const accountKeyStruct = { + public_key: accounts[0].pubK, + sign_algo: getSignAlgo(accounts[0].signAlgo), + hash_algo: getHashAlgo(accounts[0].hashAlgo), + weight: 1000, + }; + const result = await wallet.openapi.getLocation(); + const installationId = await wallet.openapi.getInstallationId(); + const userlocation = result.data; + const device_info = { + city: userlocation.city, + continent: userlocation.country, + continentCode: userlocation.countryCode, + country: userlocation.country, + countryCode: userlocation.countryCode, + currency: userlocation.countryCode, + device_id: installationId, + district: '', + ip: userlocation.query, + isp: userlocation.as, + lat: userlocation.lat, + lon: userlocation.lon, + name: 'FRW Chrome Extension', + org: userlocation.org, + regionName: userlocation.regionName, + type: '2', + user_agent: 'Chrome', + zip: userlocation.zip, + }; + const address = accounts[0].address.replace(/^0x/, ''); + + await wallet.openapi.importKey(accountKeyStruct, device_info, username, {}, address); + await wallet.boot(password); + storage.remove('premnemonic'); + await saveIndex(username); + + if (pk) { + await wallet.importPrivateKey(pk); + goEnd(); + } else { + await wallet.createKeyringWithMnemonics(mnemonic); + handleClick(); + } + setLoading(false); + } catch (error) { + console.log('error', error); + setShowError(true); + setLoading(false); + } + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (!tempPassword) { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + } else { + setMatch(true); // Auto-match when using tempPassword + } + }, [confirmPassword, password, tempPassword]); + + return ( + <> + + + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + {!tempPassword && ( + + + + {helperMatch} + + + )} + + + + + + + + + setShowError(false)} /> + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx new file mode 100644 index 00000000..57cadb6f --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx @@ -0,0 +1,126 @@ +import { Snackbar, Alert, Box } from '@mui/material'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { useHistory } from 'react-router-dom'; + +import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; +import { storage } from 'background/webapi'; +import { LLPinAlert } from 'ui/FRWComponent'; +import { useWallet } from 'ui/utils'; + +import GoogleBackup from './GoogleBackup'; +import ImportPager from './ImportPager'; +import RecoverPassword from './RecoverPassword'; +import SetPassword from './SetPassword'; + +const AddressImport = () => { + const history = useHistory(); + const wallet = useWallet(); + + const navigation = useNavigation(5); + + const [mnemonic, setMnemonic] = useState(''); + const [pk, setPk] = useState(null); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [accounts, setAccounts] = useState([]); + const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); + const [showError, setShowError] = useState(false); + + const getUsername = (username: string) => { + setUsername(username.toLowerCase()); + }; + + const loadTempPassword = useCallback(async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }, []); + + useEffect(() => { + loadTempPassword(); + }, []); + + const loadView = useCallback(async () => { + wallet + .getCurrentAccount() + .then((res) => { + if (res) { + history.push('/'); + } + }) + .catch(() => { + return; + }); + }, [wallet, history]); + + useEffect(() => { + loadView(); + }, [loadView]); + + const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { + if (reason === 'clickaway') { + return; + } + setShowError(false); + }; + + return ( + + + navigation.goCustom(3)} + handleClick={navigation.goNext} + setErrorMessage={setErrorMessage} + setShowError={setShowError} + /> + + navigation.goCustom(4)} + tempPassword={password} + mnemonic={mnemonic} + pk={pk} + username={username} + accounts={accounts} + goEnd={() => navigation.goCustom(5)} + /> + navigation.goCustom(5)} + accountKey={accounts} + /> + + + + + ); +}; + +export default AddressImport; diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/DecryptWallet.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/DecryptWallet.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/DecryptWallet.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx similarity index 69% rename from src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx rename to src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx index 7812801b..dcaf15a3 100644 --- a/src/ui/views/LandingPages/AddAccountPage/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { useNavigation, PageSlider } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import DecryptWallet from './DecryptWallet'; @@ -40,29 +40,6 @@ const GoogleImport = () => { loadTempPassword(); }, [getGoogleAccounts, loadTempPassword]); - const pages: Record = { - 0: { - component: GoogleAccounts, - props: { handleClick: goNext, accounts, setUsername }, - }, - 1: { - component: DecryptWallet, - props: { handleClick: goNext, setMnemonic, username }, - }, - 2: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: RecoveryPassword, - props: { handleClick: goNext, mnemonic, username, lastPassword: password }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - return ( { showConfetti={activeIndex === 4} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + + + ); }; diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/ProxyQr.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/SetPassword.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/ProxySync/index.tsx rename to src/ui/views/LandingPages/Welcome/ProxySync/index.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx new file mode 100644 index 00000000..e2c4b6f8 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx @@ -0,0 +1,247 @@ +import { Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import { Box } from '@mui/system'; +import HDWallet from 'ethereum-hdwallet'; +import React, { useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { type AccountKey } from 'background/service/networkModel'; +import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, + inputBox2: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassword = '' }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(tempPassword); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isMatch, setMatch] = useState(false); + const [isCheck, setCheck] = useState(false); + const [isLoading, setLoading] = useState(false); + const [notBot, setNotBot] = useState(true); + const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); + const [showError, setShowError] = useState(false); + + const getAccountKey = (mnemonic) => { + const hdwallet = HDWallet.fromMnemonic(mnemonic); + const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); + const key: AccountKey = { + hash_algo: 1, + sign_algo: 2, + weight: 1000, + public_key: publicKey, + }; + return key; + }; + + const successInfo = (message) => { + return ( + + + + {message} + + + ); + }; + + const errorInfo = (message) => { + return ( + + + + {message} + + + ); + }; + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + const handleErrorClose = () => setShowError(false); + + const register = async () => { + setLoading(true); + + await saveIndex(username); + const accountKey = getAccountKey(mnemonic); + // track the time until account_created is called + mixpanelBrowserService.time('account_created'); + wallet.openapi + .register(accountKey, username) + .then((response) => { + return wallet.boot(password); + }) + .then((response) => { + setExPassword(password); + storage.remove('premnemonic'); + return wallet.createKeyringWithMnemonics(mnemonic); + }) + .then((accounts) => { + handleClick(); + return wallet.openapi.createFlowAddress(); + }) + .then((address) => { + setLoading(false); + }) + .catch((error) => { + console.log('error', error); + setShowError(true); + setLoading(false); + }); + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (!tempPassword) { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + } else { + setMatch(true); // Auto-match when using tempPassword + } + }, [confirmPassword, password, tempPassword]); + + return ( + <> + + + {tempPassword ? ( + chrome.i18n.getMessage('Confirm__Password') + ) : ( + <> + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + )} + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + {!tempPassword && ( + + + + {helperMatch} + + + )} + + + + + + + + + + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx b/src/ui/views/LandingPages/Welcome/Register/index.tsx similarity index 61% rename from src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx rename to src/ui/views/LandingPages/Welcome/Register/index.tsx index bdf6b485..60871320 100644 --- a/src/ui/views/LandingPages/AddAccountPage/AddRegister/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Register/index.tsx @@ -8,7 +8,7 @@ import { AllSet, LandingComponents, } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; @@ -16,12 +16,12 @@ import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; import SetPassword from './SetPassword'; -const AddRegister = () => { +const Register = () => { const history = useHistory(); const wallet = useWallet(); const { activeIndex, direction, goNext, goBack } = useNavigation(5); const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); + const [password, setPassword] = useState(''); const [mnemonic] = useState(bip39.generateMnemonic()); const getUsername = (username: string) => { @@ -48,39 +48,6 @@ const AddRegister = () => { } }, []); - const pages: Record = { - 0: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 1: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 2: { - component: RepeatPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: SetPassword, - props: { - handleClick: goNext, - setExPassword: setPassword, - tempPassword: password, - mnemonic, - username, - }, - }, - 4: { - component: GoogleBackup, - props: { handleClick: goNext, mnemonic, username, password }, - }, - 5: { - component: AllSet, - props: { handleClick: goNext, variant: 'add' }, - }, - }; - useEffect(() => { loadView(); loadTempPassword(); @@ -95,9 +62,27 @@ const AddRegister = () => { showConfetti={activeIndex === 5} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + + + + ); }; -export default AddRegister; +export default Register; diff --git a/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx new file mode 100644 index 00000000..b2e24135 --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx @@ -0,0 +1,198 @@ +import { Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import { Box } from '@mui/system'; +import React, { useEffect, useState } from 'react'; + +import { storage } from '@/background/webapi'; +import { + PasswordInput, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/SetPassword'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { useWallet, saveIndex } from 'ui/utils'; + +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +const SetPassword = ({ handleClick, mnemonic, username, setUsername, accountKey, deviceInfo }) => { + const classes = useStyles(); + const wallet = useWallet(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isMatch, setMatch] = useState(false); + const [isLoading, setLoading] = useState(false); + const [errorMessage, setErrorMessage] = useState('Something went wrong'); + const [showError, setShowError] = useState(false); + + const loadTempPassword = async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }; + + useEffect(() => { + loadTempPassword(); + }, []); + + const successInfo = (message) => ( + + + + {message} + + + ); + + const errorInfo = (message) => ( + + + + {message} + + + ); + + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + + const register = async () => { + setLoading(true); + try { + await wallet.signInV3(mnemonic, accountKey, deviceInfo); + const userInfo = await wallet.getUserInfo(true); + setUsername(userInfo.username); + await saveIndex(userInfo.username); + await wallet.boot(password); + const formatted = mnemonic.trim().split(/\s+/g).join(' '); + await wallet.createKeyringWithMnemonics(formatted); + setLoading(false); + handleClick(); + } catch (e) { + setLoading(false); + setErrorMessage(e.message); + setShowError(true); + } + }; + + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); + } + }, [password]); + + useEffect(() => { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + }, [confirmPassword, password]); + + return ( + <> + + + {chrome.i18n.getMessage('Welcome__Back')} + + {username} + + + + {chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {helperText} + + + + + + {helperMatch} + + + + + + + + + setShowError(false)} /> + + ); +}; + +export default SetPassword; diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx b/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/AddAccountPage/Sync/SyncQr.tsx rename to src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx b/src/ui/views/LandingPages/Welcome/Sync/index.tsx similarity index 61% rename from src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx rename to src/ui/views/LandingPages/Welcome/Sync/index.tsx index d5132c77..503c66ab 100644 --- a/src/ui/views/LandingPages/AddAccountPage/Sync/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Sync/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; +import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; import { useWallet } from 'ui/utils'; import SetPassword from './SetPassword'; @@ -11,9 +11,12 @@ import SyncQr from './SyncQr'; const Sync = () => { const history = useHistory(); const wallet = useWallet(); + const { activeIndex, direction, goNext, goBack } = useNavigation(2); - const [mnemonic, setMnemonic] = useState(''); const [username, setUsername] = useState(''); + const [mnemonic, setMnemonic] = useState(''); + const [accountKey, setAccountKey] = useState(null); + const [deviceInfo, setDeviceInfo] = useState(null); const getUsername = (username: string) => { setUsername(username.toLowerCase()); @@ -36,26 +39,6 @@ const Sync = () => { loadView(); }, [loadView]); - const pages: Record = { - 0: { - component: SyncQr, - props: { - handleClick: goNext, - savedUsername: username, - confirmMnemonic: setMnemonic, - setUsername: getUsername, - }, - }, - 1: { - component: SetPassword, - props: { handleClick: goNext, mnemonic, username }, - }, - 2: { - component: AllSet, - props: { handleClick: goNext, variant: 'sync' }, - }, - }; - return ( { showConfetti={activeIndex === 2} showRegisterHeader={true} > - {renderPage(pages, activeIndex)} + + + + + ); }; diff --git a/src/ui/views/LandingPages/Welcome/index.tsx b/src/ui/views/LandingPages/Welcome/index.tsx new file mode 100644 index 00000000..beffff3c --- /dev/null +++ b/src/ui/views/LandingPages/Welcome/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; + +const Welcome = () => { + return ( + + ); +}; + +export default Welcome; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx deleted file mode 100644 index c7cf5362..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleClick(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx deleted file mode 100644 index 174f739e..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/ImportPager.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useState } from 'react'; - -import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; -import { useWallet } from '@/ui/utils'; - -const ImportPager = ({ - setMnemonic, - setPk, - setAccounts, - accounts, - mnemonic, - pk, - setUsername, - goPassword, - handleClick, - setErrorMessage, - setShowError, -}) => { - const [selectedTab, setSelectedTab] = useState(0); - const [isImport, setImport] = useState(false); - const [isSignLoading, setSignLoading] = useState(false); - const [addressFound, setAddressFound] = useState(true); - const [newKey, setKeyNew] = useState(true); - const wallet = useWallet(); - - const signIn = async (accountKey) => { - setSignLoading(true); - if (accountKey[0].mnemonic) { - signMnemonic(accountKey); - } else { - signPk(accountKey); - } - }; - - const signMnemonic = async (accountKey) => { - try { - const result = await wallet.signInWithMnemonic(accountKey[0].mnemonic); - setSignLoading(false); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - goPassword(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setImport(false); - } else { - setKeyNew(false); - } - } - }; - - const signPk = async (accountKey) => { - try { - const result = await wallet.signInWithPrivatekey(accountKey[0].pk); - setSignLoading(false); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - goPassword(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setImport(false); - } else { - setKeyNew(false); - } - } - }; - - const handleTabChange = (event, newValue) => { - setSelectedTab(newValue); - }; - - const handleImport = async (accountKey?: any) => { - setAccounts(accountKey); - const result = await wallet.openapi.checkImport(accountKey[0].pubK); - if (result.status === 409) { - signIn(accountKey); - } else { - if (!accountKey[0].address) { - handleNotFoundPopup(); - return; - } - handleClick(); - } - }; - - const handleNotFoundPopup = async () => { - setAddressFound(!addressFound); - }; - - return ( - - ); -}; - -export default ImportPager; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx deleted file mode 100644 index 5fae56b9..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/RecoverPassword.tsx +++ /dev/null @@ -1,359 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { storage } from 'background/webapi'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - try { - await wallet.boot(password); - await saveIndex(username); - if (pk) { - await wallet.importPrivateKey(pk); - } else { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - } - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx deleted file mode 100644 index 658df5ab..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/SetPassword.tsx +++ /dev/null @@ -1,393 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, pk, username, setExPassword, accounts, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const handleImport = async () => { - console.log('account key ', accounts); - setLoading(true); - if (accounts.length > 1) { - setLoading(true); - } else { - const accountKeyStruct = { - public_key: accounts[0].pubK, - sign_algo: getSignAlgo(accounts[0].signAlgo), - hash_algo: getHashAlgo(accounts[0].hashAlgo), - weight: 1000, - }; - const installationId = await wallet.openapi.getInstallationId(); - // console.log('location ', userlocation); - const device_info = { - device_id: installationId, - name: 'FRW Chrome Extension', - type: '2', - user_agent: 'Chrome', - }; - const address = accounts[0].address.replace(/^0x/, ''); - wallet.openapi - .importKey(accountKeyStruct, device_info, username, {}, address) - .then((response) => { - return wallet.boot(password); - }) - .then(async (response) => { - setExPassword(password); - storage.remove('premnemonic'); - - await saveIndex(username); - if (pk) { - return wallet.importPrivateKey(pk); - } else { - return wallet.createKeyringWithMnemonics(mnemonic); - } - }) - .then((address) => { - setLoading(false); - if (pk) { - goEnd(); - } else { - handleClick(); - } - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx deleted file mode 100644 index 29c81ec6..00000000 --- a/src/ui/views/LandingPages/WelcomePage/AddressImport/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import ImportPager from './ImportPager'; -import RecoverPassword from './RecoverPassword'; -import SetPassword from './SetPassword'; - -const AddressImport = () => { - const history = useHistory(); - const wallet = useWallet(); - const { activeIndex, direction, goNext, goBack, goCustom } = useNavigation(4); - const [mnemonic, setMnemonic] = useState(''); - const [pk, setPk] = useState(null); - const [username, setUsername] = useState(''); - const [errorMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [showError, setShowError] = useState(false); - const [accounts, setAccounts] = useState([]); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - const pages: Record = { - 0: { - component: ImportPager, - props: { - setMnemonic, - setPk, - setAccounts, - accounts, - mnemonic, - pk, - setUsername, - goPassword: () => goCustom(3), - handleClick: goNext, - setErrorMessage, - setShowError, - }, - }, - 1: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 2: { - component: SetPassword, - props: { - handleClick: goNext, - mnemonic, - pk, - username, - accounts, - goEnd: () => goNext(), - }, - }, - 3: { - component: RecoverPassword, - props: { - handleClick: goNext, - mnemonic, - pk, - username, - goEnd: () => goNext(), - }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default AddressImport; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx deleted file mode 100644 index 7c0d564d..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/DecryptWallet.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { Button, Typography, IconButton, Input, InputAdornment, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet } from 'ui/utils'; - -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const DecryptWallet = ({ handleClick, setMnemonic, username, setNextPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - // const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const decryptWallet = async () => { - setLoading(true); - // await wallet.boot(password); - // const formatted = mnemonic.trim().split(/\s+/g).join(' '); - // await wallet.createKeyringWithMnemonics(formatted); - try { - const mnemonic = await wallet.restoreAccount(username, password); - // console.log('mnemonic ->', mnemonic); - setLoading(false); - setMnemonic(mnemonic); - setNextPassword(password); - handleClick(); - } catch (e) { - setLoading(false); - setHelperText( - errorInfo(chrome.i18n.getMessage('Incorrect__decrypt__password__please__try__again')) - ); - } - }; - - useEffect(() => { - if (password.length < 8) { - setHelperText( - errorInfo(chrome.i18n.getMessage('The__decrypt__password__should__be__8__characters__long')) - ); - setCharacters(false); - } else { - setHelperText(
); - setCharacters(true); - } - }, [password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage('Please__enter__your__password__to__decrypt')} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - - - - - ); -}; - -export default DecryptWallet; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index 2b91ed3a..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/GoogleAccounts.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'; -import { - Typography, - Avatar, - Box, - List, - ListItemIcon, - ListItemButton, - ListItemText, - IconButton, - ListItem, -} from '@mui/material'; -import React, { useState, useEffect, useCallback } from 'react'; - -import { useWallet } from 'ui/utils'; - -const FetchAvatar = ({ username }) => { - const [avatar, setAvatar] = useState( - `https://lilico.app/api/avatar/beam/120/${username}?colors=FFDD32,FC814A,7678ED,B3DEE2,BCF0DA` - ); - const wallet = useWallet(); - - const fetchUserAvatar = useCallback( - async (username) => { - const { data } = await wallet.openapi.searchUser(username); - const users = data.users; - if (users.length > 0 && users[0].avatar) { - setAvatar(users[0].avatar); - } - }, - [wallet] - ); - - useEffect(() => { - fetchUserAvatar(username); - }, [fetchUserAvatar, username]); - - return ; -}; - -const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { - return ( - <> - - - {chrome.i18n.getMessage('We__ve__found') + ' '} - - {accounts.length} - {chrome.i18n.getMessage('matching__accounts')} - - - - {chrome.i18n.getMessage('Select__the__account__which__you__want__to__restore__back')} - - - - - {accounts && - accounts.map((account) => { - return ( - - { - setUsername(account); - handleClick(); - }} - sx={{ - display: 'flex', - border: '2px solid #5E5E5E', - width: '100%', - borderRadius: '12px', - backgroundColor: '#333333', - transition: 'all .3s linear', - py: '8px', - px: '16px', - justifyContent: 'center', - mb: '12px', - }} - > - - - - - - - - - - - ); - })} - - - - - ); -}; - -export default GoogleAccounts; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index cdd29bee..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoverPassword.tsx +++ /dev/null @@ -1,364 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(lastPassword); - const [confirmPassword, setConfirmPassword] = useState(lastPassword); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - const [showDialog, setShowDialog] = useState(false); - const [isCheck, setCheck] = useState(true); - - const login = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.signInWithMnemonic(mnemonic); - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - if (e.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - useEffect(() => { - if (isCheck) { - setPassword(lastPassword); - setConfirmPassword(lastPassword); - } else { - setPassword(''); - setConfirmPassword(''); - } - }, [isCheck, lastPassword]); - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('Use__the__same__Google__Drive__password')} - - } - /> - - - - - ) : ( - - )} - - - {errorMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 0d3e5854..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/RecoveryPhrase.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Review') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx b/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx deleted file mode 100644 index e453c3c5..00000000 --- a/src/ui/views/LandingPages/WelcomePage/GoogleImport/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; - -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; - -import DecryptWallet from './DecryptWallet'; -import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; - -interface AccountsState { - accounts: string[]; -} - -const GoogleImport = () => { - const location = useLocation(); - const history = useHistory(); - const { activeIndex, direction, goNext, goBack } = useNavigation(4); - const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(''); - - const getGoogleAccounts = useCallback(async () => { - const users = location?.state?.accounts; - setAccounts(users); - }, [location?.state?.accounts]); - - useEffect(() => { - getGoogleAccounts(); - }, [getGoogleAccounts]); - - const pages: Record = { - 0: { - component: GoogleAccounts, - props: { handleClick: goNext, accounts, setUsername }, - }, - 1: { - component: DecryptWallet, - props: { handleClick: goNext, setMnemonic, username, setNextPassword: setPassword }, - }, - 2: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: RecoveryPassword, - props: { handleClick: goNext, mnemonic, username, lastPassword: password }, - }, - 4: { - component: AllSet, - props: { handleClick: goNext }, - }, - }; - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default GoogleImport; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx deleted file mode 100644 index c7cf5362..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleClick, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleClick(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx b/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx deleted file mode 100644 index dbde6982..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/RecoveryPhrase.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(false); - const [isCoverBlur, coverBlur] = useState(true); - - return ( - <> - - - {chrome.i18n.getMessage('Recovery')} - - {chrome.i18n.getMessage('Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx deleted file mode 100644 index b78ad1b1..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/SetPassword.tsx +++ /dev/null @@ -1,381 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username, setExPassword }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - // TODO: FIX ME - const [notBot, setNotBot] = useState(true); - - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - const accountKey = getAccountKey(mnemonic); - wallet.openapi - .register(accountKey, username) - .then((response) => { - return wallet.boot(password); - }) - .then((response) => { - setExPassword(password); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(mnemonic); - }) - .then((accounts) => { - handleClick(); - return wallet.openapi.createFlowAddress(); - }) - .then((address) => { - setLoading(false); - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - - {errMessage} - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx b/src/ui/views/LandingPages/WelcomePage/Register/index.tsx deleted file mode 100644 index cb9d5659..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Register/index.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { - PickUsername, - RepeatPhrase, - AllSet, - LandingComponents, -} from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import GoogleBackup from './GoogleBackup'; -import RecoveryPhrase from './RecoveryPhrase'; -import SetPassword from './SetPassword'; - -const Register = () => { - const wallet = useWallet(); - const { activeIndex, direction, goNext, goBack } = useNavigation(5); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); - const [mnemonic] = useState(bip39.generateMnemonic()); - const history = useHistory(); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - const pages: Record = { - 0: { - component: PickUsername, - props: { handleClick: goNext, savedUsername: username, getUsername }, - }, - 1: { - component: RecoveryPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 2: { - component: RepeatPhrase, - props: { handleClick: goNext, mnemonic }, - }, - 3: { - component: SetPassword, - props: { handleClick: goNext, setExPassword: setPassword, mnemonic, username }, - }, - 4: { - component: GoogleBackup, - props: { handleClick: goNext, mnemonic, username, password }, - }, - 5: { - component: AllSet, - props: { handleClick: goNext, variant: 'register' }, - }, - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default Register; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx deleted file mode 100644 index 1e692af8..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/Namespace.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// Assuming the necessary imports and types are available -// For instance, Blockchain and ProposalNamespace types must be defined - -class Blockchain { - constructor(public namespace: string) { - // Constructor logic, if any - } - - // Additional methods or properties, if any -} - -interface ProposalNamespace { - chains: Set; - methods: Set; - events: Set; -} - -class FlowWallet { - // This assumes currentNetwork is defined and has an isMainnet property. - // You will need to adapt this based on your actual network handling logic. - static get blockchain(): Blockchain { - return new Blockchain(1 ? 'flow:mainnet' : 'flow:testnet'); - } - - static namespaces( - methods: Set, - events: Set = new Set() - ): Record { - const blockchains: Set = new Set([FlowWallet.blockchain]); - const namespaces: Record = { - [FlowWallet.blockchain.namespace]: { chains: blockchains, methods, events }, - }; - return namespaces; - } -} - -// Usage Example -const methods = new Set(['method1', 'method2']); -const events = new Set(['event1']); -const namespaces = FlowWallet.namespaces(methods, events); - -console.log(namespaces); diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/RegisterHeader.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; - -const RegisterHeader = () => { - return ( - <> - - {/* */} - -
- - - - - ); -}; - -export default RegisterHeader; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx deleted file mode 100644 index 7b6f6567..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/SetPassword.tsx +++ /dev/null @@ -1,402 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleClick, mnemonic, username }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - try { - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)} - > - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx deleted file mode 100644 index 12c98ef5..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/SyncQr.tsx +++ /dev/null @@ -1,450 +0,0 @@ -import { Button, Typography, FormControl, Input, InputAdornment } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import { Core } from '@walletconnect/core'; -import SignClient from '@walletconnect/sign-client'; -import { PairingTypes, type SessionTypes } from '@walletconnect/types'; -import * as bip39 from 'bip39'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useCallback, useState } from 'react'; -import { QRCode } from 'react-qrcode-logo'; - -import { FCLWalletConnectMethod } from '@/ui/utils/type'; -import lilo from 'ui/FRWAssets/image/lilo.png'; -import { useWallet } from 'ui/utils'; - -interface AccountKey { - hashAlgo: number; - publicKey: string; - signAlgo: number; - weight: number; -} - -interface DeviceInfoRequest { - deviceId: string; - ip: string; - name: string; - type: string; - userAgent: string; - - continent?: string; - continentCode?: string; - country?: string; - countryCode?: string; - regionName?: string; - city?: string; - district?: string; - zip?: string; - lat?: number; - lon?: number; - timezone?: string; - currency?: string; - isp?: string; - org?: string; - device_id?: string; -} - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const SyncQr = ({ handleClick, savedUsername, confirmMnemonic, setUsername }) => { - const usewallet = useWallet(); - const classes = useStyles(); - const [Uri, setUri] = useState(''); - const [loading, setShowLoading] = useState(false); - const [session, setSession] = useState(); - const [mnemonic, setMnemonic] = useState(bip39.generateMnemonic()); - const [currentNetwork, setNetwork] = useState('mainnet'); - - const loadNetwork = useCallback(async () => { - const currentNetwork = await usewallet.getNetwork(); - setNetwork(currentNetwork); - }, [usewallet]); - - useEffect(() => { - loadNetwork(); - }, [loadNetwork]); - - const onSessionConnected = useCallback(async (_session: SessionTypes.Struct) => { - console.log('_session ', _session); - setShowLoading(true); - setSession(_session); - }, []); - - const _subscribeToEvents = useCallback( - async (_client: SignClient) => { - if (typeof _client === 'undefined') { - throw new Error('WalletConnect is not initialized'); - } - - _client.on('session_update', ({ topic, params }) => { - console.log('EVENT', 'session_update', { topic, params }); - const { namespaces } = params; - const _session = _client.session.get(topic); - const updatedSession = { ..._session, namespaces }; - onSessionConnected(updatedSession); - }); - console.log('EVENT _client ', _client); - }, - [onSessionConnected] - ); - - const getAccountKey = useCallback(() => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hashAlgo: 1, - signAlgo: 2, - weight: 1000, - publicKey: publicKey, - }; - return key; - }, [mnemonic]); - - const getDeviceInfo = useCallback(async (): Promise => { - const result = await usewallet.openapi.getLocation(); - const installationId = await usewallet.openapi.getInstallationId(); - const userlocation = result.data; - const deviceInfo: DeviceInfoRequest = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - deviceId: installationId, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - userAgent: 'Chrome', - zip: userlocation.zip, - }; - return deviceInfo; - }, [usewallet]); - - const sendRequest = useCallback( - async (wallet: SignClient, topic: string) => { - wallet - .request({ - topic: topic, - chainId: `flow:${currentNetwork}`, - request: { - method: FCLWalletConnectMethod.accountInfo, - params: [], - }, - }) - .then(async (result: any) => { - const jsonObject = JSON.parse(result); - if (jsonObject.method === FCLWalletConnectMethod.accountInfo) { - const accountKey: AccountKey = getAccountKey(); - const deviceInfo: DeviceInfoRequest = await getDeviceInfo(); - - wallet - .request({ - topic: topic, - chainId: `flow:${currentNetwork}`, - request: { - method: FCLWalletConnectMethod.addDeviceInfo, - params: { - method: '', - data: { - username: '', - accountKey: accountKey, - deviceInfo: deviceInfo, - }, - }, - }, - }) - .then(async (sent) => { - const ak = { - public_key: accountKey.publicKey, - hash_algo: accountKey.hashAlgo, - sign_algo: accountKey.signAlgo, - weight: accountKey.weight, - }; - usewallet - .signInV3(mnemonic, ak, deviceInfo) - .then(async (result) => { - confirmMnemonic(mnemonic); - const userInfo = await usewallet.getUserInfo(true); - setUsername(userInfo.username); - handleClick(); - }) - .catch((error) => { - console.error('Error in sign in wallet request:', error); - }); - }) - .catch((error) => { - console.error('Error in second wallet request:', error); - }); - } - }) - .catch((error) => { - console.error('Error in first wallet request:', error); - }); - }, - [ - confirmMnemonic, - currentNetwork, - getAccountKey, - getDeviceInfo, - handleClick, - mnemonic, - setUsername, - usewallet, - ] - ); - - useEffect(() => { - const createWeb3Wallet = async () => { - try { - const wallet = await SignClient.init({ - // @ts-ignore: Unreachable code error - core: new Core({ - projectId: process.env.WC_PROJECTID, - }), - metadata: { - name: 'Flow Walllet', - description: 'Digital wallet created for everyone.', - url: 'https://fcw-link.lilico.app', - icons: ['https://fcw-link.lilico.app/logo.png'], - }, - }); - await _subscribeToEvents(wallet); - - try { - const { uri, approval } = await wallet.connect({ - requiredNamespaces: { - flow: { - methods: [FCLWalletConnectMethod.accountInfo, FCLWalletConnectMethod.addDeviceInfo], - chains: [`flow:${currentNetwork}`], - events: [], - }, - }, - }); - - if (uri) { - console.log('uri ', uri); - await setUri(uri); - const session = await approval(); - await onSessionConnected(session); - - console.log('session ', session); - sendRequest(wallet, session.topic); - } - } catch (e) { - console.error(e); - } - } catch (e) { - console.error(e); - } - }; - createWeb3Wallet(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - <> - - - - - {chrome.i18n.getMessage('Sync_')}{' '} - - {chrome.i18n.getMessage('Lilico')} - - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage('Open_your_Flow_Reference_on_Mobil')} - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage(' Note_Your_recovery_phrase_will_not')} - - - - - {/* - {Uri} - - {copySuccess && {copySuccess}} - */} - {Uri && ( - - - - - - {loading && ( - - - {chrome.i18n.getMessage('Scan_Successfully')} - - - {chrome.i18n.getMessage('Sync_in_Process')} - - - )} - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('Scan_QR_Code_with_Mobile')} - - - )} - - - - - {/* */} - - ); -}; - -export default SyncQr; diff --git a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx b/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx deleted file mode 100644 index bb03e356..00000000 --- a/src/ui/views/LandingPages/WelcomePage/Sync/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { type PageConfig, renderPage, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; - -import SetPassword from './SetPassword'; -import SyncQr from './SyncQr'; - -const Sync = () => { - const wallet = useWallet(); - const history = useHistory(); - const { activeIndex, direction, goNext, goBack } = useNavigation(2); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const pages: Record = { - 0: { - component: SyncQr, - props: { - handleClick: goNext, - savedUsername: username, - confirmMnemonic: setMnemonic, - setUsername: getUsername, - }, - }, - 1: { - component: SetPassword, - props: { handleClick: goNext, mnemonic, username }, - }, - 2: { - component: AllSet, - props: { handleClick: goNext, variant: 'sync' }, - }, - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - - {renderPage(pages, activeIndex)} - - ); -}; - -export default Sync; diff --git a/src/ui/views/LandingPages/WelcomePage/index.tsx b/src/ui/views/LandingPages/WelcomePage/index.tsx deleted file mode 100644 index be6fe350..00000000 --- a/src/ui/views/LandingPages/WelcomePage/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -import { WelcomePage as WelcomeComponent } from '@/ui/FRWComponent/LandingPages'; - -const WelcomePage = () => { - return ; -}; - -export default WelcomePage; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 0ee283f1..5ec7de77 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -1,21 +1,15 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import AddWelcome from './LandingPages/AddAccountPage'; -import AddRegister from './LandingPages/AddAccountPage/AddRegister'; -import AddImport from './LandingPages/AddAccountPage/AddressImport'; -import AddGoogle from './LandingPages/AddAccountPage/GoogleImport'; -import AddSync from './LandingPages/AddAccountPage/Sync'; -// import ProxySync from './AddWelcome/ProxySync'; import Forgot from './LandingPages/Forgot'; import Recover from './LandingPages/Forgot/Recover'; import Reset from './LandingPages/Forgot/Reset'; import RecoverRegister from './LandingPages/RecoverRegister'; -import WelcomePage from './LandingPages/WelcomePage'; -import AddressImport from './LandingPages/WelcomePage/AddressImport'; -import GoogleImport from './LandingPages/WelcomePage/GoogleImport'; -import Register from './LandingPages/WelcomePage/Register'; -import Synce from './LandingPages/WelcomePage/Sync'; +import Welcome from './LandingPages/Welcome'; +import AddressImport from './LandingPages/Welcome/AddressImport'; +import AddGoogle from './LandingPages/Welcome/GoogleImport'; +import Register from './LandingPages/Welcome/Register'; +import Sync from './LandingPages/Welcome/Sync'; import './MainRoute.css'; @@ -28,22 +22,16 @@ export const MainRoute: React.FC = () => {
- - - - - - - - - + + + + + - - - +
); diff --git a/src/ui/views/index.tsx b/src/ui/views/index.tsx index e0e45b8b..5c10ffb7 100644 --- a/src/ui/views/index.tsx +++ b/src/ui/views/index.tsx @@ -32,7 +32,6 @@ const Routes = () => { - {/* */} From 43517e38084d99b902cf2b275e81fa2ca6f30d95 Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 18 Dec 2024 20:33:17 +1100 Subject: [PATCH 28/41] fixed: merge setpassword, update the page components. --- src/background/controller/wallet.ts | 2 +- ...mportPager.tsx => ImportTabsComponent.tsx} | 15 +- .../LandingPages/ImportComponents/index.ts | 5 - .../LandingPages/LandingComponents.tsx | 2 +- .../LandingPages/PasswordComponents.tsx | 222 ++++++++++ .../FRWComponent/LandingPages/SetPassword.tsx | 379 +++++++++--------- .../FRWComponent/LandingPages/WelcomePage.tsx | 2 +- src/ui/FRWComponent/LandingPages/index.ts | 6 - .../LandingPages/Forgot/Recover/index.tsx | 2 +- .../views/LandingPages/Forgot/Reset/index.tsx | 2 +- src/ui/views/LandingPages/Forgot/index.tsx | 2 +- .../LandingPages/RecoverRegister/index.tsx | 3 +- src/ui/views/LandingPages/Reset/index.tsx | 3 +- .../{ImportPager.tsx => ImportTabs.tsx} | 8 +- .../Welcome/AddressImport/SetPassword.tsx | 240 ----------- .../Welcome/AddressImport/index.tsx | 198 ++++++--- .../Welcome/GoogleImport/index.tsx | 3 +- .../LandingPages/Welcome/ProxySync/index.tsx | 3 +- .../Welcome/Register/SetPassword.tsx | 245 ----------- .../LandingPages/Welcome/Register/index.tsx | 133 ++++-- .../LandingPages/Welcome/Sync/SetPassword.tsx | 198 --------- .../views/LandingPages/Welcome/Sync/index.tsx | 108 +++-- src/ui/views/LandingPages/Welcome/index.tsx | 237 ++++++++++- src/ui/views/MainRoute.tsx | 1 - 24 files changed, 988 insertions(+), 1031 deletions(-) rename src/ui/FRWComponent/LandingPages/ImportComponents/{ImportPager.tsx => ImportTabsComponent.tsx} (93%) delete mode 100644 src/ui/FRWComponent/LandingPages/ImportComponents/index.ts create mode 100644 src/ui/FRWComponent/LandingPages/PasswordComponents.tsx delete mode 100644 src/ui/FRWComponent/LandingPages/index.ts rename src/ui/views/LandingPages/Welcome/AddressImport/{ImportPager.tsx => ImportTabs.tsx} (91%) delete mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index 22d664ce..f1c93e37 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -292,7 +292,7 @@ export class WalletController extends BaseController { await passwordService.clear(); sessionService.broadcastEvent('accountsChanged', []); sessionService.broadcastEvent('lock'); - openIndexPage('addwelcome'); + openIndexPage('welcome'); await this.switchNetwork(switchingTo); }; diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportTabsComponent.tsx similarity index 93% rename from src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx rename to src/ui/FRWComponent/LandingPages/ImportComponents/ImportTabsComponent.tsx index 304be1a2..947381d4 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/ImportPager.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/ImportTabsComponent.tsx @@ -1,14 +1,13 @@ import { Box, Tabs, Tab, Typography } from '@mui/material'; import React from 'react'; -import { - Googledrive, - KeyImport, - SeedPhraseImport, - JsonImport, -} from '@/ui/FRWComponent/LandingPages/ImportComponents'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; +import Googledrive from './Googledrive'; +import JsonImport from './JsonImport'; +import KeyImport from './KeyImport'; +import SeedPhraseImport from './SeedPhraseImport'; + function TabPanel(props) { const { children, value, index, ...other } = props; @@ -25,7 +24,7 @@ function TabPanel(props) { ); } -const BaseImportPager = ({ +const ImportTabsComponent = ({ selectedTab, handleTabChange, handleNotFoundPopup, @@ -118,4 +117,4 @@ const BaseImportPager = ({ ); }; -export default BaseImportPager; +export default ImportTabsComponent; diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/index.ts b/src/ui/FRWComponent/LandingPages/ImportComponents/index.ts deleted file mode 100644 index 82622273..00000000 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { default as KeyImport } from './KeyImport'; -export { default as SeedPhraseImport } from './SeedPhraseImport'; -export { default as JsonImport } from './JsonImport'; -export { default as Googledrive } from './Googledrive'; -export { default as ImportPager } from './ImportPager'; diff --git a/src/ui/FRWComponent/LandingPages/LandingComponents.tsx b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx index e5fc5941..4a4484cc 100644 --- a/src/ui/FRWComponent/LandingPages/LandingComponents.tsx +++ b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { LLPinAlert } from '@/ui/FRWComponent'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import BackButtonIcon from '../../../components/iconfont/IconBackButton'; diff --git a/src/ui/FRWComponent/LandingPages/PasswordComponents.tsx b/src/ui/FRWComponent/LandingPages/PasswordComponents.tsx new file mode 100644 index 00000000..6a6cb56e --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/PasswordComponents.tsx @@ -0,0 +1,222 @@ +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; +import { + Box, + LinearProgress, + Typography, + Input, + InputAdornment, + IconButton, + FormControlLabel, + Checkbox, + Link, + Button, + Snackbar, + Alert, +} from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React from 'react'; +import zxcvbn from 'zxcvbn'; + +import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; +import { LLSpinner } from '@/ui/FRWComponent'; + +const useStyles = makeStyles(() => ({ + inputBox: { + height: '64px', + padding: '16px', + zIndex: '999', + backgroundColor: '#282828', + border: '2px solid #4C4C4C', + borderRadius: '12px', + boxSizing: 'border-box', + '&.Mui-focused': { + border: '2px solid #FAFAFA', + boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', + }, + }, +})); + +// Password Indicator Component +interface PasswordIndicatorProps { + value: string; +} + +export const PasswordIndicator = ({ value }: PasswordIndicatorProps) => { + const score = zxcvbn(value).score; + const percentage = ((score + 1) / 5) * 100; + + const level = (score: number) => { + switch (score) { + case 0: + case 1: + return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; + case 2: + return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; + case 3: + return { text: chrome.i18n.getMessage('Great'), color: 'success' }; + case 4: + return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; + default: + return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; + } + }; + + return ( + + + + + + + {level(score).text} + + + + ); +}; + +// Password Input Component +interface PasswordInputProps { + value: string; + onChange: (value: string) => void; + isVisible: boolean; + setVisible: (visible: boolean) => void; + readOnly?: boolean; + placeholder?: string; + autoFocus?: boolean; + className?: string; +} + +export const PasswordInput = ({ + value, + onChange, + isVisible, + setVisible, + readOnly = false, + placeholder = chrome.i18n.getMessage('Create__a__password'), + autoFocus = false, + className, +}: PasswordInputProps) => { + const classes = useStyles(); + + return ( + onChange(e.target.value)} + endAdornment={ + + {value && } + setVisible(!isVisible)}> + {isVisible ? : } + + + } + /> + ); +}; + +// Terms Checkbox Component +interface TermsCheckboxProps { + onChange: (checked: boolean) => void; +} + +export const TermsCheckbox = ({ onChange }: TermsCheckboxProps) => ( + } + checkedIcon={} + onChange={(event) => onChange(event.target.checked)} + /> + } + label={ + + {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} + + {chrome.i18n.getMessage('Privacy__Policy')} + {' '} + {chrome.i18n.getMessage('and') + ' '} + + {chrome.i18n.getMessage('Terms__of__Service')} + {' '} + . + + } + /> +); + +// Error Snackbar Component +interface ErrorSnackbarProps { + open: boolean; + message: string; + onClose: () => void; +} + +export const ErrorSnackbar = ({ open, message, onClose }: ErrorSnackbarProps) => ( + + + {message} + + +); + +// Submit Button Component +interface SubmitButtonProps { + onClick: () => void; + isLoading: boolean; + disabled: boolean; + isLogin?: boolean; +} + +export const SubmitButton = ({ + onClick, + isLoading, + disabled, + isLogin = false, +}: SubmitButtonProps) => ( + +); diff --git a/src/ui/FRWComponent/LandingPages/SetPassword.tsx b/src/ui/FRWComponent/LandingPages/SetPassword.tsx index 6a6cb56e..630ed4da 100644 --- a/src/ui/FRWComponent/LandingPages/SetPassword.tsx +++ b/src/ui/FRWComponent/LandingPages/SetPassword.tsx @@ -1,25 +1,17 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Box, - LinearProgress, - Typography, - Input, - InputAdornment, - IconButton, - FormControlLabel, - Checkbox, - Link, - Button, - Snackbar, - Alert, -} from '@mui/material'; +import { Box, Typography, FormGroup } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import React from 'react'; -import zxcvbn from 'zxcvbn'; +import React, { useCallback, useEffect, useState } from 'react'; + +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/PasswordComponents'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { BpUncheked, BpCheckedIcon } from '@/ui/FRWAssets/icons/CustomCheckboxIcons'; -import { LLSpinner } from '@/ui/FRWComponent'; +import CheckCircleIcon from '../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ inputBox: { @@ -37,186 +29,195 @@ const useStyles = makeStyles(() => ({ }, })); -// Password Indicator Component -interface PasswordIndicatorProps { - value: string; +interface SetPasswordProps { + handleClick: () => void; + onSubmit: (password: string) => Promise; + username?: string; + tempPassword?: string; + showTerms?: boolean; + title?: string | React.ReactNode; + subtitle?: string; + isLogin?: boolean; + autoFocus?: boolean; } -export const PasswordIndicator = ({ value }: PasswordIndicatorProps) => { - const score = zxcvbn(value).score; - const percentage = ((score + 1) / 5) * 100; - - const level = (score: number) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; +const SetPassword: React.FC = ({ + handleClick, + onSubmit, + username, + tempPassword = '', + showTerms = false, + title, + subtitle, + isLogin = false, + autoFocus = false, +}) => { + const classes = useStyles(); + + const [isPasswordVisible, setPasswordVisible] = useState(false); + const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); + const [password, setPassword] = useState(tempPassword); + const [confirmPassword, setConfirmPassword] = useState(''); + const [isCharacters, setCharacters] = useState(false); + const [isMatch, setMatch] = useState(false); + const [isCheck, setCheck] = useState(!showTerms); + const [isLoading, setLoading] = useState(false); + const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); + const [showError, setShowError] = useState(false); + const [helperText, setHelperText] = useState(
); + const [helperMatch, setHelperMatch] = useState(
); + + const loadTempPassword = useCallback(async () => { + if (tempPassword) { + setPassword(tempPassword); } - }; + }, [tempPassword]); - return ( - - - - - - - {level(score).text} - - + useEffect(() => { + loadTempPassword(); + }, [loadTempPassword]); + + const successInfo = (message: string) => ( + + + + {message} + ); -}; -// Password Input Component -interface PasswordInputProps { - value: string; - onChange: (value: string) => void; - isVisible: boolean; - setVisible: (visible: boolean) => void; - readOnly?: boolean; - placeholder?: string; - autoFocus?: boolean; - className?: string; -} - -export const PasswordInput = ({ - value, - onChange, - isVisible, - setVisible, - readOnly = false, - placeholder = chrome.i18n.getMessage('Create__a__password'), - autoFocus = false, - className, -}: PasswordInputProps) => { - const classes = useStyles(); - - return ( - onChange(e.target.value)} - endAdornment={ - - {value && } - setVisible(!isVisible)}> - {isVisible ? : } - - - } - /> + const errorInfo = (message: string) => ( + + + + {message} + + ); -}; -// Terms Checkbox Component -interface TermsCheckboxProps { - onChange: (checked: boolean) => void; -} + const handleSubmit = async () => { + setLoading(true); + try { + await onSubmit(password); + setLoading(false); + } catch (error) { + console.log('error', error); + setErrorMessage(error.message || errMessage); + setShowError(true); + setLoading(false); + } + }; -export const TermsCheckbox = ({ onChange }: TermsCheckboxProps) => ( - } - checkedIcon={} - onChange={(event) => onChange(event.target.checked)} - /> + useEffect(() => { + if (password.length > 7) { + setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(true); + } else { + setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); + setCharacters(false); } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - + }, [password]); + + useEffect(() => { + if (!tempPassword) { + if (confirmPassword === password) { + setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); + setMatch(true); + } else { + setMatch(false); + setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); + } + } else { + setMatch(true); // Auto-match when using tempPassword } - /> -); - -// Error Snackbar Component -interface ErrorSnackbarProps { - open: boolean; - message: string; - onClose: () => void; -} + }, [confirmPassword, password, tempPassword]); -export const ErrorSnackbar = ({ open, message, onClose }: ErrorSnackbarProps) => ( - - - {message} - - -); - -// Submit Button Component -interface SubmitButtonProps { - onClick: () => void; - isLoading: boolean; - disabled: boolean; - isLogin?: boolean; -} + return ( + <> + + + {title || ( + <> + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + )} + + + {subtitle || + chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + -export const SubmitButton = ({ - onClick, - isLoading, - disabled, - isLogin = false, -}: SubmitButtonProps) => ( - -); + + + + + {helperText} + + + {!tempPassword && ( + + + + {helperMatch} + + + )} + + + + {showTerms && } + + + + + setShowError(false)} /> + + ); +}; + +export default SetPassword; diff --git a/src/ui/FRWComponent/LandingPages/WelcomePage.tsx b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx index 7a84ff3f..4323d394 100644 --- a/src/ui/FRWComponent/LandingPages/WelcomePage.tsx +++ b/src/ui/FRWComponent/LandingPages/WelcomePage.tsx @@ -7,7 +7,7 @@ import appicon from '@/ui/FRWAssets/image/appicon.png'; import create from '@/ui/FRWAssets/svg/create.svg'; import importPng from '@/ui/FRWAssets/svg/import.svg'; import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; interface WelcomeLayoutProps { registerPath: string; diff --git a/src/ui/FRWComponent/LandingPages/index.ts b/src/ui/FRWComponent/LandingPages/index.ts deleted file mode 100644 index 79047df2..00000000 --- a/src/ui/FRWComponent/LandingPages/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { default as AllSet } from './AllSet'; -export { default as PickUsername } from './PickUsername'; -export { default as RepeatPhrase } from './RepeatPhrase'; -export { default as RegisterHeader } from './RegisterHeader'; -export { default as WelcomePage } from './WelcomePage'; -export { default as LandingComponents } from './LandingComponents'; diff --git a/src/ui/views/LandingPages/Forgot/Recover/index.tsx b/src/ui/views/LandingPages/Forgot/Recover/index.tsx index c7e133e7..f95547fa 100644 --- a/src/ui/views/LandingPages/Forgot/Recover/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Recover/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/LandingPages/Forgot/Reset/index.tsx b/src/ui/views/LandingPages/Forgot/Reset/index.tsx index 363fdb89..c3a2fe11 100644 --- a/src/ui/views/LandingPages/Forgot/Reset/index.tsx +++ b/src/ui/views/LandingPages/Forgot/Reset/index.tsx @@ -3,7 +3,7 @@ import { Box } from '@mui/system'; import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/LandingPages/Forgot/index.tsx b/src/ui/views/LandingPages/Forgot/index.tsx index d17e1226..f57850bb 100644 --- a/src/ui/views/LandingPages/Forgot/index.tsx +++ b/src/ui/views/LandingPages/Forgot/index.tsx @@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'; import recover from '@/ui/FRWAssets/svg/recover.svg'; import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; -import { RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; const Forgot = () => { return ( diff --git a/src/ui/views/LandingPages/RecoverRegister/index.tsx b/src/ui/views/LandingPages/RecoverRegister/index.tsx index 0976d766..95982050 100644 --- a/src/ui/views/LandingPages/RecoverRegister/index.tsx +++ b/src/ui/views/LandingPages/RecoverRegister/index.tsx @@ -7,7 +7,8 @@ import { useHistory } from 'react-router-dom'; import { storage } from '@/background/webapi'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { PickUsername, AllSet } from '@/ui/FRWComponent/LandingPages'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import lilicoIcon from '../../../../../_raw/images/icon-48.png'; diff --git a/src/ui/views/LandingPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx index e292a6cf..006c26e5 100644 --- a/src/ui/views/LandingPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -4,7 +4,8 @@ import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx similarity index 91% rename from src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx rename to src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx index adf4d45e..30faa3a5 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/ImportPager.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx @@ -2,10 +2,10 @@ import * as bip39 from 'bip39'; import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import BaseImportPager from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportPager'; +import ImportTabsComponent from '@/ui/FRWComponent/LandingPages/ImportComponents/ImportTabsComponent'; import { useWallet } from '@/ui/utils'; -const ImportPager = ({ +const ImportTabs = ({ setMnemonic, setPk, setAccounts, @@ -55,7 +55,7 @@ const ImportPager = ({ }; return ( - ({ - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accounts, goEnd }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - const [notBot, setNotBot] = useState(true); - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isMatch, setMatch] = useState(false); - - const loadTempPassword = useCallback(async () => { - setPassword(tempPassword); - }, [tempPassword]); - - useEffect(() => { - loadTempPassword(); - }, [loadTempPassword]); - - const successInfo = (message) => ( - - - - {message} - - - ); - - const errorInfo = (message) => ( - - - - {message} - - - ); - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const handleImport = async () => { - setLoading(true); - try { - const accountKeyStruct = { - public_key: accounts[0].pubK, - sign_algo: getSignAlgo(accounts[0].signAlgo), - hash_algo: getHashAlgo(accounts[0].hashAlgo), - weight: 1000, - }; - const result = await wallet.openapi.getLocation(); - const installationId = await wallet.openapi.getInstallationId(); - const userlocation = result.data; - const device_info = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - user_agent: 'Chrome', - zip: userlocation.zip, - }; - const address = accounts[0].address.replace(/^0x/, ''); - - await wallet.openapi.importKey(accountKeyStruct, device_info, username, {}, address); - await wallet.boot(password); - storage.remove('premnemonic'); - await saveIndex(username); - - if (pk) { - await wallet.importPrivateKey(pk); - goEnd(); - } else { - await wallet.createKeyringWithMnemonics(mnemonic); - handleClick(); - } - setLoading(false); - } catch (error) { - console.log('error', error); - setShowError(true); - setLoading(false); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (!tempPassword) { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - } else { - setMatch(true); // Auto-match when using tempPassword - } - }, [confirmPassword, password, tempPassword]); - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - - - {helperText} - - - {!tempPassword && ( - - - - {helperMatch} - - - )} - - - - - - - - - setShowError(false)} /> - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx index 57cadb6f..6b152b4f 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx @@ -2,16 +2,29 @@ import { Snackbar, Alert, Box } from '@mui/material'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { AllSet, PickUsername, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; +import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; +import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; -import { LLPinAlert } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; +import { useWallet, saveIndex } from 'ui/utils'; import GoogleBackup from './GoogleBackup'; -import ImportPager from './ImportPager'; +import ImportTabs from './ImportTabs'; import RecoverPassword from './RecoverPassword'; -import SetPassword from './SetPassword'; + +const STEPS = { + IMPORT: 'import', + PICK_USERNAME: 'pick_username', + SET_PASSWORD: 'set_password', + RECOVER_PASSWORD: 'recover_password', + GOOGLE_BACKUP: 'google_backup', + ALL_SET: 'all_set', +} as const; + +type StepType = (typeof STEPS)[keyof typeof STEPS]; const AddressImport = () => { const history = useHistory(); @@ -22,10 +35,12 @@ const AddressImport = () => { const [mnemonic, setMnemonic] = useState(''); const [pk, setPk] = useState(null); const [username, setUsername] = useState(''); + const [tempPassword, setTempPassword] = useState(''); const [password, setPassword] = useState(''); const [accounts, setAccounts] = useState([]); const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); const [showError, setShowError] = useState(false); + const [activeTab, setActiveTab] = useState(STEPS.IMPORT); const getUsername = (username: string) => { setUsername(username.toLowerCase()); @@ -34,13 +49,13 @@ const AddressImport = () => { const loadTempPassword = useCallback(async () => { const temp = await storage.get('tempPassword'); if (temp) { - setPassword(temp); + setTempPassword(temp); } }, []); useEffect(() => { loadTempPassword(); - }, []); + }, [loadTempPassword]); const loadView = useCallback(async () => { wallet @@ -66,59 +81,130 @@ const AddressImport = () => { setShowError(false); }; + const submitPassword = async (newPassword: string) => { + setPassword(newPassword); + const accountKeyStruct = { + public_key: accounts[0].pubK, + sign_algo: getSignAlgo(accounts[0].signAlgo), + hash_algo: getHashAlgo(accounts[0].hashAlgo), + weight: 1000, + }; + + const installationId = await wallet.openapi.getInstallationId(); + + const device_info = { + device_id: installationId, + device_name: navigator.userAgent, + device_type: 'extension', + push_token: '', + platform: 'chrome', + }; + + const address = accounts[0].address.replace(/^0x/, ''); + await wallet.openapi.importKey(accountKeyStruct, device_info, username, {}, address); + await wallet.boot(newPassword); + storage.remove('premnemonic'); + await saveIndex(username); + + if (pk) { + await wallet.importPrivateKey(pk); + navigation.goCustom(5); + } else { + await wallet.createKeyringWithMnemonics(mnemonic); + navigation.goCustom(4); + } + }; + + const goBack = () => { + console.log('activeTab', activeTab); + switch (activeTab) { + case STEPS.PICK_USERNAME: + setActiveTab(STEPS.IMPORT); + break; + case STEPS.SET_PASSWORD: + setActiveTab(STEPS.PICK_USERNAME); + break; + case STEPS.RECOVER_PASSWORD: + setActiveTab(STEPS.IMPORT); + break; + case STEPS.GOOGLE_BACKUP: + history.goBack(); + default: + history.goBack(); + } + }; + return ( - - navigation.goCustom(3)} - handleClick={navigation.goNext} - setErrorMessage={setErrorMessage} - setShowError={setShowError} - /> - - navigation.goCustom(4)} - tempPassword={password} - mnemonic={mnemonic} - pk={pk} - username={username} - accounts={accounts} - goEnd={() => navigation.goCustom(5)} - /> - navigation.goCustom(5)} - accountKey={accounts} - /> - - - + + {activeTab === STEPS.IMPORT && ( + setActiveTab(STEPS.RECOVER_PASSWORD)} + handleClick={() => setActiveTab(STEPS.PICK_USERNAME)} + setErrorMessage={setErrorMessage} + setShowError={setShowError} + /> + )} + + {activeTab === STEPS.PICK_USERNAME && ( + setActiveTab(STEPS.SET_PASSWORD)} + savedUsername={username} + getUsername={getUsername} + /> + )} + + {activeTab === STEPS.SET_PASSWORD && ( + setActiveTab(STEPS.GOOGLE_BACKUP)} + onSubmit={submitPassword} + tempPassword={tempPassword} + isLogin={true} + /> + )} + + {activeTab === STEPS.RECOVER_PASSWORD && ( + setActiveTab(STEPS.GOOGLE_BACKUP)} + mnemonic={mnemonic} + pk={pk} + tempPassword={tempPassword} + goEnd={() => setActiveTab(STEPS.ALL_SET)} + accountKey={accounts} + /> + )} + + {activeTab === STEPS.GOOGLE_BACKUP && ( + setActiveTab(STEPS.ALL_SET)} + mnemonic={mnemonic} + username={username} + password={password} + /> + )} + + {activeTab === STEPS.ALL_SET && window.close()} />} + + + + + {errMessage} + + ); }; diff --git a/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx index dcaf15a3..1bd14275 100644 --- a/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx @@ -1,7 +1,8 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import { useNavigation, PageSlider } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; diff --git a/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx index 2120c8c2..27478e07 100644 --- a/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx +++ b/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx @@ -4,7 +4,8 @@ import React, { useState, useEffect, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; import Confetti from '@/ui/FRWComponent/Confetti'; -import { AllSet, RegisterHeader } from '@/ui/FRWComponent/LandingPages'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; import { LLPinAlert } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; diff --git a/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx deleted file mode 100644 index 975574be..00000000 --- a/src/ui/views/LandingPages/Welcome/Register/SetPassword.tsx +++ /dev/null @@ -1,245 +0,0 @@ -import { Typography, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useState } from 'react'; - -import { storage } from '@/background/webapi'; -import { - PasswordInput, - TermsCheckbox, - ErrorSnackbar, - SubmitButton, -} from '@/ui/FRWComponent/LandingPages/SetPassword'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassword = '' }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - const [password, setPassword] = useState(tempPassword); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - const [notBot, setNotBot] = useState(true); - const [errMessage, setErrorMessage] = useState('Something wrong, please try again'); - const [showError, setShowError] = useState(false); - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - const handleErrorClose = () => setShowError(false); - - const register = async () => { - setLoading(true); - - await saveIndex(username); - const accountKey = getAccountKey(mnemonic); - wallet.openapi - .register(accountKey, username) - .then((response) => { - return wallet.boot(password); - }) - .then((response) => { - setExPassword(password); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(mnemonic); - }) - .then((accounts) => { - handleClick(); - return wallet.openapi.createFlowAddress(); - }) - .then((address) => { - setLoading(false); - }) - .catch((error) => { - console.log('error', error); - setShowError(true); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (!tempPassword) { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - } else { - setMatch(true); // Auto-match when using tempPassword - } - }, [confirmPassword, password, tempPassword]); - - return ( - <> - - - {tempPassword ? ( - chrome.i18n.getMessage('Confirm__Password') - ) : ( - <> - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Password')} - - - )} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - - - {helperText} - - - {!tempPassword && ( - - - - {helperMatch} - - - )} - - - - - - - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/Register/index.tsx b/src/ui/views/LandingPages/Welcome/Register/index.tsx index 60871320..9c09187d 100644 --- a/src/ui/views/LandingPages/Welcome/Register/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Register/index.tsx @@ -1,28 +1,39 @@ +import { Box } from '@mui/material'; import * as bip39 from 'bip39'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { - PickUsername, - RepeatPhrase, - AllSet, - LandingComponents, -} from '@/ui/FRWComponent/LandingPages'; -import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; +import { getAccountKey } from '@/shared/utils/address'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; +import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; +import RepeatPhrase from '@/ui/FRWComponent/LandingPages/RepeatPhrase'; +import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; import { storage } from 'background/webapi'; -import { useWallet } from 'ui/utils'; +import { saveIndex, useWallet } from 'ui/utils'; import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; -import SetPassword from './SetPassword'; + +const STEPS = { + USERNAME: 'username', + RECOVERY: 'recovery', + REPEAT: 'repeat', + PASSWORD: 'password', + BACKUP: 'backup', + ALL_SET: 'all_set', +} as const; + +type StepType = (typeof STEPS)[keyof typeof STEPS]; const Register = () => { const history = useHistory(); const wallet = useWallet(); - const { activeIndex, direction, goNext, goBack } = useNavigation(5); + const [activeTab, setActiveTab] = useState(STEPS.USERNAME); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [mnemonic] = useState(bip39.generateMnemonic()); + const [tempPassword, setTempPassword] = useState(''); const getUsername = (username: string) => { setUsername(username.toLowerCase()); @@ -44,10 +55,44 @@ const Register = () => { const loadTempPassword = useCallback(async () => { const temp = await storage.get('tempPassword'); if (temp) { - setPassword(temp); + setTempPassword(temp); } }, []); + const submitPassword = useCallback( + async (newPassword: string) => { + setPassword(newPassword); + await saveIndex(username); + const accountKey = getAccountKey(mnemonic); + await wallet.openapi.register(accountKey, username); + await wallet.boot(newPassword); + storage.remove('premnemonic'); + await wallet.createKeyringWithMnemonics(mnemonic); + await wallet.openapi.createFlowAddress(); + setActiveTab(STEPS.BACKUP); + }, + [username, mnemonic, wallet] + ); + + const goBack = () => { + switch (activeTab) { + case STEPS.RECOVERY: + setActiveTab(STEPS.USERNAME); + break; + case STEPS.REPEAT: + setActiveTab(STEPS.RECOVERY); + break; + case STEPS.PASSWORD: + setActiveTab(STEPS.REPEAT); + break; + case STEPS.BACKUP: + setActiveTab(STEPS.PASSWORD); + break; + default: + history.goBack(); + } + }; + useEffect(() => { loadView(); loadTempPassword(); @@ -55,32 +100,52 @@ const Register = () => { return ( - - - - - - - - + + {activeTab === STEPS.USERNAME && ( + setActiveTab(STEPS.RECOVERY)} + savedUsername={username} + getUsername={getUsername} + /> + )} + + {activeTab === STEPS.RECOVERY && ( + setActiveTab(STEPS.REPEAT)} mnemonic={mnemonic} /> + )} + + {activeTab === STEPS.REPEAT && ( + setActiveTab(STEPS.PASSWORD)} mnemonic={mnemonic} /> + )} + + {activeTab === STEPS.PASSWORD && ( + setActiveTab(STEPS.BACKUP)} + onSubmit={submitPassword} + username={username} + tempPassword={tempPassword} + showTerms={true} + autoFocus={true} + /> + )} + + {activeTab === STEPS.BACKUP && ( + setActiveTab(STEPS.ALL_SET)} + mnemonic={mnemonic} + username={username} + password={password} + /> + )} + + {activeTab === STEPS.ALL_SET && window.close()} variant="add" />} + ); }; diff --git a/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx deleted file mode 100644 index b2e24135..00000000 --- a/src/ui/views/LandingPages/Welcome/Sync/SetPassword.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import { Typography, FormGroup } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; - -import { storage } from '@/background/webapi'; -import { - PasswordInput, - ErrorSnackbar, - SubmitButton, -} from '@/ui/FRWComponent/LandingPages/SetPassword'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles(() => ({ - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const SetPassword = ({ handleClick, mnemonic, username, setUsername, accountKey, deviceInfo }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isLoading, setLoading] = useState(false); - const [errorMessage, setErrorMessage] = useState('Something went wrong'); - const [showError, setShowError] = useState(false); - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const successInfo = (message) => ( - - - - {message} - - - ); - - const errorInfo = (message) => ( - - - - {message} - - - ); - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - try { - await wallet.signInV3(mnemonic, accountKey, deviceInfo); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - await saveIndex(userInfo.username); - await wallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleClick(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - - - {helperText} - - - - - - {helperMatch} - - - - - - - - - setShowError(false)} /> - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/Sync/index.tsx b/src/ui/views/LandingPages/Welcome/Sync/index.tsx index 503c66ab..c1679230 100644 --- a/src/ui/views/LandingPages/Welcome/Sync/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Sync/index.tsx @@ -1,18 +1,26 @@ +import { Box } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; -import { AllSet, LandingComponents } from '@/ui/FRWComponent/LandingPages'; -import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; -import { useWallet } from 'ui/utils'; +import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; +import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; +import { useWallet, saveIndex } from 'ui/utils'; -import SetPassword from './SetPassword'; import SyncQr from './SyncQr'; +const STEPS = { + QR: 'qr', + PASSWORD: 'password', + ALL_SET: 'all_set', +} as const; + +type StepType = (typeof STEPS)[keyof typeof STEPS]; + const Sync = () => { const history = useHistory(); const wallet = useWallet(); - - const { activeIndex, direction, goNext, goBack } = useNavigation(2); + const [activeTab, setActiveTab] = useState(STEPS.QR); const [username, setUsername] = useState(''); const [mnemonic, setMnemonic] = useState(''); const [accountKey, setAccountKey] = useState(null); @@ -39,34 +47,76 @@ const Sync = () => { loadView(); }, [loadView]); + const submitPassword = useCallback( + async (password: string) => { + await wallet.signInV3(mnemonic, accountKey, deviceInfo); + const userInfo = await wallet.getUserInfo(true); + setUsername(userInfo.username); + await saveIndex(userInfo.username); + await wallet.boot(password); + const formatted = mnemonic.trim().split(/\s+/g).join(' '); + await wallet.createKeyringWithMnemonics(formatted); + setActiveTab(STEPS.ALL_SET); + }, + [wallet, mnemonic, accountKey, deviceInfo, setUsername] + ); + + const goBack = () => { + switch (activeTab) { + case STEPS.PASSWORD: + setActiveTab(STEPS.QR); + break; + case STEPS.ALL_SET: + setActiveTab(STEPS.PASSWORD); + break; + default: + history.goBack(); + } + }; + return ( - - - - - + + {activeTab === STEPS.QR && ( + setActiveTab(STEPS.PASSWORD)} + savedUsername={username} + confirmMnemonic={setMnemonic} + setUsername={getUsername} + setAccountKey={setAccountKey} + setDeviceInfo={setDeviceInfo} + /> + )} + + {activeTab === STEPS.PASSWORD && ( + setActiveTab(STEPS.ALL_SET)} + onSubmit={submitPassword} + username={username} + title={ + <> + {chrome.i18n.getMessage('Welcome__Back')} + + {username} + + + } + isLogin={true} + autoFocus={true} + /> + )} + + {activeTab === STEPS.ALL_SET && ( + window.close()} variant="sync" /> + )} + ); }; diff --git a/src/ui/views/LandingPages/Welcome/index.tsx b/src/ui/views/LandingPages/Welcome/index.tsx index beffff3c..c78f671a 100644 --- a/src/ui/views/LandingPages/Welcome/index.tsx +++ b/src/ui/views/LandingPages/Welcome/index.tsx @@ -1,14 +1,239 @@ +import { Typography, Button, CardMedia } from '@mui/material'; +import { Box } from '@mui/system'; import React from 'react'; +import { Link } from 'react-router-dom'; -import { WelcomePage } from '@/ui/FRWComponent/LandingPages'; +import appicon from '@/ui/FRWAssets/image/appicon.png'; +import create from '@/ui/FRWAssets/svg/create.svg'; +import importPng from '@/ui/FRWAssets/svg/import.svg'; +import qr from '@/ui/FRWAssets/svg/scanIcon.svg'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; const Welcome = () => { return ( - + + + + + + + + + + + + {chrome.i18n.getMessage('Welcome_to_lilico')} + + + + {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} + + {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} + + + + + + + + + + + + + + ); }; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 5ec7de77..c111f1cd 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -26,7 +26,6 @@ export const MainRoute: React.FC = () => { - From ae9c2406474b03b42442b44c818ba68d99695793 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 01:05:02 +1100 Subject: [PATCH 29/41] fixed: update folder structure and files --- src/ui/FRWComponent/LandingPages/AllSet.tsx | 6 +- .../ImportComponents/Googledrive.tsx | 2 +- .../ImportComponents/ImportTabsComponent.tsx | 120 ----------------- .../LandingPages/PickUsername.tsx | 4 +- .../LandingPages/RepeatPhrase.tsx | 4 +- .../FRWComponent/LandingPages/SetPassword.tsx | 4 +- .../Forgot/Recover/RecoverPage.tsx | 4 +- .../LandingPages/Forgot/Recover/ShowKey.tsx | 2 +- .../LandingPages/Forgot/Recover/index.tsx | 2 +- .../RecoverRegister/RecoveryPhrase.tsx | 4 +- .../RecoverRegister/SetPassword.tsx | 4 +- .../LandingPages/RecoverRegister/index.tsx | 12 +- .../LandingPages/Reset/RecoverPassword.tsx | 4 +- .../Reset/ResetRecoveryPhrase.tsx | 4 +- src/ui/views/LandingPages/Reset/index.tsx | 8 +- .../Google}/DecryptWallet.tsx | 10 +- .../Google}/GoogleAccounts.tsx | 10 +- .../Google}/RecoverPassword.tsx | 16 +-- .../Google}/RecoveryPhrase.tsx | 6 +- .../Welcome/AddressImport/Google/index.tsx | 121 ++++++++++++++++++ .../Welcome/AddressImport/GoogleBackup.tsx | 6 +- .../Welcome/AddressImport/ImportTabs.tsx | 120 ++++++++++++++--- .../Welcome/AddressImport/RecoverPassword.tsx | 22 ++-- .../Welcome/AddressImport/index.tsx | 30 ++--- .../Welcome/GoogleImport/index.tsx | 69 ---------- .../Welcome/ProxySync/ProxyQr.tsx | 14 +- .../Welcome/ProxySync/SetPassword.tsx | 12 +- .../LandingPages/Welcome/ProxySync/index.tsx | 12 +- .../Welcome/Register/GoogleBackup.tsx | 6 +- .../Welcome/Register/RecoveryPhrase.tsx | 4 +- .../LandingPages/Welcome/Register/index.tsx | 30 +++-- .../LandingPages/Welcome/Sync/SyncQr.tsx | 8 +- .../views/LandingPages/Welcome/Sync/index.tsx | 22 ++-- src/ui/views/MainRoute.tsx | 4 +- 34 files changed, 366 insertions(+), 340 deletions(-) delete mode 100644 src/ui/FRWComponent/LandingPages/ImportComponents/ImportTabsComponent.tsx rename src/ui/views/LandingPages/Welcome/{GoogleImport => AddressImport/Google}/DecryptWallet.tsx (95%) rename src/ui/views/LandingPages/Welcome/{GoogleImport => AddressImport/Google}/GoogleAccounts.tsx (92%) rename src/ui/views/LandingPages/Welcome/{GoogleImport => AddressImport/Google}/RecoverPassword.tsx (95%) rename src/ui/views/LandingPages/Welcome/{GoogleImport => AddressImport/Google}/RecoveryPhrase.tsx (97%) create mode 100644 src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/GoogleImport/index.tsx diff --git a/src/ui/FRWComponent/LandingPages/AllSet.tsx b/src/ui/FRWComponent/LandingPages/AllSet.tsx index 366514d4..65e79495 100644 --- a/src/ui/FRWComponent/LandingPages/AllSet.tsx +++ b/src/ui/FRWComponent/LandingPages/AllSet.tsx @@ -7,11 +7,11 @@ import AllSetIcon from 'ui/FRWAssets/svg/allset.svg'; import { useWallet } from 'ui/utils'; interface AllSetProps { - handleClick: () => void; + handleSwitchTab: () => void; variant?: 'register' | 'recover' | 'sync' | 'add'; } -const AllSet = ({ handleClick, variant = 'register' }: AllSetProps) => { +const AllSet = ({ handleSwitchTab, variant = 'register' }: AllSetProps) => { const usewallet = useWallet(); const loadScript = useCallback(async () => { @@ -68,7 +68,7 @@ const AllSet = ({ handleClick, variant = 'register' }: AllSetProps) => {
From c63c5eed5e784f8115ea6118eeacb3649567b73d Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 01:05:13 +1100 Subject: [PATCH 30/41] fixed: import order --- .../views/LandingPages/Welcome/AddressImport/Google/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx index 860e8a7d..b7279139 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx @@ -1,6 +1,6 @@ +import { Box } from '@mui/material'; import React, { useCallback, useEffect, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { Box } from '@mui/material'; import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; From 066f4614954589481d96ed02f01aa6e50f386a13 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 16:06:23 +1100 Subject: [PATCH 31/41] fixed: move savestorage util func to background --- .../controller/provider/controller.ts | 1 - src/background/controller/wallet.ts | 25 + src/ui/utils/__tests__/index.test.ts | 1 - src/ui/utils/index.ts | 2 - src/ui/utils/saveStorage.ts | 26 -- .../AddressImport/Google/RecoverPassword.tsx | 4 +- .../Welcome/AddressImport/RecoverPassword.tsx | 4 +- .../Welcome/AddressImport/index.tsx | 6 +- .../Welcome/ProxySync/ProxyQr.tsx | 428 ------------------ .../Welcome/ProxySync/SetPassword.tsx | 380 ---------------- .../LandingPages/Welcome/ProxySync/index.tsx | 162 ------- .../LandingPages/Welcome/Register/index.tsx | 4 +- .../views/LandingPages/Welcome/Sync/index.tsx | 4 +- 13 files changed, 36 insertions(+), 1011 deletions(-) delete mode 100644 src/ui/utils/saveStorage.ts delete mode 100644 src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/ProxySync/index.tsx diff --git a/src/background/controller/provider/controller.ts b/src/background/controller/provider/controller.ts index ff07a350..a81649d6 100644 --- a/src/background/controller/provider/controller.ts +++ b/src/background/controller/provider/controller.ts @@ -568,7 +568,6 @@ class ProviderController extends BaseController { const hash = TypedDataUtils.eip712Hash(message, SignTypedDataVersion.V4); - console.log('SignTypedDataVersion.V4 ', hash); const result = await signTypeData(hash); signTextHistoryService.createHistory({ address: address, diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index 926f2963..af399b3c 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -4125,6 +4125,31 @@ export class WalletController extends BaseController { decodeEvmCall = async (callData: string, address = '') => { return await openapiService.decodeEvmCall(callData, address); }; + + saveIndex = async (username = '', userId = null) => { + const loggedInAccounts = (await storage.get('loggedInAccounts')) || []; + let currentindex = 0; + + if (!loggedInAccounts || loggedInAccounts.length === 0) { + currentindex = 0; + } else { + const index = loggedInAccounts.findIndex((account) => account.username === username); + currentindex = index !== -1 ? index : loggedInAccounts.length; + } + + const path = (await storage.get('temp_path')) || "m/44'/539'/0'/0/0"; + const passphrase = (await storage.get('temp_phrase')) || ''; + await storage.set(`user${currentindex}_path`, path); + await storage.set(`user${currentindex}_phrase`, passphrase); + await storage.set(`user${userId}_path`, path); + await storage.set(`user${userId}_phrase`, passphrase); + await storage.remove(`temp_path`); + await storage.remove(`temp_phrase`); + await storage.set('currentAccountIndex', currentindex); + if (userId) { + await storage.set('currentId', userId); + } + }; } export default new WalletController(); diff --git a/src/ui/utils/__tests__/index.test.ts b/src/ui/utils/__tests__/index.test.ts index 9613c48d..2e6ac0d3 100644 --- a/src/ui/utils/__tests__/index.test.ts +++ b/src/ui/utils/__tests__/index.test.ts @@ -1,4 +1,3 @@ -// Import from the mocked module import { HexToDecimalConverter } from '../../utils'; describe('HexToDecimalConverter', () => { diff --git a/src/ui/utils/index.ts b/src/ui/utils/index.ts index 264282c3..9d09d01a 100644 --- a/src/ui/utils/index.ts +++ b/src/ui/utils/index.ts @@ -13,8 +13,6 @@ export * from './time'; export * from './number'; -export * from './saveStorage'; - const UI_TYPE = { Tab: 'index', Pop: 'popup', diff --git a/src/ui/utils/saveStorage.ts b/src/ui/utils/saveStorage.ts deleted file mode 100644 index 0f5196ee..00000000 --- a/src/ui/utils/saveStorage.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { storage } from 'background/webapi'; - -export const saveIndex = async (username = '', userId = null) => { - const loggedInAccounts = (await storage.get('loggedInAccounts')) || []; - let currentindex = 0; - - if (!loggedInAccounts || loggedInAccounts.length === 0) { - currentindex = 0; - } else { - const index = loggedInAccounts.findIndex((account) => account.username === username); - currentindex = index !== -1 ? index : loggedInAccounts.length; - } - - const path = (await storage.get('temp_path')) || "m/44'/539'/0'/0/0"; - const passphrase = (await storage.get('temp_phrase')) || ''; - await storage.set(`user${currentindex}_path`, path); - await storage.set(`user${currentindex}_phrase`, passphrase); - await storage.set(`user${userId}_path`, path); - await storage.set(`user${userId}_phrase`, passphrase); - await storage.remove(`temp_path`); - await storage.remove(`temp_phrase`); - await storage.set('currentAccountIndex', currentindex); - if (userId) { - await storage.set('currentId', userId); - } -}; diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx index 4c784ad7..17cb0a8f 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx @@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; import CancelIcon from '../../../../../../components/iconfont/IconClose'; @@ -201,7 +201,7 @@ const SetPassword = ({ handleSwitchTab, mnemonic, username, lastPassword }) => { const login = async () => { setLoading(true); - await saveIndex(username); + await usewallet.saveIndex(username); try { await usewallet.signInWithMnemonic(mnemonic); await usewallet.boot(password); diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx index 4a392846..ea1a8bfd 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx @@ -17,7 +17,7 @@ import React, { useEffect, useState } from 'react'; import zxcvbn from 'zxcvbn'; import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; @@ -198,7 +198,7 @@ const SetPassword = ({ handleSwitchTab, mnemonic, pk, tempPassword, goLast, acco const login = async () => { setLoading(true); - await saveIndex(username); + await usewallet.saveIndex(username); try { await usewallet.boot(password); if (pk) { diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx index 7f7ed580..59fea997 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx @@ -7,9 +7,9 @@ import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; -import { PageSlider, useNavigation } from '@/ui/utils/landingPage'; +import { useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import GoogleBackup from './GoogleBackup'; import ImportTabs from './ImportTabs'; @@ -104,7 +104,7 @@ const AddressImport = () => { await usewallet.openapi.importKey(accountKeyStruct, device_info, username, {}, address); await usewallet.boot(newPassword); storage.remove('premnemonic'); - await saveIndex(username); + await usewallet.saveIndex(username); if (pk) { await usewallet.importPrivateKey(pk); diff --git a/src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx deleted file mode 100644 index b9bd89b1..00000000 --- a/src/ui/views/LandingPages/Welcome/ProxySync/ProxyQr.tsx +++ /dev/null @@ -1,428 +0,0 @@ -import { Typography } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import { Core } from '@walletconnect/core'; -import SignClient from '@walletconnect/sign-client'; -import { type SessionTypes } from '@walletconnect/types'; -import * as bip39 from 'bip39'; -import React, { useEffect, useCallback, useState } from 'react'; -import { QRCode } from 'react-qrcode-logo'; - -import { FCLWalletConnectMethod } from '@/ui/utils/type'; -import { storage } from 'background/webapi'; -import lilo from 'ui/FRWAssets/image/lilo.png'; -import { useWallet } from 'ui/utils'; - -interface DeviceInfoRequest { - deviceId: string; - ip: string; - name: string; - type: string; - userAgent: string; - - continent?: string; - continentCode?: string; - country?: string; - countryCode?: string; - regionName?: string; - city?: string; - district?: string; - zip?: string; - lat?: number; - lon?: number; - timezone?: string; - currency?: string; - isp?: string; - org?: string; - device_id?: string; -} - -const useStyles = makeStyles((_theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const ProxyQr = ({ - handleSwitchTab, - savedUsername, - confirmMnemonic, - confirmPk, - setUsername, - setAccountKey, - setDeviceInfo, -}) => { - const usewallet = useWallet(); - const classes = useStyles(); - const [Uri, setUri] = useState(''); - const [web3wallet, setWeb3Wallet] = useState(null); - const [loading, setShowLoading] = useState(false); - const [session, setSession] = useState(); - const [mnemonic, setMnemonic] = useState(bip39.generateMnemonic()); - const [currentNetwork, setNetwork] = useState('mainnet'); - - const loadNetwork = useCallback(async () => { - const currentNetwork = await usewallet.getNetwork(); - setNetwork(currentNetwork); - }, [usewallet]); - - useEffect(() => { - loadNetwork(); - }, [loadNetwork]); - - const onSessionConnected = useCallback(async (_session: SessionTypes.Struct) => { - console.log('_session ', _session); - setShowLoading(true); - setSession(_session); - }, []); - - const _subscribeToEvents = useCallback( - async (_client: SignClient) => { - if (typeof _client === 'undefined') { - throw new Error('WalletConnect is not initialized'); - } - - _client.on('session_update', ({ topic, params }) => { - console.log('EVENT', 'session_update', { topic, params }); - const { namespaces } = params; - const _session = _client.session.get(topic); - const updatedSession = { ..._session, namespaces }; - onSessionConnected(updatedSession); - }); - console.log('EVENT _client ', _client); - }, - [onSessionConnected] - ); - - const getDeviceInfo = useCallback(async (): Promise => { - const result = await usewallet.openapi.getLocation(); - const installationId = await usewallet.openapi.getInstallationId(); - // console.log('location ', userlocation); - const userlocation = result.data; - const deviceInfo: DeviceInfoRequest = { - city: userlocation.city, - continent: userlocation.country, - continentCode: userlocation.countryCode, - country: userlocation.country, - countryCode: userlocation.countryCode, - currency: userlocation.countryCode, - deviceId: installationId, - device_id: installationId, - district: '', - ip: userlocation.query, - isp: userlocation.as, - lat: userlocation.lat, - lon: userlocation.lon, - name: 'FRW Chrome Extension', - org: userlocation.org, - regionName: userlocation.regionName, - type: '2', - userAgent: 'Chrome', - zip: userlocation.zip, - }; - return deviceInfo; - }, [usewallet]); - - const sendRequest = useCallback( - async (wallet: SignClient, topic: string) => { - console.log(wallet); - const deviceInfo: DeviceInfoRequest = await getDeviceInfo(); - const jwtToken = await usewallet.requestProxyToken(); - wallet - .request({ - topic: topic, - chainId: `flow:${currentNetwork}`, - request: { - method: FCLWalletConnectMethod.proxyaccount, - params: { - method: FCLWalletConnectMethod.proxyaccount, - data: { - deviceInfo: deviceInfo, - jwt: jwtToken, - }, - }, - }, - }) - .then(async (result: any) => { - console.log(result); - const jsonObject = JSON.parse(result); - const accountKey = { - public_key: jsonObject.data.publicKey, - hash_algo: Number(jsonObject.data.hashAlgo), - sign_algo: Number(jsonObject.data.signAlgo), - weight: Number(jsonObject.data.weight), - }; - usewallet.openapi.loginV3(accountKey, deviceInfo, jsonObject.data.signature); - storage.set(`${jsonObject.data.userId}Topic`, topic); - confirmMnemonic(mnemonic); - confirmPk(jsonObject.data.publicKey); - console.log('jsonObject ', jsonObject); - handleSwitchTab(); - }) - .catch((error) => { - console.error('Error in first wallet request:', error); - }); - }, - [ - usewallet, - currentNetwork, - confirmMnemonic, - confirmPk, - mnemonic, - handleSwitchTab, - getDeviceInfo, - ] - ); - - useEffect(() => { - const createWeb3Wallet = async () => { - try { - const wallet = await SignClient.init({ - // @ts-ignore: Unreachable code error - core: new Core({ - projectId: process.env.WC_PROJECTID, - }), - metadata: { - name: 'Flow Walllet', - description: 'Digital wallet created for everyone.', - url: 'https://fcw-link.lilico.app', - icons: ['https://fcw-link.lilico.app/logo.png'], - }, - }); - await _subscribeToEvents(wallet); - - try { - const { uri, approval } = await wallet.connect({ - requiredNamespaces: { - flow: { - methods: [ - FCLWalletConnectMethod.accountInfo, - FCLWalletConnectMethod.proxysign, - FCLWalletConnectMethod.proxyaccount, - FCLWalletConnectMethod.addDeviceInfo, - ], - chains: [`flow:${currentNetwork}`], - events: [], - }, - }, - }); - - // Open QRCode modal if a URI was returned (i.e. we're not connecting an existing pairing). - if (uri) { - console.log('uri ', uri); - await setUri(uri); - // Await session approval from the wallet. - const session = await approval(); - await onSessionConnected(session); - - sendRequest(wallet, session.topic); - - // onSessionConnect(session) - // Close the QRCode modal in case it was open. - } - } catch (e) { - console.error(e); - } - await setWeb3Wallet(wallet); - } catch (e) { - console.error(e); - } - }; - createWeb3Wallet(); - }, [_subscribeToEvents, currentNetwork, onSessionConnected, sendRequest]); - - return ( - <> - - - - - {chrome.i18n.getMessage('Sync_')}{' '} - - {chrome.i18n.getMessage('Lilico')} - - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage('Open_your_Flow_Reference_on_Mobil')} - - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - - {chrome.i18n.getMessage(' Note_Your_recovery_phrase_will_not')} - - - - - {/* - {Uri} - - {copySuccess && {copySuccess}} - */} - {Uri && ( - - - - - - {loading && ( - - - {chrome.i18n.getMessage('Scan_Successfully')} - - - {chrome.i18n.getMessage('Sync_in_Process')} - - - )} - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('Scan_QR_Code_with_Mobile')} - - - )} - - - - - {/* */} - - ); -}; - -export default ProxyQr; diff --git a/src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx deleted file mode 100644 index 861ca696..00000000 --- a/src/ui/views/LandingPages/Welcome/ProxySync/SetPassword.tsx +++ /dev/null @@ -1,380 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Input, - InputAdornment, - FormGroup, - LinearProgress, - Alert, - Snackbar, -} from '@mui/material'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; - -import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ - handleSwitchTab, - mnemonic, - publickey, - username, - setUsername, - accountKey, - deviceInfo, -}) => { - const classes = useStyles(); - const usewallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState('Somthing went wrong'); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const loadTempPassword = async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }; - - useEffect(() => { - loadTempPassword(); - }, []); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - - const register = async () => { - setLoading(true); - const userInfo = await usewallet.getUserInfo(true); - setUsername(userInfo.username); - await saveIndex(userInfo.username); - try { - await usewallet.boot(password); - await usewallet.createKeyringWithProxy(publickey, mnemonic); - setLoading(false); - handleSwitchTab(); - } catch (e) { - setLoading(false); - setErrorMessage(e.message); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - return ( - <> - - - - {chrome.i18n.getMessage('Welcome__Back')} - - {username} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - - - - {/* } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - I agree to the{' '} - - Privacy Policy - {' '} - and{' '} - - Terms of Service - {' '} - of Lilico Wallet. - - } - /> */} - - - - - - - {errorMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx b/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx deleted file mode 100644 index 4112692c..00000000 --- a/src/ui/views/LandingPages/Welcome/ProxySync/index.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useCallback } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; -import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import { LLPinAlert } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; - -import ProxyQr from './ProxyQr'; -import SetPassword from './SetPassword'; - -enum Direction { - Right, - Left, -} - -// TODO: not applied to the new landing page yet -const ProxySync = () => { - const history = useHistory(); - const usewallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [publickey, setPubkey] = useState(''); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - const [accountKey, setAccountKey] = useState(null); - const [deviceInfo, setDeviceInfo] = useState(null); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - usewallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [history, usewallet]); - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ( - - ); - case 2: - return ; - default: - return
; - } - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - <> - - {activeIndex === 2 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - - - - - - ); -}; - -export default ProxySync; diff --git a/src/ui/views/LandingPages/Welcome/Register/index.tsx b/src/ui/views/LandingPages/Welcome/Register/index.tsx index 7cdfbc15..ab4d659d 100644 --- a/src/ui/views/LandingPages/Welcome/Register/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Register/index.tsx @@ -10,7 +10,7 @@ import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; import RepeatPhrase from '@/ui/FRWComponent/LandingPages/RepeatPhrase'; import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; import { storage } from 'background/webapi'; -import { saveIndex, useWallet } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; @@ -62,7 +62,7 @@ const Register = () => { const submitPassword = useCallback( async (newPassword: string) => { setPassword(newPassword); - await saveIndex(username); + await usewallet.saveIndex(username); const accountKey = getAccountKey(mnemonic); await usewallet.openapi.register(accountKey, username); await usewallet.boot(newPassword); diff --git a/src/ui/views/LandingPages/Welcome/Sync/index.tsx b/src/ui/views/LandingPages/Welcome/Sync/index.tsx index 18a09397..d17cbcd2 100644 --- a/src/ui/views/LandingPages/Welcome/Sync/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Sync/index.tsx @@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom'; import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import SyncQr from './SyncQr'; @@ -52,7 +52,7 @@ const Sync = () => { await usewallet.signInV3(mnemonic, accountKey, deviceInfo); const userInfo = await usewallet.getUserInfo(true); setUsername(userInfo.username); - await saveIndex(userInfo.username); + await usewallet.saveIndex(userInfo.username); await usewallet.boot(password); const formatted = mnemonic.trim().split(/\s+/g).join(' '); await usewallet.createKeyringWithMnemonics(formatted); From 7bb0f6c2496c55301199a66dba5fd71588ee7b5c Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 16:31:21 +1100 Subject: [PATCH 32/41] fixed: update qrcode style --- .../RecoverRegister/SetPassword.tsx | 14 +- .../LandingPages/Reset/RecoverPassword.tsx | 10 +- .../LandingPages/Welcome/Sync/SyncQr.tsx | 240 +++++++++--------- 3 files changed, 126 insertions(+), 138 deletions(-) diff --git a/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx b/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx index bce570d3..c724be05 100644 --- a/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx +++ b/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx @@ -24,7 +24,7 @@ import { storage } from '@/background/webapi'; import { LLSpinner } from '@/ui/FRWComponent'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { type AccountKey } from 'background/service/networkModel'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; import CancelIcon from '../../../../components/iconfont/IconClose'; @@ -106,7 +106,7 @@ const PasswordIndicator = (props) => { const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isPasswordVisible, setPasswordVisible] = useState(false); const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); @@ -188,23 +188,23 @@ const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { const register = async () => { setLoading(true); - await saveIndex(username); + await usewallet.saveIndex(username); const accountKey = getAccountKey(mnemonic); - wallet.openapi + usewallet.openapi .register(accountKey, username) .then((response) => { setLoading(false); - return wallet.boot(password); + return usewallet.boot(password); }) .then((response) => { const formatted = mnemonic.trim().split(/\s+/g).join(' '); storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(formatted); + return usewallet.createKeyringWithMnemonics(formatted); }) .then((accounts) => { handleSwitchTab(); - return wallet.openapi.createFlowAddress(); + return usewallet.openapi.createFlowAddress(); }) .then((address) => { // console.log('address -->', address); diff --git a/src/ui/views/LandingPages/Reset/RecoverPassword.tsx b/src/ui/views/LandingPages/Reset/RecoverPassword.tsx index f7767172..c416382f 100644 --- a/src/ui/views/LandingPages/Reset/RecoverPassword.tsx +++ b/src/ui/views/LandingPages/Reset/RecoverPassword.tsx @@ -22,7 +22,7 @@ import zxcvbn from 'zxcvbn'; import { storage } from '@/background/webapi'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet, saveIndex } from 'ui/utils'; +import { useWallet } from 'ui/utils'; import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; import CancelIcon from '../../../../components/iconfont/IconClose'; @@ -135,7 +135,7 @@ const PasswordIndicator = (props) => { const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isPasswordVisible, setPasswordVisible] = useState(false); const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); const [showError, setShowError] = useState(false); @@ -194,11 +194,11 @@ const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { const signIn = async () => { setLoading(true); - await saveIndex(username); + await usewallet.saveIndex(username); try { - await wallet.boot(password); + await usewallet.boot(password); const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); + await usewallet.createKeyringWithMnemonics(formatted); setLoading(false); handleSwitchTab(); } catch (e) { diff --git a/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx b/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx index 958d6069..2a5f04d5 100644 --- a/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx +++ b/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx @@ -286,74 +286,63 @@ const SyncQr = ({ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', - px: '60px', - backgroundColor: '#222', + px: '24px', height: '380px', - width: '620px', + width: '100%', position: 'relative', borderRadius: '24px', }} > - - - {chrome.i18n.getMessage('Sync_')}{' '} - - {chrome.i18n.getMessage('Lilico')} - - + {chrome.i18n.getMessage('Sync_')}{' '} + + {chrome.i18n.getMessage('Lilico')} + + - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} + + {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('Open_your_Flow_Reference_on_Mobil')} - + {chrome.i18n.getMessage('Open_your_Flow_Reference_on_Mobil')} + - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} + + {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage(' Note_Your_recovery_phrase_will_not')} - - + {chrome.i18n.getMessage(' Note_Your_recovery_phrase_will_not')} + + - - {/* + + {/* Copy Uri {copySuccess && {copySuccess}} */} - {Uri && ( - - + {Uri && ( + + + + + + {loading && ( - - - {loading && ( - + {chrome.i18n.getMessage('Scan_Successfully')} + + - - {chrome.i18n.getMessage('Scan_Successfully')} - - - {chrome.i18n.getMessage('Sync_in_Process')} - - - )} - - - {/* {chrome.i18n.getMessage('appDescription')} {' '} */} - {chrome.i18n.getMessage('Scan_QR_Code_with_Mobile')} - + {chrome.i18n.getMessage('Sync_in_Process')} + + + )} - )} - + + {/* {chrome.i18n.getMessage('appDescription')} {' '} */} + {chrome.i18n.getMessage('Scan_QR_Code_with_Mobile')} + + + )} From c1214f7b8aa40b2a4d9b6897dcd1f94eaf154068 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 16:37:48 +1100 Subject: [PATCH 33/41] fixed: update directory name --- .../LandingPages/ImportComponents/Googledrive.tsx | 2 +- src/ui/views/LandingPages/Reset/index.tsx | 2 +- .../Google/DecryptWallet.tsx | 0 .../Google/GoogleAccounts.tsx | 0 .../Google/RecoverPassword.tsx | 0 .../Google/RecoveryPhrase.tsx | 0 .../{AddressImport => AccountImport}/Google/index.tsx | 0 .../{AddressImport => AccountImport}/GoogleBackup.tsx | 0 .../{AddressImport => AccountImport}/ImportTabs.tsx | 3 +-- .../{AddressImport => AccountImport}/RecoverPassword.tsx | 0 .../Welcome/{AddressImport => AccountImport}/index.tsx | 4 ++-- src/ui/views/LandingPages/Welcome/index.tsx | 2 +- src/ui/views/MainRoute.tsx | 8 ++++---- 13 files changed, 10 insertions(+), 11 deletions(-) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/Google/DecryptWallet.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/Google/GoogleAccounts.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/Google/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/Google/RecoveryPhrase.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/Google/index.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/GoogleBackup.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/ImportTabs.tsx (99%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/RecoverPassword.tsx (100%) rename src/ui/views/LandingPages/Welcome/{AddressImport => AccountImport}/index.tsx (99%) diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx index 2dcfe50c..da00ef04 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx +++ b/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx @@ -48,7 +48,7 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { if (accounts.length > 0) { history.push({ - pathname: '/welcome/addressimport/google', + pathname: '/welcome/accountimport/google', state: { accounts: accounts, }, diff --git a/src/ui/views/LandingPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx index 568e3839..877bee92 100644 --- a/src/ui/views/LandingPages/Reset/index.tsx +++ b/src/ui/views/LandingPages/Reset/index.tsx @@ -55,7 +55,7 @@ const Reset = () => { const accounts = await wallets.loadBackupAccounts(); if (accounts.length > 0) { history.push({ - pathname: '/welcome/addressimport/google', + pathname: '/welcome/accountimport/google', state: { accounts: accounts, }, diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/DecryptWallet.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/Google/DecryptWallet.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/Google/DecryptWallet.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/Google/DecryptWallet.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/GoogleAccounts.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/Google/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/Google/GoogleAccounts.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/Google/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoveryPhrase.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoveryPhrase.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/Google/RecoveryPhrase.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoveryPhrase.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/Google/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/Google/index.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/Google/index.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/GoogleBackup.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/ImportTabs.tsx similarity index 99% rename from src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/ImportTabs.tsx index cf27f5fc..c22ab70b 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/ImportTabs.tsx +++ b/src/ui/views/LandingPages/Welcome/AccountImport/ImportTabs.tsx @@ -1,13 +1,12 @@ import { Box, Tabs, Tab, Typography } from '@mui/material'; -import * as bip39 from 'bip39'; import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import Googledrive from '@/ui/FRWComponent/LandingPages/ImportComponents/Googledrive'; import JsonImport from '@/ui/FRWComponent/LandingPages/ImportComponents/JsonImport'; import KeyImport from '@/ui/FRWComponent/LandingPages/ImportComponents/KeyImport'; import SeedPhraseImport from '@/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport'; +import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { useWallet } from '@/ui/utils'; function TabPanel(props) { diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/RecoverPassword.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AddressImport/RecoverPassword.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/RecoverPassword.tsx diff --git a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx similarity index 99% rename from src/ui/views/LandingPages/Welcome/AddressImport/index.tsx rename to src/ui/views/LandingPages/Welcome/AccountImport/index.tsx index 59fea997..5d407b9b 100644 --- a/src/ui/views/LandingPages/Welcome/AddressImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx @@ -26,7 +26,7 @@ const STEPS = { type StepType = (typeof STEPS)[keyof typeof STEPS]; -const AddressImport = () => { +const AccountImport = () => { const history = useHistory(); const usewallet = useWallet(); @@ -209,4 +209,4 @@ const AddressImport = () => { ); }; -export default AddressImport; +export default AccountImport; diff --git a/src/ui/views/LandingPages/Welcome/index.tsx b/src/ui/views/LandingPages/Welcome/index.tsx index c78f671a..a9ca77a0 100644 --- a/src/ui/views/LandingPages/Welcome/index.tsx +++ b/src/ui/views/LandingPages/Welcome/index.tsx @@ -174,7 +174,7 @@ const Welcome = () => { variant="contained" color="secondary" component={Link} - to="/welcome/addressimport" + to="/welcome/accountimport" size="large" sx={{ display: 'flex', diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx index 22e84d55..68fc56a7 100644 --- a/src/ui/views/MainRoute.tsx +++ b/src/ui/views/MainRoute.tsx @@ -6,8 +6,8 @@ import Recover from './LandingPages/Forgot/Recover'; import Reset from './LandingPages/Forgot/Reset'; import RecoverRegister from './LandingPages/RecoverRegister'; import Welcome from './LandingPages/Welcome'; -import AddressImport from './LandingPages/Welcome/AddressImport'; -import Google from './LandingPages/Welcome/AddressImport/Google'; +import AccountImport from './LandingPages/Welcome/AccountImport'; +import Google from './LandingPages/Welcome/AccountImport/Google'; import Register from './LandingPages/Welcome/Register'; import Sync from './LandingPages/Welcome/Sync'; @@ -24,12 +24,12 @@ export const MainRoute: React.FC = () => { - + - +
From bb4bcc911535169ba47cd68b90c6ffa66ee6b5e7 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 16:52:41 +1100 Subject: [PATCH 34/41] fixed: add googlebackup component --- .../LandingPages/GoogleBackup.tsx | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 src/ui/FRWComponent/LandingPages/GoogleBackup.tsx diff --git a/src/ui/FRWComponent/LandingPages/GoogleBackup.tsx b/src/ui/FRWComponent/LandingPages/GoogleBackup.tsx new file mode 100644 index 00000000..23eef0ee --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/GoogleBackup.tsx @@ -0,0 +1,176 @@ +import InfoIcon from '@mui/icons-material/Info'; +import { Button, Typography } from '@mui/material'; +import { Box } from '@mui/system'; +import React, { useState } from 'react'; + +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; +import { LLSpinner } from 'ui/FRWComponent'; +import { useWallet } from 'ui/utils'; + +import IconGoogleDrive from '../../../components/iconfont/IconGoogleDrive'; + +interface GoogleBackupProps { + handleSwitchTab: () => void; + mnemonic: string; + username: string; + password: string; +} + +const GoogleBackup: React.FC = ({ + handleSwitchTab, + mnemonic, + username, + password, +}) => { + const wallets = useWallet(); + const [loading, setLoading] = useState(false); + const [backupErr, setBackupErr] = useState(false); + + const handleBackup = () => { + try { + setLoading(true); + setBackupErr(false); + wallets + .uploadMnemonicToGoogleDrive(mnemonic, username, password) + .then(() => { + setLoading(false); + handleSwitchTab(); + }) + .catch(() => { + setLoading(false); + setBackupErr(true); + }); + } catch (e) { + console.error(e); + setLoading(false); + } + }; + + return ( + + + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Back_up')} + + + + {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} + + + + + {chrome.i18n.getMessage('Recommend')} + + + + + {chrome.i18n.getMessage('Connect__To')} + + {chrome.i18n.getMessage('Google__Drive')} + + {chrome.i18n.getMessage('to_back_up_your_wallet')} + + + + + + + + + + {chrome.i18n.getMessage('Backup_failed_you_may_still_conduct_backup_inside_extension')} + + + + + + + + + ); +}; + +export default GoogleBackup; From bb3c85dfe1acceb53dd3bc11c0cb29c1160ab7b7 Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 17:06:19 +1100 Subject: [PATCH 35/41] fixed: remove duplicate component, fixed text --- src/ui/FRWComponent/LandingPages/AllSet.tsx | 19 +- .../Welcome/AccountImport/GoogleBackup.tsx | 170 ------------------ .../Welcome/AccountImport/index.tsx | 2 +- .../Welcome/Register/GoogleBackup.tsx | 170 ------------------ .../LandingPages/Welcome/Register/index.tsx | 2 +- 5 files changed, 5 insertions(+), 358 deletions(-) delete mode 100644 src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx delete mode 100644 src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx diff --git a/src/ui/FRWComponent/LandingPages/AllSet.tsx b/src/ui/FRWComponent/LandingPages/AllSet.tsx index 65e79495..9fd30c2b 100644 --- a/src/ui/FRWComponent/LandingPages/AllSet.tsx +++ b/src/ui/FRWComponent/LandingPages/AllSet.tsx @@ -36,19 +36,6 @@ const AllSet = ({ handleSwitchTab, variant = 'register' }: AllSetProps) => { } }, [variant, loadScript, usewallet]); - const getMessage = () => { - if (variant === 'recover') { - return { - title: chrome.i18n.getMessage('You__are') + ' ' + chrome.i18n.getMessage('all__set'), - subtitle: chrome.i18n.getMessage('Start__exploring__with__Lilico__now'), - }; - } - return { - title: chrome.i18n.getMessage('You__are') + chrome.i18n.getMessage('Allset'), - subtitle: chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now'), - }; - }; - return ( <> @@ -57,13 +44,13 @@ const AllSet = ({ handleSwitchTab, variant = 'register' }: AllSetProps) => { image={AllSetIcon} /> - {getMessage().title.split(' ')[0]} + {chrome.i18n.getMessage('You__are')} - {getMessage().title.split(' ')[1]} + {' ' + chrome.i18n.getMessage('all__set')} - {getMessage().subtitle} + {chrome.i18n.getMessage('You_can_start_experiencing_Lilico_now')} diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx deleted file mode 100644 index e29d08cc..00000000 --- a/src/ui/views/LandingPages/Welcome/AccountImport/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleSwitchTab, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleSwitchTab(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx b/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx index 5d407b9b..40b79d10 100644 --- a/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx +++ b/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx @@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom'; import { getHashAlgo, getSignAlgo } from '@/shared/utils/algo'; import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import GoogleBackup from '@/ui/FRWComponent/LandingPages/GoogleBackup'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; @@ -11,7 +12,6 @@ import { useNavigation } from '@/ui/utils/landingPage'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import GoogleBackup from './GoogleBackup'; import ImportTabs from './ImportTabs'; import RecoverPassword from './RecoverPassword'; diff --git a/src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx b/src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx deleted file mode 100644 index e29d08cc..00000000 --- a/src/ui/views/LandingPages/Welcome/Register/GoogleBackup.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { Button, Typography } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; - -const GoogleBackup = ({ handleSwitchTab, mnemonic, username, password }) => { - const wallets = useWallet(); - const [loading, setLoading] = useState(false); - const [backupErr, setBackupErr] = useState(false); - - const handleBackup = () => { - try { - setLoading(true); - setBackupErr(false); - wallets - .uploadMnemonicToGoogleDrive(mnemonic, username, password) - .then(() => { - setLoading(false); - handleSwitchTab(); - }) - .catch(() => { - setLoading(false); - setBackupErr(true); - }); - } catch (e) { - console.error(e); - setLoading(false); - } - }; - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {chrome.i18n.getMessage('Back_up')} - - - - {chrome.i18n.getMessage('Back_up_your_wallet_to_Google_Drive_for_easy_access')} - - - - - {chrome.i18n.getMessage('Recommend')} - - - - - {chrome.i18n.getMessage('Connect__To')} - - {chrome.i18n.getMessage('Google__Drive')} - - {chrome.i18n.getMessage('to_back_up_your_wallet')} - - - - - - - - {/* */} - - - {chrome.i18n.getMessage( - 'Backup_failed_you_may_still_conduct_backup_inside_extension' - )} - - - - - - - - - ); -}; - -export default GoogleBackup; diff --git a/src/ui/views/LandingPages/Welcome/Register/index.tsx b/src/ui/views/LandingPages/Welcome/Register/index.tsx index ab4d659d..9169961a 100644 --- a/src/ui/views/LandingPages/Welcome/Register/index.tsx +++ b/src/ui/views/LandingPages/Welcome/Register/index.tsx @@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom'; import { getAccountKey } from '@/shared/utils/address'; import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; +import GoogleBackup from '@/ui/FRWComponent/LandingPages/GoogleBackup'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; import RepeatPhrase from '@/ui/FRWComponent/LandingPages/RepeatPhrase'; @@ -12,7 +13,6 @@ import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import GoogleBackup from './GoogleBackup'; import RecoveryPhrase from './RecoveryPhrase'; const STEPS = { From 31313aa152d13fd44404956f4eeffc5ceb5af1ab Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 14:27:46 +1100 Subject: [PATCH 36/41] fixed: update routtes --- src/ui/FRWComponent/LLNotFound.tsx | 2 +- src/ui/views/InnerRoute.tsx | 2 +- src/ui/views/{MainRoute.css => Landing.css} | 0 src/ui/views/{MainRoute.tsx => Landing.tsx} | 10 +- src/ui/views/LandingPages/Forgot/index.tsx | 4 +- .../RecoverRegister/RecoveryPhrase.tsx | 198 --------- .../RecoverRegister/SetPassword.tsx | 385 ----------------- .../LandingPages/RecoverRegister/index.tsx | 210 ---------- .../LandingPages/Reset/RecoverPassword.tsx | 390 ------------------ .../Reset/ResetRecoveryPhrase.tsx | 264 ------------ src/ui/views/LandingPages/Reset/index.tsx | 201 --------- src/ui/views/index.tsx | 4 +- 12 files changed, 10 insertions(+), 1660 deletions(-) rename src/ui/views/{MainRoute.css => Landing.css} (100%) rename src/ui/views/{MainRoute.tsx => Landing.tsx} (77%) delete mode 100644 src/ui/views/LandingPages/RecoverRegister/RecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx delete mode 100644 src/ui/views/LandingPages/RecoverRegister/index.tsx delete mode 100644 src/ui/views/LandingPages/Reset/RecoverPassword.tsx delete mode 100644 src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx delete mode 100644 src/ui/views/LandingPages/Reset/index.tsx diff --git a/src/ui/FRWComponent/LLNotFound.tsx b/src/ui/FRWComponent/LLNotFound.tsx index af57046f..23fedea9 100644 --- a/src/ui/FRWComponent/LLNotFound.tsx +++ b/src/ui/FRWComponent/LLNotFound.tsx @@ -51,7 +51,7 @@ export const LLNotFound = ({ setShowDialog }) => { - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx b/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx deleted file mode 100644 index c724be05..00000000 --- a/src/ui/views/LandingPages/RecoverRegister/SetPassword.tsx +++ /dev/null @@ -1,385 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Alert, - Snackbar, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import HDWallet from 'ethereum-hdwallet'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import { LLSpinner } from '@/ui/FRWComponent'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { type AccountKey } from 'background/service/networkModel'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; -import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons'; - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { - const classes = useStyles(); - const usewallet = useWallet(); - - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const [errMessage, setErrorMessage] = useState('Something went wrong, please try again.'); - const [showError, setShowError] = useState(false); - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - setShowError(false); - }; - - const getAccountKey = (mnemonic) => { - const hdwallet = HDWallet.fromMnemonic(mnemonic); - const publicKey = hdwallet.derive("m/44'/539'/0'/0/0").getPublicKey().toString('hex'); - const key: AccountKey = { - hash_algo: 1, - sign_algo: 2, - weight: 1000, - public_key: publicKey, - }; - return key; - }; - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const register = async () => { - setLoading(true); - - await usewallet.saveIndex(username); - const accountKey = getAccountKey(mnemonic); - - usewallet.openapi - .register(accountKey, username) - .then((response) => { - setLoading(false); - return usewallet.boot(password); - }) - .then((response) => { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - storage.remove('premnemonic'); - return usewallet.createKeyringWithMnemonics(formatted); - }) - .then((accounts) => { - handleSwitchTab(); - return usewallet.openapi.createFlowAddress(); - }) - .then((address) => { - // console.log('address -->', address); - }) - .catch((error) => { - console.log('error -->', error); - setLoading(false); - }); - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(true); - } else { - setHelperText(errorInfo(chrome.i18n.getMessage('At__least__8__characters'))); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo(chrome.i18n.getMessage('Passwords__match'))); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo(chrome.i18n.getMessage('Your__passwords__do__not__match'))); - } - }, [confirmPassword, password]); - - return ( - <> - - - {chrome.i18n.getMessage('Create') + ' '} - - {' ' + chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrase' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - - {errMessage} - - - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/RecoverRegister/index.tsx b/src/ui/views/LandingPages/RecoverRegister/index.tsx deleted file mode 100644 index 0d609375..00000000 --- a/src/ui/views/LandingPages/RecoverRegister/index.tsx +++ /dev/null @@ -1,210 +0,0 @@ -import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; -import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'; -import { IconButton, Typography, Snackbar, SnackbarContent } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState, useEffect, useRef } from 'react'; -import { useHistory } from 'react-router-dom'; - -import { storage } from '@/background/webapi'; -import Confetti from '@/ui/FRWComponent/Confetti'; -import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; -import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; - -import lilicoIcon from '../../../../../_raw/images/icon-48.png'; -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; - -import RecoveryPhrase from './RecoveryPhrase'; -import SetPassword from './SetPassword'; - -enum Direction { - Right, - Left, -} -const RecoverRegister = () => { - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); - const [username, setUsername] = useState(''); - const [mnemonic, setMnemonic] = useState(''); - - const pageRef = useRef(null); - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const getPhrase = async () => { - const phrase = await storage.get('premnemonic'); - if (phrase) { - setMnemonic(phrase); - } - storage.remove('premnemonic'); - }; - - useEffect(() => { - getPhrase(); - }, []); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 3) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const Page = React.forwardRef(({ index }: { index: number }, pageRef) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - case 3: - return ; - default: - return ; - } - }); - - return ( - <> - - {activeIndex === 3 && } - - - - - - - - {chrome.i18n.getMessage('Put__your__wallet__within__reach')} -
- - - - {chrome.i18n.getMessage('Click__Extension')} - - - - {chrome.i18n.getMessage('and__Pin')} - - - - {chrome.i18n.getMessage('Flow_Core')} - - - - - } - /> - - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/4 - - - - - - - - - - - - ); -}; - -export default RecoverRegister; diff --git a/src/ui/views/LandingPages/Reset/RecoverPassword.tsx b/src/ui/views/LandingPages/Reset/RecoverPassword.tsx deleted file mode 100644 index c416382f..00000000 --- a/src/ui/views/LandingPages/Reset/RecoverPassword.tsx +++ /dev/null @@ -1,390 +0,0 @@ -import VisibilityIcon from '@mui/icons-material/Visibility'; -import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; -import { - Button, - Typography, - IconButton, - Snackbar, - Alert, - Link, - Input, - InputAdornment, - FormGroup, - LinearProgress, -} from '@mui/material'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import { makeStyles, styled } from '@mui/styles'; -import { Box } from '@mui/system'; -import React, { useEffect, useState } from 'react'; -import zxcvbn from 'zxcvbn'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; - -// const helperTextStyles = makeStyles(() => ({ -// root: { -// size: '16px', -// color: '#BABABA', -// }, -// })); - -const useStyles = makeStyles(() => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, - inputBox2: { - height: '64px', - padding: '16px', - zIndex: '999', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const BpIcon = styled('span')(() => ({ - borderRadius: 8, - width: 24, - height: 24, - border: '1px solid #41CC5D', - backgroundColor: 'transparent', -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#41CC5D', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&:before': { - display: 'block', - width: 21, - height: 21, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#41CC5D', - }, -}); - -const PasswordIndicator = (props) => { - const score = zxcvbn(props.value).score; - const precentage = ((score + 1) / 5) * 100; - - const level = (score) => { - switch (score) { - case 0: - case 1: - return { text: chrome.i18n.getMessage('Weak'), color: 'error' }; - case 2: - return { text: chrome.i18n.getMessage('Good'), color: 'testnet' }; - case 3: - return { text: chrome.i18n.getMessage('Great'), color: 'success' }; - case 4: - return { text: chrome.i18n.getMessage('Strong'), color: 'success' }; - default: - return { text: chrome.i18n.getMessage('Unknown'), color: 'error' }; - } - }; - return ( - - - - - - - {level(score).text} - - - - ); -}; - -const SetPassword = ({ handleSwitchTab, mnemonic, username }) => { - const classes = useStyles(); - const usewallet = useWallet(); - const [isPasswordVisible, setPasswordVisible] = useState(false); - const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); - const [showError, setShowError] = useState(false); - const [password, setPassword] = useState(''); - const [confirmPassword, setConfirmPassword] = useState(''); - const [isCharacters, setCharacters] = useState(false); - const [isMatch, setMatch] = useState(false); - const [isCheck, setCheck] = useState(false); - const [isLoading, setLoading] = useState(false); - - const successInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const errorInfo = (message) => { - return ( - - - - {message} - - - ); - }; - - const [helperText, setHelperText] = useState(
); - const [helperMatch, setHelperMatch] = useState(
); - - const signIn = async () => { - setLoading(true); - - await usewallet.saveIndex(username); - try { - await usewallet.boot(password); - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await usewallet.createKeyringWithMnemonics(formatted); - setLoading(false); - handleSwitchTab(); - } catch (e) { - setLoading(false); - setShowError(true); - } - }; - - useEffect(() => { - if (password.length > 7) { - setHelperText(successInfo('At least 8 characters')); - setCharacters(true); - } else { - setHelperText(errorInfo('At least 8 characters')); - setCharacters(false); - } - }, [password]); - - useEffect(() => { - if (confirmPassword === password) { - setHelperMatch(successInfo('Passwords match')); - setMatch(true); - } else { - setMatch(false); - setHelperMatch(errorInfo('Your passwords do not match, please check again')); - } - }, [confirmPassword, password]); - - const renderSnackBar = () => { - return ( - setShowError(false)} - > - { - setShowError(false); - }} - > - Something went wrong, please try again later - - - ); - }; - - return ( - <> - - - {chrome.i18n.getMessage('Create')} - - {' '} - {chrome.i18n.getMessage('Password')} - {' '} - - - {chrome.i18n.getMessage( - 'Lilico__uses__this__password__to__protect__your__recovery__phrases' - )} - - - - - { - setPassword(event.target.value); - }} - endAdornment={ - - {password && } - setPasswordVisible(!isPasswordVisible)}> - {isPasswordVisible ? : } - - - } - /> - - {helperText} - - { - setConfirmPassword(event.target.value); - }} - endAdornment={ - - setConfirmPasswordVisible(!isConfirmPasswordVisible)}> - {isConfirmPasswordVisible ? : } - - - } - /> - - {helperMatch} - - - - - } - checkedIcon={} - onChange={(event) => setCheck(event.target.checked)} - /> - } - label={ - - {chrome.i18n.getMessage('I__agree__to__Lilico') + ' '} - - {chrome.i18n.getMessage('Privacy__Policy')} - {' '} - {chrome.i18n.getMessage('and') + ' '} - - {chrome.i18n.getMessage('Terms__of__Service')} - {' '} - . - - } - /> - - - {renderSnackBar()} - - - ); -}; - -export default SetPassword; diff --git a/src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx b/src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx deleted file mode 100644 index b9f9333a..00000000 --- a/src/ui/views/LandingPages/Reset/ResetRecoveryPhrase.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import { - Typography, - FormControl, - Input, - CircularProgress, - Snackbar, - Alert, - Button, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import { Box } from '@mui/system'; -import * as bip39 from 'bip39'; -import React, { useCallback, useEffect, useState } from 'react'; - -import { storage } from '@/background/webapi'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLNotFound, LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../components/iconfont/IconClose'; - -const useStyles = makeStyles((theme) => ({ - customInputLabel: { - '& legend': { - visibility: 'visible', - }, - }, - inputBox: { - height: '128px', - padding: '16px', - paddingTop: '0px', - zIndex: '999', - overflow: 'scroll', - backgroundColor: '#282828', - border: '2px solid #4C4C4C', - borderRadius: '12px', - boxSizing: 'border-box', - '&.Mui-focused': { - border: '2px solid #FAFAFA', - boxShadow: '0px 8px 12px 4px rgba(76, 76, 76, 0.24)', - }, - }, -})); - -const MnemonicError = (errorMsg) => ( - - - - {errorMsg} - - -); - -const MnemonicCorrect = ( - - - - {chrome.i18n.getMessage('Recovery__phrase__valid')} - - -); - -const MnemonicLoading = () => ( - - - {chrome.i18n.getMessage('Checking')} - -); - -const ResetRecoveryPhrase = ({ handleSwitchTab, confirmMnemonic, setUsername }) => { - const classes = useStyles(); - const wallet = useWallet(); - - const [mnemonicValid, setMnemonicValid] = useState(true); - - const [mnemonic, setMnemonic] = useState(''); - - const [isLoading, setLoading] = useState(false); - const [showDialog, setShowDialog] = useState(false); - const [showError, setShowError] = useState(false); - const [helperText, setHelperText] = useState(
); - const [isSignLoading, setSignLoading] = useState(false); - - const signIn = async () => { - setSignLoading(true); - try { - const result = await wallet.signInWithMnemonic(mnemonic); - setSignLoading(false); - await wallet.reset(); - confirmMnemonic(mnemonic); - const userInfo = await wallet.getUserInfo(false); - setUsername(userInfo.username); - handleSwitchTab(); - } catch (error) { - setSignLoading(false); - if (error.message === 'NoUserFound') { - setShowDialog(true); - } else { - setShowError(true); - } - } - }; - - const renderSnackBar = () => { - return ( - setShowError(false)} - > - { - setShowError(false); - }} - > - Something went wrong, please try again later - - - ); - }; - const setErrorMessage = useCallback( - (message: string) => { - setLoading(false); - setMnemonicValid(false); - setHelperText(MnemonicError(message)); - }, - [setLoading, setMnemonicValid, setHelperText] - ); - - useEffect(() => { - setMnemonicValid(false); - setHelperText(MnemonicLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - setLoading(false); - const length = mnemonic.trim().split(/\s+/g).length; - if (!(length === 12 || length === 24)) { - setErrorMessage( - chrome.i18n.getMessage('Recovery_phrases_word_count_must_be_12_or_24_words') - ); - return; - } - - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - if (!bip39.validateMnemonic(formatted)) { - setErrorMessage(chrome.i18n.getMessage('Mnemonic__phrase__is__invalid')); - return; - } - - setMnemonicValid(true); - setHelperText(MnemonicCorrect); - storage.set('premnemonic', formatted); - setMnemonic(formatted); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [mnemonic, setErrorMessage]); - - const msgBgColor = () => { - if (isLoading) { - return 'neutral.light'; - } - return mnemonicValid ? 'success.light' : 'error.light'; - }; - - return ( - <> - {!showDialog ? ( - - - {chrome.i18n.getMessage('Reset_Your')}{' '} - - {chrome.i18n.getMessage('Wallet')} - - - - {chrome.i18n.getMessage( - 'Enter_the_12_or_24_word_recovery_phrase_given_when_you_first_created_your_wallet' - )} - - - - - { - setMnemonic(event.target.value); - }} - /> - - - {helperText} - - - - - - - - - - {renderSnackBar()} - - ) : ( - - )} - - ); -}; - -export default ResetRecoveryPhrase; diff --git a/src/ui/views/LandingPages/Reset/index.tsx b/src/ui/views/LandingPages/Reset/index.tsx deleted file mode 100644 index 877bee92..00000000 --- a/src/ui/views/LandingPages/Reset/index.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import { IconButton, Typography, Button, Snackbar, Alert } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; - -import Confetti from '@/ui/FRWComponent/Confetti'; -import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; -import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; -import SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; - -import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; - -import RecoverPassword from './RecoverPassword'; -import ResetRecoveryPhrase from './ResetRecoveryPhrase'; - -enum Direction { - Right, - Left, -} - -const Reset = () => { - const history = useHistory(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - const [loading, setLoading] = useState(false); - const [showError, setShowError] = useState(false); - const wallets = useWallet(); - - const goNext = () => { - setDirection(Direction.Right); - if (activeIndex < 2) { - onChange(activeIndex + 1); - } else { - window.close(); - } - }; - - const goBack = () => { - setDirection(Direction.Left); - if (activeIndex >= 1) { - onChange(activeIndex - 1); - } else { - history.goBack(); - } - }; - - const getGoogle = async () => { - setLoading(true); - const accounts = await wallets.loadBackupAccounts(); - if (accounts.length > 0) { - history.push({ - pathname: '/welcome/accountimport/google', - state: { - accounts: accounts, - }, - }); - } else { - setShowError(true); - } - setLoading(false); - }; - - const handleErrorClose = (event?: React.SyntheticEvent | Event, reason?: string) => { - if (reason === 'clickaway') { - return; - } - - setShowError(false); - }; - - const page = (index) => { - switch (index) { - case 0: - return ( - - ); - case 1: - return ; - case 2: - return ; - default: - return
; - } - }; - - return ( - <> - - {activeIndex === 2 && } - - - - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/3 - - - - - {page(activeIndex)} - - - - {activeIndex === 0 && ( - - )} - - - - {chrome.i18n.getMessage('No__backup__found')} - - - - - - - ); -}; - -export default Reset; diff --git a/src/ui/views/index.tsx b/src/ui/views/index.tsx index 5c10ffb7..19722c12 100644 --- a/src/ui/views/index.tsx +++ b/src/ui/views/index.tsx @@ -11,7 +11,7 @@ import { WalletProvider, useWallet } from 'ui/utils'; import Approval from './Approval'; import InnerRoute from './InnerRoute'; -import { MainRoute } from './MainRoute'; +import { Landing } from './Landing'; import RetrievePK from './RetrievePK'; import SortHat from './SortHat'; import SwitchUnlock from './SwitchUnlock'; @@ -35,7 +35,7 @@ const Routes = () => { - + From 4c241bdde13fd572832f806498cecdb8880491b2 Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 14:37:51 +1100 Subject: [PATCH 37/41] fixed: update the folder --- .../Forgot/Recover/RecoverPage.tsx | 6 +++--- .../Forgot/Recover/ShowKey.tsx | 2 +- .../{LandingPages => }/Forgot/Recover/index.tsx | 2 +- .../Forgot/Reset/ResetPage.tsx | 0 .../{LandingPages => }/Forgot/Reset/index.tsx | 2 +- src/ui/views/{LandingPages => }/Forgot/index.tsx | 0 .../views/{LandingPages => }/Forgot/stepBox.tsx | 0 src/ui/views/Landing.tsx | 16 ++++++++-------- .../AccountImport/Google/DecryptWallet.tsx | 2 +- .../AccountImport/Google/GoogleAccounts.tsx | 0 .../AccountImport/Google/RecoverPassword.tsx | 4 ++-- .../AccountImport/Google/RecoveryPhrase.tsx | 2 +- .../Welcome/AccountImport/Google/index.tsx | 0 .../Welcome/AccountImport/ImportTabs.tsx | 0 .../Welcome/AccountImport/RecoverPassword.tsx | 2 +- .../Welcome/AccountImport/index.tsx | 0 .../Welcome/Register/RecoveryPhrase.tsx | 2 +- .../Welcome/Register/index.tsx | 0 .../{LandingPages => }/Welcome/Sync/SyncQr.tsx | 0 .../{LandingPages => }/Welcome/Sync/index.tsx | 0 .../views/{LandingPages => }/Welcome/index.tsx | 0 21 files changed, 20 insertions(+), 20 deletions(-) rename src/ui/views/{LandingPages => }/Forgot/Recover/RecoverPage.tsx (95%) rename src/ui/views/{LandingPages => }/Forgot/Recover/ShowKey.tsx (99%) rename src/ui/views/{LandingPages => }/Forgot/Recover/index.tsx (98%) rename src/ui/views/{LandingPages => }/Forgot/Reset/ResetPage.tsx (100%) rename src/ui/views/{LandingPages => }/Forgot/Reset/index.tsx (98%) rename src/ui/views/{LandingPages => }/Forgot/index.tsx (100%) rename src/ui/views/{LandingPages => }/Forgot/stepBox.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/Google/DecryptWallet.tsx (98%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/Google/GoogleAccounts.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/Google/RecoverPassword.tsx (98%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/Google/RecoveryPhrase.tsx (99%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/Google/index.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/ImportTabs.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/RecoverPassword.tsx (99%) rename src/ui/views/{LandingPages => }/Welcome/AccountImport/index.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/Register/RecoveryPhrase.tsx (99%) rename src/ui/views/{LandingPages => }/Welcome/Register/index.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/Sync/SyncQr.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/Sync/index.tsx (100%) rename src/ui/views/{LandingPages => }/Welcome/index.tsx (100%) diff --git a/src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx b/src/ui/views/Forgot/Recover/RecoverPage.tsx similarity index 95% rename from src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx rename to src/ui/views/Forgot/Recover/RecoverPage.tsx index ad266bcc..a01db3d5 100644 --- a/src/ui/views/LandingPages/Forgot/Recover/RecoverPage.tsx +++ b/src/ui/views/Forgot/Recover/RecoverPage.tsx @@ -4,10 +4,10 @@ import { makeStyles } from '@mui/styles'; import React, { useEffect, useRef, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import { LLPrimaryButton, CredentialBox, LLSecondaryButton } from 'ui/FRWComponent'; -import { useWallet, useApproval, useWalletRequest } from 'ui/utils'; +import { LLPrimaryButton } from 'ui/FRWComponent'; +import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../components/iconfont/IconClose'; const useStyles = makeStyles(() => ({ customInputLabel: { diff --git a/src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx b/src/ui/views/Forgot/Recover/ShowKey.tsx similarity index 99% rename from src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx rename to src/ui/views/Forgot/Recover/ShowKey.tsx index 982c9630..bc4a7b55 100644 --- a/src/ui/views/LandingPages/Forgot/Recover/ShowKey.tsx +++ b/src/ui/views/Forgot/Recover/ShowKey.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import ResetModal from '@/ui/FRWComponent/PopupModal/resetModal'; import { useWallet } from 'ui/utils'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../components/iconfont/IconCopy'; const ShowKey = ({ handleSwitchTab, mnemonic }) => { const usewallet = useWallet(); diff --git a/src/ui/views/LandingPages/Forgot/Recover/index.tsx b/src/ui/views/Forgot/Recover/index.tsx similarity index 98% rename from src/ui/views/LandingPages/Forgot/Recover/index.tsx rename to src/ui/views/Forgot/Recover/index.tsx index af687b3a..84aa0c51 100644 --- a/src/ui/views/LandingPages/Forgot/Recover/index.tsx +++ b/src/ui/views/Forgot/Recover/index.tsx @@ -9,7 +9,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import RecoverPage from './RecoverPage'; import ShowKey from './ShowKey'; diff --git a/src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx b/src/ui/views/Forgot/Reset/ResetPage.tsx similarity index 100% rename from src/ui/views/LandingPages/Forgot/Reset/ResetPage.tsx rename to src/ui/views/Forgot/Reset/ResetPage.tsx diff --git a/src/ui/views/LandingPages/Forgot/Reset/index.tsx b/src/ui/views/Forgot/Reset/index.tsx similarity index 98% rename from src/ui/views/LandingPages/Forgot/Reset/index.tsx rename to src/ui/views/Forgot/Reset/index.tsx index c3a2fe11..285ddbe0 100644 --- a/src/ui/views/LandingPages/Forgot/Reset/index.tsx +++ b/src/ui/views/Forgot/Reset/index.tsx @@ -9,7 +9,7 @@ import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import BackButtonIcon from '../../../../../components/iconfont/IconBackButton'; +import BackButtonIcon from '../../../../components/iconfont/IconBackButton'; import ResetPage from './ResetPage'; diff --git a/src/ui/views/LandingPages/Forgot/index.tsx b/src/ui/views/Forgot/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Forgot/index.tsx rename to src/ui/views/Forgot/index.tsx diff --git a/src/ui/views/LandingPages/Forgot/stepBox.tsx b/src/ui/views/Forgot/stepBox.tsx similarity index 100% rename from src/ui/views/LandingPages/Forgot/stepBox.tsx rename to src/ui/views/Forgot/stepBox.tsx diff --git a/src/ui/views/Landing.tsx b/src/ui/views/Landing.tsx index 9420585d..b815a161 100644 --- a/src/ui/views/Landing.tsx +++ b/src/ui/views/Landing.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; -import Forgot from './LandingPages/Forgot'; -import Recover from './LandingPages/Forgot/Recover'; -import Reset from './LandingPages/Forgot/Reset'; -import Welcome from './LandingPages/Welcome'; -import AccountImport from './LandingPages/Welcome/AccountImport'; -import Google from './LandingPages/Welcome/AccountImport/Google'; -import Register from './LandingPages/Welcome/Register'; -import Sync from './LandingPages/Welcome/Sync'; +import Forgot from './Forgot'; +import Recover from './Forgot/Recover'; +import Reset from './Forgot/Reset'; +import Welcome from './Welcome'; +import AccountImport from './Welcome/AccountImport'; +import Google from './Welcome/AccountImport/Google'; +import Register from './Welcome/Register'; +import Sync from './Welcome/Sync'; import './Landing.css'; diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/Google/DecryptWallet.tsx b/src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx similarity index 98% rename from src/ui/views/LandingPages/Welcome/AccountImport/Google/DecryptWallet.tsx rename to src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx index f1c493e7..4ea6c14a 100644 --- a/src/ui/views/LandingPages/Welcome/AccountImport/Google/DecryptWallet.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx @@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; import { useWallet } from 'ui/utils'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/Google/GoogleAccounts.tsx b/src/ui/views/Welcome/AccountImport/Google/GoogleAccounts.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AccountImport/Google/GoogleAccounts.tsx rename to src/ui/views/Welcome/AccountImport/Google/GoogleAccounts.tsx diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/Google/RecoverPassword.tsx similarity index 98% rename from src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoverPassword.tsx rename to src/ui/views/Welcome/AccountImport/Google/RecoverPassword.tsx index 17cb0a8f..6621e05c 100644 --- a/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoverPassword.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/RecoverPassword.tsx @@ -21,8 +21,8 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner, LLNotFound } from '@/ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import CheckCircleIcon from '../../../../../../components/iconfont/IconCheckmark'; -import CancelIcon from '../../../../../../components/iconfont/IconClose'; +import CheckCircleIcon from '../../../../../components/iconfont/IconCheckmark'; +import CancelIcon from '../../../../../components/iconfont/IconClose'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoveryPhrase.tsx b/src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoveryPhrase.tsx rename to src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx index 56ad1faa..7bf56ed6 100644 --- a/src/ui/views/LandingPages/Welcome/AccountImport/Google/RecoveryPhrase.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleSwitchTab, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(true); diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/Google/index.tsx b/src/ui/views/Welcome/AccountImport/Google/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AccountImport/Google/index.tsx rename to src/ui/views/Welcome/AccountImport/Google/index.tsx diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/ImportTabs.tsx b/src/ui/views/Welcome/AccountImport/ImportTabs.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AccountImport/ImportTabs.tsx rename to src/ui/views/Welcome/AccountImport/ImportTabs.tsx diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/RecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/RecoverPassword.tsx similarity index 99% rename from src/ui/views/LandingPages/Welcome/AccountImport/RecoverPassword.tsx rename to src/ui/views/Welcome/AccountImport/RecoverPassword.tsx index ea1a8bfd..3a2db658 100644 --- a/src/ui/views/LandingPages/Welcome/AccountImport/RecoverPassword.tsx +++ b/src/ui/views/Welcome/AccountImport/RecoverPassword.tsx @@ -19,7 +19,7 @@ import zxcvbn from 'zxcvbn'; import { LLSpinner } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; -import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; +import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; // const helperTextStyles = makeStyles(() => ({ // root: { diff --git a/src/ui/views/LandingPages/Welcome/AccountImport/index.tsx b/src/ui/views/Welcome/AccountImport/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/AccountImport/index.tsx rename to src/ui/views/Welcome/AccountImport/index.tsx diff --git a/src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx b/src/ui/views/Welcome/Register/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx rename to src/ui/views/Welcome/Register/RecoveryPhrase.tsx index d16b0da5..f8c203b8 100644 --- a/src/ui/views/LandingPages/Welcome/Register/RecoveryPhrase.tsx +++ b/src/ui/views/Welcome/Register/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleSwitchTab, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/LandingPages/Welcome/Register/index.tsx b/src/ui/views/Welcome/Register/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/Register/index.tsx rename to src/ui/views/Welcome/Register/index.tsx diff --git a/src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx b/src/ui/views/Welcome/Sync/SyncQr.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/Sync/SyncQr.tsx rename to src/ui/views/Welcome/Sync/SyncQr.tsx diff --git a/src/ui/views/LandingPages/Welcome/Sync/index.tsx b/src/ui/views/Welcome/Sync/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/Sync/index.tsx rename to src/ui/views/Welcome/Sync/index.tsx diff --git a/src/ui/views/LandingPages/Welcome/index.tsx b/src/ui/views/Welcome/index.tsx similarity index 100% rename from src/ui/views/LandingPages/Welcome/index.tsx rename to src/ui/views/Welcome/index.tsx From c7cf48ac9716cf039b86f1bd0eb7b96980e85026 Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 14:45:17 +1100 Subject: [PATCH 38/41] fixed: move components --- .../LandingPages}/RecoveryPhrase.tsx | 2 +- ...Password.tsx => GoogleRecoverPassword.tsx} | 0 .../AccountImport/Google/RecoveryPhrase.tsx | 240 ------------------ .../Welcome/AccountImport/Google/index.tsx | 4 +- src/ui/views/Welcome/Register/index.tsx | 3 +- 5 files changed, 4 insertions(+), 245 deletions(-) rename src/ui/{views/Welcome/Register => FRWComponent/LandingPages}/RecoveryPhrase.tsx (99%) rename src/ui/views/Welcome/AccountImport/Google/{RecoverPassword.tsx => GoogleRecoverPassword.tsx} (100%) delete mode 100644 src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx diff --git a/src/ui/views/Welcome/Register/RecoveryPhrase.tsx b/src/ui/FRWComponent/LandingPages/RecoveryPhrase.tsx similarity index 99% rename from src/ui/views/Welcome/Register/RecoveryPhrase.tsx rename to src/ui/FRWComponent/LandingPages/RecoveryPhrase.tsx index f8c203b8..d9f14659 100644 --- a/src/ui/views/Welcome/Register/RecoveryPhrase.tsx +++ b/src/ui/FRWComponent/LandingPages/RecoveryPhrase.tsx @@ -7,7 +7,7 @@ import React, { useState } from 'react'; import SlideRelative from '@/ui/FRWComponent/SlideRelative'; -import IconCopy from '../../../../components/iconfont/IconCopy'; +import IconCopy from '../../../components/iconfont/IconCopy'; const RecoveryPhrase = ({ handleSwitchTab, mnemonic }) => { const [canGoNext, setCanGoNext] = useState(false); diff --git a/src/ui/views/Welcome/AccountImport/Google/RecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx similarity index 100% rename from src/ui/views/Welcome/AccountImport/Google/RecoverPassword.tsx rename to src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx diff --git a/src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx b/src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx deleted file mode 100644 index 7bf56ed6..00000000 --- a/src/ui/views/Welcome/AccountImport/Google/RecoveryPhrase.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import InfoIcon from '@mui/icons-material/Info'; -import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded'; -import LockRoundedIcon from '@mui/icons-material/LockRounded'; -import { Button, Typography, IconButton } from '@mui/material'; -import { Box } from '@mui/system'; -import React, { useState } from 'react'; - -import SlideRelative from '@/ui/FRWComponent/SlideRelative'; - -import IconCopy from '../../../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleSwitchTab, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Review') + ' '} - - {chrome.i18n.getMessage('Recovery__Phrase')} - - - - {chrome.i18n.getMessage( - 'Write__down__this__phrase__in__this__exact__order__and__keep__them__safe' - )} - - - - - {mnemonic.split(' ').map((word, i) => { - return ( - - - {i + 1} - - - {word} - - - ); - })} - - { - coverBlur(!isCoverBlur); - }} - component="span" - sx={{ - position: 'absolute', - bottom: '0', - right: '0', - height: '40px', - width: '40px', - my: '16px', - mx: '24px', - backgroundColor: 'neutral1.main', - transition: 'all .3s ease-in-out', - justifySelf: 'end', - opacity: isCoverBlur ? 0 : 1, - // visibility: isCoverBlur ? 'hidden' : 'visible', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - - {isCoverBlur && ( - - { - coverBlur(!isCoverBlur); - setCanGoNext(true); - }} - component="span" - sx={{ - backgroundColor: 'neutral1.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - - - - - - {chrome.i18n.getMessage( - 'Please__notice__that__If__you__lose__you__can__not__access' - )} - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/Welcome/AccountImport/Google/index.tsx b/src/ui/views/Welcome/AccountImport/Google/index.tsx index b7279139..304d5071 100644 --- a/src/ui/views/Welcome/AccountImport/Google/index.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/index.tsx @@ -4,12 +4,12 @@ import { useHistory, useLocation } from 'react-router-dom'; import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; +import RecoveryPhrase from '@/ui/FRWComponent/LandingPages/RecoveryPhrase'; import { storage } from 'background/webapi'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './RecoverPassword'; -import RecoveryPhrase from './RecoveryPhrase'; +import RecoveryPassword from './GoogleRecoverPassword'; const STEPS = { ACCOUNTS: 'accounts', diff --git a/src/ui/views/Welcome/Register/index.tsx b/src/ui/views/Welcome/Register/index.tsx index 9169961a..68308ea9 100644 --- a/src/ui/views/Welcome/Register/index.tsx +++ b/src/ui/views/Welcome/Register/index.tsx @@ -8,13 +8,12 @@ import AllSet from '@/ui/FRWComponent/LandingPages/AllSet'; import GoogleBackup from '@/ui/FRWComponent/LandingPages/GoogleBackup'; import LandingComponents from '@/ui/FRWComponent/LandingPages/LandingComponents'; import PickUsername from '@/ui/FRWComponent/LandingPages/PickUsername'; +import RecoveryPhrase from '@/ui/FRWComponent/LandingPages/RecoveryPhrase'; import RepeatPhrase from '@/ui/FRWComponent/LandingPages/RepeatPhrase'; import SetPassword from '@/ui/FRWComponent/LandingPages/SetPassword'; import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; -import RecoveryPhrase from './RecoveryPhrase'; - const STEPS = { USERNAME: 'username', RECOVERY: 'recovery', From 873e7b1e148a05e2e2b55cd616a8ceeb504dfcaa Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 16:54:33 +1100 Subject: [PATCH 39/41] fixed: component name --- .../{RecoverPassword.tsx => RecoveryPassword.tsx} | 4 ++-- src/ui/views/Welcome/AccountImport/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/ui/views/Welcome/AccountImport/{RecoverPassword.tsx => RecoveryPassword.tsx} (98%) diff --git a/src/ui/views/Welcome/AccountImport/RecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/RecoveryPassword.tsx similarity index 98% rename from src/ui/views/Welcome/AccountImport/RecoverPassword.tsx rename to src/ui/views/Welcome/AccountImport/RecoveryPassword.tsx index 3a2db658..4d11539b 100644 --- a/src/ui/views/Welcome/AccountImport/RecoverPassword.tsx +++ b/src/ui/views/Welcome/AccountImport/RecoveryPassword.tsx @@ -128,7 +128,7 @@ const PasswordIndicator = (props) => { ); }; -const SetPassword = ({ handleSwitchTab, mnemonic, pk, tempPassword, goLast, accountKey }) => { +const RecoveryPassword = ({ handleSwitchTab, mnemonic, pk, tempPassword, goLast, accountKey }) => { const classes = useStyles(); const usewallet = useWallet(); @@ -316,4 +316,4 @@ const SetPassword = ({ handleSwitchTab, mnemonic, pk, tempPassword, goLast, acco ); }; -export default SetPassword; +export default RecoveryPassword; diff --git a/src/ui/views/Welcome/AccountImport/index.tsx b/src/ui/views/Welcome/AccountImport/index.tsx index 40b79d10..0fa9b760 100644 --- a/src/ui/views/Welcome/AccountImport/index.tsx +++ b/src/ui/views/Welcome/AccountImport/index.tsx @@ -13,7 +13,7 @@ import { storage } from 'background/webapi'; import { useWallet } from 'ui/utils'; import ImportTabs from './ImportTabs'; -import RecoverPassword from './RecoverPassword'; +import RecoveryPassword from './RecoveryPassword'; const STEPS = { IMPORT: 'import', @@ -178,7 +178,7 @@ const AccountImport = () => { )} {activeTab === STEPS.RECOVER_PASSWORD && ( - setActiveTab(STEPS.GOOGLE_BACKUP)} mnemonic={mnemonic} pk={pk} From f87b6e2596607cc466b4f6d3d9cb4c8238da62db Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 17:06:27 +1100 Subject: [PATCH 40/41] fixed: import component name --- .../Welcome/AccountImport/Google/GoogleRecoverPassword.tsx | 4 ++-- src/ui/views/Welcome/AccountImport/Google/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx index 6621e05c..7b238628 100644 --- a/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx @@ -131,7 +131,7 @@ const PasswordIndicator = (props) => { ); }; -const SetPassword = ({ handleSwitchTab, mnemonic, username, lastPassword }) => { +const GoogleRecoverPassword = ({ handleSwitchTab, mnemonic, username, lastPassword }) => { const classes = useStyles(); const usewallet = useWallet(); @@ -332,4 +332,4 @@ const SetPassword = ({ handleSwitchTab, mnemonic, username, lastPassword }) => { ); }; -export default SetPassword; +export default GoogleRecoverPassword; diff --git a/src/ui/views/Welcome/AccountImport/Google/index.tsx b/src/ui/views/Welcome/AccountImport/Google/index.tsx index 304d5071..08b78a0c 100644 --- a/src/ui/views/Welcome/AccountImport/Google/index.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/index.tsx @@ -9,7 +9,7 @@ import { storage } from 'background/webapi'; import DecryptWallet from './DecryptWallet'; import GoogleAccounts from './GoogleAccounts'; -import RecoveryPassword from './GoogleRecoverPassword'; +import GoogleRecoverPassword from './GoogleRecoverPassword'; const STEPS = { ACCOUNTS: 'accounts', @@ -104,7 +104,7 @@ const Google = () => { )} {activeTab === STEPS.PASSWORD && ( - setActiveTab(STEPS.ALL_SET)} mnemonic={mnemonic} username={username} From dff5ddae041928f0955f48d8d9de99955f95db1e Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 17:41:17 +1100 Subject: [PATCH 41/41] fixed: change google component loading --- src/ui/views/Landing.tsx | 2 - .../Welcome/AccountImport/Google/index.tsx | 20 +-- .../ImportComponents/Googledrive.tsx | 11 +- .../ImportComponents/JsonImport.tsx | 4 +- .../ImportComponents/KeyImport.tsx | 2 +- .../ImportComponents/SeedPhraseImport.tsx | 4 +- .../Welcome/AccountImport/ImportTabs.tsx | 15 +- src/ui/views/Welcome/AccountImport/index.tsx | 159 ++++++++++-------- 8 files changed, 114 insertions(+), 103 deletions(-) rename src/ui/{FRWComponent/LandingPages => views/Welcome/AccountImport}/ImportComponents/Googledrive.tsx (90%) rename src/ui/{FRWComponent/LandingPages => views/Welcome/AccountImport}/ImportComponents/JsonImport.tsx (97%) rename src/ui/{FRWComponent/LandingPages => views/Welcome/AccountImport}/ImportComponents/KeyImport.tsx (97%) rename src/ui/{FRWComponent/LandingPages => views/Welcome/AccountImport}/ImportComponents/SeedPhraseImport.tsx (95%) diff --git a/src/ui/views/Landing.tsx b/src/ui/views/Landing.tsx index b815a161..5ae5102e 100644 --- a/src/ui/views/Landing.tsx +++ b/src/ui/views/Landing.tsx @@ -6,7 +6,6 @@ import Recover from './Forgot/Recover'; import Reset from './Forgot/Reset'; import Welcome from './Welcome'; import AccountImport from './Welcome/AccountImport'; -import Google from './Welcome/AccountImport/Google'; import Register from './Welcome/Register'; import Sync from './Welcome/Sync'; @@ -28,7 +27,6 @@ export const Landing: React.FC = () => { -
); diff --git a/src/ui/views/Welcome/AccountImport/Google/index.tsx b/src/ui/views/Welcome/AccountImport/Google/index.tsx index 08b78a0c..1b16aebf 100644 --- a/src/ui/views/Welcome/AccountImport/Google/index.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/index.tsx @@ -25,12 +25,14 @@ interface AccountsState { accounts: string[]; } -const Google = () => { - const location = useLocation(); - const history = useHistory(); +interface GoogleProps { + accounts: string[]; + onBack: () => void; +} + +const Google: React.FC = ({ accounts, onBack }) => { const [activeTab, setActiveTab] = useState(STEPS.ACCOUNTS); const [mnemonic, setMnemonic] = useState(''); - const [accounts, setAccounts] = useState([]); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); @@ -41,15 +43,9 @@ const Google = () => { } }, []); - const getGoogleAccounts = useCallback(async () => { - const users = location?.state?.accounts; - setAccounts(users); - }, [location?.state?.accounts]); - useEffect(() => { - getGoogleAccounts(); loadTempPassword(); - }, [getGoogleAccounts, loadTempPassword]); + }, [loadTempPassword]); const goBack = () => { switch (activeTab) { @@ -66,7 +62,7 @@ const Google = () => { setActiveTab(STEPS.PASSWORD); break; default: - history.goBack(); + onBack(); } }; diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx similarity index 90% rename from src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx index da00ef04..48aa4a03 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/Googledrive.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx @@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'; import { LLSpinner } from '@/ui/FRWComponent'; import { useWallet } from '@/ui/utils'; -import IconGoogleDrive from '../../../../components/iconfont/IconGoogleDrive'; +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; const useStyles = makeStyles(() => ({ form: { @@ -31,7 +31,7 @@ const useStyles = makeStyles(() => ({ }, })); -const Googledrive = ({ setErrorMessage, setShowError }) => { +const Googledrive = ({ setErrorMessage, setShowError, handleGoogleAccountsFound }) => { const classes = useStyles(); const wallets = useWallet(); const history = useHistory(); @@ -47,12 +47,7 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { - history.push({ - pathname: '/welcome/accountimport/google', - state: { - accounts: accounts, - }, - }); + handleGoogleAccountsFound(accounts); } else { setShowError(true); setErrorMessage(chrome.i18n.getMessage('No__backup__found')); diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx similarity index 97% rename from src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx index 1e0453a1..42dd8c18 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/JsonImport.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx @@ -14,8 +14,8 @@ import React, { useState } from 'react'; import { useWallet } from '@/ui/utils/WalletContext'; import { LLSpinner } from 'ui/FRWComponent'; -import ErrorModel from '../../../FRWComponent/PopupModal/errorModel'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; const useStyles = makeStyles(() => ({ form: { diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/KeyImport.tsx similarity index 97% rename from src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/KeyImport.tsx index f49cc8a7..6be25406 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/KeyImport.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/KeyImport.tsx @@ -5,7 +5,7 @@ import React, { useState } from 'react'; import { useWallet } from '@/ui/utils/WalletContext'; import { LLSpinner } from 'ui/FRWComponent'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; const useStyles = makeStyles((theme) => ({ form: { diff --git a/src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx similarity index 95% rename from src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx index f017e888..37ea7c8f 100644 --- a/src/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx @@ -5,8 +5,8 @@ import React, { useState } from 'react'; import { useWallet } from '@/ui/utils/WalletContext'; import { LLSpinner } from 'ui/FRWComponent'; -import KeyPathInput from '../../../FRWComponent/KeyPathInputs'; -import { KEY_TYPE } from '../../../utils/modules/constants'; +import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; const useStyles = makeStyles(() => ({ form: { diff --git a/src/ui/views/Welcome/AccountImport/ImportTabs.tsx b/src/ui/views/Welcome/AccountImport/ImportTabs.tsx index c22ab70b..0cda6f20 100644 --- a/src/ui/views/Welcome/AccountImport/ImportTabs.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportTabs.tsx @@ -2,12 +2,12 @@ import { Box, Tabs, Tab, Typography } from '@mui/material'; import React, { useState } from 'react'; import { storage } from '@/background/webapi'; -import Googledrive from '@/ui/FRWComponent/LandingPages/ImportComponents/Googledrive'; -import JsonImport from '@/ui/FRWComponent/LandingPages/ImportComponents/JsonImport'; -import KeyImport from '@/ui/FRWComponent/LandingPages/ImportComponents/KeyImport'; -import SeedPhraseImport from '@/ui/FRWComponent/LandingPages/ImportComponents/SeedPhraseImport'; import ErrorModel from '@/ui/FRWComponent/PopupModal/errorModel'; import { useWallet } from '@/ui/utils'; +import Googledrive from '@/ui/views/Welcome/AccountImport/ImportComponents/Googledrive'; +import JsonImport from '@/ui/views/Welcome/AccountImport/ImportComponents/JsonImport'; +import KeyImport from '@/ui/views/Welcome/AccountImport/ImportComponents/KeyImport'; +import SeedPhraseImport from '@/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport'; function TabPanel(props) { const { children, value, index, ...other } = props; @@ -37,6 +37,7 @@ const ImportTabs = ({ handleSwitchTab, setErrorMessage, setShowError, + handleGoogleAccountsFound, }) => { const [selectedTab, setSelectedTab] = useState(0); const [mnemonicValid, setMnemonicValid] = useState(true); @@ -105,7 +106,11 @@ const ImportTabs = ({ - + { const [errMessage, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); const [showError, setShowError] = useState(false); const [activeTab, setActiveTab] = useState(STEPS.IMPORT); + const [showGoogleImport, setShowGoogleImport] = useState(false); + const [googleAccounts, setGoogleAccounts] = useState([]); const getUsername = (username: string) => { setUsername(username.toLowerCase()); @@ -134,78 +137,92 @@ const AccountImport = () => { } }; + const handleGoogleAccountsFound = (accounts: string[]) => { + setGoogleAccounts(accounts); + setShowGoogleImport(true); + }; + return ( - - - {activeTab === STEPS.IMPORT && ( - setActiveTab(STEPS.RECOVER_PASSWORD)} - handleSwitchTab={() => setActiveTab(STEPS.PICK_USERNAME)} - setErrorMessage={setErrorMessage} - setShowError={setShowError} - /> - )} - - {activeTab === STEPS.PICK_USERNAME && ( - setActiveTab(STEPS.SET_PASSWORD)} - savedUsername={username} - getUsername={getUsername} - /> - )} - - {activeTab === STEPS.SET_PASSWORD && ( - setActiveTab(STEPS.GOOGLE_BACKUP)} - onSubmit={submitPassword} - tempPassword={tempPassword} - isLogin={true} - /> - )} - - {activeTab === STEPS.RECOVER_PASSWORD && ( - setActiveTab(STEPS.GOOGLE_BACKUP)} - mnemonic={mnemonic} - pk={pk} - tempPassword={tempPassword} - goLast={() => setActiveTab(STEPS.ALL_SET)} - accountKey={accounts} - /> - )} - - {activeTab === STEPS.GOOGLE_BACKUP && ( - setActiveTab(STEPS.ALL_SET)} - mnemonic={mnemonic} - username={username} - password={password} - /> - )} - - {activeTab === STEPS.ALL_SET && window.close()} />} - - - - - {errMessage} - - - + + {!showGoogleImport ? ( + + + <> + {activeTab === STEPS.IMPORT && ( + setActiveTab(STEPS.RECOVER_PASSWORD)} + handleSwitchTab={() => setActiveTab(STEPS.PICK_USERNAME)} + setErrorMessage={setErrorMessage} + setShowError={setShowError} + handleGoogleAccountsFound={handleGoogleAccountsFound} + /> + )} + + {activeTab === STEPS.PICK_USERNAME && ( + setActiveTab(STEPS.SET_PASSWORD)} + savedUsername={username} + getUsername={getUsername} + /> + )} + + {activeTab === STEPS.SET_PASSWORD && ( + setActiveTab(STEPS.GOOGLE_BACKUP)} + onSubmit={submitPassword} + tempPassword={tempPassword} + isLogin={true} + /> + )} + + {activeTab === STEPS.RECOVER_PASSWORD && ( + setActiveTab(STEPS.GOOGLE_BACKUP)} + mnemonic={mnemonic} + pk={pk} + tempPassword={tempPassword} + goLast={() => setActiveTab(STEPS.ALL_SET)} + accountKey={accounts} + /> + )} + + {activeTab === STEPS.GOOGLE_BACKUP && ( + setActiveTab(STEPS.ALL_SET)} + mnemonic={mnemonic} + username={username} + password={password} + /> + )} + + {activeTab === STEPS.ALL_SET && window.close()} />} + + + + + + {errMessage} + + + + ) : ( + setShowGoogleImport(false)} /> + )} + ); };