From 377c0ae290b3f79d6ea3f768670e35451bf39dea Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 16:28:49 +1100 Subject: [PATCH 01/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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/50] 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 debf06df5d4bf3f3e7d57b6acd819647c389a561 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 17 Dec 2024 17:58:42 +1100 Subject: [PATCH 15/50] feat: update keyring, remove rabby dependencies --- src/background/service/keyring/hdKeyring.ts | 122 ++++++++++++++++++ src/background/service/keyring/index.ts | 110 ++++++++++------ .../service/keyring/simpleKeyring.ts | 109 ++++++++++++++++ 3 files changed, 303 insertions(+), 38 deletions(-) create mode 100644 src/background/service/keyring/hdKeyring.ts create mode 100644 src/background/service/keyring/simpleKeyring.ts diff --git a/src/background/service/keyring/hdKeyring.ts b/src/background/service/keyring/hdKeyring.ts new file mode 100644 index 00000000..10135b5b --- /dev/null +++ b/src/background/service/keyring/hdKeyring.ts @@ -0,0 +1,122 @@ +import { ethers, Wallet, HDNodeWallet } from 'ethers'; + +import { normalizeAddress } from 'background/utils'; + +export class HDKeyring { + static type = 'HD Key Tree'; + type = 'HD Key Tree'; + + private hdWallet: HDNodeWallet | null = null; + private mnemonic: string | null = null; + private activeIndexes: number[] = []; + private basePath = "m/44'/539'/0'/0"; + + constructor(opts?: { mnemonic?: string; activeIndexes?: number[] }) { + if (opts?.mnemonic) { + this.deserialize({ + mnemonic: opts.mnemonic, + activeIndexes: opts.activeIndexes || [0], + }); + } + } + + async serialize() { + return { + mnemonic: this.hdWallet?.mnemonic?.phrase || this.mnemonic, + activeIndexes: this.activeIndexes, + publicKey: this.hdWallet?.publicKey || null, + }; + } + + async deserialize(opts: { mnemonic: string; activeIndexes: number[] }) { + this.mnemonic = opts.mnemonic; + // Create base wallet from mnemonic only + this.hdWallet = HDNodeWallet.fromPhrase(opts.mnemonic); + // Store active indexes + this.activeIndexes = opts.activeIndexes?.length ? opts.activeIndexes : [0]; + } + + async addAccounts(numberOfAccounts = 1) { + // No need to add accounts + throw new Error('Operation not supported'); + } + + async getAccounts() { + if (!this.mnemonic) { + throw new Error('Mnemonic is required'); + } + return [this.mnemonic]; + } + + async removeAccount(address: string) { + // No need to handle multiple accounts if we only care about mnemonic + throw new Error('Operation not supported'); + } + + async exportAccount(address: string): Promise { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + return wallet.privateKey; + } + + async signTransaction(address: string, tx: any) { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + return wallet.signTransaction(tx); + } + + async signMessage(address: string, data: string) { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + return wallet.signMessage(data); + } + + async signPersonalMessage(address: string, data: string) { + return this.signMessage(address, data); + } + + async signTypedData(address: string, data: any, opts: { version: string } = { version: 'V1' }) { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + + switch (opts.version) { + case 'V1': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + case 'V3': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + case 'V4': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + default: + throw new Error(`Unsupported typed data version: ${opts.version}`); + } + } + + async getEncryptionPublicKey(address: string) { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + return wallet.signingKey.publicKey; + } + + async decryptMessage(address: string, data: string) { + const wallet = this.hdWallet?.derivePath(`m/44'/539'/0'/0/${address}`); + if (!wallet) throw new Error('Address not found'); + // Todo: This is a placeholder. Implement actual message decryption logic + throw new Error('Message decryption not implemented'); + } + + async _getPrivateKey(index: number): Promise { + try { + if (!this.mnemonic) { + throw new Error('Mnemonic is required'); + } + const mnemonic = ethers.Mnemonic.fromPhrase(this.mnemonic); + // Create base HD node first, then derive the Flow path + const baseNode = ethers.HDNodeWallet.fromMnemonic(mnemonic); + const flowPath = `m/44'/539'/0'/0/${index}`; + const hdNode = baseNode.derivePath(flowPath); + return hdNode.privateKey; + } catch (err) { + throw new Error(`Failed to derive private key: ${err.message}`); + } + } +} diff --git a/src/background/service/keyring/index.ts b/src/background/service/keyring/index.ts index 0699bec4..9cf90de1 100644 --- a/src/background/service/keyring/index.ts +++ b/src/background/service/keyring/index.ts @@ -3,8 +3,6 @@ import { EventEmitter } from 'events'; import { ObservableStore } from '@metamask/obs-store'; -import HdKeyring from '@rabby-wallet/eth-hd-keyring'; -import SimpleKeyring from '@rabby-wallet/eth-simple-keyring'; import * as bip39 from 'bip39'; import encryptor from 'browser-passworder'; import * as ethUtil from 'ethereumjs-util'; @@ -23,15 +21,17 @@ import i18n from '../i18n'; import preference from '../preference'; import type DisplayKeyring from './display'; +import { HDKeyring } from './hdKeyring'; +import { SimpleKeyring } from './simpleKeyring'; export const KEYRING_SDK_TYPES = { SimpleKeyring, - HdKeyring, + HDKeyring, }; export const KEYRING_CLASS = { PRIVATE_KEY: SimpleKeyring.type, - MNEMONIC: HdKeyring.type, + MNEMONIC: HDKeyring.type, }; interface MemStoreState { @@ -47,10 +47,10 @@ export interface DisplayedKeryring { address: string; brandName: string; type?: string; - keyring?: DisplayKeyring; + keyring?: any; alianName?: string; }[]; - keyring: DisplayKeyring; + keyring: any; } class KeyringService extends EventEmitter { @@ -225,20 +225,22 @@ class KeyringService extends EventEmitter { * @param {string} seed - The BIP44-compliant seed phrase. * @returns {Promise} A Promise that resolves to the state. */ - createKeyringWithMnemonics(seed: string): Promise { + async createKeyringWithMnemonics(seed: string): Promise { + console.log('createKeyringWithMnemonics ================== ', seed); if (!bip39.validateMnemonic(seed)) { return Promise.reject(new Error(i18n.t('mnemonic phrase is invalid'))); } - let keyring; return this.persistAllKeyrings() .then(() => { + console.log('seed ', seed); return this.addNewKeyring('HD Key Tree', { mnemonic: seed, activeIndexes: [0], }); }) .then((firstKeyring) => { + console.log('firstKeyring ================== ', firstKeyring); keyring = firstKeyring; return firstKeyring.getAccounts(); }) @@ -255,6 +257,7 @@ class KeyringService extends EventEmitter { } async addKeyring(keyring) { + console.log('addKeyring ================== ', keyring); return keyring .getAccounts() .then((accounts) => { @@ -309,8 +312,10 @@ class KeyringService extends EventEmitter { async submitPassword(password: string): Promise { await this.verifyPassword(password); this.password = password; + console.log('this.verifyPassword ================== ', password); try { this.keyrings = await this.unlockKeyrings(password); + console.log('this.keyrings ================== ', this.keyrings); } catch { // } finally { @@ -351,6 +356,7 @@ class KeyringService extends EventEmitter { */ addNewKeyring(type: string, opts?: unknown): Promise { const Keyring = this.getKeyringClassForType(type); + console.log('Keyring ================== ', Keyring); const keyring = new Keyring(opts); return this.addKeyring(keyring); } @@ -758,39 +764,40 @@ class KeyringService extends EventEmitter { let vaultArray = this.store.getState().vault; let encryptedVault; - if (typeof vaultArray === 'string') { - vaultArray = [vaultArray]; - } + // Ensure vaultArray is an array and filter out null/undefined entries + vaultArray = Array.isArray(vaultArray) ? vaultArray.filter(Boolean) : [vaultArray]; // Initialize accountIndex to 0 if it is undefined if (accountIndex === undefined) { accountIndex = 0; } - // If currentId is provided, look for the encryptedString with currentId as the key in the vaultArray + // If currentId is provided, look for the encryptedString with currentId as the key if (currentId !== undefined) { - const foundIndex = vaultArray.findIndex((entry) => entry && entry[currentId]); - if (foundIndex !== -1) { - encryptedVault = vaultArray[foundIndex][currentId]; - } else { - // Handle case when currentId is not found in the vaultArray - if (vaultArray[accountIndex] !== undefined) { - encryptedVault = vaultArray[accountIndex]; - } else if (vaultArray[0] !== undefined) { - encryptedVault = vaultArray[0]; + const foundEntry = vaultArray.find((entry) => entry && entry[currentId]); + if (foundEntry) { + encryptedVault = foundEntry[currentId]; + } + } + + // If haven't found an encrypted vault yet, try fallback options + if (!encryptedVault) { + // Try to get a valid entry using accountIndex + const validEntries = vaultArray.filter(Boolean); + if (validEntries.length > 0) { + if (validEntries[accountIndex]) { + encryptedVault = + typeof validEntries[accountIndex] === 'string' + ? validEntries[accountIndex] + : Object.values(validEntries[accountIndex])[0]; } else { - encryptedVault = vaultArray; // Default case + // Fallback to first valid entry + encryptedVault = + typeof validEntries[0] === 'string' + ? validEntries[0] + : Object.values(validEntries[0])[0]; } } - } else { - // Handling when currentId is not provided - if (vaultArray[accountIndex] !== undefined) { - encryptedVault = vaultArray[accountIndex]; - } else if (vaultArray[0] !== undefined) { - encryptedVault = vaultArray[0]; - } else { - encryptedVault = vaultArray; // Default case - } } if (!encryptedVault) { @@ -800,9 +807,22 @@ class KeyringService extends EventEmitter { await this.clearKeyrings(); const vault = await this.encryptor.decrypt(password, encryptedVault); this.password = password; - // TODO: FIXME - await Promise.all(Array.from(vault).map(this._restoreKeyring.bind(this))); + + // Fix: Cast vault to any[] to handle the array of keyring objects + await Promise.all( + (vault as unknown as any[]).map(async (keyring) => { + try { + await this._restoreKeyring(keyring); + console.log('Successfully restored keyring:', keyring.type); + } catch (error) { + console.error('Failed to restore keyring:', error); + throw error; + } + }) + ); + await this._updateMemStoreKeyrings(); + console.log('Final keyrings state:', this.keyrings); return this.keyrings; } @@ -911,12 +931,26 @@ class KeyringService extends EventEmitter { const { type, data } = serialized; const Keyring = this.getKeyringClassForType(type); const keyring = new Keyring(); - await keyring.deserialize(data); - // getAccounts also validates the accounts for some keyrings - await keyring.getAccounts(); - this.keyrings.push(keyring); - return keyring; + try { + // For HD Key Tree, initialize with just the mnemonic and indexes + if (type === 'HD Key Tree' && data) { + await keyring.deserialize({ + mnemonic: data.mnemonic, + activeIndexes: data.activeIndexes || [0], + hdPath: 'm', + }); + } else { + await keyring.deserialize(data); + } + + await keyring.getAccounts(); + this.keyrings.push(keyring); + return keyring; + } catch (error) { + console.error('Restore keyring error:', error); + throw error; + } } /** diff --git a/src/background/service/keyring/simpleKeyring.ts b/src/background/service/keyring/simpleKeyring.ts new file mode 100644 index 00000000..c20c57a0 --- /dev/null +++ b/src/background/service/keyring/simpleKeyring.ts @@ -0,0 +1,109 @@ +import { Wallet, HDNodeWallet } from 'ethers'; + +import { normalizeAddress } from 'background/utils'; + +export class SimpleKeyring { + static type = 'Simple Key Pair'; + type = 'Simple Key Pair'; + wallets: { privateKey: Buffer }[] = []; + + constructor(privateKeys?: string[]) { + if (privateKeys?.length) { + this.deserialize(privateKeys); + } + } + + async serialize() { + return this.wallets.map((w) => w.privateKey.toString('hex')); + } + + async deserialize(privateKeys: string[]) { + this.wallets = privateKeys.map((pk) => ({ + privateKey: Buffer.from(pk, 'hex'), + })); + } + + async addAccounts(n = 1) { + const newAddresses: string[] = []; + + for (let i = 0; i < n; i++) { + const wallet = Wallet.createRandom(); + this.wallets.push({ + privateKey: Buffer.from(wallet.privateKey.slice(2), 'hex'), + }); + newAddresses.push(normalizeAddress(wallet.address)); + } + + return newAddresses; + } + + async getAccounts() { + return Promise.resolve( + this.wallets.map((w) => normalizeAddress(new Wallet(w.privateKey.toString('hex')).address)) + ); + } + + async removeAccount(address: string) { + const normalizedAddress = normalizeAddress(address); + const index = this.wallets.findIndex( + (w) => + normalizeAddress(new Wallet(w.privateKey.toString('hex')).address) === normalizedAddress + ); + if (index === -1) throw new Error('Address not found'); + this.wallets.splice(index, 1); + } + + private getWalletByAddress(address: string): Wallet { + const normalizedAddress = normalizeAddress(address); + const privateKey = this.wallets.find( + (w) => + normalizeAddress(new Wallet(w.privateKey.toString('hex')).address) === normalizedAddress + ); + if (!privateKey) throw new Error('Address not found'); + return new Wallet(privateKey.privateKey.toString('hex')); + } + + async exportAccount(address: string): Promise { + return this.getWalletByAddress(address).privateKey; + } + + async signTransaction(address: string, tx: any) { + const wallet = this.getWalletByAddress(address); + return wallet.signTransaction(tx); + } + + async signMessage(address: string, data: string) { + const wallet = this.getWalletByAddress(address); + return wallet.signMessage(data); + } + + async signPersonalMessage(address: string, data: string) { + return this.signMessage(address, data); + } + + async signTypedData(address: string, data: any, opts: { version: string } = { version: 'V1' }) { + const wallet = this.getWalletByAddress(address); + + switch (opts.version) { + case 'V1': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + case 'V3': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + case 'V4': + return wallet.signTypedData(data.domain || {}, data.types || {}, data.message || {}); + default: + throw new Error(`Unsupported typed data version: ${opts.version}`); + } + } + + async getEncryptionPublicKey(address: string) { + const wallet = this.getWalletByAddress(address); + return wallet.signingKey.publicKey; + } + + async decryptMessage(address: string, data: string) { + const wallet = this.getWalletByAddress(address); + // Todo: This is a placeholder. Implement actual message decryption logic + throw new Error('Message decryption not implemented'); + } +} From 29e559c58d1504d8a052306fc5dc34c0f2c45144 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 17 Dec 2024 18:40:33 +1100 Subject: [PATCH 16/50] fixed: remove unused import --- src/background/service/keyring/hdKeyring.ts | 6 +----- src/background/service/keyring/simpleKeyring.ts | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/background/service/keyring/hdKeyring.ts b/src/background/service/keyring/hdKeyring.ts index 10135b5b..197066bc 100644 --- a/src/background/service/keyring/hdKeyring.ts +++ b/src/background/service/keyring/hdKeyring.ts @@ -1,6 +1,4 @@ -import { ethers, Wallet, HDNodeWallet } from 'ethers'; - -import { normalizeAddress } from 'background/utils'; +import { ethers, HDNodeWallet } from 'ethers'; export class HDKeyring { static type = 'HD Key Tree'; @@ -9,7 +7,6 @@ export class HDKeyring { private hdWallet: HDNodeWallet | null = null; private mnemonic: string | null = null; private activeIndexes: number[] = []; - private basePath = "m/44'/539'/0'/0"; constructor(opts?: { mnemonic?: string; activeIndexes?: number[] }) { if (opts?.mnemonic) { @@ -49,7 +46,6 @@ export class HDKeyring { } async removeAccount(address: string) { - // No need to handle multiple accounts if we only care about mnemonic throw new Error('Operation not supported'); } diff --git a/src/background/service/keyring/simpleKeyring.ts b/src/background/service/keyring/simpleKeyring.ts index c20c57a0..df5f3f31 100644 --- a/src/background/service/keyring/simpleKeyring.ts +++ b/src/background/service/keyring/simpleKeyring.ts @@ -1,4 +1,4 @@ -import { Wallet, HDNodeWallet } from 'ethers'; +import { Wallet } from 'ethers'; import { normalizeAddress } from 'background/utils'; From d2d7fe94454e75f9ddd0268cc5808b93f3d8b643 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 10 Dec 2024 16:28:49 +1100 Subject: [PATCH 17/50] 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 18/50] 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 19/50] 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 20/50] 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 21/50] 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 22/50] 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 23/50] 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 24/50] 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 25/50] 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 26/50] 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 27/50] 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 28/50] 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 29/50] 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 69d0e0f72ccbddb27381a3cf0cf1ddd2dbdcf01f Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 17 Dec 2024 20:15:56 +1100 Subject: [PATCH 30/50] feat: remove metmask store from keyring --- src/background/service/keyring/index.ts | 47 ++++++++++++++++++++----- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/src/background/service/keyring/index.ts b/src/background/service/keyring/index.ts index 9cf90de1..c4610546 100644 --- a/src/background/service/keyring/index.ts +++ b/src/background/service/keyring/index.ts @@ -2,7 +2,6 @@ import { EventEmitter } from 'events'; -import { ObservableStore } from '@metamask/obs-store'; import * as bip39 from 'bip39'; import encryptor from 'browser-passworder'; import * as ethUtil from 'ethereumjs-util'; @@ -53,13 +52,42 @@ export interface DisplayedKeryring { keyring: any; } +class SimpleStore { + private state: T; + private listeners: ((state: T) => void)[] = []; + + constructor(initialState: T) { + this.state = initialState; + } + + getState(): T { + return this.state; + } + + updateState(partialState: Partial) { + this.state = { ...this.state, ...partialState }; + this.notifyListeners(); + } + + subscribe(listener: (state: T) => void) { + this.listeners.push(listener); + return () => { + this.listeners = this.listeners.filter((l) => l !== listener); + }; + } + + private notifyListeners() { + this.listeners.forEach((listener) => listener(this.state)); + } +} + class KeyringService extends EventEmitter { // // PUBLIC METHODS // keyringTypes: any[]; - store!: ObservableStore; - memStore: ObservableStore; + store!: SimpleStore; + memStore: SimpleStore; keyrings: any[]; encryptor: typeof encryptor = encryptor; password: string | null = null; @@ -67,20 +95,16 @@ class KeyringService extends EventEmitter { constructor() { super(); this.keyringTypes = Object.values(KEYRING_SDK_TYPES); - this.memStore = new ObservableStore({ + this.store = new SimpleStore({ booted: false }); + this.memStore = new SimpleStore({ isUnlocked: false, keyringTypes: this.keyringTypes.map((krt) => krt.type), keyrings: [], preMnemonics: '', }); - this.keyrings = []; } - loadStore(initState) { - this.store = new ObservableStore(initState); - } - loadMemStore() { return this.memStore.getState(); } @@ -1169,6 +1193,11 @@ class KeyringService extends EventEmitter { this.memStore.updateState({ isUnlocked: true }); this.emit('unlock'); } + + loadStore(initState) { + this.store = new SimpleStore(initState || { booted: false }); + return this.store.subscribe((value) => storage.set('keyringState', value)); + } } export default new KeyringService(); From 72a998cc6c8f983be5f810647d733313eed908f9 Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 17 Dec 2024 21:37:06 +1100 Subject: [PATCH 31/50] fixed: remove metamask hash utils when using sign type data. --- .../controller/provider/controller.ts | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/background/controller/provider/controller.ts b/src/background/controller/provider/controller.ts index 84b8de67..9a260f1a 100644 --- a/src/background/controller/provider/controller.ts +++ b/src/background/controller/provider/controller.ts @@ -1,4 +1,3 @@ -import { TypedDataUtils, SignTypedDataVersion, normalize } from '@metamask/eth-sig-util'; import * as fcl from '@onflow/fcl'; import BigNumber from 'bignumber.js'; import { ethErrors } from 'eth-rpc-errors'; @@ -146,6 +145,41 @@ async function signTypeData(msgParams, opts = {}) { return '0x' + toHexString(encodedProof); } +const SignTypedDataVersion = { + V1: 'V1', + V3: 'V3', + V4: 'V4', +} as const; + +function normalize(input: string): string { + return input.toLowerCase(); +} + +const TypedDataUtils = { + eip712Hash(message: any, version: string): Buffer { + const types = { ...message.types }; + delete types.EIP712Domain; + + const primaryType = message.primaryType || 'OrderComponents'; + + const encoder = new ethers.TypedDataEncoder({ + [primaryType]: types[primaryType], + ...types, + }); + + const domainSeparator = ethers.TypedDataEncoder.hashDomain(message.domain); + const hashStruct = encoder.hash(message.message); + + const encodedData = ethers.concat([ + Buffer.from('1901', 'hex'), + Buffer.from(domainSeparator.slice(2), 'hex'), + Buffer.from(hashStruct.slice(2), 'hex'), + ]); + + return Buffer.from(ethers.keccak256(encodedData).slice(2), 'hex'); + }, +}; + class ProviderController extends BaseController { ethRpc = async (data): Promise => { const network = await Wallet.getNetwork(); // Get the current network From 7c45a8a936dadd32c2167c47f2446bb4af54af2f Mon Sep 17 00:00:00 2001 From: zzggo Date: Tue, 17 Dec 2024 21:43:57 +1100 Subject: [PATCH 32/50] fixed: remove console --- src/background/service/keyring/index.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/background/service/keyring/index.ts b/src/background/service/keyring/index.ts index c4610546..966e886f 100644 --- a/src/background/service/keyring/index.ts +++ b/src/background/service/keyring/index.ts @@ -186,7 +186,6 @@ class KeyringService extends EventEmitter { }); }) .then((firstKeyring) => { - console.log('firstKeyring ', firstKeyring); keyring = firstKeyring; return firstKeyring.getAccounts(); }) @@ -250,21 +249,18 @@ class KeyringService extends EventEmitter { * @returns {Promise} A Promise that resolves to the state. */ async createKeyringWithMnemonics(seed: string): Promise { - console.log('createKeyringWithMnemonics ================== ', seed); if (!bip39.validateMnemonic(seed)) { return Promise.reject(new Error(i18n.t('mnemonic phrase is invalid'))); } let keyring; return this.persistAllKeyrings() .then(() => { - console.log('seed ', seed); return this.addNewKeyring('HD Key Tree', { mnemonic: seed, activeIndexes: [0], }); }) .then((firstKeyring) => { - console.log('firstKeyring ================== ', firstKeyring); keyring = firstKeyring; return firstKeyring.getAccounts(); }) @@ -281,7 +277,6 @@ class KeyringService extends EventEmitter { } async addKeyring(keyring) { - console.log('addKeyring ================== ', keyring); return keyring .getAccounts() .then((accounts) => { @@ -336,10 +331,8 @@ class KeyringService extends EventEmitter { async submitPassword(password: string): Promise { await this.verifyPassword(password); this.password = password; - console.log('this.verifyPassword ================== ', password); try { this.keyrings = await this.unlockKeyrings(password); - console.log('this.keyrings ================== ', this.keyrings); } catch { // } finally { @@ -380,7 +373,6 @@ class KeyringService extends EventEmitter { */ addNewKeyring(type: string, opts?: unknown): Promise { const Keyring = this.getKeyringClassForType(type); - console.log('Keyring ================== ', Keyring); const keyring = new Keyring(opts); return this.addKeyring(keyring); } @@ -846,7 +838,6 @@ class KeyringService extends EventEmitter { ); await this._updateMemStoreKeyrings(); - console.log('Final keyrings state:', this.keyrings); return this.keyrings; } From 43517e38084d99b902cf2b275e81fa2ca6f30d95 Mon Sep 17 00:00:00 2001 From: zzggo Date: Wed, 18 Dec 2024 20:33:17 +1100 Subject: [PATCH 33/50] 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 34/50] 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 35/50] 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 36/50] 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 0aab826d0815f0fb665c97f307888b32d9963831 Mon Sep 17 00:00:00 2001 From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com> Date: Thu, 19 Dec 2024 16:28:09 +1100 Subject: [PATCH 37/50] Updated to compile as an ES module - Changed type to module in package.json - Updated `package.json` to set the module type and specify exact versions for several dependencies, including `autoprefixer`, `postcss-custom-properties`, `postcss-import`, and `postcss-nested`. - Removed the obsolete `postcss.config.js` file. - Updated TypeScript configuration to include `postcss.config.ts` in the compilation. - Refactored import statements in various components to use `.js` extensions for consistency. const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); This commit enhances the project's structure and ensures compatibility with the latest package versions. Closes #305 --- build/analyze-dependencies.ts | 4 + build/prepareManifest.ts | 4 + build/release.ts | 4 + build/webpack.common.config.ts | 8 +- e2e/wallet.test.ts | 6 +- package.json | 9 +- playwright.config.ts | 2 +- pnpm-lock.yaml | 130 ++++++----- postcss.config.js | 8 - postcss.config.ts | 12 ++ src/components/iconfont/IconAClose.js | 2 +- src/components/iconfont/IconAGroup762.js | 2 +- src/components/iconfont/IconAHamburgermenu.js | 2 +- .../iconfont/IconAVector11Stroke.js | 2 +- src/components/iconfont/IconAbout.js | 2 +- src/components/iconfont/IconAccount.js | 2 +- src/components/iconfont/IconAddressbook.js | 2 +- src/components/iconfont/IconAppStore.js | 2 +- src/components/iconfont/IconBack.js | 2 +- src/components/iconfont/IconBackButton.js | 2 +- src/components/iconfont/IconBackup.js | 2 +- src/components/iconfont/IconBinance.js | 2 +- src/components/iconfont/IconCheckmark.js | 2 +- src/components/iconfont/IconChevronRight.js | 2 +- src/components/iconfont/IconClose.js | 2 +- src/components/iconfont/IconCoinbase.js | 2 +- src/components/iconfont/IconCopy.js | 2 +- src/components/iconfont/IconCreate.js | 2 +- src/components/iconfont/IconCurrency.js | 2 +- src/components/iconfont/IconDeveloper.js | 2 +- src/components/iconfont/IconDevices.js | 2 +- src/components/iconfont/IconDollar.js | 2 +- src/components/iconfont/IconDropdown.js | 2 +- src/components/iconfont/IconExec.js | 2 +- src/components/iconfont/IconEye.js | 2 +- src/components/iconfont/IconFlow.js | 2 +- src/components/iconfont/IconFlowns.js | 2 +- src/components/iconfont/IconFusd.js | 2 +- src/components/iconfont/IconGoogleDrive.js | 2 +- src/components/iconfont/IconHuobi.js | 2 +- src/components/iconfont/IconImport.js | 2 +- src/components/iconfont/IconInbox.js | 2 +- src/components/iconfont/IconKraken.js | 2 +- src/components/iconfont/IconKucoin.js | 2 +- src/components/iconfont/IconLock.js | 2 +- src/components/iconfont/IconLogo.js | 2 +- src/components/iconfont/IconMax.js | 2 +- src/components/iconfont/IconNfts.js | 2 +- src/components/iconfont/IconNotification.js | 2 +- src/components/iconfont/IconPlayStore.js | 2 +- src/components/iconfont/IconPlus.js | 2 +- src/components/iconfont/IconSearch.js | 2 +- src/components/iconfont/IconSecurity.js | 2 +- src/components/iconfont/IconSetting.js | 2 +- src/components/iconfont/IconSubtract.js | 2 +- src/components/iconfont/IconSwitch.js | 2 +- src/components/iconfont/IconTheme.js | 2 +- src/components/iconfont/IconUserSwitch.js | 2 +- src/components/iconfont/IconVector.js | 2 +- src/components/iconfont/IconVector2.js | 2 +- src/components/iconfont/IconWallet.js | 2 +- src/components/iconfont/index.js | 204 +++++++++--------- tsconfig.json | 9 +- 63 files changed, 266 insertions(+), 236 deletions(-) delete mode 100644 postcss.config.js create mode 100644 postcss.config.ts diff --git a/build/analyze-dependencies.ts b/build/analyze-dependencies.ts index 3a5db531..3528b95b 100644 --- a/build/analyze-dependencies.ts +++ b/build/analyze-dependencies.ts @@ -1,5 +1,6 @@ import fs from 'fs'; import path from 'path'; +import { fileURLToPath } from 'url'; import { parse } from '@babel/parser'; import traverseDefault from '@babel/traverse'; @@ -8,6 +9,9 @@ import webpack from 'webpack'; import webpackConfig from '../webpack.config.js'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + type Dependencies = { background: Set; ui: Set; diff --git a/build/prepareManifest.ts b/build/prepareManifest.ts index c2458cac..106cd974 100644 --- a/build/prepareManifest.ts +++ b/build/prepareManifest.ts @@ -1,9 +1,13 @@ import fs from 'fs'; import http from 'http'; import path from 'path'; +import { fileURLToPath } from 'url'; import dotenv from 'dotenv'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + const PROJECT_ROOT = path.resolve(__dirname, '..'); const args = process.argv.slice(2); const mode = args[0]; diff --git a/build/release.ts b/build/release.ts index e7fdaa62..7df4cef7 100644 --- a/build/release.ts +++ b/build/release.ts @@ -1,10 +1,14 @@ import fs from 'fs'; import path from 'path'; +import { fileURLToPath } from 'url'; import { prompt } from 'enquirer'; import shell from 'shelljs'; import zipdir from 'zip-dir'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + const PROJECT_ROOT = path.resolve(__dirname, '..'); type Version = `${number}.${number}.${number}`; diff --git a/build/webpack.common.config.ts b/build/webpack.common.config.ts index a7d52d82..640b56a1 100644 --- a/build/webpack.common.config.ts +++ b/build/webpack.common.config.ts @@ -3,7 +3,6 @@ import path from 'path'; import CopyPlugin from 'copy-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; -import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'; import webpack from 'webpack'; import packageJson from '../package.json'; @@ -176,10 +175,13 @@ const config = (env: { config: 'dev' | 'pro' | 'none' }): webpack.Configuration resolve: { alias: { moment: require.resolve('dayjs'), - // Forces all cross-fetch imports to use the same instance 'cross-fetch': require.resolve('cross-fetch'), + '@': paths.rootResolve('src'), + ui: paths.rootResolve('src/ui'), + background: paths.rootResolve('src/background'), + consts: paths.rootResolve('src/constant/index'), }, - plugins: [new TsconfigPathsPlugin()], + plugins: [], fallback: { // Removes polyfills that were interfering with native fetch http: false, diff --git a/e2e/wallet.test.ts b/e2e/wallet.test.ts index 08617290..9c3ab7e8 100644 --- a/e2e/wallet.test.ts +++ b/e2e/wallet.test.ts @@ -1,6 +1,10 @@ import path from 'path'; +import { fileURLToPath } from 'url'; -import { test, expect, chromium } from '@playwright/test'; +import { test, chromium } from '@playwright/test'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); test('Load extension', async () => { // Get path to extension diff --git a/package.json b/package.json index 83b69234..5f5c57bb 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "flow-reference-wallet", "version": "2.6.3", "description": "Digital wallet created for everyone.", + "type": "module", "scripts": { "prepare:dev": "pnpx tsx ./build/prepareManifest.ts dev", "prepare:pro": "pnpx tsx ./build/prepareManifest.ts pro", @@ -160,7 +161,7 @@ "@typescript-eslint/eslint-plugin": "^8.15.0", "@typescript-eslint/parser": "^8.15.0", "@welldone-software/why-did-you-render": "^6.2.3", - "autoprefixer": "latest", + "autoprefixer": "^10.4.20", "css-loader": "^5.2.7", "dotenv": "^16.4.5", "dotenv-webpack": "^8.1.0", @@ -187,10 +188,10 @@ "path-browserify": "^1.0.1", "pinst": "^3.0.0", "postcss": "^8.4.49", - "postcss-custom-properties": "^11.0.0", - "postcss-import": "^14.1.0", + "postcss-custom-properties": "^14.0.4", + "postcss-import": "^16.1.0", "postcss-loader": "^5.3.0", - "postcss-nested": "^5.0.6", + "postcss-nested": "^7.0.2", "prettier": "^3.3.3", "react-devtools": "^6.0.1", "react-i18next": "^15.1.1", diff --git a/playwright.config.ts b/playwright.config.ts index d55da4df..0c84136e 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -12,7 +12,7 @@ import { defineConfig, devices } from '@playwright/test'; * See https://playwright.dev/docs/test-configuration. */ export default defineConfig({ - testDir: './tests', + testDir: './e2e', /* Run tests in files in parallel */ fullyParallel: true, /* Fail the build on CI if you accidentally left test.only in the source code. */ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86aa052f..e3c46ec3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -397,7 +397,7 @@ importers: specifier: ^6.2.3 version: 6.2.3(react@18.3.1) autoprefixer: - specifier: latest + specifier: ^10.4.20 version: 10.4.20(postcss@8.4.49) css-loader: specifier: ^5.2.7 @@ -478,17 +478,17 @@ importers: specifier: ^8.4.49 version: 8.4.49 postcss-custom-properties: - specifier: ^11.0.0 - version: 11.0.0(postcss@8.4.49) + specifier: ^14.0.4 + version: 14.0.4(postcss@8.4.49) postcss-import: - specifier: ^14.1.0 - version: 14.1.0(postcss@8.4.49) + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.49) postcss-loader: specifier: ^5.3.0 version: 5.3.0(postcss@8.4.49)(webpack@5.97.1) postcss-nested: - specifier: ^5.0.6 - version: 5.0.6(postcss@8.4.49) + specifier: ^7.0.2 + version: 7.0.2(postcss@8.4.49) prettier: specifier: ^3.3.3 version: 3.4.2 @@ -1196,6 +1196,29 @@ packages: '@coinbase/wallet-sdk@3.9.3': resolution: {integrity: sha512-N/A2DRIf0Y3PHc1XAMvbBUu4zisna6qAdqABMZwBMNEfWrXpAwx16pZGkYCLGE+Rvv1edbcB2LYDRnACNcmCiw==} + '@csstools/cascade-layer-name-parser@2.0.4': + resolution: {integrity: sha512-7DFHlPuIxviKYZrOiwVU/PiHLm3lLUR23OMuEEtfEOQTOp9hzQ2JjdY6X5H18RVuUPJqSCI+qNnD5iOLMVE0bA==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.4 + '@csstools/css-tokenizer': ^3.0.3 + + '@csstools/css-parser-algorithms@3.0.4': + resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.3 + + '@csstools/css-tokenizer@3.0.3': + resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==} + engines: {node: '>=18'} + + '@csstools/utilities@2.0.0': + resolution: {integrity: sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + '@debank/common@0.3.60': resolution: {integrity: sha512-SaFTXvnn2aYQTPB3B8YD/AhHYwdMRiqu7jCkYV6c/Sd3MmxzJR3v+Kd4jlQniKfEdB21+1vMb0NlzHw/gyemlw==} @@ -6378,10 +6401,6 @@ packages: is-typedarray@1.0.0: resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==} - is-url-superb@4.0.0: - resolution: {integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==} - engines: {node: '>=10'} - is-weakmap@2.0.2: resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==} engines: {node: '>= 0.4'} @@ -7690,9 +7709,6 @@ packages: pend@1.2.0: resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==} - picocolors@0.2.1: - resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} - picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -7796,17 +7812,11 @@ packages: peerDependencies: postcss: ^8.0.0 - postcss-custom-properties@11.0.0: - resolution: {integrity: sha512-Fhnx/QLt+CTt23A/KKVx1anZD9nmVpOxKCKv5owWacMoOsBXFhMAD6SZYbmPMH4nHdIeMUnWOvLZnlY4niS0sA==} - engines: {node: '>=10.0.0'} - peerDependencies: - postcss: ^8.1.0 - - postcss-import@14.1.0: - resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==} - engines: {node: '>=10.0.0'} + postcss-custom-properties@14.0.4: + resolution: {integrity: sha512-QnW8FCCK6q+4ierwjnmXF9Y9KF8q0JkbgVfvQEMa93x1GT8FvOiUevWCN2YLaOWyByeDX8S6VFbZEeWoAoXs2A==} + engines: {node: '>=18'} peerDependencies: - postcss: ^8.0.0 + postcss: ^8.4 postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} @@ -7814,6 +7824,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -7878,15 +7894,15 @@ packages: peerDependencies: postcss: ^8.1.0 - postcss-nested@5.0.6: - resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==} + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 - postcss-nested@6.2.0: - resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} - engines: {node: '>=12.0'} + postcss-nested@7.0.2: + resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==} + engines: {node: '>=18.0'} peerDependencies: postcss: ^8.2.14 @@ -7907,14 +7923,6 @@ packages: postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - postcss-values-parser@4.0.0: - resolution: {integrity: sha512-R9x2D87FcbhwXUmoCXJR85M1BLII5suXRuXibGYyBJ7lVDEpRIdKZh4+8q5S+/+A4m0IoG1U5tFw39asyhX/Hw==} - engines: {node: '>=10'} - - postcss@7.0.39: - resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==} - engines: {node: '>=6.0.0'} - postcss@8.4.49: resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} engines: {node: ^10 || ^12 || >=14} @@ -11051,6 +11059,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@csstools/cascade-layer-name-parser@2.0.4(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3) + '@csstools/css-tokenizer': 3.0.3 + + '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)': + dependencies: + '@csstools/css-tokenizer': 3.0.3 + + '@csstools/css-tokenizer@3.0.3': {} + + '@csstools/utilities@2.0.0(postcss@8.4.49)': + dependencies: + postcss: 8.4.49 + '@debank/common@0.3.60': {} '@discoveryjs/json-ext@0.5.7': {} @@ -18267,8 +18290,6 @@ snapshots: is-typedarray@1.0.0: {} - is-url-superb@4.0.0: {} - is-weakmap@2.0.2: {} is-weakref@1.0.2: @@ -20047,8 +20068,6 @@ snapshots: pend@1.2.0: {} - picocolors@0.2.1: {} - picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -20151,19 +20170,23 @@ snapshots: - jiti - tsx - postcss-custom-properties@11.0.0(postcss@8.4.49): + postcss-custom-properties@14.0.4(postcss@8.4.49): dependencies: + '@csstools/cascade-layer-name-parser': 2.0.4(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) + '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3) + '@csstools/css-tokenizer': 3.0.3 + '@csstools/utilities': 2.0.0(postcss@8.4.49) postcss: 8.4.49 - postcss-values-parser: 4.0.0 + postcss-value-parser: 4.2.0 - postcss-import@14.1.0(postcss@8.4.49): + postcss-import@15.1.0(postcss@8.4.49): dependencies: postcss: 8.4.49 postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - postcss-import@15.1.0(postcss@8.4.49): + postcss-import@16.1.0(postcss@8.4.49): dependencies: postcss: 8.4.49 postcss-value-parser: 4.2.0 @@ -20219,15 +20242,15 @@ snapshots: icss-utils: 5.1.0(postcss@8.4.49) postcss: 8.4.49 - postcss-nested@5.0.6(postcss@8.4.49): + postcss-nested@6.2.0(postcss@8.4.49): dependencies: postcss: 8.4.49 postcss-selector-parser: 6.1.2 - postcss-nested@6.2.0(postcss@8.4.49): + postcss-nested@7.0.2(postcss@8.4.49): dependencies: postcss: 8.4.49 - postcss-selector-parser: 6.1.2 + postcss-selector-parser: 7.0.0 postcss-reporter@7.1.0(postcss@8.4.49): dependencies: @@ -20247,17 +20270,6 @@ snapshots: postcss-value-parser@4.2.0: {} - postcss-values-parser@4.0.0: - dependencies: - color-name: 1.1.4 - is-url-superb: 4.0.0 - postcss: 7.0.39 - - postcss@7.0.39: - dependencies: - picocolors: 0.2.1 - source-map: 0.6.1 - postcss@8.4.49: dependencies: nanoid: 3.3.8 diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 6e63fe34..00000000 --- a/postcss.config.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - plugins: [ - require('postcss-import'), - require('postcss-nested'), - require('postcss-custom-properties'), - require('autoprefixer'), - ], -}; diff --git a/postcss.config.ts b/postcss.config.ts new file mode 100644 index 00000000..49b4682f --- /dev/null +++ b/postcss.config.ts @@ -0,0 +1,12 @@ +export default { + plugins: { + 'postcss-import': {}, + 'postcss-nested': {}, + 'postcss-custom-properties': { + preserve: false, + }, + autoprefixer: { + grid: 'autoplace', + }, + }, +}; diff --git a/src/components/iconfont/IconAClose.js b/src/components/iconfont/IconAClose.js index 6598026f..f3a3300d 100644 --- a/src/components/iconfont/IconAClose.js +++ b/src/components/iconfont/IconAClose.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAGroup762.js b/src/components/iconfont/IconAGroup762.js index 4dbea04e..bfd18ce7 100644 --- a/src/components/iconfont/IconAGroup762.js +++ b/src/components/iconfont/IconAGroup762.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAHamburgermenu.js b/src/components/iconfont/IconAHamburgermenu.js index b9952991..aa502a28 100644 --- a/src/components/iconfont/IconAHamburgermenu.js +++ b/src/components/iconfont/IconAHamburgermenu.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAVector11Stroke.js b/src/components/iconfont/IconAVector11Stroke.js index c48312c7..d7e0b7de 100644 --- a/src/components/iconfont/IconAVector11Stroke.js +++ b/src/components/iconfont/IconAVector11Stroke.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAbout.js b/src/components/iconfont/IconAbout.js index d3226c2a..3619ed7f 100644 --- a/src/components/iconfont/IconAbout.js +++ b/src/components/iconfont/IconAbout.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAccount.js b/src/components/iconfont/IconAccount.js index 1df3d390..6d8b39c3 100644 --- a/src/components/iconfont/IconAccount.js +++ b/src/components/iconfont/IconAccount.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAddressbook.js b/src/components/iconfont/IconAddressbook.js index 96927d0e..377a9a7c 100644 --- a/src/components/iconfont/IconAddressbook.js +++ b/src/components/iconfont/IconAddressbook.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconAppStore.js b/src/components/iconfont/IconAppStore.js index 8ad32a92..0a18dc54 100644 --- a/src/components/iconfont/IconAppStore.js +++ b/src/components/iconfont/IconAppStore.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconBack.js b/src/components/iconfont/IconBack.js index 88d9e470..b8498906 100644 --- a/src/components/iconfont/IconBack.js +++ b/src/components/iconfont/IconBack.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconBackButton.js b/src/components/iconfont/IconBackButton.js index 73f0d899..d26f0ac8 100644 --- a/src/components/iconfont/IconBackButton.js +++ b/src/components/iconfont/IconBackButton.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconBackup.js b/src/components/iconfont/IconBackup.js index b52dfd98..5f1eabdf 100644 --- a/src/components/iconfont/IconBackup.js +++ b/src/components/iconfont/IconBackup.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconBinance.js b/src/components/iconfont/IconBinance.js index 0cb41765..1f84ca5e 100644 --- a/src/components/iconfont/IconBinance.js +++ b/src/components/iconfont/IconBinance.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconCheckmark.js b/src/components/iconfont/IconCheckmark.js index f2ff8e59..6512139f 100644 --- a/src/components/iconfont/IconCheckmark.js +++ b/src/components/iconfont/IconCheckmark.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconChevronRight.js b/src/components/iconfont/IconChevronRight.js index 973dac57..6371b185 100644 --- a/src/components/iconfont/IconChevronRight.js +++ b/src/components/iconfont/IconChevronRight.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconClose.js b/src/components/iconfont/IconClose.js index 0493c2d9..3777b43a 100644 --- a/src/components/iconfont/IconClose.js +++ b/src/components/iconfont/IconClose.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconCoinbase.js b/src/components/iconfont/IconCoinbase.js index 91f5110b..a017ff38 100644 --- a/src/components/iconfont/IconCoinbase.js +++ b/src/components/iconfont/IconCoinbase.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconCopy.js b/src/components/iconfont/IconCopy.js index 03111486..3f77404e 100644 --- a/src/components/iconfont/IconCopy.js +++ b/src/components/iconfont/IconCopy.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconCreate.js b/src/components/iconfont/IconCreate.js index ef0688ce..e2eb8eec 100644 --- a/src/components/iconfont/IconCreate.js +++ b/src/components/iconfont/IconCreate.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconCurrency.js b/src/components/iconfont/IconCurrency.js index 68cce554..061d16ac 100644 --- a/src/components/iconfont/IconCurrency.js +++ b/src/components/iconfont/IconCurrency.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconDeveloper.js b/src/components/iconfont/IconDeveloper.js index eaba96b1..fcabe31c 100644 --- a/src/components/iconfont/IconDeveloper.js +++ b/src/components/iconfont/IconDeveloper.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconDevices.js b/src/components/iconfont/IconDevices.js index 37cbb89f..4ddc841a 100644 --- a/src/components/iconfont/IconDevices.js +++ b/src/components/iconfont/IconDevices.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconDollar.js b/src/components/iconfont/IconDollar.js index 92c13000..1286bb14 100644 --- a/src/components/iconfont/IconDollar.js +++ b/src/components/iconfont/IconDollar.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconDropdown.js b/src/components/iconfont/IconDropdown.js index 14fab4b4..0a09e4ac 100644 --- a/src/components/iconfont/IconDropdown.js +++ b/src/components/iconfont/IconDropdown.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconExec.js b/src/components/iconfont/IconExec.js index 975eb808..7c42c229 100644 --- a/src/components/iconfont/IconExec.js +++ b/src/components/iconfont/IconExec.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconEye.js b/src/components/iconfont/IconEye.js index 714be98b..f2b8bbb8 100644 --- a/src/components/iconfont/IconEye.js +++ b/src/components/iconfont/IconEye.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconFlow.js b/src/components/iconfont/IconFlow.js index a03075c0..ba3e2637 100644 --- a/src/components/iconfont/IconFlow.js +++ b/src/components/iconfont/IconFlow.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconFlowns.js b/src/components/iconfont/IconFlowns.js index c26eda8e..e25c0ecd 100644 --- a/src/components/iconfont/IconFlowns.js +++ b/src/components/iconfont/IconFlowns.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconFusd.js b/src/components/iconfont/IconFusd.js index 91252e62..808f23f3 100644 --- a/src/components/iconfont/IconFusd.js +++ b/src/components/iconfont/IconFusd.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconGoogleDrive.js b/src/components/iconfont/IconGoogleDrive.js index 6f96c3db..b3cd8b58 100644 --- a/src/components/iconfont/IconGoogleDrive.js +++ b/src/components/iconfont/IconGoogleDrive.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconHuobi.js b/src/components/iconfont/IconHuobi.js index e6a95b36..213f5252 100644 --- a/src/components/iconfont/IconHuobi.js +++ b/src/components/iconfont/IconHuobi.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconImport.js b/src/components/iconfont/IconImport.js index 22cea085..c5ec4cf8 100644 --- a/src/components/iconfont/IconImport.js +++ b/src/components/iconfont/IconImport.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconInbox.js b/src/components/iconfont/IconInbox.js index dc2d9656..23252d3c 100644 --- a/src/components/iconfont/IconInbox.js +++ b/src/components/iconfont/IconInbox.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconKraken.js b/src/components/iconfont/IconKraken.js index bf68d044..24fe3d00 100644 --- a/src/components/iconfont/IconKraken.js +++ b/src/components/iconfont/IconKraken.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconKucoin.js b/src/components/iconfont/IconKucoin.js index eafd6e3a..824e001d 100644 --- a/src/components/iconfont/IconKucoin.js +++ b/src/components/iconfont/IconKucoin.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconLock.js b/src/components/iconfont/IconLock.js index c92334e0..c9f8ebe5 100644 --- a/src/components/iconfont/IconLock.js +++ b/src/components/iconfont/IconLock.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconLogo.js b/src/components/iconfont/IconLogo.js index f59323cb..e0a7a4b0 100644 --- a/src/components/iconfont/IconLogo.js +++ b/src/components/iconfont/IconLogo.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconMax.js b/src/components/iconfont/IconMax.js index daf53dba..f190edda 100644 --- a/src/components/iconfont/IconMax.js +++ b/src/components/iconfont/IconMax.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconNfts.js b/src/components/iconfont/IconNfts.js index 8ce2ff0b..2719c5ff 100644 --- a/src/components/iconfont/IconNfts.js +++ b/src/components/iconfont/IconNfts.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconNotification.js b/src/components/iconfont/IconNotification.js index d577f2da..2e719a20 100644 --- a/src/components/iconfont/IconNotification.js +++ b/src/components/iconfont/IconNotification.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconPlayStore.js b/src/components/iconfont/IconPlayStore.js index 63965b68..5dcb5d15 100644 --- a/src/components/iconfont/IconPlayStore.js +++ b/src/components/iconfont/IconPlayStore.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconPlus.js b/src/components/iconfont/IconPlus.js index a91ca063..447553e5 100644 --- a/src/components/iconfont/IconPlus.js +++ b/src/components/iconfont/IconPlus.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconSearch.js b/src/components/iconfont/IconSearch.js index 52b3b311..ff51f3d4 100644 --- a/src/components/iconfont/IconSearch.js +++ b/src/components/iconfont/IconSearch.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconSecurity.js b/src/components/iconfont/IconSecurity.js index 49f62c76..1bc29426 100644 --- a/src/components/iconfont/IconSecurity.js +++ b/src/components/iconfont/IconSecurity.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconSetting.js b/src/components/iconfont/IconSetting.js index 1e5da15f..406e65b7 100644 --- a/src/components/iconfont/IconSetting.js +++ b/src/components/iconfont/IconSetting.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconSubtract.js b/src/components/iconfont/IconSubtract.js index 1b7d9f29..e8d5d766 100644 --- a/src/components/iconfont/IconSubtract.js +++ b/src/components/iconfont/IconSubtract.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconSwitch.js b/src/components/iconfont/IconSwitch.js index c4cc2646..9a271360 100644 --- a/src/components/iconfont/IconSwitch.js +++ b/src/components/iconfont/IconSwitch.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconTheme.js b/src/components/iconfont/IconTheme.js index e03d8b25..bbf919ef 100644 --- a/src/components/iconfont/IconTheme.js +++ b/src/components/iconfont/IconTheme.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconUserSwitch.js b/src/components/iconfont/IconUserSwitch.js index 54665a09..9e6e1c75 100644 --- a/src/components/iconfont/IconUserSwitch.js +++ b/src/components/iconfont/IconUserSwitch.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconVector.js b/src/components/iconfont/IconVector.js index 391d97f0..5cb16c0a 100644 --- a/src/components/iconfont/IconVector.js +++ b/src/components/iconfont/IconVector.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconVector2.js b/src/components/iconfont/IconVector2.js index 9e445211..407e0bff 100644 --- a/src/components/iconfont/IconVector2.js +++ b/src/components/iconfont/IconVector2.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/IconWallet.js b/src/components/iconfont/IconWallet.js index b7364401..cb909d4b 100644 --- a/src/components/iconfont/IconWallet.js +++ b/src/components/iconfont/IconWallet.js @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -import { getIconColor } from './helper'; +import { getIconColor } from './helper.js'; const DEFAULT_STYLE = { display: 'block', diff --git a/src/components/iconfont/index.js b/src/components/iconfont/index.js index 4036a8a7..dd01eef2 100644 --- a/src/components/iconfont/index.js +++ b/src/components/iconfont/index.js @@ -1,108 +1,108 @@ /* eslint-disable */ import React from 'react'; -import IconKucoin from './IconKucoin'; -import IconCoinbase from './IconCoinbase'; -import IconInbox from './IconInbox'; -import IconAccount from './IconAccount'; -import IconDeveloper from './IconDeveloper'; -import IconSubtract from './IconSubtract'; -import IconExec from './IconExec'; -import IconHuobi from './IconHuobi'; -import IconPlus from './IconPlus'; -import IconKraken from './IconKraken'; -import IconBinance from './IconBinance'; -import IconChevronRight from './IconChevronRight'; -import IconDollar from './IconDollar'; -import IconCurrency from './IconCurrency'; -import IconSecurity from './IconSecurity'; -import IconNotification from './IconNotification'; -import IconTheme from './IconTheme'; -import IconAGroup762 from './IconAGroup762'; -import IconLogo from './IconLogo'; -import IconFlowns from './IconFlowns'; -import IconBackup from './IconBackup'; -import IconSearch from './IconSearch'; -import IconSetting from './IconSetting'; -import IconAHamburgermenu from './IconAHamburgermenu'; -import IconDropdown from './IconDropdown'; -import IconAClose from './IconAClose'; -import IconImport from './IconImport'; -import IconBack from './IconBack'; -import IconSwitch from './IconSwitch'; -import IconAbout from './IconAbout'; -import IconCreate from './IconCreate'; -import IconLock from './IconLock'; -import IconUserSwitch from './IconUserSwitch'; -import IconAddressbook from './IconAddressbook'; -import IconAVector11Stroke from './IconAVector11Stroke'; -import IconMax from './IconMax'; -import IconVector2 from './IconVector2'; -import IconVector from './IconVector'; -import IconWallet from './IconWallet'; -import IconDevices from './IconDevices'; -import IconFusd from './IconFusd'; -import IconGoogleDrive from './IconGoogleDrive'; -import IconFlow from './IconFlow'; -import IconNfts from './IconNfts'; -import IconCopy from './IconCopy'; -import IconCheckmark from './IconCheckmark'; -import IconClose from './IconClose'; -import IconEye from './IconEye'; -import IconPlayStore from './IconPlayStore'; -import IconAppStore from './IconAppStore'; -import IconBackButton from './IconBackButton'; -export { default as IconKucoin } from './IconKucoin'; -export { default as IconCoinbase } from './IconCoinbase'; -export { default as IconInbox } from './IconInbox'; -export { default as IconAccount } from './IconAccount'; -export { default as IconDeveloper } from './IconDeveloper'; -export { default as IconSubtract } from './IconSubtract'; -export { default as IconExec } from './IconExec'; -export { default as IconHuobi } from './IconHuobi'; -export { default as IconPlus } from './IconPlus'; -export { default as IconKraken } from './IconKraken'; -export { default as IconBinance } from './IconBinance'; -export { default as IconChevronRight } from './IconChevronRight'; -export { default as IconDollar } from './IconDollar'; -export { default as IconCurrency } from './IconCurrency'; -export { default as IconSecurity } from './IconSecurity'; -export { default as IconNotification } from './IconNotification'; -export { default as IconTheme } from './IconTheme'; -export { default as IconAGroup762 } from './IconAGroup762'; -export { default as IconLogo } from './IconLogo'; -export { default as IconFlowns } from './IconFlowns'; -export { default as IconBackup } from './IconBackup'; -export { default as IconSearch } from './IconSearch'; -export { default as IconSetting } from './IconSetting'; -export { default as IconAHamburgermenu } from './IconAHamburgermenu'; -export { default as IconDropdown } from './IconDropdown'; -export { default as IconAClose } from './IconAClose'; -export { default as IconImport } from './IconImport'; -export { default as IconBack } from './IconBack'; -export { default as IconSwitch } from './IconSwitch'; -export { default as IconAbout } from './IconAbout'; -export { default as IconCreate } from './IconCreate'; -export { default as IconLock } from './IconLock'; -export { default as IconUserSwitch } from './IconUserSwitch'; -export { default as IconAddressbook } from './IconAddressbook'; -export { default as IconAVector11Stroke } from './IconAVector11Stroke'; -export { default as IconMax } from './IconMax'; -export { default as IconVector2 } from './IconVector2'; -export { default as IconVector } from './IconVector'; -export { default as IconWallet } from './IconWallet'; -export { default as IconDevices } from './IconDevices'; -export { default as IconFusd } from './IconFusd'; -export { default as IconGoogleDrive } from './IconGoogleDrive'; -export { default as IconFlow } from './IconFlow'; -export { default as IconNfts } from './IconNfts'; -export { default as IconCopy } from './IconCopy'; -export { default as IconCheckmark } from './IconCheckmark'; -export { default as IconClose } from './IconClose'; -export { default as IconEye } from './IconEye'; -export { default as IconPlayStore } from './IconPlayStore'; -export { default as IconAppStore } from './IconAppStore'; -export { default as IconBackButton } from './IconBackButton'; +import IconKucoin from './IconKucoin.js'; +import IconCoinbase from './IconCoinbase.js'; +import IconInbox from './IconInbox.js'; +import IconAccount from './IconAccount.js'; +import IconDeveloper from './IconDeveloper.js'; +import IconSubtract from './IconSubtract.js'; +import IconExec from './IconExec.js'; +import IconHuobi from './IconHuobi.js'; +import IconPlus from './IconPlus.js'; +import IconKraken from './IconKraken.js'; +import IconBinance from './IconBinance.js'; +import IconChevronRight from './IconChevronRight.js'; +import IconDollar from './IconDollar.js'; +import IconCurrency from './IconCurrency.js'; +import IconSecurity from './IconSecurity.js'; +import IconNotification from './IconNotification.js'; +import IconTheme from './IconTheme.js'; +import IconAGroup762 from './IconAGroup762.js'; +import IconLogo from './IconLogo.js'; +import IconFlowns from './IconFlowns.js'; +import IconBackup from './IconBackup.js'; +import IconSearch from './IconSearch.js'; +import IconSetting from './IconSetting.js'; +import IconAHamburgermenu from './IconAHamburgermenu.js'; +import IconDropdown from './IconDropdown.js'; +import IconAClose from './IconAClose.js'; +import IconImport from './IconImport.js'; +import IconBack from './IconBack.js'; +import IconSwitch from './IconSwitch.js'; +import IconAbout from './IconAbout.js'; +import IconCreate from './IconCreate.js'; +import IconLock from './IconLock.js'; +import IconUserSwitch from './IconUserSwitch.js'; +import IconAddressbook from './IconAddressbook.js'; +import IconAVector11Stroke from './IconAVector11Stroke.js'; +import IconMax from './IconMax.js'; +import IconVector2 from './IconVector2.js'; +import IconVector from './IconVector.js'; +import IconWallet from './IconWallet.js'; +import IconDevices from './IconDevices.js'; +import IconFusd from './IconFusd.js'; +import IconGoogleDrive from './IconGoogleDrive.js'; +import IconFlow from './IconFlow.js'; +import IconNfts from './IconNfts.js'; +import IconCopy from './IconCopy.js'; +import IconCheckmark from './IconCheckmark.js'; +import IconClose from './IconClose.js'; +import IconEye from './IconEye.js'; +import IconPlayStore from './IconPlayStore.js'; +import IconAppStore from './IconAppStore.js'; +import IconBackButton from './IconBackButton.js'; +export { default as IconKucoin } from './IconKucoin.js'; +export { default as IconCoinbase } from './IconCoinbase.js'; +export { default as IconInbox } from './IconInbox.js'; +export { default as IconAccount } from './IconAccount.js'; +export { default as IconDeveloper } from './IconDeveloper.js'; +export { default as IconSubtract } from './IconSubtract.js'; +export { default as IconExec } from './IconExec.js'; +export { default as IconHuobi } from './IconHuobi.js'; +export { default as IconPlus } from './IconPlus.js'; +export { default as IconKraken } from './IconKraken.js'; +export { default as IconBinance } from './IconBinance.js'; +export { default as IconChevronRight } from './IconChevronRight.js'; +export { default as IconDollar } from './IconDollar.js'; +export { default as IconCurrency } from './IconCurrency.js'; +export { default as IconSecurity } from './IconSecurity.js'; +export { default as IconNotification } from './IconNotification.js'; +export { default as IconTheme } from './IconTheme.js'; +export { default as IconAGroup762 } from './IconAGroup762.js'; +export { default as IconLogo } from './IconLogo.js'; +export { default as IconFlowns } from './IconFlowns.js'; +export { default as IconBackup } from './IconBackup.js'; +export { default as IconSearch } from './IconSearch.js'; +export { default as IconSetting } from './IconSetting.js'; +export { default as IconAHamburgermenu } from './IconAHamburgermenu.js'; +export { default as IconDropdown } from './IconDropdown.js'; +export { default as IconAClose } from './IconAClose.js'; +export { default as IconImport } from './IconImport.js'; +export { default as IconBack } from './IconBack.js'; +export { default as IconSwitch } from './IconSwitch.js'; +export { default as IconAbout } from './IconAbout.js'; +export { default as IconCreate } from './IconCreate.js'; +export { default as IconLock } from './IconLock.js'; +export { default as IconUserSwitch } from './IconUserSwitch.js'; +export { default as IconAddressbook } from './IconAddressbook.js'; +export { default as IconAVector11Stroke } from './IconAVector11Stroke.js'; +export { default as IconMax } from './IconMax.js'; +export { default as IconVector2 } from './IconVector2.js'; +export { default as IconVector } from './IconVector.js'; +export { default as IconWallet } from './IconWallet.js'; +export { default as IconDevices } from './IconDevices.js'; +export { default as IconFusd } from './IconFusd.js'; +export { default as IconGoogleDrive } from './IconGoogleDrive.js'; +export { default as IconFlow } from './IconFlow.js'; +export { default as IconNfts } from './IconNfts.js'; +export { default as IconCopy } from './IconCopy.js'; +export { default as IconCheckmark } from './IconCheckmark.js'; +export { default as IconClose } from './IconClose.js'; +export { default as IconEye } from './IconEye.js'; +export { default as IconPlayStore } from './IconPlayStore.js'; +export { default as IconAppStore } from './IconAppStore.js'; +export { default as IconBackButton } from './IconBackButton.js'; const IconFont = ({ name, ...rest }) => { switch (name) { diff --git a/tsconfig.json b/tsconfig.json index 90f2b124..90d94d79 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,15 +13,10 @@ "useUnknownInCatchVariables": false, "resolveJsonModule": true, "paths": { - "utils": ["./src/utils"], "@/*": ["./src/*"], "ui/*": ["./src/ui/*"], "background/*": ["./src/background/*"], - "consts": ["./src/constant/index"], - "consts/*": ["./src/constant/*"], - "assets": ["./src/ui/assets"], - "changeLogs": ["./changeLogs"], - "react": ["./node_modules/@types/react"] + "consts": ["./src/constant/index"] }, "lib": ["ES2021.String", "DOM", "DOM.Iterable"], "types": ["chrome", "node", "react", "react-dom", "jest"], @@ -37,5 +32,5 @@ "outDir": "./dist" }, "exclude": ["./node_modules"], - "include": ["src", "__tests__", "build", "webpack.config.ts"] + "include": ["src", "__tests__", "build", "webpack.config.ts", "postcss.config.ts"] } From 7bb0f6c2496c55301199a66dba5fd71588ee7b5c Mon Sep 17 00:00:00 2001 From: zzggo Date: Thu, 19 Dec 2024 16:31:21 +1100 Subject: [PATCH 38/50] 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 39/50] 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 40/50] 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 41/50] 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 69ce3f843d75b98ee161fb495068f342e5d72889 Mon Sep 17 00:00:00 2001 From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com> Date: Fri, 20 Dec 2024 09:06:52 +1100 Subject: [PATCH 42/50] Changed postcss config to mjs --- postcss.config.ts => postcss.config.mjs | 0 tsconfig.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename postcss.config.ts => postcss.config.mjs (100%) diff --git a/postcss.config.ts b/postcss.config.mjs similarity index 100% rename from postcss.config.ts rename to postcss.config.mjs diff --git a/tsconfig.json b/tsconfig.json index 90d94d79..5c0dd0da 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,5 +32,5 @@ "outDir": "./dist" }, "exclude": ["./node_modules"], - "include": ["src", "__tests__", "build", "webpack.config.ts", "postcss.config.ts"] + "include": ["src", "__tests__", "build", "webpack.config.ts", "postcss.config.mjs"] } From 7e604e5daeecd8738f135c6a3e8991d324260db2 Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 14:01:47 +1100 Subject: [PATCH 43/50] fixed: update package json to remove dependencies --- package.json | 7 - pnpm-lock.yaml | 421 ------------------------------------------------- 2 files changed, 428 deletions(-) diff --git a/package.json b/package.json index 83b69234..b786f20a 100644 --- a/package.json +++ b/package.json @@ -36,8 +36,6 @@ "@emotion/styled": "^11.13.5", "@ledgerhq/hw-app-eth": "^6.41.1", "@ledgerhq/hw-transport-webusb": "^6.29.4", - "@metamask/eth-sig-util": "^4.0.1", - "@metamask/obs-store": "^6.0.2", "@mui/base": "5.0.0-beta.62", "@mui/icons-material": "^5.16.7", "@mui/lab": "5.0.0-alpha.173", @@ -49,11 +47,6 @@ "@onflow/fcl-wc": "^5.5.3", "@onflow/transport-http": "1.10.2", "@onflow/types": "^1.4.1", - "@rabby-wallet/eth-hd-keyring": "^3.6.12", - "@rabby-wallet/eth-lattice-keyring": "^0.4.4", - "@rabby-wallet/eth-simple-keyring": "^4.2.1", - "@rabby-wallet/eth-watch-keyring": "^1.0.0", - "@rabby-wallet/page-provider": "^0.3.5", "@reown/walletkit": "^1.1.1", "@sentry/browser": "^6.19.7", "@sentry/react": "^6.19.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86aa052f..22ce332e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,12 +29,6 @@ importers: '@ledgerhq/hw-transport-webusb': specifier: ^6.29.4 version: 6.29.4 - '@metamask/eth-sig-util': - specifier: ^4.0.1 - version: 4.0.1 - '@metamask/obs-store': - specifier: ^6.0.2 - version: 6.0.2 '@mui/base': specifier: 5.0.0-beta.62 version: 5.0.0-beta.62(@types/react@18.3.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -68,21 +62,6 @@ importers: '@onflow/types': specifier: ^1.4.1 version: 1.4.1 - '@rabby-wallet/eth-hd-keyring': - specifier: ^3.6.12 - version: 3.6.12 - '@rabby-wallet/eth-lattice-keyring': - specifier: ^0.4.4 - version: 0.4.4 - '@rabby-wallet/eth-simple-keyring': - specifier: ^4.2.1 - version: 4.2.1 - '@rabby-wallet/eth-watch-keyring': - specifier: ^1.0.0 - version: 1.0.0 - '@rabby-wallet/page-provider': - specifier: ^0.3.5 - version: 0.3.5 '@reown/walletkit': specifier: ^1.1.1 version: 1.1.1 @@ -1450,9 +1429,6 @@ packages: resolution: {integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@ethereumjs/common@2.6.5': - resolution: {integrity: sha512-lRyVQOeCDaIVtgfbowla32pzeDv2Obr8oR8Put5RdUBNRGr1VGPGQNGP6elWIpgK3YdpzqTOh4GyUGOureVeeA==} - '@ethereumjs/common@3.2.0': resolution: {integrity: sha512-pksvzI0VyLgmuEF2FA/JR/4/y6hcPq8OUail3/AvycBaW1d5VSauOZzqGvJ3RTmR4MU35lWE8KseKOsEhrFRBA==} @@ -1466,9 +1442,6 @@ packages: engines: {node: '>=18'} hasBin: true - '@ethereumjs/tx@3.5.2': - resolution: {integrity: sha512-gQDNJWKrSDGu2w7w0PzVXVBNMzb7wwdDOmOqczmhNjqFxFuIbhVJDwiGEnxFNC2/b8ifcZzY7MLcluizohRzNw==} - '@ethereumjs/tx@4.2.0': resolution: {integrity: sha512-1nc6VO4jtFd172BbSnTnDQVr9IYBFl1y4xPzZdtkrkKIncBCkdbgfdRV+MiTkJYAtTxvV12GRZLqBFT1PNK6Yw==} engines: {node: '>=14'} @@ -1881,9 +1854,6 @@ packages: '@ledgerhq/cryptoassets-evm-signatures@13.5.2': resolution: {integrity: sha512-OjjzuiMMEIYEbXeueJB6mXwlvYhru28b43buAVOeggZ2XmdlT0kBvt7Cjn4bDPqff/glWR7vQdytIr7b77m2EQ==} - '@ledgerhq/devices@6.27.1': - resolution: {integrity: sha512-jX++oy89jtv7Dp2X6gwt3MMkoajel80JFWcdc0HCouwDsV1mVJ3SQdwl/bQU0zd8HI6KebvUP95QTwbQLLK/RQ==} - '@ledgerhq/devices@8.4.4': resolution: {integrity: sha512-sz/ryhe/R687RHtevIE9RlKaV8kkKykUV4k29e7GAVwzHX1gqG+O75cu1NCJUHLbp3eABV5FdvZejqRUlLis9A==} @@ -1927,17 +1897,10 @@ packages: resolution: {integrity: sha512-whiUMPlAOrVGmX8aKYVPvlKyG4CpQXiNNyt74vE1xb5sPvmx5oA7B/kOi/JdBvhGQq97U1/AVdXEdk2zkP8qyA==} engines: {node: '>=14.0.0'} - '@metamask/eth-sig-util@4.0.1': - resolution: {integrity: sha512-tghyZKLHZjcdlDqCA3gNZmLeR0XvOE9U1qoQO9ohyAZT6Pya+H9vkBPcsyXytmYLNgVoin7CKCmweo/R43V+tQ==} - engines: {node: '>=12.0.0'} - '@metamask/json-rpc-engine@7.3.3': resolution: {integrity: sha512-dwZPq8wx9yV3IX2caLi9q9xZBw2XeIoYqdyihDDDpuHVCEiqadJLwqM3zy+uwf6F1QYQ65A8aOMQg1Uw7LMLNg==} engines: {node: '>=16.0.0'} - '@metamask/obs-store@6.0.2': - resolution: {integrity: sha512-MjnP+xNZGBx46YZrR8ZYPb+ScPfxJUbs09MTByuQKxMsf7Lxz17oBTI5ZMkOZOTSBBxhknKdjJg+nAM8mMopwg==} - '@metamask/rpc-errors@6.4.0': resolution: {integrity: sha512-1ugFO1UoirU2esS3juZanS/Fo8C8XYocCuBpfZI5N7ECtoG+zu0wF+uWZASik6CkO6w9n/Iebt4iI4pT0vptpg==} engines: {node: '>=16.0.0'} @@ -2397,23 +2360,6 @@ packages: '@protobufjs/utf8@1.1.0': resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==} - '@rabby-wallet/eth-hd-keyring@3.6.12': - resolution: {integrity: sha512-4d4C/Y1GmPDqVq9fyYyw2G1OIU9R4IqpaiFAX8awtEO7SnBJh/A917swvdgBFL6qQQ8eM/xlx9+XSh0a9BoV6g==} - engines: {node: '>= 12.0.0'} - - '@rabby-wallet/eth-lattice-keyring@0.4.4': - resolution: {integrity: sha512-i7/qX2TwT8EFmGvYExVDydJ/bi7/jpLaigXDYR4ru+mZRhFZTKHuX+7JNjIsoxPrivuAZQso1Fdb5RUVabYUAQ==} - - '@rabby-wallet/eth-simple-keyring@4.2.1': - resolution: {integrity: sha512-pHy14FAfR92VXJl0GcZfdEfqGFDSiYrVugYhUUntYa43lrUZvnkABSlaBXXe/KIizkakPSIfcgUEIxVA358sIg==} - engines: {node: '>=12.0.0'} - - '@rabby-wallet/eth-watch-keyring@1.0.0': - resolution: {integrity: sha512-TodgY/KdiqmaU1yfjj94HDigItQnhoFrzNmpERv8/971zt2izfzji9E9BdPG4IyUgJaRoqWpEij0jhV7HYlNzg==} - - '@rabby-wallet/page-provider@0.3.5': - resolution: {integrity: sha512-wpS56MLGZot+m4RXdArDuJ3I3hhDke9fAPAimOlPqDcjKqUSsy9NhuZhMhw6xzsTZSsuoCjwxuuw/nqv4fU9bw==} - '@reown/walletkit@1.1.1': resolution: {integrity: sha512-GTPksxBO6VAsqiQ0oH2jt8C845Y7redpI4OxRy31vf7KKDPPGfldbsTYZ+FP9xSda00dCJJKuXhzewZT/xHuDg==} @@ -2934,9 +2880,6 @@ packages: '@types/cacheable-request@6.0.3': resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==} - '@types/chrome@0.0.186': - resolution: {integrity: sha512-Ykpf95dbv0resO/PcRF/9vKETOKma5D2sSUKo8mSL1vz03IgVhyHuCrlzbDYMLrXIl9CcyGnYTMG2Zg0WAk62w==} - '@types/chrome@0.0.281': resolution: {integrity: sha512-MH+8FFrJ1POZwKnKRBa+jZcVp+yCFxes6PYKvgFd0qLTzoQe+TdejC3dkA8gSs8UGjFKrKzu4AkZypmswv0NOg==} @@ -3094,9 +3037,6 @@ packages: '@types/node@16.18.121': resolution: {integrity: sha512-Gk/pOy8H0cvX8qNrwzElYIECpcUn87w4EAEFXFvPJ8qsP9QR/YqukUORSy0zmyDyvdo149idPpy4W6iC5aSbQA==} - '@types/node@17.0.45': - resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} - '@types/node@22.10.1': resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==} @@ -3166,9 +3106,6 @@ packages: '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} - '@types/w3c-web-hid@1.0.6': - resolution: {integrity: sha512-IWyssXmRDo6K7s31dxf+U+x/XUWuVsl9qUIYbJmpUHPcTv/COfBCKw/F0smI45+gPV34brjyP30BFcIsHgYWLA==} - '@types/webpack@5.28.5': resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==} @@ -3820,9 +3757,6 @@ packages: assert@2.1.0: resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} - assertion-error@1.1.0: - resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==} - assertion-error@2.0.1: resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} engines: {node: '>=12'} @@ -3947,9 +3881,6 @@ packages: batch@0.6.1: resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==} - bech32@2.0.0: - resolution: {integrity: sha512-LcknSilhIGatDAsY1ak2I8VtGaHNhgMSYVxFrGLXv+xLHytaKZKcaUJJUE7qmBr7h33o5YQwP55pMI0xmkpJwg==} - big.js@5.2.2: resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} @@ -3976,15 +3907,9 @@ packages: bip66@1.1.5: resolution: {integrity: sha512-nemMHz95EmS38a26XbbdxIYj5csHd3RMP3H5bwQknX0WYHF01qhpufP42mLOwVICuH2JmhIhXiWs89MfUGL7Xw==} - bitwise@2.2.1: - resolution: {integrity: sha512-eJUCdmPCux/zz2joOoExymwjUGvmfrxb8JhdJ6vC8jZPP/pqnG6Zs0qZh54BLIUMZHwHnA+nv6GFAad8LvCvCg==} - blakejs@1.2.1: resolution: {integrity: sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ==} - bn.js@4.11.6: - resolution: {integrity: sha512-XWwnNNFCuuSQ0m3r3C4LE3EiORltHd9M05pq6FOlVeiophzRbMo50Sbz1ehl8K3Z+jw9+vmgnXefY1hz8X+2wA==} - bn.js@4.12.1: resolution: {integrity: sha512-k8TVBiPkPJT9uHLdOKfFpqcfprwBFOAAXXozRubr7R7PfIuKvQlzcI4M0pALeqXN09vdaMbUdUj+pass+uULAg==} @@ -4005,10 +3930,6 @@ packages: resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==} deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. - borc@2.1.2: - resolution: {integrity: sha512-Sy9eoUi4OiKzq7VovMn246iTo17kzuyHJKomCfpWMlI6RpfN1gk95w7d7gH264nApVLg0HZfcpz62/g4VH1Y4w==} - engines: {node: '>=4'} - boxen@1.3.0: resolution: {integrity: sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==} engines: {node: '>=4'} @@ -4088,9 +4009,6 @@ packages: buffer-xor@1.0.3: resolution: {integrity: sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==} - buffer@5.7.1: - resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==} - buffer@6.0.3: resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} @@ -4166,10 +4084,6 @@ packages: ccount@2.0.1: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} - chai@4.5.0: - resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==} - engines: {node: '>=4'} - chai@5.1.2: resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==} engines: {node: '>=12'} @@ -4193,9 +4107,6 @@ packages: character-entities@2.0.2: resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==} - check-error@1.0.3: - resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==} - check-error@2.1.1: resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} engines: {node: '>= 16'} @@ -4410,9 +4321,6 @@ packages: resolution: {integrity: sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==} engines: {node: '>= 0.6'} - cookiejar@2.1.4: - resolution: {integrity: sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==} - copy-descriptor@0.1.1: resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==} engines: {node: '>=0.10.0'} @@ -4684,10 +4592,6 @@ packages: dedent@0.7.0: resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==} - deep-eql@4.1.4: - resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==} - engines: {node: '>=6'} - deep-eql@5.0.2: resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} engines: {node: '>=6'} @@ -4753,9 +4657,6 @@ packages: delegate@3.2.0: resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==} - delimit-stream@0.1.0: - resolution: {integrity: sha512-a02fiQ7poS5CnjiJBAsjGLPp5EwVoGHNeu9sziBd9huppRfsAFIpv5zNLv0V1gbop53ilngAf5Kf331AwcoRBQ==} - depd@1.1.2: resolution: {integrity: sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==} engines: {node: '>= 0.6'} @@ -5251,9 +5152,6 @@ packages: resolution: {integrity: sha512-8YdplnuE1IK4xfqpf4iU7oBxnOYAc35934o083G8ao+8WM8QQtt/mVlAY6yIAdY1eMeLqg4Z//PZjJGmWGPMRg==} engines: {node: '>=14.0.0'} - eth-eip712-util-browser@0.0.3: - resolution: {integrity: sha512-RUXQ6Hjl0wEjm/ObWgYKjzMfO1segqcPFGnMPtBkkwGaHGbXXh6WFAn5vZfReK9WWujs35uIW2+kgJmh3FXtww==} - eth-hd-keyring@3.6.0: resolution: {integrity: sha512-n2CwE9VNXsxLrXQa6suv0Umt4NT6+HtoahKgWx3YviXx4rQFwVT5nDwZfjhwrT31ESuoXYNIeJgz5hKLD96QeQ==} engines: {node: '>= 10'} @@ -5276,9 +5174,6 @@ packages: resolution: {integrity: sha512-lBxFObXJTBjktDkQszXrqoB317wghEUYATQ3W19vLAjaznrmbdy1lccPhXIRMT9bHIUgNKOJQkLohNZiT9tO8Q==} deprecated: This package has been renamed to "@metamask/eth-simple-keyring" - ethereum-bloom-filters@1.2.0: - resolution: {integrity: sha512-28hyiE7HVsWubqhpVLVmZXFd4ITeHi+BUu05o9isf0GUpMtzBUi+8/gFrGaGYzvGAJQmJ3JKj77Mk9G98T84rA==} - ethereum-checksum-address@0.0.5: resolution: {integrity: sha512-JCuVfBpG1QdtaBrklMaemC7ofTegq8FcL2eAQhGTibHvljnj/tJKksqhBs0fuktyOo48GfYMXWvqOviqnRTDKQ==} hasBin: true @@ -5300,18 +5195,10 @@ packages: resolution: {integrity: sha512-Tx0r/iXI6r+lRsdvkFDlut0N08jWMnKRZ6Gkq+Nmw75lZe4e6o3EkSnkaBP5NF6+m5PTGAr9JP43N3LyeoglsA==} deprecated: This library has been deprecated and usage is discouraged. - ethereumjs-common@1.5.2: - resolution: {integrity: sha512-hTfZjwGX52GS2jcVO6E2sx4YuFnf0Fhp5ylo4pEPhEffNln7vS59Hr5sLnp3/QCazFLluuBZ+FZ6J5HTp0EqCA==} - deprecated: 'New package name format for new versions: @ethereumjs/common. Please update.' - ethereumjs-tx@1.3.7: resolution: {integrity: sha512-wvLMxzt1RPhAQ9Yi3/HKZTn0FZYpnsmQdbKYfUUpi4j1SEIcbkd9tndVjcPrufY3V7j2IebOpC00Zp2P/Ay2kA==} deprecated: 'New package name format for new versions: @ethereumjs/tx. Please update.' - ethereumjs-tx@2.1.2: - resolution: {integrity: sha512-zZEK1onCeiORb0wyCXUvg94Ve5It/K6GD1K+26KfFKodiBiS6d9lfCXlUKGBBdQ+bv7Day+JK0tj1K+BeNFRAw==} - deprecated: 'New package name format for new versions: @ethereumjs/tx. Please update.' - ethereumjs-util@5.2.1: resolution: {integrity: sha512-v3kT+7zdyCm1HIqWlLNrHGqHGLpGYIhjeHxQjnDXjLT2FyGJDsd3LWMYUo7pAFRrk86CR3nUJfhC81CCoJNNGQ==} @@ -5334,10 +5221,6 @@ packages: resolution: {integrity: sha512-21YtnZVg4/zKkCQPjrDj38B1r4nQvTZLopUGMLQ1ePU2zV/joCfDC3t3iKQjWRzjjjbzR+mdAIoikeBRNkdllA==} engines: {node: '>=14.0.0'} - ethjs-unit@0.1.6: - resolution: {integrity: sha512-/Sn9Y0oKl0uqQuvgFk/zQgR7aw1g36qX/jzSQ5lSwlO0GigPymk4eGQfeNTD03w1dPOqfz8V77Cy43jH56pagw==} - engines: {node: '>=6.5.0', npm: '>=3'} - ethjs-util@0.1.6: resolution: {integrity: sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==} engines: {node: '>=6.5.0', npm: '>=3'} @@ -5577,10 +5460,6 @@ packages: resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} engines: {node: '>=14'} - form-data@2.5.2: - resolution: {integrity: sha512-GgwY0PS7DbXqajuGf4OYlsrIu3zgxD6Vvql43IBhm6MahqA5SK/7mwhtNj2AdH2z35YR34ujJ7BN+3fFC3jP5Q==} - engines: {node: '>= 0.12'} - form-data@3.0.2: resolution: {integrity: sha512-sJe+TQb2vIaIyO783qN6BlMYWMw3WBOHA1Ay2qxsnjuafEOQFJ2JakedOQirT6D5XPRxDvS7AHYyem9fTpb4LQ==} engines: {node: '>= 6'} @@ -5589,10 +5468,6 @@ packages: resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==} engines: {node: '>= 6'} - formidable@1.2.6: - resolution: {integrity: sha512-KcpbcpuLNOwrEjnbpMC0gS+X8ciDoZE1kkqzat4a8vrprf+s9pKNQ/QIwWfbfs4ltgmFl3MD177SNTkve3BwGQ==} - deprecated: 'Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau' - forwarded@0.2.0: resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} engines: {node: '>= 0.6'} @@ -5661,9 +5536,6 @@ packages: resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==} engines: {node: '>=18'} - get-func-name@2.0.2: - resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} - get-intrinsic@1.2.5: resolution: {integrity: sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==} engines: {node: '>= 0.4'} @@ -5792,9 +5664,6 @@ packages: graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} - gridplus-sdk@0.9.10: - resolution: {integrity: sha512-CNvhyaz3F8UvlHqihFJlOt+FenmFkb2dFrbBTyRth/nlzD8Tm0HjW+uyY1W0ekDp45Exz9l0VY0EmdvjphBe1w==} - gzip-size@6.0.0: resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} engines: {node: '>=10'} @@ -6421,10 +6290,6 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} - iso-url@0.4.7: - resolution: {integrity: sha512-27fFRDnPAMnHGLq36bWTpKET+eiXct3ENlCcdcMdk+mjXrb2kw3mhBUg1B7ewAC0kVzlOPhADzQgz1SE6Tglog==} - engines: {node: '>=10'} - isobject@2.1.0: resolution: {integrity: sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==} engines: {node: '>=0.10.0'} @@ -6695,9 +6560,6 @@ packages: json-stringify-safe@5.0.1: resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==} - json-text-sequence@0.1.1: - resolution: {integrity: sha512-L3mEegEWHRekSHjc7+sc8eJhba9Clq1PZ8kMkzf8OxElhXc8O4TS5MwcVlj9aEbm5dr81N90WHC5nAz3UO971w==} - json5@1.0.2: resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==} hasBin: true @@ -6914,9 +6776,6 @@ packages: resolution: {integrity: sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==} engines: {node: '>=0.10.0'} - loupe@2.3.7: - resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==} - loupe@3.1.2: resolution: {integrity: sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==} @@ -7388,10 +7247,6 @@ packages: nth-check@2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} - number-to-bn@1.7.0: - resolution: {integrity: sha512-wsJ9gfSz1/s4ZsJN01lyonwuxA1tml6X1yBDnfpMglypcBRFZZkus26EdPSlqS5GJfYddVZa22p3VNb3z5m5Ig==} - engines: {node: '>=6.5.0', npm: '>=3'} - nwsapi@2.2.16: resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==} @@ -7676,9 +7531,6 @@ packages: pathe@1.1.2: resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} - pathval@1.1.1: - resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==} - pathval@2.0.0: resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==} engines: {node: '>= 14.16'} @@ -8491,10 +8343,6 @@ packages: ripemd160@2.0.2: resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==} - rlp-browser@1.0.1: - resolution: {integrity: sha512-JU+9ntlfyKanOOPwtNuMZBmCQ/fWVoryfa7ZSYDTUKAa1zk4v2smvM0WV8BsskJuqn/DdxpO7HO2vEikMvmhOA==} - hasBin: true - rlp@2.2.7: resolution: {integrity: sha512-d5gdPmgQ0Z+AklL2NVXr/IoSjNZFfTVvQWzL/AM2AOcSzYP2xjlb0AC8YyCLc41MSNf6P6QVtjgPdmVtzb+4lQ==} hasBin: true @@ -8518,10 +8366,6 @@ packages: run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} - rxjs@6.6.7: - resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==} - engines: {npm: '>=2.0.0'} - rxjs@7.8.1: resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==} @@ -8596,10 +8440,6 @@ packages: resolution: {integrity: sha512-tArjQw2P0RTdY7QmkNehgp6TVvQXq6ulIhxv8gaH6YubKG/wxxAoNKcbuXjDhybbc+b2Ihc7e0xxiGN744UIiQ==} engines: {node: '>=4.0.0'} - secp256k1@4.0.2: - resolution: {integrity: sha512-UDar4sKvWAksIlfX3xIaQReADn+WFnHvbVujpcbr+9Sf/69odMwy2MUsz5CKLQgX9nsIyrjuxL2imVyoNHa3fg==} - engines: {node: '>=10.0.0'} - secp256k1@4.0.4: resolution: {integrity: sha512-6JfvwvjUOn8F/jUoBY2Q1v5WY5XS+rj8qSe0v8Y4ezH4InLgTEeOOPQsRll9OV429Pvo6BCHGavIyJfr3TAhsw==} engines: {node: '>=18.0.0'} @@ -9049,11 +8889,6 @@ packages: resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==} engines: {node: '>= 8.0'} - superagent@3.8.3: - resolution: {integrity: sha512-GLQtLMCoEIK4eDv6OGtkOoSMt3D+oq0y3dsxMuYuDvaNUvuT8eFBuLmfR0iYYzHC1e8hpzC6ZsxbuP6DIalMFA==} - engines: {node: '>= 4.0'} - deprecated: Please upgrade to v9.0.0+ as we have fixed a public vulnerability with formidable dependency. Note that v9.0.0+ requires Node.js v14.18.0+. See https://github.com/ladjs/superagent/pull/1800 for insight. This project is supported and maintained by the team at Forward Email @ https://forwardemail.net - superstruct@1.0.4: resolution: {integrity: sha512-7JpaAoX2NGyoFlI9NBh66BQXGONc+uE+MRS5i2iOBKuS4e+ccgMDjATgZldkah+33DakBxDHiss9kvUcGAO8UQ==} engines: {node: '>=14.0.0'} @@ -9327,10 +9162,6 @@ packages: resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==} engines: {node: '>=4'} - type-detect@4.1.0: - resolution: {integrity: sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==} - engines: {node: '>=4'} - type-fest@0.13.1: resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==} engines: {node: '>=10'} @@ -9877,10 +9708,6 @@ packages: resolution: {integrity: sha512-0IXoaAFtFc8Yin7cCdQfB9ZmjafrbP6BO0f0KT/khMhXKUpoJ6yShrVhiNpyRBo8QQjuOagsWzwSK2H49I7sbw==} engines: {node: '>=14', npm: '>=6.12.0'} - web3-utils@1.10.4: - resolution: {integrity: sha512-tsu8FiKJLk2PzhDl9fXbGUWTkkVXYhtTA+SmEFkKft+9BgwLxfCRpU96sWv7ICC8zixBNd3JURVoiR3dUXgP8A==} - engines: {node: '>=8.0.0'} - web3-utils@4.3.3: resolution: {integrity: sha512-kZUeCwaQm+RNc2Bf1V3BYbF29lQQKz28L0y+FA4G0lS8IxtJVGi5SeDTUkpwqqkdHHC7JcapPDnyyzJ1lfWlOw==} engines: {node: '>=14', npm: '>=6.12.0'} @@ -9899,9 +9726,6 @@ packages: webextension-polyfill@0.12.0: resolution: {integrity: sha512-97TBmpoWJEE+3nFBQ4VocyCdLKfw54rFaJ6EVQYLBCXqCIpLSZkwGgASpv4oPt9gdKCJ80RJlcmNzNn008Ag6Q==} - webextension-polyfill@0.7.0: - resolution: {integrity: sha512-su48BkMLxqzTTvPSE1eWxKToPS2Tv5DLGxKexLEVpwFd6Po6N8hhSLIvG6acPAg7qERoEaDL+Y5HQJeJeml5Aw==} - webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} @@ -11294,11 +11118,6 @@ snapshots: dependencies: levn: 0.4.1 - '@ethereumjs/common@2.6.5': - dependencies: - crc-32: 1.2.2 - ethereumjs-util: 7.1.5 - '@ethereumjs/common@3.2.0': dependencies: '@ethereumjs/util': 8.1.0 @@ -11308,11 +11127,6 @@ snapshots: '@ethereumjs/rlp@5.0.2': {} - '@ethereumjs/tx@3.5.2': - dependencies: - '@ethereumjs/common': 2.6.5 - ethereumjs-util: 7.1.5 - '@ethereumjs/tx@4.2.0': dependencies: '@ethereumjs/common': 3.2.0 @@ -12037,13 +11851,6 @@ snapshots: transitivePeerDependencies: - debug - '@ledgerhq/devices@6.27.1': - dependencies: - '@ledgerhq/errors': 6.19.1 - '@ledgerhq/logs': 6.12.0 - rxjs: 6.6.7 - semver: 7.6.3 - '@ledgerhq/devices@8.4.4': dependencies: '@ledgerhq/errors': 6.19.1 @@ -12141,14 +11948,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@metamask/eth-sig-util@4.0.1': - dependencies: - ethereumjs-abi: 0.6.8 - ethereumjs-util: 6.2.1 - ethjs-util: 0.1.6 - tweetnacl: 1.0.3 - tweetnacl-util: 0.15.1 - '@metamask/json-rpc-engine@7.3.3': dependencies: '@metamask/rpc-errors': 6.4.0 @@ -12157,12 +11956,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@metamask/obs-store@6.0.2': - dependencies: - '@metamask/safe-event-emitter': 2.0.0 - readable-stream: 2.3.8 - through2: 2.0.5 - '@metamask/rpc-errors@6.4.0': dependencies: '@metamask/utils': 9.3.0 @@ -12818,53 +12611,6 @@ snapshots: '@protobufjs/utf8@1.1.0': {} - '@rabby-wallet/eth-hd-keyring@3.6.12': - dependencies: - '@metamask/eth-sig-util': 4.0.1 - '@rabby-wallet/eth-simple-keyring': 4.2.1 - bip39: 3.1.0 - eth-sig-util: 3.0.1 - ethereumjs-util: 7.1.5 - ethereumjs-wallet: 1.0.2 - - '@rabby-wallet/eth-lattice-keyring@0.4.4': - dependencies: - '@ethereumjs/common': 2.6.5 - '@ethereumjs/tx': 3.5.2 - bignumber.js: 9.1.2 - ethereumjs-util: 7.1.5 - gridplus-sdk: 0.9.10 - transitivePeerDependencies: - - supports-color - - '@rabby-wallet/eth-simple-keyring@4.2.1': - dependencies: - chai: 4.5.0 - eth-sig-util: 3.0.1 - ethereumjs-tx: 2.1.2 - ethereumjs-util: 7.1.5 - ethereumjs-wallet: 1.0.2 - randombytes: 2.1.0 - - '@rabby-wallet/eth-watch-keyring@1.0.0': - dependencies: - ethereumjs-util: 7.1.5 - events: 3.3.0 - web3-utils: 1.10.4 - - '@rabby-wallet/page-provider@0.3.5': - dependencies: - '@ledgerhq/devices': 6.27.1 - '@types/chrome': 0.0.186 - '@types/events': 3.0.3 - '@types/node': 17.0.45 - '@types/w3c-web-hid': 1.0.6 - eth-rpc-errors: 4.0.3 - events: 3.3.0 - lodash: 4.17.21 - sinon-chrome: 3.0.1 - webextension-polyfill: 0.7.0 - '@reown/walletkit@1.1.1': dependencies: '@walletconnect/core': 2.17.1 @@ -13551,11 +13297,6 @@ snapshots: '@types/node': 22.10.1 '@types/responselike': 1.0.3 - '@types/chrome@0.0.186': - dependencies: - '@types/filesystem': 0.0.36 - '@types/har-format': 1.2.16 - '@types/chrome@0.0.281': dependencies: '@types/filesystem': 0.0.36 @@ -13730,8 +13471,6 @@ snapshots: '@types/node@16.18.121': {} - '@types/node@17.0.45': {} - '@types/node@22.10.1': dependencies: undici-types: 6.20.0 @@ -13809,8 +13548,6 @@ snapshots: '@types/unist@2.0.11': {} - '@types/w3c-web-hid@1.0.6': {} - '@types/webpack@5.28.5(webpack-cli@4.10.0)': dependencies: '@types/node': 22.10.1 @@ -15143,8 +14880,6 @@ snapshots: object.assign: 4.1.5 util: 0.12.5 - assertion-error@1.1.0: {} - assertion-error@2.0.1: {} assign-symbols@1.0.0: {} @@ -15315,8 +15050,6 @@ snapshots: batch@0.6.1: {} - bech32@2.0.0: {} - big.js@5.2.2: {} bignumber.js@9.1.2: {} @@ -15345,12 +15078,8 @@ snapshots: dependencies: safe-buffer: 5.2.1 - bitwise@2.2.1: {} - blakejs@1.2.1: {} - bn.js@4.11.6: {} - bn.js@4.12.1: {} bn.js@5.2.1: {} @@ -15386,16 +15115,6 @@ snapshots: boolean@3.2.0: optional: true - borc@2.1.2: - dependencies: - bignumber.js: 9.1.2 - buffer: 5.7.1 - commander: 2.20.3 - ieee754: 1.2.1 - iso-url: 0.4.7 - json-text-sequence: 0.1.1 - readable-stream: 3.6.2 - boxen@1.3.0: dependencies: ansi-align: 2.0.0 @@ -15518,11 +15237,6 @@ snapshots: buffer-xor@1.0.3: {} - buffer@5.7.1: - dependencies: - base64-js: 1.5.1 - ieee754: 1.2.1 - buffer@6.0.3: dependencies: base64-js: 1.5.1 @@ -15599,16 +15313,6 @@ snapshots: ccount@2.0.1: {} - chai@4.5.0: - dependencies: - assertion-error: 1.1.0 - check-error: 1.0.3 - deep-eql: 4.1.4 - get-func-name: 2.0.2 - loupe: 2.3.7 - pathval: 1.1.1 - type-detect: 4.1.0 - chai@5.1.2: dependencies: assertion-error: 2.0.1 @@ -15634,10 +15338,6 @@ snapshots: character-entities@2.0.2: {} - check-error@1.0.3: - dependencies: - get-func-name: 2.0.2 - check-error@2.1.1: {} chokidar@2.1.8(supports-color@6.1.0): @@ -15868,8 +15568,6 @@ snapshots: cookie@0.7.1: {} - cookiejar@2.1.4: {} - copy-descriptor@0.1.1: {} copy-to-clipboard@3.3.3: @@ -16172,10 +15870,6 @@ snapshots: dedent@0.7.0: {} - deep-eql@4.1.4: - dependencies: - type-detect: 4.1.0 - deep-eql@5.0.2: {} deep-equal@1.1.2: @@ -16245,8 +15939,6 @@ snapshots: delegate@3.2.0: {} - delimit-stream@0.1.0: {} - depd@1.1.2: {} depd@2.0.0: {} @@ -16925,12 +16617,6 @@ snapshots: transitivePeerDependencies: - supports-color - eth-eip712-util-browser@0.0.3: - dependencies: - bn.js: 5.2.1 - buffer: 6.0.3 - js-sha3: 0.8.0 - eth-hd-keyring@3.6.0: dependencies: bip39: 2.6.0 @@ -16970,10 +16656,6 @@ snapshots: ethereumjs-wallet: 1.0.2 events: 1.1.1 - ethereum-bloom-filters@1.2.0: - dependencies: - '@noble/hashes': 1.6.1 - ethereum-checksum-address@0.0.5: dependencies: keccak256: 1.0.6 @@ -17021,18 +16703,11 @@ snapshots: bn.js: 4.12.1 ethereumjs-util: 6.2.1 - ethereumjs-common@1.5.2: {} - ethereumjs-tx@1.3.7: dependencies: ethereum-common: 0.0.18 ethereumjs-util: 5.2.1 - ethereumjs-tx@2.1.2: - dependencies: - ethereumjs-common: 1.5.2 - ethereumjs-util: 6.2.1 - ethereumjs-util@5.2.1: dependencies: bn.js: 4.12.1 @@ -17097,11 +16772,6 @@ snapshots: - bufferutil - utf-8-validate - ethjs-unit@0.1.6: - dependencies: - bn.js: 4.11.6 - number-to-bn: 1.7.0 - ethjs-util@0.1.6: dependencies: is-hex-prefixed: 1.0.0 @@ -17445,13 +17115,6 @@ snapshots: cross-spawn: 7.0.6 signal-exit: 4.1.0 - form-data@2.5.2: - dependencies: - asynckit: 0.4.0 - combined-stream: 1.0.8 - mime-types: 2.1.35 - safe-buffer: 5.2.1 - form-data@3.0.2: dependencies: asynckit: 0.4.0 @@ -17464,8 +17127,6 @@ snapshots: combined-stream: 1.0.8 mime-types: 2.1.35 - formidable@1.2.6: {} - forwarded@0.2.0: {} fraction.js@4.3.7: {} @@ -17525,8 +17186,6 @@ snapshots: get-east-asian-width@1.3.0: {} - get-func-name@2.0.2: {} - get-intrinsic@1.2.5: dependencies: call-bind-apply-helpers: 1.0.0 @@ -17691,25 +17350,6 @@ snapshots: graphemer@1.4.0: {} - gridplus-sdk@0.9.10: - dependencies: - aes-js: 3.1.2 - bech32: 2.0.0 - bignumber.js: 9.1.2 - bitwise: 2.2.1 - borc: 2.1.2 - bs58check: 2.1.2 - buffer: 5.7.1 - crc-32: 1.2.2 - elliptic: 6.5.4 - eth-eip712-util-browser: 0.0.3 - js-sha3: 0.8.0 - rlp-browser: 1.0.1 - secp256k1: 4.0.2 - superagent: 3.8.3 - transitivePeerDependencies: - - supports-color - gzip-size@6.0.0: dependencies: duplexer: 0.1.2 @@ -18300,8 +17940,6 @@ snapshots: isexe@2.0.0: {} - iso-url@0.4.7: {} - isobject@2.1.0: dependencies: isarray: 1.0.0 @@ -18824,10 +18462,6 @@ snapshots: json-stringify-safe@5.0.1: optional: true - json-text-sequence@0.1.1: - dependencies: - delimit-stream: 0.1.0 - json5@1.0.2: dependencies: minimist: 1.2.8 @@ -19104,10 +18738,6 @@ snapshots: currently-unhandled: 0.4.1 signal-exit: 3.0.7 - loupe@2.3.7: - dependencies: - get-func-name: 2.0.2 - loupe@3.1.2: {} lower-case@2.0.2: @@ -19742,11 +19372,6 @@ snapshots: dependencies: boolbase: 1.0.0 - number-to-bn@1.7.0: - dependencies: - bn.js: 4.11.6 - strip-hex-prefix: 1.0.0 - nwsapi@2.2.16: {} object-assign@4.1.1: {} @@ -20033,8 +19658,6 @@ snapshots: pathe@1.1.2: {} - pathval@1.1.1: {} - pathval@2.0.0: {} pbkdf2@3.1.2: @@ -20948,10 +20571,6 @@ snapshots: hash-base: 3.0.5 inherits: 2.0.4 - rlp-browser@1.0.1: - dependencies: - buffer: 5.7.1 - rlp@2.2.7: dependencies: bn.js: 5.2.1 @@ -21001,10 +20620,6 @@ snapshots: dependencies: queue-microtask: 1.2.3 - rxjs@6.6.7: - dependencies: - tslib: 1.14.1 - rxjs@7.8.1: dependencies: tslib: 2.8.1 @@ -21092,12 +20707,6 @@ snapshots: nan: 2.22.0 safe-buffer: 5.2.1 - secp256k1@4.0.2: - dependencies: - elliptic: 6.5.4 - node-addon-api: 2.0.2 - node-gyp-build: 4.8.4 - secp256k1@4.0.4: dependencies: elliptic: 6.6.1 @@ -21626,21 +21235,6 @@ snapshots: transitivePeerDependencies: - supports-color - superagent@3.8.3: - dependencies: - component-emitter: 1.3.1 - cookiejar: 2.1.4 - debug: 3.2.7(supports-color@6.1.0) - extend: 3.0.2 - form-data: 2.5.2 - formidable: 1.2.6 - methods: 1.1.2 - mime: 1.6.0 - qs: 6.13.1 - readable-stream: 2.3.8 - transitivePeerDependencies: - - supports-color - superstruct@1.0.4: {} supports-color@5.5.0: @@ -21930,8 +21524,6 @@ snapshots: type-detect@4.0.8: {} - type-detect@4.1.0: {} - type-fest@0.13.1: optional: true @@ -22646,17 +22238,6 @@ snapshots: web3-types@1.10.0: {} - web3-utils@1.10.4: - dependencies: - '@ethereumjs/util': 8.1.0 - bn.js: 5.2.1 - ethereum-bloom-filters: 1.2.0 - ethereum-cryptography: 2.2.1 - ethjs-unit: 0.1.6 - number-to-bn: 1.7.0 - randombytes: 2.1.0 - utf8: 3.0.0 - web3-utils@4.3.3: dependencies: ethereum-cryptography: 2.2.1 @@ -22706,8 +22287,6 @@ snapshots: webextension-polyfill@0.12.0: {} - webextension-polyfill@0.7.0: {} - webidl-conversions@3.0.1: {} webidl-conversions@5.0.0: {} From 31313aa152d13fd44404956f4eeffc5ceb5af1ab Mon Sep 17 00:00:00 2001 From: zzggo Date: Fri, 20 Dec 2024 14:27:46 +1100 Subject: [PATCH 44/50] 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 45/50] 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 46/50] 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 47/50] 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 48/50] 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 49/50] 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)} /> + )} + ); }; From a1a39401f2132a3aa606ff47600b9a488727ca7e Mon Sep 17 00:00:00 2001 From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com> Date: Mon, 23 Dec 2024 18:02:51 +1100 Subject: [PATCH 50/50] Flow emulator progress Closes #287 --- .gitignore | 2 + _raw/_locales/en/messages.json | 3 + _raw/_locales/ja/messages.json | 3 + _raw/_locales/ru/messages.json | 3 + _raw/_locales/zh_CN/messages.json | 3 + src/background/controller/wallet.ts | 122 ++++-------------- src/background/fclConfig.ts | 14 ++ src/background/index.ts | 5 +- src/background/service/networkModel.ts | 1 + src/background/service/openapi.ts | 5 + src/background/service/transaction.ts | 8 ++ src/background/service/userWallet.ts | 2 +- src/background/utils/defaultTokenList.json | 3 +- src/background/utils/index.ts | 96 ++++++++++++++ .../utils/modules/findAddressWithPubKey.ts | 13 +- src/messages.json | 3 + src/ui/FRWComponent/LLEmulatorIndicator.tsx | 23 ++++ src/ui/views/Approval/components/Connect.tsx | 2 + .../EthApproval/EthSwitch/index.tsx | 2 + .../Approval/components/EthSwitch/index.tsx | 13 ++ .../Dashboard/Components/NetworkList.tsx | 24 ++++ src/ui/views/Dashboard/Header.tsx | 6 +- src/ui/views/Dashboard/index.tsx | 3 + .../Setting/DeveloperMode/DeveloperMode.tsx | 34 +++++ .../ImportComponents/KeyImport.tsx | 2 + 25 files changed, 294 insertions(+), 101 deletions(-) create mode 100644 src/ui/FRWComponent/LLEmulatorIndicator.tsx create mode 100644 src/ui/views/Approval/components/EthSwitch/index.tsx diff --git a/.gitignore b/.gitignore index 03cef6b4..a8d44ca4 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,5 @@ dist.7z /playwright/.cache/ dependency-usage.md extension-dependencies.md +emulator-account.pkey +flow.json diff --git a/_raw/_locales/en/messages.json b/_raw/_locales/en/messages.json index 87b3436d..525d0873 100644 --- a/_raw/_locales/en/messages.json +++ b/_raw/_locales/en/messages.json @@ -196,6 +196,9 @@ "Testnet": { "message": "Testnet" }, + "Emulator": { + "message": "Emulator" + }, "Crescendo": { "message": "Crescendo" }, diff --git a/_raw/_locales/ja/messages.json b/_raw/_locales/ja/messages.json index 4e8add82..fde3c98b 100644 --- a/_raw/_locales/ja/messages.json +++ b/_raw/_locales/ja/messages.json @@ -190,6 +190,9 @@ "Testnet": { "message": "Testnet" }, + "Emulator": { + "message": "Emulator" + }, "Crescendo": { "message": "Crescendo" }, diff --git a/_raw/_locales/ru/messages.json b/_raw/_locales/ru/messages.json index 4f2505c6..1344649d 100644 --- a/_raw/_locales/ru/messages.json +++ b/_raw/_locales/ru/messages.json @@ -190,6 +190,9 @@ "Testnet": { "message": "Testnet" }, + "Emulator": { + "message": "Emulator" + }, "Crescendo": { "message": "Crescendo" }, diff --git a/_raw/_locales/zh_CN/messages.json b/_raw/_locales/zh_CN/messages.json index 3afa0cd5..324ab7bc 100644 --- a/_raw/_locales/zh_CN/messages.json +++ b/_raw/_locales/zh_CN/messages.json @@ -190,6 +190,9 @@ "Testnet": { "message": "测试网" }, + "Emulator": { + "message": "沙盒网" + }, "Crescendo": { "message": "沙盒网" }, diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts index af399b3c..314a937c 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -51,14 +51,19 @@ import { import i18n from 'background/service/i18n'; import { type DisplayedKeryring, KEYRING_CLASS } from 'background/service/keyring'; import type { CacheState } from 'background/service/pageStateCache'; -import { getScripts } from 'background/utils'; +import { + getScripts, + checkEmulatorStatus, + checkEmulatorAccount, + createEmulatorAccount, +} from 'background/utils'; import emoji from 'background/utils/emoji.json'; import fetchConfig from 'background/utils/remoteConfig'; import { notification, storage } from 'background/webapi'; import { openIndexPage } from 'background/webapi/tab'; import { INTERNAL_REQUEST_ORIGIN, EVENTS, KEYRING_TYPE } from 'consts'; -import { fclTestnetConfig, fclMainnetConfig } from '../fclConfig'; +import { fclTestnetConfig, fclMainnetConfig, fclEmulatorConfig } from '../fclConfig'; import placeholder from '../images/placeholder.png'; import { type CoinItem } from '../service/coinList'; import DisplayKeyring from '../service/keyring/display'; @@ -3306,12 +3311,24 @@ export class WalletController extends BaseController { } switchNetwork = async (network: string) => { + if (network === 'emulator') { + const isEmulatorRunning = await checkEmulatorStatus(); + console.log('isEmulatorRunning ', isEmulatorRunning); + if (!isEmulatorRunning) { + throw new Error( + 'Flow emulator is not running. Please start it with `flow emulator start` and try again.' + ); + } + } + await userWalletService.setNetwork(network); eventBus.emit('switchNetwork', network); if (network === 'testnet') { await fclTestnetConfig(); } else if (network === 'mainnet') { await fclMainnetConfig(); + } else if (network === 'emulator') { + await fclEmulatorConfig(); } this.refreshAll(); @@ -3406,6 +3423,9 @@ export class WalletController extends BaseController { case 'crescendo': baseURL = 'https://flow-view-source.vercel.app/crescendo'; break; + case 'emulator': + baseURL = 'http://localhost:8888/flow/events'; // Flow emulator explorer endpoint + break; } } @@ -3461,98 +3481,7 @@ export class WalletController extends BaseController { title = chrome.i18n.getMessage('Transaction__Sealed'), body = '', icon = chrome.runtime.getURL('./images/icon-64.png') - ) => { - if (!txId || !txId.match(/^0?x?[0-9a-fA-F]{64}/)) { - return; - } - const address = (await this.getCurrentAddress()) || '0x'; - const network = await this.getNetwork(); - - try { - chrome.storage.session.set({ - transactionPending: { txId, network, date: new Date() }, - }); - eventBus.emit('transactionPending'); - chrome.runtime.sendMessage({ - msg: 'transactionPending', - network: network, - }); - transactionService.setPending(txId, address, network, icon, title); - - // Listen to the transaction until it's sealed. - // This will throw an error if there is an error with the transaction - await fcl.tx(txId).onceSealed(); - - // Track the transaction result - mixpanelTrack.track('transaction_result', { - tx_id: txId, - is_successful: true, - }); - - try { - // Send a notification to the user only on success - if (sendNotification) { - const baseURL = this.getFlowscanUrl(); - notification.create(`${baseURL}/transaction/${txId}`, title, body, icon); - } - } catch (err: unknown) { - // We don't want to throw an error if the notification fails - console.error('listenTransaction notification error ', err); - } - } catch (err: unknown) { - // An error has occurred while listening to the transaction - let errorMessage = 'unknown error'; - let errorCode: number | undefined = undefined; - - if (err instanceof TransactionError) { - errorCode = err.code; - errorMessage = err.message; - } else { - if (err instanceof Error) { - errorMessage = err.message; - } else if (typeof err === 'string') { - errorMessage = err; - } - // From fcl-core transaction-error.ts - const ERROR_CODE_REGEX = /\[Error Code: (\d+)\]/; - const match = errorMessage.match(ERROR_CODE_REGEX); - errorCode = match ? parseInt(match[1], 10) : undefined; - } - - console.warn({ - msg: 'transactionError', - errorMessage, - errorCode, - }); - - // Track the transaction error - mixpanelTrack.track('transaction_result', { - tx_id: txId, - is_successful: false, - error_message: errorMessage, - }); - - // Tell the UI that there was an error - chrome.runtime.sendMessage({ - msg: 'transactionError', - errorMessage, - errorCode, - }); - } finally { - // Remove the pending transaction from the UI - await chrome.storage.session.remove('transactionPending'); - transactionService.removePending(txId, address, network); - - // Refresh the transaction list - this.refreshTransaction(address, 15, 0); - - // Tell the UI that the transaction is done - eventBus.emit('transactionDone'); - chrome.runtime.sendMessage({ - msg: 'transactionDone', - }); - } - }; + ) => {}; getNFTListCahce = async (): Promise => { const network = await this.getNetwork(); @@ -3728,6 +3657,7 @@ export class WalletController extends BaseController { }; getCadenceScripts = async () => { + console.log('getCadenceScripts'); try { const cadenceScrpts = await storage.get('cadenceScripts'); const now = new Date(); @@ -3739,6 +3669,7 @@ export class WalletController extends BaseController { now.getTime() <= cadenceScrpts['expiry'] && cadenceScrpts.network === network ) { + console.log('returning cached scripts', cadenceScrpts['data']); return cadenceScrpts['data']; } @@ -3746,9 +3677,10 @@ export class WalletController extends BaseController { // const cadencev1 = (await openapiService.cadenceScripts(network)) ?? {}; const cadenceScriptsV2 = (await openapiService.cadenceScriptsV2()) ?? {}; + console.log('cadenceScriptsV2', cadenceScriptsV2); // const { scripts, version } = cadenceScriptsV2; // const cadenceVersion = cadenceScriptsV2.version; - const cadence = cadenceScriptsV2.scripts[network]; + const cadence = cadenceScriptsV2.scripts[network === 'emulator' ? 'testnet' : network]; // for (const item of cadence) { // console.log(cadenceVersion, 'cadenceVersion'); diff --git a/src/background/fclConfig.ts b/src/background/fclConfig.ts index 404d0596..95d22a65 100644 --- a/src/background/fclConfig.ts +++ b/src/background/fclConfig.ts @@ -134,3 +134,17 @@ export const fclTestnetConfig = async () => { } } }; + +// Configure FCL for Emulator +export const fclEmulatorConfig = async () => { + const config = fcl + .config() + .put('accessNode.api', 'http://localhost:8888') + .put('sdk.transport', httpSend) + .put('flow.network', 'emulator') + // Default emulator account with contracts deployed + .put('0xFungibleToken', '0xee82856bf20e2aa6') + .put('0xFlowToken', '0x0ae53cb6e3f42a79') + .put('0xNonFungibleToken', '0xf8d6e0586b0a20c7') + .put('0xMetadataViews', '0xf8d6e0586b0a20c7'); +}; diff --git a/src/background/index.ts b/src/background/index.ts index 33aa293a..017547bb 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -16,7 +16,7 @@ import { EVENTS } from 'consts'; import { providerController, walletController } from './controller'; import { preAuthzServiceDefinition } from './controller/serviceDefinition'; -import { fclTestnetConfig, fclMainnetConfig } from './fclConfig'; +import { fclTestnetConfig, fclMainnetConfig, fclEmulatorConfig } from './fclConfig'; import { permissionService, preferenceService, @@ -99,6 +99,9 @@ async function fclSetup() { case 'testnet': await fclTestnetConfig(); break; + case 'emulator': + await fclEmulatorConfig(); + break; } } diff --git a/src/background/service/networkModel.ts b/src/background/service/networkModel.ts index 4ce5e514..b8e40f9c 100644 --- a/src/background/service/networkModel.ts +++ b/src/background/service/networkModel.ts @@ -62,6 +62,7 @@ export enum FlowNetwork { mainnet = 'mainnet', testnet = 'testnet', crescendo = 'crescendo', + emulator = 'emulator', } export enum Period { diff --git a/src/background/service/openapi.ts b/src/background/service/openapi.ts index 0368a5e8..ec7e87fb 100644 --- a/src/background/service/openapi.ts +++ b/src/background/service/openapi.ts @@ -1441,6 +1441,7 @@ class OpenApiService { const isProduction = process.env.NODE_ENV === 'production'; let url; + const isEmulator = network === 'emulator'; if (isProduction) { url = `https://raw.githubusercontent.com/Outblock/token-list-jsons/outblock/jsons/${network}/${chainType}/default.json`; } else if ( @@ -1449,6 +1450,10 @@ class OpenApiService { (network === 'testnet' || network === 'mainnet') ) { url = `https://raw.githubusercontent.com/Outblock/token-list-jsons/outblock/jsons/${network}/${chainType}/dev.json`; + } else if (isEmulator) { + // TODO: remove this after emulator is ready + const emulatorNetwork = 'testnet'; + url = `https://raw.githubusercontent.com/Outblock/token-list-jsons/outblock/jsons/${emulatorNetwork}/${chainType}/emulator.json`; } else { url = `https://raw.githubusercontent.com/Outblock/token-list-jsons/outblock/jsons/${network}/${chainType}/default.json`; } diff --git a/src/background/service/transaction.ts b/src/background/service/transaction.ts index 1e69a6db..caa6072d 100644 --- a/src/background/service/transaction.ts +++ b/src/background/service/transaction.ts @@ -42,11 +42,13 @@ class Transaction { mainnet: [], crescendo: [], testnet: [], + emulator: [], }, pendingItem: { mainnet: [], crescendo: [], testnet: [], + emulator: [], }, }, }); @@ -59,11 +61,13 @@ class Transaction { mainnet: [], crescendo: [], testnet: [], + emulator: [], }, pendingItem: { mainnet: [], testnet: [], crescendo: [], + emulator: [], }, }, }); @@ -77,11 +81,13 @@ class Transaction { mainnet: [], crescendo: [], testnet: [], + emulator: [], }, pendingItem: { mainnet: [], testnet: [], crescendo: [], + emulator: [], }, }; this.session = { @@ -91,11 +97,13 @@ class Transaction { mainnet: [], testnet: [], crescendo: [], + emulator: [], }, pendingItem: { mainnet: [], testnet: [], crescendo: [], + emulator: [], }, }; }; diff --git a/src/background/service/userWallet.ts b/src/background/service/userWallet.ts index 630b6b3a..193ebb98 100644 --- a/src/background/service/userWallet.ts +++ b/src/background/service/userWallet.ts @@ -106,7 +106,7 @@ class UserWallet { }; setUserWallets = async (filteredData, network) => { - console.log('filteredData ', filteredData); + console.log('userWalletService - setUserWallets - filteredData ', filteredData, network); this.store.wallets[network] = filteredData; let walletIndex = (await storage.get('currentWalletIndex')) || 0; if (this.store.wallets[network] && this.store.wallets[network].length > 0) { diff --git a/src/background/utils/defaultTokenList.json b/src/background/utils/defaultTokenList.json index fcd33976..f895203c 100644 --- a/src/background/utils/defaultTokenList.json +++ b/src/background/utils/defaultTokenList.json @@ -4,7 +4,8 @@ "address": { "mainnet": "0x1654653399040a61", "testnet": "0x7e60df042a9c0868", - "crescendo": "0x7e60df042a9c0868" + "crescendo": "0x7e60df042a9c0868", + "emulator": "0x0ae53cb6e3f42a79" }, "contract_name": "FlowToken", "storage_path": { diff --git a/src/background/utils/index.ts b/src/background/utils/index.ts index f3026eb9..1e728713 100644 --- a/src/background/utils/index.ts +++ b/src/background/utils/index.ts @@ -4,6 +4,7 @@ import packageJson from '@/../package.json'; import { storage } from '@/background/webapi'; const { version } = packageJson; +import { userWalletService } from '../service'; import { mixpanelTrack } from '../service/mixpanel'; import pageStateCache from '../service/pageStateCache'; @@ -97,9 +98,74 @@ export const isSameAddress = (a: string, b: string) => { return a.toLowerCase() === b.toLowerCase(); }; +export const checkEmulatorStatus = async (): Promise => { + try { + const response = await fetch('http://localhost:8888/v1/blocks?height=1'); + console.log('checkEmulatorStatus - response ', response); + const data = await response.json(); + console.log('checkEmulatorStatus - data ', data); + return !!data[0].block_status; + } catch (error) { + console.error('checkEmulatorAccount - error ', error); + + return false; + } +}; + +export const checkEmulatorAccount = async (address: string): Promise => { + try { + const response = await fetch(`http://localhost:8888/v1/accounts/${address}`); + const data = await response.json(); + return !!data.address; + } catch (error) { + console.error('checkEmulatorAccount - error ', error); + return false; + } +}; + +export const createEmulatorAccount = async (publicKey: string): Promise => { + try { + const response = await fetch('http://localhost:8888/v1/accounts', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + signer: '0xf8d6e0586b0a20c7', // Service account + keys: [ + { + publicKey: publicKey, + signAlgo: 2, // ECDSA_P256 + hashAlgo: 3, // SHA3_256 + weight: 1000, + }, + ], + contracts: {}, + }), + }); + + const data = await response.json(); + if (!data.address) { + throw new Error('Failed to create emulator account'); + } + return data.address; + } catch (error) { + console.error('Error creating emulator account:', error); + throw error; + } +}; + export const getScripts = async (folder: string, scriptName: string) => { try { const { data } = await storage.get('cadenceScripts'); + let network = await userWalletService.getNetwork(); + + // If emulator network, return default scripts + if (network === 'emulator') { + network = 'testnet'; + // return getDefaultEmulatorScript(folder, scriptName); + } + const files = data[folder]; const script = files[scriptName]; const scriptString = Buffer.from(script, 'base64').toString('utf-8'); @@ -116,6 +182,36 @@ export const getScripts = async (folder: string, scriptName: string) => { } }; +const getDefaultEmulatorScript = (type: string, name: string) => { + const defaultScripts = { + basic: { + revokeKey: ` + transaction(keyIndex: Int) { + prepare(signer: AuthAccount) { + signer.keys.revoke(keyIndex: keyIndex) + } + } + `, + }, + storage: { + getStorageInfo: ` + pub fun main(address: Address): {String: UFix64} { + let account = getAccount(address) + let used = account.storageUsed + let capacity = account.storageCapacity + return { + "used": used, + "capacity": capacity, + "available": capacity - used + } + } + `, + }, + }; + + return defaultScripts[type]?.[name] || ''; +}; + export const findKeyAndInfo = (keys, publicKey) => { const index = findPublicKeyIndex(keys, publicKey); if (index >= 0) { diff --git a/src/background/utils/modules/findAddressWithPubKey.ts b/src/background/utils/modules/findAddressWithPubKey.ts index 543b7ffa..4f08c124 100644 --- a/src/background/utils/modules/findAddressWithPubKey.ts +++ b/src/background/utils/modules/findAddressWithPubKey.ts @@ -1,6 +1,6 @@ import * as fcl from '@onflow/fcl'; -import { fclMainnetConfig, fclTestnetConfig } from 'background/fclConfig'; +import { fclEmulatorConfig, fclMainnetConfig, fclTestnetConfig } from 'background/fclConfig'; import { userWalletService } from 'background/service'; export const findAddressWithKey = async (pubKeyHex, address) => { @@ -27,6 +27,8 @@ export const findAddressOnlyKey = async (pubKeyHex, network) => { let data; if (network === 'testnet') { data = await getAddressTestnet(pubKeyHex); + } else if (network === 'emulator') { + data = await getAddressEmulator(pubKeyHex); } else { data = await getAddressByIndexer(pubKeyHex); } @@ -59,10 +61,19 @@ export async function getAddressTestnet(publicKey) { return json; } +export async function getAddressEmulator(publicKey) { + const url = `http://localhost:8080/key/${publicKey}`; + const result = await fetch(url); + const json = await result.json(); + return json; +} + const findAddres = async (address, pubKeyHex) => { const network = await userWalletService.getNetwork(); if (network === 'testnet') { await fclTestnetConfig(); + } else if (network === 'emulator') { + await fclEmulatorConfig(); } else { await fclMainnetConfig(); } diff --git a/src/messages.json b/src/messages.json index 0c2fa891..a8b347f8 100644 --- a/src/messages.json +++ b/src/messages.json @@ -187,6 +187,9 @@ "Testnet": { "message": "Testnet" }, + "Emulator": { + "message": "Emulator" + }, "Crescendo": { "message": "Crescendo" }, diff --git a/src/ui/FRWComponent/LLEmulatorIndicator.tsx b/src/ui/FRWComponent/LLEmulatorIndicator.tsx new file mode 100644 index 00000000..e1505cc2 --- /dev/null +++ b/src/ui/FRWComponent/LLEmulatorIndicator.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export const LLEmulatorIndicator: React.FC = () => { + return ( +
+
+ {chrome.i18n.getMessage('Emulator')} +
+
+ ); +}; diff --git a/src/ui/views/Approval/components/Connect.tsx b/src/ui/views/Approval/components/Connect.tsx index 7aee7b3a..ac75620d 100644 --- a/src/ui/views/Approval/components/Connect.tsx +++ b/src/ui/views/Approval/components/Connect.tsx @@ -252,6 +252,8 @@ const Connect = ({ params: { /*icon, origin,*/ tabId } }: ConnectProps) => { return '#FF8A00'; case 'crescendo': return '#CCAF21'; + case 'emulator': + return '#4A90E2'; } }; diff --git a/src/ui/views/Approval/components/EthApproval/EthSwitch/index.tsx b/src/ui/views/Approval/components/EthApproval/EthSwitch/index.tsx index 4df14d72..d74c770e 100644 --- a/src/ui/views/Approval/components/EthApproval/EthSwitch/index.tsx +++ b/src/ui/views/Approval/components/EthApproval/EthSwitch/index.tsx @@ -90,6 +90,8 @@ const EthSwitch = ({ params: { origin, target } }: ConnectProps) => { return '#FF8A00'; case 'crescendo': return '#CCAF21'; + case 'emulator': + return '#4A90E2'; } }; diff --git a/src/ui/views/Approval/components/EthSwitch/index.tsx b/src/ui/views/Approval/components/EthSwitch/index.tsx new file mode 100644 index 00000000..3453ae5c --- /dev/null +++ b/src/ui/views/Approval/components/EthSwitch/index.tsx @@ -0,0 +1,13 @@ +const networkColor = (network: string) => { + switch (network) { + case 'mainnet': + return '#41CC5D'; + case 'testnet': + return '#FF8A00'; + case 'crescendo': + return '#CCAF21'; + case 'emulator': + return '#4A90E2'; + } +}; +// ... existing code ... diff --git a/src/ui/views/Dashboard/Components/NetworkList.tsx b/src/ui/views/Dashboard/Components/NetworkList.tsx index 004e2a83..8b4d1e3e 100644 --- a/src/ui/views/Dashboard/Components/NetworkList.tsx +++ b/src/ui/views/Dashboard/Components/NetworkList.tsx @@ -223,6 +223,30 @@ const NetworkList = ({ networkColor, currentNetwork }) => { Testnet + + switchNetwork('emulator')} + sx={{ + padding: '4px 8px', + width: '100%', + '&:hover': { + color: networkColor('emulator'), + }, + }} + > + + Emulator + + )} diff --git a/src/ui/views/Dashboard/Header.tsx b/src/ui/views/Dashboard/Header.tsx index 456f23f5..b98a90d1 100644 --- a/src/ui/views/Dashboard/Header.tsx +++ b/src/ui/views/Dashboard/Header.tsx @@ -119,11 +119,11 @@ const Header = ({ loading = false }) => { const { unreadCount } = useNews(); const toggleDrawer = () => { - setDrawer(!drawer); + setDrawer((prevDrawer) => !prevDrawer); }; const togglePop = () => { - setPop(!ispop); + setPop((prevPop) => !prevPop); }; // News Drawer @@ -351,6 +351,8 @@ const Header = ({ loading = false }) => { return '#FF8A00'; case 'crescendo': return '#CCAF21'; + case 'emulator': + return '#4A90E2'; } }; diff --git a/src/ui/views/Dashboard/index.tsx b/src/ui/views/Dashboard/index.tsx index 8cbc413c..018c2e43 100644 --- a/src/ui/views/Dashboard/index.tsx +++ b/src/ui/views/Dashboard/index.tsx @@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useLocation, useHistory } from 'react-router-dom'; import SwipeableViews from 'react-swipeable-views'; +import { LLEmulatorIndicator } from '@/ui/FRWComponent/LLEmulatorIndicator'; import { getFirbaseConfig } from 'background/utils/firebaseConfig'; import { LLTestnetIndicator } from 'ui/FRWComponent'; import { useWallet } from 'ui/utils'; @@ -108,6 +109,8 @@ const Dashboard = ({ value, setValue }) => { }} > {currentNetwork === 'testnet' && value === 0 && } + {currentNetwork === 'emulator' && value === 0 && } + {/*
*/} { )} + + + + switchNetwork('emulator')} + > + + } + checkedIcon={} + value="emulator" + checked={currentNetwork === 'emulator'} + onChange={() => switchNetwork('emulator')} + /> + } + /> + + {currentNetwork === 'emulator' && ( + + {chrome.i18n.getMessage('Selected')} + + )} + + { const inputValue = e.target[2].value; setPk(pk); const address = flowAddressRegex.test(inputValue) ? inputValue : null; + console.log('KeyImport - handleImport - address', address); const result = await usewallet.findAddressWithPrivateKey(pk, address); + console.log('KeyImport - handleImport - result', result); if (!result) { onOpen(); return;