Feature/eoa dev1.0.0 account

packages/mobile-aelf/js/assets/theme/index.ts

@@ -280,6 +280,7 @@ export const darkColors = {
   bgTransparent: 'transparent',
 
   textBase1: '#ffffff',
+  textBase1Opacity07: '#FFFFFFB3', // #FFFFFF · 70%;
   textBase2: '#FFFFFFB2',
   textBase3: '#FFFFFF66',
   textDisabled1: '#626264',

packages/mobile-aelf/js/assets/theme/theme.d.ts

@@ -31,6 +31,7 @@ declare module '@rneui/themed' {
     bgTransparent: string;
 
     textBase1: string;
+    textBase1Opacity07: string;
     textBase2: string;
     textBase3: string;
     textDisabled1: string;

packages/mobile-aelf/js/pages/Home/HomeTab/index.tsx

@@ -2,10 +2,12 @@ import React, { useCallback, useEffect } from 'react';
 import SafeAreaBox from 'components/SafeAreaBox';
 import { useTheme } from '@rneui/themed';
 import { TextM } from 'components/CommonText';
+import { ScrollView } from 'react-native';
 import { useCurrentAccount, useWalletListState } from '@portkey-wallet/hooks/hooks-eoa/wallet';
 import CommonButton from 'components/CommonButton';
 import navigationService from 'utils/navigationService';
 import { useCheckSecurityLock } from 'hooks/securityLock';
+import { useBackupWalletModal } from '../../Login/hooks/useBackupWalletModal';
 
 const HomeTab: React.FC<any> = ({ _ }) => {
   const { theme } = useTheme();
@@ -28,25 +30,52 @@ const HomeTab: React.FC<any> = ({ _ }) => {
     }
   }, [checkSecurityLock]);
 
+  const { showBackupWalletModal } = useBackupWalletModal();
+
   return (
     <SafeAreaBox edges={['top', 'right', 'left']} style={{ backgroundColor: theme.colors.bgBase1 }}>
-      <TextM>Home Tab</TextM>
-      <TextM>{`Address: ${currentAccount?.address}`}</TextM>
-      <CommonButton type="primary" onPress={() => navigationService.push('Home')}>
-        Home
-      </CommonButton>
-      <CommonButton type="primary" onPress={() => navigationService.push('ImportWallet')} style={{ marginTop: 40 }}>
-        Import Wallet
-      </CommonButton>
-      <CommonButton type="primary" onPress={() => navigationService.push('ConfirmBackup')} style={{ marginTop: 40 }}>
-        Confirm Backup
-      </CommonButton>
-      <CommonButton type="primary" onPress={() => navigationService.push('ManualBackup')} style={{ marginTop: 40 }}>
-        Manual Backup
-      </CommonButton>
-      <CommonButton type="primary" onPress={checkPin} style={{ marginTop: 40 }}>
-        Check Pin
-      </CommonButton>
+      <ScrollView>
+        <TextM>Home Tab</TextM>
+        <TextM>{`Address: ${currentAccount?.address}`}</TextM>
+        <CommonButton type="primary" onPress={() => navigationService.push('Home')}>
+          Home
+        </CommonButton>
+        <CommonButton type="primary" onPress={() => navigationService.push('ImportWallet')} style={{ marginTop: 40 }}>
+          Import Wallets
+        </CommonButton>
+        <CommonButton
+          type="primary"
+          onPress={() => navigationService.push('WalletImportTypeSelect')}
+          style={{ marginTop: 40 }}>
+          WalletImportTypeSelect
+        </CommonButton>
+        <CommonButton type="primary" onPress={() => navigationService.push('ConfirmBackup')} style={{ marginTop: 40 }}>
+          Confirm Backup
+        </CommonButton>
+        <CommonButton
+          type="primary"
+          onPress={() => navigationService.push('ManualBackupSuccess')}
+          style={{ marginTop: 40 }}>
+          Confirm Backup Success
+        </CommonButton>
+        <CommonButton type="primary" onPress={() => navigationService.push('ManualBackup')} style={{ marginTop: 40 }}>
+          Manual Backup
+        </CommonButton>
+        <CommonButton type="primary" onPress={() => navigationService.push('Referral')} style={{ marginTop: 40 }}>
+          Referral
+        </CommonButton>
+        <CommonButton type="primary" onPress={checkPin} style={{ marginTop: 40 }}>
+          Check Pin
+        </CommonButton>
+        <CommonButton
+          type="primary"
+          onPress={() => {
+            showBackupWalletModal();
+          }}
+          style={{ marginTop: 40 }}>
+          Backup Modal
+        </CommonButton>
+      </ScrollView>
     </SafeAreaBox>
   );
 };

