feat: refactor onboarding screens

src/RootNavigation.tsx

@@ -20,6 +20,7 @@ import { DappsScreenScreenProps } from './screens/dapps'
 import { IRifWalletServicesSocket } from './lib/rifWalletServices/RifWalletServicesSocket'
 import { ManagerWalletScreenProps } from './screens/settings/ManageWalletsScreen'
 import { SettingsScreenProps } from './screens/settings/SettingsScreen'
+import { ReEnterKeyScreen } from './ux/createKeys/ReEnterKeysScreen'
 
 const InjectedScreens = {
   SendScreen: InjectSelectedWallet(Screens.SendScreen),
@@ -75,6 +76,7 @@ type RootStackParamList = {
   Contacts: undefined
   Settings: undefined
   ManageWallets: undefined
+  ReEnterKey: undefined
 }
 
 const RootStack = createStackNavigator<RootStackParamList>()

src/lib/core/KeyManagementSystem.ts

@@ -113,7 +113,7 @@ export class KeyManagementSystem implements IKeyManagementSystem {
     return JSON.stringify(serialization)
   }
 
-  private deriveWallet (derivationPath: string) {
+  private deriveWderiveWalletallet (derivationPath: string) {
     // Create the seed - ref: BIP-39
     const seed = mnemonicToSeedSync(this.mnemonic)
     const hdKey = fromSeed(seed).derivePath(derivationPath)

src/ux/createKeys/CreateKeysNavigation.tsx

@@ -7,6 +7,7 @@ import { ConfirmNewMasterKeyScreen } from './new/ConfirmNewMasterKeyScreen'
 import { ImportMasterKeyScreen } from './import/ImportMasterKeyScreen'
 import { KeysCreatedScreen } from './KeysCreatedScreen'
 import { StackParamList, CreateKeysProps } from './types'
+import { ReEnterKeyScreen } from './ReEnterKeysScreen'
 
 const Stack = createStackNavigator<StackParamList>()
 
@@ -33,6 +34,14 @@ export const CreateKeysNavigation: React.FC<CreateKeysProps> = ({
               />
             )}
           </Stack.Screen>
+          <Stack.Screen name="ReEnterKey" options={screensOptions}>
+            {props => (
+              <ReEnterKeyScreen
+                {...props}
+                generateMnemonic={generateMnemonic}
+              />
+            )}
+          </Stack.Screen>
           <Stack.Screen name="ConfirmNewMasterKey" options={screensOptions}>
             {props => (
               <ConfirmNewMasterKeyScreen

src/ux/createKeys/CreateKeysScreen.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
-import { StyleSheet, View, ScrollView, Text, Image } from 'react-native'
+import {
+  StyleSheet,
+  View,
+  ScrollView,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native'
 import { ScreenProps } from './types'
 import LinearGradient from 'react-native-linear-gradient'
 
@@ -18,74 +25,82 @@ export const CreateKeysScreen: React.FC<ScreenProps<'CreateKeys'>> = ({
   // @ts-ignore
   const selectedToken = route.params?.token || 'TRBTC'
   return (
-    <LinearGradient
-      colors={['#FFFFFF', getTokenColorWithOpacity(selectedToken, 0.1)]}
-      style={styles.parent}>
-      <ScrollView>
-        <Text style={styles.header}>Set up your Wallet</Text>
-        <View style={styles.container}>
-          <Image
-            style={styles.tinyLogo}
-            source={{
-              uri: 'https://cdn2.iconfinder.com/data/icons/30px-bank/30/17_wallet-money-cashback-transfer-account-balance-1024.png',
-            }}
-          />
+    <ScrollView style={styles.parent}>
+      <Text style={styles.header}>Set up your Wallet</Text>
+      <View style={styles.container}>
+        <Image source={require('../../images/onbording-logo.png')} />
+      </View>
+
+      <View style={grid.row}>
+        <View
+          style={{
+            ...grid.column12,
+            ...styles.bottomColumn,
+          }}>
+          <Text>Welcome to swallet</Text>
         </View>
+      </View>
+
+      <View style={grid.row}>
+        <View
+          style={{
+            ...grid.column12,
+            ...styles.bottomColumn,
+          }}>
+          <TouchableOpacity
+            onPress={() => navigation.navigate('NewMasterKey')}
+            activeOpacity={0.75}
+            style={styles.defaultButton}>
+            <Text>Create New Wallet</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => navigation.navigate('ImportMasterKey')}
+            activeOpacity={0.75}
+            style={styles.defaultButton}>
+            <Text>Import Existing Wallet</Text>
+          </TouchableOpacity>
 
-        <View style={grid.row}>
-          <View style={{ ...grid.column6, ...styles.bottomColumn }}>
-            <SquareButton
-              // @ts-ignore
-              onPress={() => navigation.navigate('ImportMasterKey')}
-              title="Import"
-              testID="Address.ShareButton"
-              icon={<ImportWalletIcon color={getTokenColor(selectedToken)} />}
-            />
-          </View>
-          <View
-            style={{
-              ...grid.column6,
-              ...styles.bottomColumn,
-            }}>
-            <SquareButton
-              // @ts-ignore
-              onPress={() => navigation.navigate('NewMasterKey')}
-              title="New Wallet"
-              testID="Address.CopyButton"
-              icon={
-                <NewWalletIcon
-                  width={53}
-                  height={60}
-                  color={getTokenColor(selectedToken)}
-                />
-              }
-            />
-          </View>
+          <TouchableOpacity
+            onPress={() => navigation.navigate('ReEnterKey')}
+            activeOpacity={0.75}
+            style={styles.defaultButton}>
+            <Text>Re Enter Wallet</Text>
+          </TouchableOpacity>
         </View>
-      </ScrollView>
-    </LinearGradient>
+      </View>
+    </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
   parent: {
+    backgroundColor: '#050134',
     height: '100%',
+    opacity: 0.9,
+    paddingTop: 40,
+  },
+
+  defaultButton: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(219, 227, 255, 0.3)',
+    borderRadius: 30,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginVertical: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
   },
   header: {
     fontSize: 26,
     textAlign: 'center',
   },
   qrContainer: {
-    backgroundColor: 'rgba(255, 255, 255, .7)',
+    backgroundColor: '#dbe3ff',
     marginVertical: 20,
     padding: 20,
     borderRadius: 20,
   },
-  addressContainer: {
-    padding: 10,
-    borderRadius: 10,
-    backgroundColor: 'rgba(255, 255, 255, .7)',
-  },
   smartAddress: {
     color: '#5C5D5D',
     fontSize: 16,

src/ux/createKeys/ReEnterKeysScreen.tsx

@@ -0,0 +1,162 @@
+import React, { useMemo, useState } from 'react'
+import {
+  StyleSheet,
+  View,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Keyboard,
+} from 'react-native'
+
+import { CreateKeysProps, ScreenProps } from './types'
+import { grid } from '../../styles/grid'
+type CreateMasterKeyScreenProps = {
+  generateMnemonic: CreateKeysProps['generateMnemonic']
+}
+
+const WordInput: React.FC<{
+  index: number
+  initValue: string
+}> = ({ index, initValue }) => {
+  const [wordText, setWordText] = useState(initValue)
+  const [wordLocked, setWordLocked] = useState(false)
+
+  const handleKeyDown = () => {
+    if (wordText.trim() !== '') {
+      setWordLocked(true)
+    }
+  }
+
+  return (
+    <View
+      style={{
+        ...grid.column4,
+        ...styles.wordContainer,
+      }}>
+      <Text style={styles.wordIndex}>{index}. </Text>
+      {initValue ? (
+        <Text style={styles.wordText}>{initValue}</Text>
+      ) : (
+        <TextInput
+          key={index}
+          style={styles.wordInput}
+          onChangeText={setWordText}
+          onSubmitEditing={handleKeyDown}
+          /*onKeyPress={handleKeyDown}*/
+          value={initValue}
+          placeholder=""
+          onFocus={() => Keyboard.dismiss()}
+        />
+      )}
+    </View>
+  )
+}
+
+export const ReEnterKeyScreen: React.FC<
+  ScreenProps<'NewMasterKey'> & CreateMasterKeyScreenProps
+> = ({ navigation, generateMnemonic }) => {
+  const mnemonic: string = useMemo(generateMnemonic, [])
+
+  const words = mnemonic.split(' ')
+  const [selectedWords, setSelectedWords] = useState<string[]>([])
+  const rows = [1, 2, 3, 4, 5, 6, 7, 8]
+  const selectWord = (selectedWord: string) => {
+    console.log({ selectedWord })
+
+    setSelectedWords([...selectedWords, selectedWord])
+  }
+  return (
+    <ScrollView style={styles.parent}>
+      <Text style={styles.header}>Write down your master key</Text>
+
+      {rows.map(row => (
+        <View style={grid.row}>
+          <WordInput index={row} initValue={selectedWords[row - 1]} />
+          <WordInput
+            index={row + rows.length}
+            initValue={selectedWords[row + rows.length]}
+          />
+          <WordInput
+            index={row + rows.length * 2}
+            initValue={selectedWords[row + rows.length * 2]}
+          />
+        </View>
+      ))}
+      <Text>
+        {words.map(word => (
+          <View
+            key={word}
+            style={{
+              ...styles.badgeContainer,
+            }}>
+            <TouchableOpacity
+              style={styles.badgeText}
+              onPress={() => selectWord(word)}>
+              <Text>{word}</Text>
+            </TouchableOpacity>
+          </View>
+        ))}
+      </Text>
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  parent: {
+    backgroundColor: '#050134',
+  },
+  wordContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    marginVertical: 3,
+    color: '#ffffff',
+  },
+  wordText: {
+    backgroundColor: 'rgba(219, 227, 255, 0.3)',
+    color: '#ffffff',
+    borderRadius: 30,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+
+  badgeContainer: {
+    flex: 1,
+    padding: 1,
+    flexDirection: 'row',
+    marginVertical: 5,
+  },
+  badgeText: {
+    backgroundColor: 'rgba(219, 227, 255, 0.3)',
+    color: '#ffffff',
+    borderRadius: 30,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+
+  header: {
+    color: '#ffffff',
+    fontSize: 22,
+    paddingVertical: 20,
+    textAlign: 'center',
+  },
+  wordInput: {
+    borderColor: '#ffffff',
+    borderWidth: 1,
+    marginHorizontal: 10,
+    borderRadius: 10,
+    flex: 1,
+    textAlignVertical: 'top',
+    paddingTop: 0,
+    paddingBottom: 0,
+    height: 25,
+    color: '#ffffff',
+    fontSize: 15,
+  },
+  wordIndex: {
+    color: '#ffffff',
+    display: 'flex',
+    paddingVertical: 5,
+  },
+})