Add account creation from seed phrase and update dependencies (#83)

* feat: new account from seed phrase

* npm update

Author: iuricmp

mobile/app/(app)/toselect/index.tsx

@@ -1,12 +1,12 @@
+import { useCallback, useEffect, useState } from 'react'
 import { Layout } from '@/components'
 import VaultListItem from '@/components/list/vault-list/VaultListItem'
 import { fetchVaults, selectCallback, selectVaults, useAppDispatch, useAppSelector } from '@/redux'
 import { useGnoNativeContext } from '@gnolang/gnonative'
 import { router, useNavigation } from 'expo-router'
-import { useCallback, useEffect, useState } from 'react'
 import { FlatList } from 'react-native'
 import * as Linking from 'expo-linking'
-import { Button, Spacer, Text } from '@/modules/ui-components'
+import { Button, HomeLayout, Spacer, Text } from '@/modules/ui-components'
 import { Vault } from '@/types'
 
 export default function Page() {
@@ -52,7 +52,7 @@ export default function Page() {
 
   return (
     <>
-      <Layout.Container>
+      <HomeLayout header={null} footer={null}>
         <Layout.BodyAlignedBotton>
           <Text.H3>Select a key to create the transaction</Text.H3>
           <Spacer space={16} />
@@ -69,7 +69,7 @@ export default function Page() {
             Cancel
           </Button>
         </Layout.BodyAlignedBotton>
-      </Layout.Container>
+      </HomeLayout>
     </>
   )
 }

mobile/app/home/settings/developer-options.tsx

@@ -56,6 +56,13 @@ const Page: React.FC = () => {
             title="Developer Mode"
             description={`Toggle developer mode features. Currently ${devMode ? 'ON' : 'OFF'}.`}
           />
+          {devMode && (
+            <Form.Link
+              onPress={() => router.navigate('/home/vault/option-phrase/enter-phrase')}
+              title="Import Seed Phrase"
+              description="Register a new account using a seed phrase."
+            />
+          )}
         </Form.Section>
       </ScrollView>
     </HomeLayout>

mobile/app/home/vault/add/index.tsx

@@ -1,6 +1,6 @@
 import { Alert as RNAlert } from 'react-native'
 import React, { useState } from 'react'
-import { router, useFocusEffect } from 'expo-router'
+import { router, useFocusEffect, useLocalSearchParams } from 'expo-router'
 import {
   selectMasterPassword,
   useAppDispatch,
@@ -22,9 +22,14 @@ export default function Page() {
   const keyName = useAppSelector(selectKeyName)
   const phrase = useAppSelector(selectPhrase)
 
+  const params = useLocalSearchParams()
+  const skipNewPhraseGeneration = params.skipNewPhraseGeneration === 'true'
+
   useFocusEffect(
     React.useCallback(() => {
-      dispatch(generateNewPhrase())
+      if (!skipNewPhraseGeneration) {
+        dispatch(generateNewPhrase())
+      }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
   )

mobile/app/home/vault/option-phrase/enter-phrase.tsx

@@ -1,4 +1,4 @@
-import { Button, Spacer, Text, Container, SafeAreaView } from '@/modules/ui-components'
+import { Button, Spacer, Text, SafeAreaView, HomeLayout, ScreenHeader } from '@/modules/ui-components'
 import { useState, useRef } from 'react'
 import {
   Alert,
@@ -46,11 +46,24 @@ export default function Page() {
       return
     }
 
-    route.push('/home/vault/option-phrase/enter-vault-name')
+    route.push({ pathname: '/home/vault/add', params: { skipNewPhraseGeneration: 'true' } })
   }
 
   return (
-    <Container>
+    <HomeLayout
+      header={<ScreenHeader title="Import Seed Phrase" />}
+      footer={
+        <View style={styles.footer}>
+          <Button color="secondary" onPress={pasteClipboard}>
+            Paste
+          </Button>
+          <Spacer />
+          <Button color="primary" onPress={onContinue}>
+            Continue
+          </Button>
+        </View>
+      }
+    >
       <SafeAreaView>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -85,25 +98,16 @@ export default function Page() {
               <View style={styles.container}>
                 <SeedInputs length={menomicLength} />
               </View>
-              <View style={styles.footer}>
-                <Button color="secondary" onPress={pasteClipboard}>
-                  Paste
-                </Button>
-                <Spacer />
-                <Button color="primary" onPress={onContinue}>
-                  Continue
-                </Button>
-              </View>
             </ScrollView>
           </TouchableWithoutFeedback>
         </KeyboardAvoidingView>
       </SafeAreaView>
-    </Container>
+    </HomeLayout>
   )
 }
 
 const SmallButton = styled(Button)`
-  width: 100px;
+  width: 120px;
 `
 
 const styles = StyleSheet.create({