packages/mobile-aelf/js/pages/Login/ConfirmBackup/index.tsx

@@ -8,6 +8,7 @@ import { pTd } from 'utils/unit';
 import fonts from 'assets/theme/fonts';
 import Touchable from 'components/Touchable';
 import Svg from 'components/Svg';
+import navigationService from 'utils/navigationService';
 
 export default function ConfirmBackup() {
   const styles = getStyles();
@@ -37,7 +38,7 @@ export default function ConfirmBackup() {
     return shuffleArray(shuffledWords.concat(mnemonics[currentIndex]));
   }, [currentIndex]);
 
-  const selectRandomIndex = useCallback(() => {
+  const selectRandomIndex = useCallback((): number => {
     if (testedIndexes.current.length === mnemonics.length) {
       testedIndexes.current = checkedIndexes.current;
     }
@@ -47,31 +48,33 @@ export default function ConfirmBackup() {
     } else {
       return randomIndex;
     }
-  }, [testedIndexes, checkedIndexes]);
+  }, [mnemonics.length]);
 
-  const onPressWord = useCallback((word: string) => {
-    const index = mnemonics.indexOf(word);
-    testedIndexes.current.push(currentIndex);
-    if (index === currentIndex) {
-      // selected the correct word
-      checkedIndexes.current.push(currentIndex);
-      console.log('checkedIndexes : ', checkedIndexes.current);
-      if (checkedIndexes.current.length === 2) {
-        // all words are selected, go to next page
-        // todo_wade: go to next page
+  const onPressWord = useCallback(
+    (word: string) => {
+      const index = mnemonics.indexOf(word);
+      testedIndexes.current.push(currentIndex);
+      if (index === currentIndex) {
+        // selected the correct word
+        checkedIndexes.current.push(currentIndex);
+        console.log('checkedIndexes : ', checkedIndexes.current);
+        if (checkedIndexes.current.length === 2) {
+          navigationService.push('ManualBackupSuccess');
+        } else {
+          setCurrentIndex(selectRandomIndex());
+          setShowError(false);
+        }
       } else {
-        setCurrentIndex(selectRandomIndex());
-        setShowError(false);
+        // selected the incorrect word
+        setShowError(true);
+        setTimeout(() => {
+          setCurrentIndex(selectRandomIndex());
+          setShowError(false);
+        }, 2000);
       }
-    } else {
-      // selected the incorrect word
-      setShowError(true);
-      setTimeout(() => {
-        setCurrentIndex(selectRandomIndex());
-        setShowError(false);
-      }, 2000);
-    }
-  }, [testedIndexes, currentIndex, checkedIndexes, selectRandomIndex, showError]);
+    },
+    [testedIndexes, currentIndex, checkedIndexes, selectRandomIndex, showError],
+  );
 
   useEffect(() => {
     setCurrentIndex(selectRandomIndex());
@@ -84,16 +87,15 @@ export default function ConfirmBackup() {
       pageSafeBottomPadding={!isIOS}
       containerStyles={styles.containerStyles}
       scrollViewProps={{ disabled: true }}>
-      <Text style={styles.title}>Confirm Backup</Text>
-      <Text style={styles.desc}>Complete this quicktestto confirm you've saved everything correctly.</Text>
+      <Text style={styles.title}>Verify seed phrase</Text>
+      <Text style={styles.desc}>Verify your seed phrase by selecting the words in the correct order.</Text>
       <Text style={styles.indexTitle}>{`# ${currentIndex + 1} word`}</Text>
-      <Text style={styles.indexDesc}>{`Please select the #${
-        currentIndex + 1
-      } Word in your Secret Recovery Phrase.`}</Text>
+      <Text style={styles.indexDesc}>{`Please select the #${currentIndex + 1} word in your seed phrase.`}</Text>
       <View style={styles.wordsWrap}>
         {showWords.map((word, index) => {
           return (
             <Touchable
+              key={index}
               style={[styles.wordButton, index > 0 && styles.wordButtonMarginTop]}
               disabled={showError}
               onPress={() => onPressWord(word)}>

packages/mobile-aelf/js/pages/Login/ImportWallet/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Text } from 'react-native';
 import PageContainer from 'components/PageContainer';
 import ImportWalletTabSwitch from './ImportWalletTabSwitch';
@@ -8,12 +8,24 @@ import { isIOS } from '@portkey-wallet/utils/mobile/device';
 import { makeStyles } from '@rneui/themed';
 import { pTd } from 'utils/unit';
 import fonts from 'assets/theme/fonts';
+import useRouterParams from '@portkey-wallet/hooks/useRouterParams';
+
+type RouterParams = {
+  importType: string;
+};
 
 export default function ImportWallet() {
   const styles = getStyles();
+  const { importType } = useRouterParams<RouterParams>();
 
   const [isPrivateKeySelected, setPrivateKeySelected] = useState(false);
 
+  useEffect(() => {
+    if (importType === 'privateKey') {
+      setPrivateKeySelected(true);
+    }
+  }, [importType]);
+
   const onSelectedTab = useCallback(
     (privateKeySelected: boolean) => {
       setPrivateKeySelected(privateKeySelected);
@@ -29,7 +41,8 @@ export default function ImportWallet() {
       containerStyles={styles.containerStyles}
       scrollViewProps={{ disabled: true }}>
       <Text style={styles.title}>
-        {isPrivateKeySelected ? 'Import your Private key' : 'Import your Recovery phrase'}
+        {/*{isPrivateKeySelected ? 'Import your Private key' : 'Import your Recovery phrase'}*/}
+        Import your wallet
       </Text>
       <ImportWalletTabSwitch onSelected={onSelectedTab} />
       {isPrivateKeySelected ? <PrivateKey /> : <RecoveryPhrase />}

packages/mobile-aelf/js/pages/Login/ManualBackup/Success/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import PageContainer from 'components/PageContainer';
+import { isIOS } from '@portkey-wallet/utils/mobile/device';
+import { makeStyles } from '@rneui/themed';
+import { pTd } from 'utils/unit';
+import fonts from 'assets/theme/fonts';
+import CommonButton from 'components/CommonButton';
+import navigationService from 'utils/navigationService';
+import CommonAvatar from 'components/CommonAvatar';
+import backUpWalletSuccessLogo from 'assets/image/pngs/backupWalletSuccess.png';
+
+export default function ManualBackupSuccess() {
+  const styles = getStyles();
+
+  return (
+    <PageContainer
+      titleDom
+      noLeftDom
+      hideHeader
+      pageSafeBottomPadding={!isIOS}
+      containerStyles={styles.page}
+      scrollViewProps={{ disabled: true }}>
+      <View style={styles.container}>
+        <View style={styles.logoContainer}>
+          <CommonAvatar
+            style={styles.logo}
+            hasBorder={false}
+            localImage={backUpWalletSuccessLogo}
+            avatarSize={pTd(240)}
+          />
+        </View>
+        <Text style={styles.title}>Manual backup completed</Text>
+        <Text style={styles.desc}>You have successfully backed up your wallet.</Text>
+      </View>
+      <CommonButton
+        type="primary"
+        style={styles.continueButton}
+        onPress={() => {
+          navigationService.push('Tab');
+        }}>
+        View wallet
+      </CommonButton>
+    </PageContainer>
+  );
+}
+
+const getStyles = makeStyles(theme => ({
+  page: {
+    backgroundColor: theme.colors.bgBase1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    position: 'relative',
+  },
+  logoContainer: {
+    marginTop: pTd(100),
+    height: pTd(240),
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginBottom: pTd(16),
+  },
+  logo: {
+    backgroundColor: 'transparent',
+  },
+  title: {
+    fontSize: pTd(32),
+    lineHeight: pTd(32) * 1.2,
+    ...fonts.BGMediumFont,
+    textAlign: 'center',
+  },
+  desc: {
+    color: theme.colors.textBase1,
+    marginTop: pTd(16),
+    fontSize: pTd(14),
+    lineHeight: pTd(14) * 1.4,
+    textAlign: 'center',
+  },
+  continueButton: {
+    marginTop: pTd(24),
+    marginBottom: pTd(16),
+  },
+}));

packages/mobile-aelf/js/pages/Login/ManualBackup/index.tsx

@@ -10,6 +10,7 @@ import Svg from 'components/Svg';
 import Touchable from 'components/Touchable';
 import { screenWidth } from '@portkey-wallet/utils/mobile/device';
 import CommonButton from 'components/CommonButton';
+import navigationService from 'utils/navigationService';
 
 export default function ManualBackup() {
   const styles = getStyles();
@@ -39,7 +40,7 @@ export default function ManualBackup() {
     return (
       <Touchable style={styles.button} onPress={onCopy}>
         <Svg icon="copy" size={pTd(20)} />
-        <Text style={styles.buttonText}>Paste from clipboard</Text>
+        <Text style={styles.buttonText}>Copy to clipboard</Text>
       </Touchable>
     );
   }, [onCopy, styles]);
@@ -48,7 +49,7 @@ export default function ManualBackup() {
     return (
       <View style={styles.button}>
         <Svg icon="check-circle" size={pTd(20)} color={theme.colors.iconSuccess2} />
-        <Text style={styles.copyText}>Copied</Text>
+        <Text style={styles.copyText}>Seed phrase copied</Text>
       </View>
     );
   }, [styles, theme]);
@@ -58,7 +59,7 @@ export default function ManualBackup() {
       <View style={styles.reminderWrap}>
         <Svg icon="info" size={pTd(22)} color={theme.colors.bgBrand4} />
         <Text style={styles.reminderText}>
-          Next, you&apos;ll be asked to confirm the word at certain positions in your Secret Recovery Phrase.
+          Next, verify your seed phrase by selecting the words in the correct order.
         </Text>
       </View>
     );
@@ -73,8 +74,8 @@ export default function ManualBackup() {
       scrollViewProps={{ disabled: true }}>
       <Text style={styles.title}>Manual backup</Text>
       <Text style={styles.desc}>
-        This is the only way to recover your account. Save your Secret Recovery Phrase in a secure place that only you
-        control.
+        Keep a copy of your seed phrase at a safe place. DO NOT share it with anyone as this could result in wallet and
+        asset loss.
       </Text>
       <View style={styles.mnemonicsWrap}>
         {mnemonics.map((mnemonic, index) => (
@@ -93,8 +94,13 @@ export default function ManualBackup() {
       </View>
       {copied ? copiedView : copyButton}
       {reminderUI}
-      <CommonButton style={styles.continueButton}>
-        <Text>I&apos;ve backed up. Continue!</Text>
+      <CommonButton
+        type="primary"
+        style={styles.continueButton}
+        onPress={() => {
+          navigationService.push('ConfirmBackup');
+        }}>
+        Continue
       </CommonButton>
     </PageContainer>
   );