diff --git a/src/background/controller/provider/controller.ts b/src/background/controller/provider/controller.ts index 5dd581e5..20dc6f49 100644 --- a/src/background/controller/provider/controller.ts +++ b/src/background/controller/provider/controller.ts @@ -602,7 +602,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 82e3c2d5..af399b3c 100644 --- a/src/background/controller/wallet.ts +++ b/src/background/controller/wallet.ts @@ -298,7 +298,7 @@ export class WalletController extends BaseController { await passwordService.clear(); sessionService.broadcastEvent('accountsChanged', []); sessionService.broadcastEvent('lock'); - openIndexPage('addwelcome'); + openIndexPage('welcome'); await this.switchNetwork(switchingTo); }; @@ -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/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/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 GoogleBackup; diff --git a/src/ui/FRWComponent/LandingPages/LandingComponents.tsx b/src/ui/FRWComponent/LandingPages/LandingComponents.tsx new file mode 100644 index 00000000..4a4484cc --- /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/RegisterHeader'; +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/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/views/Register/PickUsername.tsx b/src/ui/FRWComponent/LandingPages/PickUsername.tsx similarity index 97% rename from src/ui/views/Register/PickUsername.tsx rename to src/ui/FRWComponent/LandingPages/PickUsername.tsx index e48e903a..34fa3f9e 100644 --- a/src/ui/views/Register/PickUsername.tsx +++ b/src/ui/FRWComponent/LandingPages/PickUsername.tsx @@ -11,12 +11,12 @@ import { makeStyles } from '@mui/styles'; import { Box } from '@mui/system'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; +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 EmailIcon from '../../assets/alternate-email.svg'; const useStyles = makeStyles((_theme) => ({ customInputLabel: { @@ -39,7 +39,7 @@ const useStyles = makeStyles((_theme) => ({ }, })); -const PickUsername = ({ handleClick, savedUsername, getUsername }) => { +const PickUsername = ({ handleSwitchTab, savedUsername, getUsername }) => { const classes = useStyles(); const wallet = useWallet(); const [isLoading, setLoading] = useState(false); @@ -239,7 +239,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => { */} + {showAppButton && ( + + )}
diff --git a/src/ui/views/Register/RepeatPhrase.tsx b/src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx similarity index 98% rename from src/ui/views/Register/RepeatPhrase.tsx rename to src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx index 7cc83c5a..fcefe453 100644 --- a/src/ui/views/Register/RepeatPhrase.tsx +++ b/src/ui/FRWComponent/LandingPages/RepeatPhrase.tsx @@ -17,7 +17,7 @@ const chunkArray = (myArray: any[], chunk_size: number) => { return results; }; -const RepeatPhrase = ({ handleClick, mnemonic }) => { +const RepeatPhrase = ({ handleSwitchTab, mnemonic }) => { const [incorrect, setIncorrect] = useState(false); const [chosenIndex, setChosen] = useState([]); const [selectedPhrase, setSelect] = useState([]); @@ -46,7 +46,7 @@ const RepeatPhrase = ({ handleClick, mnemonic }) => { selectedPhrase[1] === correctMatch[1] && selectedPhrase[2] === correctMatch[2] ) { - handleClick(); + handleSwitchTab(); return; } handleRandom(); diff --git a/src/ui/FRWComponent/LandingPages/SetPassword.tsx b/src/ui/FRWComponent/LandingPages/SetPassword.tsx new file mode 100644 index 00000000..c417c368 --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/SetPassword.tsx @@ -0,0 +1,223 @@ +import { Box, Typography, FormGroup } from '@mui/material'; +import { makeStyles } from '@mui/styles'; +import React, { useCallback, useEffect, useState } from 'react'; + +import { + PasswordInput, + TermsCheckbox, + ErrorSnackbar, + SubmitButton, +} from '@/ui/FRWComponent/LandingPages/PasswordComponents'; +import SlideRelative from '@/ui/FRWComponent/SlideRelative'; + +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)', + }, + }, +})); + +interface SetPasswordProps { + handleSwitchTab: () => void; + onSubmit: (password: string) => Promise; + username?: string; + tempPassword?: string; + showTerms?: boolean; + title?: string | React.ReactNode; + subtitle?: string; + isLogin?: boolean; + autoFocus?: boolean; +} + +const SetPassword: React.FC = ({ + handleSwitchTab, + 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]); + + useEffect(() => { + loadTempPassword(); + }, [loadTempPassword]); + + const successInfo = (message: string) => ( + + + + {message} + + + ); + + const errorInfo = (message: string) => ( + + + + {message} + + + ); + + 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); + } + }; + + 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 ( + <> + + + {title || ( + <> + {chrome.i18n.getMessage('Create')} + + {chrome.i18n.getMessage('Password')} + + + )} + + + {subtitle || + chrome.i18n.getMessage( + 'Lilico__uses__this__password__to__protect__your__recovery__phrase' + )} + + + + + + + {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 new file mode 100644 index 00000000..4323d394 --- /dev/null +++ b/src/ui/FRWComponent/LandingPages/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/LandingPages/RegisterHeader'; + +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/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/landingPage.tsx b/src/ui/utils/landingPage.tsx new file mode 100644 index 00000000..f3899eab --- /dev/null +++ b/src/ui/utils/landingPage.tsx @@ -0,0 +1,64 @@ +import { Box } from '@mui/material'; +import React, { type FC, useState } from 'react'; +import { useHistory } from 'react-router-dom'; + +export interface PageConfig { + component: React.ComponentType; + props: Record; +} + +export enum Direction { + Right, + Left, +} + +interface PageStepperProps { + activeIndex: number; + children: React.ReactNode; +} + +export const PageSlider: FC = ({ activeIndex, children }) => { + const pages = React.Children.toArray(children); + return {pages[activeIndex]}; +}; + +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/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/AddWelcome/AddRegister/AllSet.tsx b/src/ui/views/AddWelcome/AddRegister/AllSet.tsx deleted file mode 100644 index b4bea0e9..00000000 --- a/src/ui/views/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/AddWelcome/AddRegister/GoogleBackup.tsx b/src/ui/views/AddWelcome/AddRegister/GoogleBackup.tsx deleted file mode 100644 index 135de36c..00000000 --- a/src/ui/views/AddWelcome/AddRegister/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/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/AddWelcome/AddRegister/RegisterHeader.tsx b/src/ui/views/AddWelcome/AddRegister/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/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/AddWelcome/AddRegister/RepeatPhrase.tsx b/src/ui/views/AddWelcome/AddRegister/RepeatPhrase.tsx deleted file mode 100644 index 7cc83c5a..00000000 --- a/src/ui/views/AddWelcome/AddRegister/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/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx deleted file mode 100644 index 7300e076..00000000 --- a/src/ui/views/AddWelcome/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/AddWelcome/AddRegister/index.tsx b/src/ui/views/AddWelcome/AddRegister/index.tsx deleted file mode 100644 index 373c4f38..00000000 --- a/src/ui/views/AddWelcome/AddRegister/index.tsx +++ /dev/null @@ -1,197 +0,0 @@ -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 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 './PickUsername'; -import RecoveryPhrase from './RecoveryPhrase'; -import RegisterHeader from './RegisterHeader'; -import RepeatPhrase from './RepeatPhrase'; -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 [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); - const [mnemonic] = useState(bip39.generateMnemonic()); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - // console.log(wallet); - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - - const loadTempPassword = useCallback(async () => { - const temp = await storage.get('tempPassword'); - if (temp) { - setPassword(temp); - } - }, []); - - 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
; - } - }; - - useEffect(() => { - loadView(); - loadTempPassword(); - }, [loadView, loadTempPassword]); - - return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default AddRegister; diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleBackup.tsx b/src/ui/views/AddWelcome/AddressImport/GoogleBackup.tsx deleted file mode 100644 index 135de36c..00000000 --- a/src/ui/views/AddWelcome/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/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index bdf0ad9d..00000000 --- a/src/ui/views/AddWelcome/AddressImport/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/AddWelcome/AddressImport/GoogleImport/index.tsx b/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index eab1e689..00000000 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,179 +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 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'; -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/AddWelcome/AddressImport/PickUsername.tsx b/src/ui/views/AddWelcome/AddressImport/PickUsername.tsx deleted file mode 100644 index fbb28246..00000000 --- a/src/ui/views/AddWelcome/AddressImport/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; diff --git a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx deleted file mode 100644 index 18e3f49e..00000000 --- a/src/ui/views/AddWelcome/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/AddWelcome/AddressImport/index.tsx b/src/ui/views/AddWelcome/AddressImport/index.tsx deleted file mode 100644 index 73405e25..00000000 --- a/src/ui/views/AddWelcome/AddressImport/index.tsx +++ /dev/null @@ -1,319 +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 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 './PickUsername'; -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); - }; - - 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]); - - 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/AddWelcome/ProxySync/ProxyQr.tsx b/src/ui/views/AddWelcome/ProxySync/ProxyQr.tsx deleted file mode 100644 index 4c5feb3f..00000000 --- a/src/ui/views/AddWelcome/ProxySync/ProxyQr.tsx +++ /dev/null @@ -1,420 +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 = ({ - handleClick, - 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); - handleClick(); - }) - .catch((error) => { - console.error('Error in first wallet request:', error); - }); - }, - [usewallet, currentNetwork, confirmMnemonic, confirmPk, mnemonic, handleClick, 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/AddWelcome/ProxySync/RegisterHeader.tsx b/src/ui/views/AddWelcome/ProxySync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/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/AddWelcome/ProxySync/SetPassword.tsx b/src/ui/views/AddWelcome/ProxySync/SetPassword.tsx deleted file mode 100644 index 6ec9a061..00000000 --- a/src/ui/views/AddWelcome/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 = ({ - handleClick, - mnemonic, - publickey, - 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); - const userInfo = await wallet.getUserInfo(true); - setUsername(userInfo.username); - await saveIndex(userInfo.username); - try { - await wallet.boot(password); - await wallet.createKeyringWithProxy(publickey, mnemonic); - 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/AddWelcome/ProxySync/index.tsx b/src/ui/views/AddWelcome/ProxySync/index.tsx deleted file mode 100644 index 6e2cdf1f..00000000 --- a/src/ui/views/AddWelcome/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 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'; - -enum Direction { - Right, - Left, -} - -const ProxySync = () => { - const history = useHistory(); - const wallet = 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 () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .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
; - } - }; - - 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/AddWelcome/Sync/SetPassword.tsx b/src/ui/views/AddWelcome/Sync/SetPassword.tsx deleted file mode 100644 index dbac7f00..00000000 --- a/src/ui/views/AddWelcome/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/AddWelcome/Sync/index.tsx b/src/ui/views/AddWelcome/Sync/index.tsx deleted file mode 100644 index 79e54925..00000000 --- a/src/ui/views/AddWelcome/Sync/index.tsx +++ /dev/null @@ -1,160 +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 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'; - -enum Direction { - Right, - Left, -} - -const Sync = () => { - const history = useHistory(); - const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - 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) => { - if (res) { - history.push('/'); - } - }) - .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
; - } - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - <> - - {activeIndex === 2 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - - - {page(activeIndex)} - - - - - - - - ); -}; - -export default Sync; diff --git a/src/ui/views/AddWelcome/index.tsx b/src/ui/views/AddWelcome/index.tsx deleted file mode 100644 index c7f9fa9c..00000000 --- a/src/ui/views/AddWelcome/index.tsx +++ /dev/null @@ -1,244 +0,0 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; -import { Link } from 'react-router-dom'; - -import IconFlow from '../../../components/iconfont/IconFlow'; -import appicon from '../../FRWAssets/image/appicon.png'; -import create from '../../FRWAssets/svg/create.svg'; -import importPng from '../../FRWAssets/svg/import.svg'; -import outside from '../../FRWAssets/svg/importoutside.svg'; -import qr from '../../FRWAssets/svg/scanIcon.svg'; -import RegisterHeader from '../Register/RegisterHeader'; - -const AddWelcome = () => { - return ( - <> - - - - - - - - - - - - {chrome.i18n.getMessage('Welcome_to_lilico')} - - - - {chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}{' '} - - {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')} - - - - - - - - - - - - - - - - ); -}; - -export default AddWelcome; diff --git a/src/ui/views/AddressImport/GoogleBackup.tsx b/src/ui/views/AddressImport/GoogleBackup.tsx deleted file mode 100644 index 26911a04..00000000 --- a/src/ui/views/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/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/AddressImport/GoogleImport/DecryptWallet.tsx deleted file mode 100644 index 53660340..00000000 --- a/src/ui/views/AddressImport/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/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/AddressImport/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index 2b91ed3a..00000000 --- a/src/ui/views/AddressImport/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/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/AddressImport/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index 2adce01b..00000000 --- a/src/ui/views/AddressImport/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 { 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'; - -// 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/AddressImport/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/AddressImport/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 456f377a..00000000 --- a/src/ui/views/AddressImport/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/AddressImport/GoogleImport/index.tsx b/src/ui/views/AddressImport/GoogleImport/index.tsx deleted file mode 100644 index 017f7fe2..00000000 --- a/src/ui/views/AddressImport/GoogleImport/index.tsx +++ /dev/null @@ -1,170 +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 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'; -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/AddressImport/ImportPager.tsx b/src/ui/views/AddressImport/ImportPager.tsx deleted file mode 100644 index c0910e7f..00000000 --- a/src/ui/views/AddressImport/ImportPager.tsx +++ /dev/null @@ -1,222 +0,0 @@ -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 ErrorModel from '../../FRWComponent/PopupModal/errorModel'; -import { useWallet } from 'ui/utils'; -import { storage } from '@/background/webapi'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -const ImportPager = ({ - setMnemonic, - setPk, - setAccounts, - accounts, - mnemonic, - pk, - setUsername, - goPassword, - handleClick, - setErrorMessage, - setShowError, -}) => { - 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(); - - 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); - 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); - } else { - setKeyNew(false); - } - } - }; - - 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); - } 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); - console.log('result ', result); - if (result.status === 409) { - signIn(accountKey); - } else { - if (!accountKey[0].address) { - handleNotFoundPopup(); - return; - } - 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 && ( - - )} - - ); -}; - -export default ImportPager; 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/AddressImport/RecoverPassword.tsx b/src/ui/views/AddressImport/RecoverPassword.tsx deleted file mode 100644 index fea14940..00000000 --- a/src/ui/views/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/AddressImport/SetPassword.tsx b/src/ui/views/AddressImport/SetPassword.tsx deleted file mode 100644 index 21442b3e..00000000 --- a/src/ui/views/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 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, 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/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/AddressImport/importComponent/Googledrive.tsx deleted file mode 100644 index 63d528d5..00000000 --- a/src/ui/views/AddressImport/importComponent/Googledrive.tsx +++ /dev/null @@ -1,121 +0,0 @@ -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 { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; -import { useHistory } from 'react-router-dom'; - -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; diff --git a/src/ui/views/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/AddressImport/importComponent/JsonImport.tsx deleted file mode 100644 index ac927411..00000000 --- a/src/ui/views/AddressImport/importComponent/JsonImport.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import { Visibility, VisibilityOff } from '@mui/icons-material'; -import { - Box, - Button, - Typography, - TextField, - IconButton, - TextareaAutosize, - InputAdornment, -} from '@mui/material'; -import { makeStyles } from '@mui/styles'; -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'; - -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', - fontWeight: 400, - }, - inputChild: { - width: '100%', // Fix full width - borderRadius: '16px', - backgroundColor: '#2C2C2C', - padding: '20px 0', - color: '#fff', - marginBottom: '16px', - resize: 'none', - fontSize: '16px', - fontFamily: 'Inter', - fontWeight: 400, - }, - input: { - '& .MuiInputBase-input': { - padding: '0 20px', - fontWeight: 400, - }, - }, - button: { - width: '100%', // Fix full width - fontWeight: 'bold', - }, -})); - -const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { - const classes = useStyles(); - const wallet = useWallet(); - const [isLoading, setLoading] = useState(false); - const [isInvalid, setIsInvalid] = useState(false); - const [json, setJson] = useState(''); - const [errorMesssage, setErrorMessage] = useState(''); - const [isVisible, setIsVisible] = useState(false); - const toggleVisibility = () => setIsVisible(!isVisible); - - const hasJsonStructure = (str) => { - if (typeof str !== 'string') return false; - try { - const result = JSON.parse(str); - const type = Object.prototype.toString.call(result); - return type === '[object Object]' || type === '[object Array]'; - } catch (err) { - return false; - } - }; - - const handleImport = async (e) => { - try { - setLoading(true); - e.preventDefault(); - const keystore = e.target[0].value; - const flag = checkJSONImport(keystore); - if (!flag) { - setErrorMessage('json not valid'); - return; - } - const password = e.target[2].value; - const address = e.target[5].value; - const pkHex = await wallet.jsonToPrivateKeyHex(keystore, password); - if (pkHex === null) { - setErrorMessage('Password incorrect'); - return; - } - const result = await wallet.findAddressWithPrivateKey(pkHex, address); - setPk(pkHex); - if (!result) { - onOpen(); - return; - } - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.KEYSTORE })); - onImport(accounts); - } finally { - setLoading(false); - } - }; - - const checkJSONImport = (event) => { - setJson(event); - if (event.length === 0) { - setIsInvalid(false); - setErrorMessage(''); - return false; - } - const result = hasJsonStructure(event); - setIsInvalid(!result); - setErrorMessage(!result ? 'Not a valid json input' : ''); - return result; - }; - - return ( - -
- - - - {isVisible ? : } - - - ), - }} - /> - - - - - - {errorMesssage !== '' && ( - { - setErrorMessage(''); - }} - errorName={chrome.i18n.getMessage('Error')} - errorMessage={errorMesssage} - /> - )} -
- ); -}; - -export default JsonImport; diff --git a/src/ui/views/AddressImport/importComponent/KeyImport.tsx b/src/ui/views/AddressImport/importComponent/KeyImport.tsx deleted file mode 100644 index 05c8c341..00000000 --- a/src/ui/views/AddressImport/importComponent/KeyImport.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -import React, { useState } from 'react'; - -import { useWallet } from '@/ui/utils/WalletContext'; -import { LLSpinner } from 'ui/FRWComponent'; - -import { KEY_TYPE } from '../../../utils/modules/constants'; - -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 wallet = useWallet(); - - 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 wallet.findAddressWithPrivateKey(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/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx deleted file mode 100644 index b7633456..00000000 --- a/src/ui/views/AddressImport/importComponent/SeedPhrase.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; -import { makeStyles } from '@mui/styles'; -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'; - -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 wallet = useWallet(); - 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 wallet.findAddressWithSeedPhrase(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/AddressImport/index.tsx b/src/ui/views/AddressImport/index.tsx deleted file mode 100644 index 196a5968..00000000 --- a/src/ui/views/AddressImport/index.tsx +++ /dev/null @@ -1,269 +0,0 @@ -import { IconButton, Typography } 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 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 './PickUsername'; -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 [, setErrorMessage] = useState(chrome.i18n.getMessage('No__backup__found')); - const [, setShowError] = useState(false); - const [direction, setDirection] = useState(Direction.Right); - const [, setPassword] = useState(null); - const [accounts, setAccounts] = useState([]); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - // console.log(wallet); - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [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
; - } - }; - - useEffect(() => { - loadView(); - }, [loadView]); - - return ( - <> - - {activeIndex === 4 && } - - - - - - {/* height why not use auto */} - - - - - - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/5 - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default AddressImport; diff --git a/src/ui/views/Forgot/Recover/RecoverPage.tsx b/src/ui/views/Forgot/Recover/RecoverPage.tsx index 35d2bb28..a01db3d5 100644 --- a/src/ui/views/Forgot/Recover/RecoverPage.tsx +++ b/src/ui/views/Forgot/Recover/RecoverPage.tsx @@ -4,8 +4,8 @@ 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'; @@ -61,7 +61,7 @@ const RecoverPage = ({ dataArray, setArray, goNext }) => { } }; - const handleClick = () => { + const handleSwitchTab = () => { setLoading(true); run(password); }; @@ -177,7 +177,7 @@ const RecoverPage = ({ dataArray, setArray, goNext }) => { // className="w-full block"\ color="success" type="submit" - onClick={handleClick} + onClick={handleSwitchTab} fullWidth label={ isLoading ? ( diff --git a/src/ui/views/Forgot/Recover/ShowKey.tsx b/src/ui/views/Forgot/Recover/ShowKey.tsx index 73a3c229..bc4a7b55 100644 --- a/src/ui/views/Forgot/Recover/ShowKey.tsx +++ b/src/ui/views/Forgot/Recover/ShowKey.tsx @@ -4,12 +4,12 @@ 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 '../../../FRWComponent/PopupModal/resetModal'; -const ShowKey = ({ handleClick, mnemonic }) => { +const ShowKey = ({ handleSwitchTab, mnemonic }) => { const usewallet = useWallet(); const [canGoNext, setCanGoNext] = useState(false); const [isCoverBlur, coverBlur] = useState(true); diff --git a/src/ui/views/Forgot/Recover/index.tsx b/src/ui/views/Forgot/Recover/index.tsx index dc4f83f9..84aa0c51 100644 --- a/src/ui/views/Forgot/Recover/index.tsx +++ b/src/ui/views/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/LandingPages/RegisterHeader'; 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'; @@ -83,7 +83,7 @@ const Recover = () => { case 0: return ; case 1: - return ; + return ; default: return
; } diff --git a/src/ui/views/Forgot/Reset/ResetPage.tsx b/src/ui/views/Forgot/Reset/ResetPage.tsx index a524fec9..8068d388 100644 --- a/src/ui/views/Forgot/Reset/ResetPage.tsx +++ b/src/ui/views/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 '../../../FRWComponent/PopupModal/resetModal'; import StepBox from '../stepBox'; interface AddOrEditAddressProps { diff --git a/src/ui/views/Forgot/Reset/index.tsx b/src/ui/views/Forgot/Reset/index.tsx index 6c179e23..285ddbe0 100644 --- a/src/ui/views/Forgot/Reset/index.tsx +++ b/src/ui/views/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/LandingPages/RegisterHeader'; 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/Forgot/index.tsx b/src/ui/views/Forgot/index.tsx index ac8c01c2..0fa35c75 100644 --- a/src/ui/views/Forgot/index.tsx +++ b/src/ui/views/Forgot/index.tsx @@ -3,13 +3,9 @@ import { Box } from '@mui/system'; import React from 'react'; import { Link } from 'react-router-dom'; -import IconFlow from '../../../components/iconfont/IconFlow'; -import appicon from '../../FRWAssets/image/appicon.png'; -import create from '../../FRWAssets/svg/create.svg'; -import importPng from '../../FRWAssets/svg/import.svg'; -import recover from '../../FRWAssets/svg/recover.svg'; -import reset from '../../FRWAssets/svg/resetarrow.svg'; -import RegisterHeader from '../Register/RegisterHeader'; +import recover from '@/ui/FRWAssets/svg/recover.svg'; +import reset from '@/ui/FRWAssets/svg/resetarrow.svg'; +import RegisterHeader from '@/ui/FRWComponent/LandingPages/RegisterHeader'; const Forgot = () => { return ( @@ -67,7 +63,7 @@ const Forgot = () => { - - - ); -}; - -export default DecryptWallet; diff --git a/src/ui/views/Import/GoogleImport/GoogleAccounts.tsx b/src/ui/views/Import/GoogleImport/GoogleAccounts.tsx deleted file mode 100644 index ae3c991f..00000000 --- a/src/ui/views/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/Import/GoogleImport/RecoverPassword.tsx b/src/ui/views/Import/GoogleImport/RecoverPassword.tsx deleted file mode 100644 index c935ee3c..00000000 --- a/src/ui/views/Import/GoogleImport/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, - 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'; -import theme from '../../../style/LLTheme'; - -// 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, 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/Import/GoogleImport/RecoveryPhrase.tsx b/src/ui/views/Import/GoogleImport/RecoveryPhrase.tsx deleted file mode 100644 index 55ec2c12..00000000 --- a/src/ui/views/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/Import/GoogleImport/index.tsx b/src/ui/views/Import/GoogleImport/index.tsx deleted file mode 100644 index 7cd96471..00000000 --- a/src/ui/views/Import/GoogleImport/index.tsx +++ /dev/null @@ -1,173 +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 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'; -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/Import/ImportComponent/PrivateKey.tsx b/src/ui/views/Import/ImportComponent/PrivateKey.tsx deleted file mode 100644 index 57c3f213..00000000 --- a/src/ui/views/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/Import/ImportComponent/SeedPhrase.tsx b/src/ui/views/Import/ImportComponent/SeedPhrase.tsx deleted file mode 100644 index ac2adc82..00000000 --- a/src/ui/views/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/Import/ImportPager.tsx b/src/ui/views/Import/ImportPager.tsx deleted file mode 100644 index 04cd73f4..00000000 --- a/src/ui/views/Import/ImportPager.tsx +++ /dev/null @@ -1,213 +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 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 AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; - -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/Import/ImportRecoveryPhrase.tsx b/src/ui/views/Import/ImportRecoveryPhrase.tsx deleted file mode 100644 index e1e77104..00000000 --- a/src/ui/views/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/Import/RecoverPassword.tsx b/src/ui/views/Import/RecoverPassword.tsx deleted file mode 100644 index c1764991..00000000 --- a/src/ui/views/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/InnerRoute.tsx b/src/ui/views/InnerRoute.tsx index 9605a13d..26ce0f9a 100644 --- a/src/ui/views/InnerRoute.tsx +++ b/src/ui/views/InnerRoute.tsx @@ -42,7 +42,7 @@ import Resetpwd from './Setting/Resetpwd'; import Security from './Setting/Security'; import Settingone from './Setting/Settingone'; import Switchaccount from './Setting/Switchaccount'; -import './MainRoute.css'; +import './Landing.css'; import WalletList from './Setting/Wallet'; import RemoveWallet from './Setting/Wallet/RemoveWallet'; import WalletDetail from './Setting/Wallet/WalletDetail'; diff --git a/src/ui/views/MainRoute.css b/src/ui/views/Landing.css similarity index 100% rename from src/ui/views/MainRoute.css rename to src/ui/views/Landing.css diff --git a/src/ui/views/Landing.tsx b/src/ui/views/Landing.tsx new file mode 100644 index 00000000..5ae5102e --- /dev/null +++ b/src/ui/views/Landing.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Switch, Route } from 'react-router-dom'; + +import Forgot from './Forgot'; +import Recover from './Forgot/Recover'; +import Reset from './Forgot/Reset'; +import Welcome from './Welcome'; +import AccountImport from './Welcome/AccountImport'; +import Register from './Welcome/Register'; +import Sync from './Welcome/Sync'; + +import './Landing.css'; + +const LogPageView = () => { + return null; +}; + +export const Landing: React.FC = () => { + return ( +
+ + + + + + + + + + +
+ ); +}; diff --git a/src/ui/views/MainRoute.tsx b/src/ui/views/MainRoute.tsx deleted file mode 100644 index 61cf72d4..00000000 --- a/src/ui/views/MainRoute.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { Switch, Route } from 'react-router-dom'; - -import AddressImport from './AddressImport'; -import GoogleImport from './AddressImport/GoogleImport'; -import AddWelcome from './AddWelcome'; -import AddRegister from './AddWelcome/AddRegister'; -import AddImport from './AddWelcome/AddressImport'; -import AddGoogle from './AddWelcome/AddressImport/GoogleImport'; -import AddSync from './AddWelcome/Sync'; -// import ProxySync from './AddWelcome/ProxySync'; -import Forgot from './Forgot'; -import Recover from './Forgot/Recover'; -import Reset from './Forgot/Reset'; -import RecoverRegister from './RecoverRegister'; -import RegisterPager from './Register/RegisterPager'; -import Synce from './Sync'; -import WelcomePage from './WelcomePage'; - -import './MainRoute.css'; - -const LogPageView = () => { - return null; -}; - -export const MainRoute: React.FC = () => { - return ( -
- - - - - - - - - {/* */} - - - - - - - - - - - -
- ); -}; 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} /> )} + - + ); }; diff --git a/src/ui/views/RecoverRegister/AllSet.tsx b/src/ui/views/RecoverRegister/AllSet.tsx deleted file mode 100644 index 212b3055..00000000 --- a/src/ui/views/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/RecoverRegister/PickUsername.tsx b/src/ui/views/RecoverRegister/PickUsername.tsx deleted file mode 100644 index 571500dd..00000000 --- a/src/ui/views/RecoverRegister/PickUsername.tsx +++ /dev/null @@ -1,233 +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(() => ({ - 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} - - -); -const UsernameCorrect = ( - - - - {chrome.i18n.getMessage('Sounds_good')} - - -); -const UsernameLoading = () => ( - - - Checking - {chrome.i18n.getMessage('Flow_Core')} - -); - -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(UsernameError(message)); - }, - [setLoading, setUsernameValid, setHelperText] - ); - - useEffect(() => { - setUsernameValid(false); - setHelperText(UsernameLoading); - setLoading(true); - const delayDebounceFn = setTimeout(() => { - if (username.length < 3) { - setErrorMessage(chrome.i18n.getMessage('Too__short')); - return; - } - - if (username.length > 15) { - setErrorMessage(chrome.i18n.getMessage('Too__long')); - 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') - ); - return; - } - - 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 { - setErrorMessage(chrome.i18n.getMessage('This__name__has__been__taken')); - } - }) - .catch((error) => { - console.log('CheckUsername error ->', error); - setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error')); - }); - }, 500); - - return () => clearTimeout(delayDebounceFn); - }, [setErrorMessage, username, wallet.openapi]); - - 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/RecoverRegister/RecoveryPhrase.tsx b/src/ui/views/RecoverRegister/RecoveryPhrase.tsx deleted file mode 100644 index 26fabf20..00000000 --- a/src/ui/views/RecoverRegister/RecoveryPhrase.tsx +++ /dev/null @@ -1,198 +0,0 @@ -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 IconCopy from '../../../components/iconfont/IconCopy'; - -const RecoveryPhrase = ({ handleClick, mnemonic }) => { - const [canGoNext, setCanGoNext] = useState(true); - const [isCoverBlur, coverBlur] = useState(false); - - return ( - <> - - - {chrome.i18n.getMessage('Recovery') + ' '} - - {' ' + chrome.i18n.getMessage('Phrase')} - - - - {chrome.i18n.getMessage('This__recovery__phrase__will__be__used__for__register')} - - - - - {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: 'primary.main', - // ':hover': { - // bgcolor: '#41CC5D', - // }, - }} - > - - - - {chrome.i18n.getMessage('Click__here__to__reveal__phrase')} - - - )} - - - - - - - - - ); -}; - -export default RecoveryPhrase; diff --git a/src/ui/views/RecoverRegister/RegisterHeader.tsx b/src/ui/views/RecoverRegister/RegisterHeader.tsx deleted file mode 100644 index ebb9631a..00000000 --- a/src/ui/views/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/RecoverRegister/SetPassword.tsx b/src/ui/views/RecoverRegister/SetPassword.tsx deleted file mode 100644 index c370f903..00000000 --- a/src/ui/views/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, 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 }) => { - 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); - - 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 saveIndex(username); - const accountKey = getAccountKey(mnemonic); - - wallet.openapi - .register(accountKey, username) - .then((response) => { - setLoading(false); - return wallet.boot(password); - }) - .then((response) => { - const formatted = mnemonic.trim().split(/\s+/g).join(' '); - storage.remove('premnemonic'); - return wallet.createKeyringWithMnemonics(formatted); - }) - .then((accounts) => { - handleClick(); - return wallet.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/RecoverRegister/index.tsx b/src/ui/views/RecoverRegister/index.tsx deleted file mode 100644 index 0cdf98fe..00000000 --- a/src/ui/views/RecoverRegister/index.tsx +++ /dev/null @@ -1,206 +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 SlideLeftRight from '@/ui/FRWComponent/SlideLeftRight'; - -import lilicoIcon from '../../..//..//_raw/images/icon-48.png'; -import BackButtonIcon from '../../../components/iconfont/IconBackButton'; - -import AllSet from './AllSet'; -import PickUsername from './PickUsername'; -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/Register/GoogleBackup.tsx b/src/ui/views/Register/GoogleBackup.tsx deleted file mode 100644 index 26911a04..00000000 --- a/src/ui/views/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/Register/RecoveryPhrase.tsx b/src/ui/views/Register/RecoveryPhrase.tsx deleted file mode 100644 index ecf80ad8..00000000 --- a/src/ui/views/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/Register/RegisterHeader.tsx b/src/ui/views/Register/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/Register/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/Register/RegisterPager.tsx b/src/ui/views/Register/RegisterPager.tsx deleted file mode 100644 index 42fc829d..00000000 --- a/src/ui/views/Register/RegisterPager.tsx +++ /dev/null @@ -1,187 +0,0 @@ -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 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 { - Right, - Left, -} - -const RegisterPager = () => { - const history = useHistory(); - const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [direction, setDirection] = useState(Direction.Right); - const [username, setUsername] = useState(''); - const [password, setPassword] = useState(null); - const [mnemonic] = useState(bip39.generateMnemonic()); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - // console.log(wallet); - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [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 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]); - - return ( - <> - - {activeIndex === 5 && } - - - - - - {/* height why not use auto */} - - - {activeIndex !== 4 && activeIndex !== 5 && ( - - - - )} - -
- - - {chrome.i18n.getMessage('STEP')} {activeIndex + 1}/6 - - - - - {page(activeIndex)} - - - - - - - ); -}; - -export default RegisterPager; diff --git a/src/ui/views/Register/SetPassword.tsx b/src/ui/views/Register/SetPassword.tsx deleted file mode 100644 index 872b193b..00000000 --- a/src/ui/views/Register/SetPassword.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, - 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 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 }) => { - 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/Reset/RecoverPassword.tsx b/src/ui/views/Reset/RecoverPassword.tsx deleted file mode 100644 index 4e068406..00000000 --- a/src/ui/views/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, 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 [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 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); - 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/Reset/ResetRecoveryPhrase.tsx b/src/ui/views/Reset/ResetRecoveryPhrase.tsx deleted file mode 100644 index 447efa6c..00000000 --- a/src/ui/views/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 = ({ handleClick, 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); - handleClick(); - } 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/Reset/index.tsx b/src/ui/views/Reset/index.tsx deleted file mode 100644 index 5872e984..00000000 --- a/src/ui/views/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 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 AllSet from '../Register/AllSet'; -import RegisterHeader from '../Register/RegisterHeader'; - -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: '/import/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/Sync/AllSet.tsx b/src/ui/views/Sync/AllSet.tsx deleted file mode 100644 index cca17c81..00000000 --- a/src/ui/views/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/Sync/Namespace.tsx b/src/ui/views/Sync/Namespace.tsx deleted file mode 100644 index 1e692af8..00000000 --- a/src/ui/views/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/Sync/RegisterHeader.tsx b/src/ui/views/Sync/RegisterHeader.tsx deleted file mode 100644 index fb499d7f..00000000 --- a/src/ui/views/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/Sync/SetPassword.tsx b/src/ui/views/Sync/SetPassword.tsx deleted file mode 100644 index 95f9317e..00000000 --- a/src/ui/views/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/Sync/SyncQr.tsx b/src/ui/views/Sync/SyncQr.tsx deleted file mode 100644 index 12c98ef5..00000000 --- a/src/ui/views/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/Sync/index.tsx b/src/ui/views/Sync/index.tsx deleted file mode 100644 index 2ee8ebb8..00000000 --- a/src/ui/views/Sync/index.tsx +++ /dev/null @@ -1,146 +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 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'; - -enum Direction { - Right, - Left, -} - -const Sync = () => { - const history = useHistory(); - const wallet = useWallet(); - const [activeIndex, onChange] = useState(0); - const [mnemonic, setMnemonic] = useState(''); - const [username, setUsername] = useState(''); - const [direction, setDirection] = useState(Direction.Right); - - const getUsername = (username: string) => { - setUsername(username.toLowerCase()); - }; - - const loadView = useCallback(async () => { - wallet - .getCurrentAccount() - .then((res) => { - if (res) { - history.push('/'); - } - }) - .catch(() => { - return; - }); - }, [wallet, history]); - 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 Sync; diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx b/src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx similarity index 96% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx rename to src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx index 723901e5..4ea6c14a 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/DecryptWallet.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/DecryptWallet.tsx @@ -51,9 +51,9 @@ const useStyles = makeStyles(() => ({ }, })); -const DecryptWallet = ({ handleClick, setMnemonic, username }) => { +const DecryptWallet = ({ handleSwitchTab, setMnemonic, username }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isPasswordVisible, setPasswordVisible] = useState(false); const [password, setPassword] = useState(''); @@ -90,11 +90,11 @@ const DecryptWallet = ({ handleClick, setMnemonic, username }) => { // const formatted = mnemonic.trim().split(/\s+/g).join(' '); // await wallet.createKeyringWithMnemonics(formatted); try { - const mnemonic = await wallet.restoreAccount(username, password); + const mnemonic = await usewallet.restoreAccount(username, password); // console.log('mnemonic ->', mnemonic); setLoading(false); setMnemonic(mnemonic); - handleClick(); + handleSwitchTab(); } catch (e) { setLoading(false); setHelperText( diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx b/src/ui/views/Welcome/AccountImport/Google/GoogleAccounts.tsx similarity index 92% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx rename to src/ui/views/Welcome/AccountImport/Google/GoogleAccounts.tsx index bcb4b65a..c594041a 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/GoogleAccounts.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/GoogleAccounts.tsx @@ -18,17 +18,17 @@ 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 usewallet = useWallet(); const fetchUserAvatar = useCallback( async (username) => { - const { data } = await wallet.openapi.searchUser(username); + const { data } = await usewallet.openapi.searchUser(username); const users = data.users; if (users.length > 0 && users[0].avatar) { setAvatar(users[0].avatar); } }, - [setAvatar, wallet.openapi] + [setAvatar, usewallet.openapi] ); useEffect(() => { @@ -38,7 +38,7 @@ const FetchAvatar = ({ username }) => { return ; }; -const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { +const GoogleAccounts = ({ handleSwitchTab, accounts, setUsername }) => { return ( <> @@ -72,7 +72,7 @@ const GoogleAccounts = ({ handleClick, accounts, setUsername }) => { { setUsername(account); - handleClick(); + handleSwitchTab(); }} sx={{ display: 'flex', diff --git a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx similarity index 95% rename from src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx rename to src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.tsx index 0276fb36..7b238628 100644 --- a/src/ui/views/AddWelcome/AddressImport/GoogleImport/RecoverPassword.tsx +++ b/src/ui/views/Welcome/AccountImport/Google/GoogleRecoverPassword.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'; @@ -131,9 +131,9 @@ const PasswordIndicator = (props) => { ); }; -const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { +const GoogleRecoverPassword = ({ handleSwitchTab, mnemonic, username, lastPassword }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isPasswordVisible, setPasswordVisible] = useState(false); const [isConfirmPasswordVisible, setConfirmPasswordVisible] = useState(false); @@ -201,14 +201,14 @@ const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => { const login = async () => { setLoading(true); - await saveIndex(username); + await usewallet.saveIndex(username); try { - await wallet.signInWithMnemonic(mnemonic); - await wallet.boot(password); + await usewallet.signInWithMnemonic(mnemonic); + await usewallet.boot(password); const formatted = mnemonic.trim().split(/\s+/g).join(' '); - await wallet.createKeyringWithMnemonics(formatted); + await usewallet.createKeyringWithMnemonics(formatted); setLoading(false); - handleClick(); + handleSwitchTab(); } catch (e) { setLoading(false); setErrorMessage(e.message); @@ -332,4 +332,4 @@ const SetPassword = ({ handleClick, 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 new file mode 100644 index 00000000..1b16aebf --- /dev/null +++ b/src/ui/views/Welcome/AccountImport/Google/index.tsx @@ -0,0 +1,117 @@ +import { Box } from '@mui/material'; +import React, { useCallback, useEffect, useState } from 'react'; +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 GoogleRecoverPassword from './GoogleRecoverPassword'; + +const STEPS = { + ACCOUNTS: 'accounts', + DECRYPT: 'decrypt', + RECOVERY: 'recovery', + PASSWORD: 'password', + ALL_SET: 'all_set', +} as const; + +type StepType = (typeof STEPS)[keyof typeof STEPS]; + +interface AccountsState { + accounts: string[]; +} + +interface GoogleProps { + accounts: string[]; + onBack: () => void; +} + +const Google: React.FC = ({ accounts, onBack }) => { + const [activeTab, setActiveTab] = useState(STEPS.ACCOUNTS); + const [mnemonic, setMnemonic] = useState(''); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const loadTempPassword = useCallback(async () => { + const temp = await storage.get('tempPassword'); + if (temp) { + setPassword(temp); + } + }, []); + + useEffect(() => { + loadTempPassword(); + }, [loadTempPassword]); + + const goBack = () => { + switch (activeTab) { + case STEPS.DECRYPT: + setActiveTab(STEPS.ACCOUNTS); + break; + case STEPS.RECOVERY: + setActiveTab(STEPS.DECRYPT); + break; + case STEPS.PASSWORD: + setActiveTab(STEPS.RECOVERY); + break; + case STEPS.ALL_SET: + setActiveTab(STEPS.PASSWORD); + break; + default: + onBack(); + } + }; + + return ( + + + {activeTab === STEPS.ACCOUNTS && ( + setActiveTab(STEPS.DECRYPT)} + accounts={accounts} + setUsername={setUsername} + /> + )} + + {activeTab === STEPS.DECRYPT && ( + setActiveTab(STEPS.RECOVERY)} + setMnemonic={setMnemonic} + username={username} + /> + )} + + {activeTab === STEPS.RECOVERY && ( + setActiveTab(STEPS.PASSWORD)} + mnemonic={mnemonic} + /> + )} + + {activeTab === STEPS.PASSWORD && ( + setActiveTab(STEPS.ALL_SET)} + mnemonic={mnemonic} + username={username} + lastPassword={password} + /> + )} + + {activeTab === STEPS.ALL_SET && window.close()} />} + + + ); +}; + +export default Google; diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx similarity index 80% rename from src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx index 5cc61168..48aa4a03 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/Googledrive.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/Googledrive.tsx @@ -1,20 +1,21 @@ -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 { Box, Button, Typography } from '@mui/material'; import { makeStyles } from '@mui/styles'; -import { LLSpinner } from 'ui/FRWComponent'; -import { useWallet } from 'ui/utils'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -const useStyles = makeStyles((theme) => ({ +import { LLSpinner } from '@/ui/FRWComponent'; +import { useWallet } from '@/ui/utils'; + +import IconGoogleDrive from '../../../../../components/iconfont/IconGoogleDrive'; + +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', @@ -25,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 Googledrive = ({ setErrorMessage, setShowError, handleGoogleAccountsFound }) => { const classes = useStyles(); const wallets = useWallet(); const history = useHistory(); @@ -46,21 +47,16 @@ const Googledrive = ({ setErrorMessage, setShowError }) => { localStorage.setItem('backupAccounts', JSON.stringify(accounts)); if (accounts.length > 0) { - history.push({ - pathname: '/add/google', - state: { - accounts: accounts, - }, - }); + handleGoogleAccountsFound(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')); + } finally { setLoading(false); } }; diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/JsonImport.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx similarity index 92% rename from src/ui/views/AddWelcome/AddressImport/importComponent/JsonImport.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx index 7176c50c..42dd8c18 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/JsonImport.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/JsonImport.tsx @@ -11,20 +11,20 @@ import { import { makeStyles } from '@mui/styles'; import React, { useState } from 'react'; -import { KEY_TYPE } from '@/shared/utils/algo-constants'; import { useWallet } from '@/ui/utils/WalletContext'; import { LLSpinner } from 'ui/FRWComponent'; import ErrorModel from '../../../../FRWComponent/PopupModal/errorModel'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; -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', @@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) => ({ fontWeight: 400, }, inputChild: { - width: '100%', // Fix full width + width: '100%', borderRadius: '16px', backgroundColor: '#2C2C2C', padding: '20px 0', @@ -54,14 +54,14 @@ const useStyles = makeStyles((theme) => ({ }, }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isLoading, setLoading] = useState(false); const [isInvalid, setIsInvalid] = useState(false); const [json, setJson] = useState(''); @@ -92,12 +92,12 @@ const JsonImport = ({ onOpen, onImport, setPk, isSignLoading }) => { } const password = e.target[2].value; const address = e.target[5].value; - const pkHex = await wallet.jsonToPrivateKeyHex(keystore, password); + const pkHex = await usewallet.jsonToPrivateKeyHex(keystore, password); if (pkHex === null) { setErrorMessage('Password incorrect'); return; } - const result = await wallet.findAddressWithPrivateKey(pkHex, address); + const result = await usewallet.findAddressWithPrivateKey(pkHex, address); setPk(pkHex); if (!result) { onOpen(); @@ -119,7 +119,6 @@ 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/Welcome/AccountImport/ImportComponents/KeyImport.tsx similarity index 88% rename from src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/KeyImport.tsx index d41fbd2e..6be25406 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/KeyImport.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/KeyImport.tsx @@ -2,18 +2,19 @@ import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/mater import { makeStyles } from '@mui/styles'; import React, { useState } from 'react'; -import { KEY_TYPE } from '@/shared/utils/algo-constants'; import { useWallet } from '@/ui/utils/WalletContext'; import { LLSpinner } from 'ui/FRWComponent'; +import { KEY_TYPE } from '../../../../utils/modules/constants'; + const useStyles = makeStyles((theme) => ({ 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 +25,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 wallet = useWallet(); + const usewallet = useWallet(); const [isLoading, setLoading] = useState(false); const handleImport = async (e) => { @@ -43,13 +43,12 @@ const KeyImport = ({ onOpen, onImport, setPk, isSignLoading }) => { const inputValue = e.target[2].value; setPk(pk); const address = flowAddressRegex.test(inputValue) ? inputValue : null; - const result = await wallet.findAddressWithPrivateKey(pk, address); + const result = await usewallet.findAddressWithPrivateKey(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); diff --git a/src/ui/views/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx b/src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx similarity index 88% rename from src/ui/views/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx rename to src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx index 7ef03300..37ea7c8f 100644 --- a/src/ui/views/AddWelcome/AddressImport/importComponent/SeedPhrase.tsx +++ b/src/ui/views/Welcome/AccountImport/ImportComponents/SeedPhraseImport.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Typography, TextField, TextareaAutosize } from '@mui/material'; +import { Box, Button, Typography, TextareaAutosize } from '@mui/material'; import { makeStyles } from '@mui/styles'; import React, { useState } from 'react'; @@ -8,14 +8,14 @@ import { LLSpinner } from 'ui/FRWComponent'; import KeyPathInput from '../../../../FRWComponent/KeyPathInputs'; import { KEY_TYPE } from '../../../../utils/modules/constants'; -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,14 +26,14 @@ const useStyles = makeStyles((theme) => ({ fontFamily: 'Inter', }, button: { - width: '100%', // Fix full width + width: '100%', fontWeight: 'bold', }, })); const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { const classes = useStyles(); - const wallet = useWallet(); + const usewallet = useWallet(); const [isLoading, setLoading] = useState(false); const handleImport = async (e) => { @@ -46,12 +46,11 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { const inputValue = e.target[2].value; const address = flowAddressRegex.test(inputValue) ? inputValue : null; - const result = await wallet.findAddressWithSeedPhrase(seed, address, true); + const result = await usewallet.findAddressWithSeedPhrase(seed, address, true); if (!result) { onOpen(); return; } - const accounts = result.map((a) => ({ ...a, type: KEY_TYPE.SEED_PHRASE, mnemonic: seed })); onImport(accounts); } finally { @@ -73,7 +72,6 @@ const SeedPhraseImport = ({ onOpen, onImport, setmnemonic, isSignLoading }) => { className={classes.textarea} defaultValue={''} /> - {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')} + + + )} diff --git a/src/ui/views/Welcome/Sync/index.tsx b/src/ui/views/Welcome/Sync/index.tsx new file mode 100644 index 00000000..d17cbcd2 --- /dev/null +++ b/src/ui/views/Welcome/Sync/index.tsx @@ -0,0 +1,124 @@ +import { Box } from '@mui/material'; +import React, { useCallback, useEffect, useState } from 'react'; +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 } from 'ui/utils'; + +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 usewallet = useWallet(); + const [activeTab, setActiveTab] = useState(STEPS.QR); + 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()); + }; + + const loadView = useCallback(async () => { + usewallet + .getCurrentAccount() + .then((res) => { + if (res) { + history.push('/'); + } + }) + .catch(() => { + return; + }); + }, [usewallet, history]); + + useEffect(() => { + loadView(); + }, [loadView]); + + const submitPassword = useCallback( + async (password: string) => { + await usewallet.signInV3(mnemonic, accountKey, deviceInfo); + const userInfo = await usewallet.getUserInfo(true); + setUsername(userInfo.username); + await usewallet.saveIndex(userInfo.username); + await usewallet.boot(password); + const formatted = mnemonic.trim().split(/\s+/g).join(' '); + await usewallet.createKeyringWithMnemonics(formatted); + setActiveTab(STEPS.ALL_SET); + }, + [usewallet, 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" /> + )} + + + ); +}; + +export default Sync; diff --git a/src/ui/views/Welcome/index.tsx b/src/ui/views/Welcome/index.tsx new file mode 100644 index 00000000..a9ca77a0 --- /dev/null +++ b/src/ui/views/Welcome/index.tsx @@ -0,0 +1,240 @@ +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/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')} + + + + + + + + + + + + + + + ); +}; + +export default Welcome; diff --git a/src/ui/views/WelcomePage/index.tsx b/src/ui/views/WelcomePage/index.tsx deleted file mode 100644 index 90a9da27..00000000 --- a/src/ui/views/WelcomePage/index.tsx +++ /dev/null @@ -1,313 +0,0 @@ -import { Typography, Button, CardMedia } from '@mui/material'; -import { Box } from '@mui/system'; -import React from 'react'; -import { Link } from 'react-router-dom'; - -import IconFlow from '../../../components/iconfont/IconFlow'; -import appicon from '../../FRWAssets/image/appicon.png'; -import create from '../../FRWAssets/svg/create.svg'; -import importPng from '../../FRWAssets/svg/import.svg'; -import qr from '../../FRWAssets/svg/scanIcon.svg'; -import RegisterHeader from '../Register/RegisterHeader'; - -const WelcomePage = () => { - 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/views/index.tsx b/src/ui/views/index.tsx index e0e45b8b..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'; @@ -32,11 +32,10 @@ const Routes = () => { - {/* */} - +