fix: In checkForUserOnBlockchain, allow same name on blockchain if same address (gnolang#98)

Author: jefft0

mobile/app/+not-found.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { FlatList, TouchableOpacity } from 'react-native'
 import { Link, useRouter } from 'expo-router'
 import { Layout } from '@/components/index'
-import { fetchBalances, useAppDispatch, useAppSelector, selectVaultsWithBalances } from '@/redux'
+import { fetchBalances, useAppDispatch, useAppSelector, selectVaultsWithBalances, generateNewPhrase } from '@/redux'
 import { setVaultToEdit, fetchVaults } from '@/redux'
 import {
   Button,
@@ -80,6 +80,7 @@ export default function Page() {
   }
 
   const navigateToAddKey = () => {
+    dispatch(generateNewPhrase())
     route.push('home/vault/add')
   }
 

mobile/app/home/home.tsx

@@ -49,6 +49,7 @@ export default function VaultModalLayout() {
           ...defaultOptions
         }}
       />
+      <Stack.Screen name="add/existing-account" options={{ ...defaultOptions }} />
 
       {/* Import a vault stack */}
       <Stack.Screen name="option-phrase/enter-phrase" options={{ ...defaultOptions, title: 'Seed Phrase' }} />

mobile/app/home/vault/_layout.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Button, Text, Spacer, HomeLayout, ScreenHeader } from '@/modules/ui-components'
+import { importKey, selectAddVaultExistingName, useAppDispatch, useAppSelector } from '@/redux'
+import { useRouter } from 'expo-router'
+
+const Page = () => {
+  const router = useRouter()
+  const existingName = useAppSelector(selectAddVaultExistingName)
+  const dispatch = useAppDispatch()
+
+  const onChooseAnother = () => {
+    router.replace({ pathname: '/home/vault/add' })
+  }
+
+  const onReuse = async () => {
+    if (!existingName) {
+      console.error('No existing name found')
+      return
+    }
+    dispatch(importKey({ vaultName: existingName }))
+    router.replace('/home/vault/add/new-vault-loading')
+  }
+
+  if (!existingName) {
+    return (
+      <HomeLayout
+        header={<ScreenHeader title="Reuse Account Name" />}
+        footer={
+          <Button color="primary" onPress={() => onChooseAnother()}>
+            Go Back
+          </Button>
+        }
+      >
+        <View>
+          <Text.Title1>Account Name Not Found</Text.Title1>
+          <Spacer space={16} />
+          <Text.Body>We could not find the existing account name. Please go back and try again.</Text.Body>
+          <Spacer space={32} />
+        </View>
+      </HomeLayout>
+    )
+  }
+
+  return (
+    <HomeLayout
+      header={<ScreenHeader title="Reuse Account Name" onBackPress={onChooseAnother} />}
+      footer={
+        <>
+          <Button color="primary" onPress={onReuse}>
+            {`Continue with ${existingName}`}
+          </Button>
+          <Spacer space={16} />
+          <Button color="secondary" onPress={onChooseAnother}>
+            Go Back
+          </Button>
+        </>
+      }
+    >
+      <View>
+        <Spacer space={32} />
+        <Text.Title3>Seed Phrase Already Registered</Text.Title3>
+        <Spacer space={16} />
+        <Text.Body>
+          The name <Text.Body_Bold>{existingName}</Text.Body_Bold> is already registered on-chain for this seed phrase.
+        </Text.Body>
+        <Spacer space={16} />
+        <Text.Body>
+          You can import this account and use the existing name. The app will not register a new account, but will import your key
+          and link it to the on-chain account named <Text.Body_Bold>{existingName}</Text.Body_Bold>.
+        </Text.Body>
+        <Spacer space={32} />
+      </View>
+    </HomeLayout>
+  )
+}
+
+export default Page

mobile/app/home/vault/add/existing-account.tsx

@@ -1,38 +1,16 @@
 import { Alert as RNAlert, ScrollView } from 'react-native'
 import React, { useState } from 'react'
-import { router, useFocusEffect, useLocalSearchParams } from 'expo-router'
-import {
-  selectMasterPassword,
-  useAppDispatch,
-  useAppSelector,
-  createKey,
-  selectPhrase,
-  generateNewPhrase,
-  resetAddVaultState,
-  selectAddVaultName
-} from '@/redux'
+import { router } from 'expo-router'
+import { useAppDispatch, useAppSelector, createKey, selectPhrase, resetAddVaultState, selectAddVaultName } from '@/redux'
 import { Button, Form, HomeLayout, ScreenHeader, Spacer, NewVaultForm, BetaVersionMiniBanner } from '@/modules/ui-components'
 
 export default function Page() {
   const [error, setError] = useState<string | undefined>(undefined)
   const dispatch = useAppDispatch()
 
-  const masterPassword = useAppSelector(selectMasterPassword)
   const keyName = useAppSelector(selectAddVaultName)
   const phrase = useAppSelector(selectPhrase)
 
-  const params = useLocalSearchParams()
-  const skipNewPhraseGeneration = params.skipNewPhraseGeneration === 'true'
-
-  useFocusEffect(
-    React.useCallback(() => {
-      if (!skipNewPhraseGeneration) {
-        dispatch(generateNewPhrase())
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
-  )
-
   const onCreate = async () => {
     setError(undefined)
 
@@ -54,14 +32,9 @@ export default function Page() {
       return
     }
 
-    if (!masterPassword) {
-      setError('Master password not found.')
-      return
-    }
-
     try {
-      dispatch(createKey({ name: keyName, password: masterPassword, phrase }))
-      router.navigate('/home/vault/add/new-vault-loading')
+      dispatch(createKey())
+      router.replace('/home/vault/add/new-vault-loading')
       // await dispatch(fetchVaults()).unwrap()
       // dispatch(checkForKeyOnChains())
     } catch (error: any) {

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

@@ -1,4 +1,4 @@
-import { HomeLayout, ActivityIndicator } from '@/modules/ui-components'
+import { HomeLayout, ActivityIndicator, ButtonBack, HeroBox, ErrorBox } from '@/modules/ui-components'
 import {
   registerAccount,
   selectLastProgress,
@@ -9,14 +9,14 @@ import {
   VaultCreationState
 } from '@/redux'
 import { useCallback, useEffect, useState } from 'react'
-import { router, useLocalSearchParams } from 'expo-router'
-import { ButtonBack, HeroBox, ErrorBox } from '@/modules/ui-components/molecules'
+import { useLocalSearchParams, useRouter } from 'expo-router'
 
 const Page = () => {
   const signUpState = useAppSelector(signUpStateSelector)
   const currentNetwork = useAppSelector(selectSelectedChain)
   const dispatch = useAppDispatch()
   const progress = useAppSelector(selectLastProgress)
+  const router = useRouter()
 
   const [error, setError] = useState<string | undefined>(undefined)
 
@@ -44,9 +44,8 @@ const Page = () => {
         return
       }
       if (signUpState === VaultCreationState.user_already_exists_on_blockchain_under_different_name) {
-        setError(
-          'This account is already registered on the blockchain under a different name. Please press Back and sign up again with another Seed Phrase, or for a normal sign in with a different account if available.'
-        )
+        // This account is already registered on the blockchain under a different name.
+        router.replace({ pathname: '/home/vault/add/existing-account', params: { existingName: keyName } })
         return
       }
       if (signUpState === VaultCreationState.user_exists_only_on_local_storage) {
@@ -97,7 +96,10 @@ const Page = () => {
   }, [signUpState, dispatch])
 
   return (
-    <HomeLayout header={null} footer={error ? <ButtonBack /> : null}>
+    <HomeLayout
+      header={null}
+      footer={error ? <ButtonBack onPress={() => router.replace({ pathname: '/home/vault/add' })} /> : null}
+    >
       {error ? (
         <ErrorBox title="Error" description={error} errorDetails={progress} />
       ) : (

mobile/app/home/vault/add/new-vault-loading.tsx

@@ -1,4 +1,4 @@
-import { Button, Spacer, Text, SafeAreaView, HomeLayout, ScreenHeader } from '@/modules/ui-components'
+import { Button, Spacer, Text, SafeAreaView, HomeLayout, ScreenHeader, SeedInputs } from '@/modules/ui-components'
 import { useState, useRef } from 'react'
 import {
   Alert,
@@ -11,7 +11,6 @@ import {
   StyleSheet
 } from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
-import { SeedInputs } from '@/views'
 import { useAppDispatch, setPhrase, resetAddVaultState, checkPhrase } from '@/redux'
 import { useRouter, useFocusEffect } from 'expo-router'
 import styled from 'styled-components/native'
@@ -46,7 +45,7 @@ export default function Page() {
       return
     }
 
-    route.push({ pathname: '/home/vault/add', params: { skipNewPhraseGeneration: 'true' } })
+    route.push({ pathname: '/home/vault/add' })
   }
 
   return (
@@ -107,7 +106,7 @@ export default function Page() {
 }
 
 const SmallButton = styled(Button)`
-  width: 120px;
+  width: 105px;
 `
 
 const styles = StyleSheet.create({

mobile/app/home/vault/index.tsx

@@ -0,0 +1,18 @@
+import { useRouter } from 'expo-router'
+import { Button } from '../../src'
+
+interface Props {
+  onPress?: () => void
+}
+
+const ButtonBack = ({ onPress }: Props) => {
+  const router = useRouter()
+
+  return (
+    <Button color="primary" onPress={() => (onPress ? onPress() : router.canGoBack() && router.back())}>
+      Go Back
+    </Button>
+  )
+}
+
+export { ButtonBack }

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

@@ -1,3 +1,4 @@
 export { default as HeaderActionButton } from './HeaderActionButton'
 export { default as SwipeEditButton } from './SwipeEditButton'
 export { default as VaultOptionsButton } from './VaultOptionsButton'
+export { ButtonBack } from './ButtonBack'