Merge pull request #1497 from Emurgo/verify-restored-wallet

update VerifyRestoredWallet
Emurgo · Jul 28, 2021 · d828d50 · d828d50
2 parents 2d958cc + d0425b0
commit d828d50
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 117 deletions.
diff --git a/src/components/UiKit/BulletPointItem.js b/src/components/UiKit/BulletPointItem.js
@@ -1,6 +1,8 @@
+/* eslint-disable react-native/no-inline-styles */
 // @flow
 
 import React from 'react'
+import {View} from 'react-native'
 import {Text} from '.'
 
 import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'
@@ -12,9 +14,10 @@ type Props = {
 
 const BulletPointItem = ({textRow, style}: Props) => {
   return (
-    <Text style={style}>
-      {'\u2022'} {textRow}
-    </Text>
+    <View style={{flexDirection: 'row'}}>
+      <Text style={[{paddingRight: 8}, style]}>{'\u2022'}</Text>
+      <Text style={style}>{textRow}</Text>
+    </View>
   )
 }
 

diff --git a/src/components/WalletInit/RestoreWallet/VerifyRestoredWallet.js b/src/components/WalletInit/RestoreWallet/VerifyRestoredWallet.js
@@ -2,10 +2,7 @@
 // @flow
 
 import React, {useState, useEffect} from 'react'
-import {compose} from 'redux'
-import {connect} from 'react-redux'
-import {View, FlatList, ScrollView} from 'react-native'
-import {withHandlers} from 'recompose'
+import {View, ScrollView} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
 
@@ -20,8 +17,6 @@ import {WALLET_IMPLEMENTATION_REGISTRY} from '../../../config/types'
 
 import styles from './styles/VerifyRestoredWallet.style'
 
-import type {ComponentType} from 'react'
-import type {Navigation} from '../../../types/navigation'
 import type {WalletImplementationId, NetworkId} from '../../../config/types'
 
 const messages = defineMessages({
@@ -57,100 +52,102 @@ const messages = defineMessages({
   },
 })
 
-const _getPlate = async (walletImplId: WalletImplementationId, networkId: NetworkId, phrase: string, count: number) => {
-  switch (walletImplId) {
-    case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_SHELLEY:
-    case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_SHELLEY_24:
-      return await generateShelleyPlateFromMnemonics(phrase, count, networkId)
-    case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_BYRON:
-      return generateByronPlateFromMnemonics(phrase, count)
-    default:
-      throw new Error('wallet implementation id is not valid')
-  }
-}
-
-const walletRestaurationIntruction = (formatMessage) => [
-  formatMessage(messages.instructions1),
-  formatMessage(messages.instructions2),
-  formatMessage(messages.instructions3),
-]
-
-const CheckSumView = ({icon, checksum}: {icon: string, checksum: string}) => (
-  <View style={styles.checkSumView}>
-    <WalletAccountIcon iconSeed={icon} />
-    <Text style={styles.checksumText}>{checksum}</Text>
-  </View>
-)
-
-const VerifyWalletScreen = (
-  {navigateToWalletCredentials, intl, route}: {intl: IntlShape} & Object /* TODO: type */,
-) => {
-  const [plate, setPlate] = useState({
-    accountPlate: {
-      ImagePart: '',
-      TextPart: '',
-    },
-    addresses: [],
-  })
-
-  const {formatMessage} = intl
-  const {phrase, networkId, walletImplementationId} = route.params
+const usePlateFromMnemonic = ({
+  mnemonic,
+  networkId,
+  walletImplementationId,
+}: {
+  mnemonic: string,
+  networkId: number,
+  walletImplementationId: string,
+}) => {
+  const [addresses, setAddresses] = useState()
+  const [plate, setPlate] = useState()
 
   useEffect(() => {
+    const getPlate = async (
+      walletImplId: WalletImplementationId,
+      networkId: NetworkId,
+      mnemonic: string,
+      count: number,
+    ) => {
+      switch (walletImplId) {
+        case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_SHELLEY:
+        case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_SHELLEY_24:
+          return await generateShelleyPlateFromMnemonics(mnemonic, count, networkId)
+        case WALLET_IMPLEMENTATION_REGISTRY.HASKELL_BYRON:
+          return generateByronPlateFromMnemonics(mnemonic, count)
+        default:
+          throw new Error('wallet implementation id is not valid')
+      }
+    }
+
     const generatePlates = async () => {
-      const {addresses, accountPlate} = await _getPlate(walletImplementationId, networkId, phrase, 1)
-      setPlate({addresses, accountPlate})
+      const {addresses, accountPlate} = await getPlate(walletImplementationId, networkId, mnemonic, 1)
+      setAddresses(addresses)
+      setPlate(accountPlate)
     }
 
     generatePlates()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  return [plate, addresses]
+}
+
+const VerifyWalletScreen = ({navigation, intl, route}: {intl: IntlShape} & Object /* TODO: type */) => {
+  const {formatMessage} = intl
+  const {phrase, networkId, walletImplementationId} = route.params
+  const [plate, addresses] = usePlateFromMnemonic({mnemonic: phrase, networkId, walletImplementationId})
+
+  const navigateToWalletCredentials = () => {
+    navigation.navigate(WALLET_INIT_ROUTES.WALLET_CREDENTIALS, {
+      phrase: route.params.phrase,
+      networkId: route.params.networkId,
+      walletImplementationId: route.params.walletImplementationId,
+    })
+  }
+
   return (
-    <SafeAreaView style={styles.safeAreaView}>
+    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
       <StatusBar type="dark" />
-      <ScrollView style={styles.scrollView}>
-        <Text style={styles.textStyles}>{formatMessage(messages.checksumLabel)}</Text>
-        {!!plate.accountPlate.ImagePart && (
-          <CheckSumView icon={plate.accountPlate.ImagePart} checksum={plate.accountPlate.TextPart} />
-        )}
-        <Text style={styles.titleStyles}>{formatMessage(messages.instructionLabel)}</Text>
-        <FlatList
-          data={walletRestaurationIntruction(formatMessage)}
-          keyExtractor={(item) => item}
-          renderItem={({item}) => <BulletPointItem textRow={item} style={styles.instructionStyles} />}
-        />
-        <View style={styles.addressesStyles}>
-          <Text style={styles.titleStyles}>{formatMessage(messages.walletAddressLabel)}</Text>
-          <FlatList
-            data={plate.addresses}
-            keyExtractor={(item) => item}
-            renderItem={({item}) => <WalletAddress addressHash={item} networkId={networkId} />}
-          />
+
+      <ScrollView bounces={false} style={styles.scrollView} contentContainerStyle={styles.contentContainer}>
+        <Text style={styles.checksumLabel}>{formatMessage(messages.checksumLabel)}</Text>
+        <View style={styles.plateContainer}>{plate && <Plate icon={plate.ImagePart} checksum={plate.TextPart} />}</View>
+
+        <Text style={styles.instructionsLabel}>{formatMessage(messages.instructionLabel)}</Text>
+        <BulletPointItem textRow={formatMessage(messages.instructions1)} style={styles.bulletPoint} />
+        <Spacer height={8} />
+        <BulletPointItem textRow={formatMessage(messages.instructions2)} style={styles.bulletPoint} />
+        <Spacer height={8} />
+        <BulletPointItem textRow={formatMessage(messages.instructions3)} style={styles.bulletPoint} />
+
+        <Spacer height={32} />
+
+        <View style={styles.addresses}>
+          <Text style={styles.addressesLabel}>{formatMessage(messages.walletAddressLabel)}</Text>
+          {addresses && <WalletAddress addressHash={addresses[0]} networkId={networkId} />}
         </View>
       </ScrollView>
-      <Button onPress={navigateToWalletCredentials} title={formatMessage(messages.buttonText)} />
+
+      <View style={styles.action}>
+        <Button onPress={navigateToWalletCredentials} title={formatMessage(messages.buttonText)} />
+      </View>
     </SafeAreaView>
   )
 }
 
-export default injectIntl(
-  (compose(
-    connect((_state) => ({})),
-    withHandlers({
-      navigateToWalletCredentials:
-        ({navigation, route}) =>
-        (_event) => {
-          navigation.navigate(WALLET_INIT_ROUTES.WALLET_CREDENTIALS, {
-            phrase: route.params.phrase,
-            networkId: route.params.networkId,
-            walletImplementationId: route.params.walletImplementationId,
-          })
-        },
-    }),
-  )(VerifyWalletScreen): ComponentType<{
-    navigation: Navigation,
-    route: Object, // TODO(navigation): type
-    intl: IntlShape,
-  }>),
+export default injectIntl(VerifyWalletScreen)
+
+const Plate = ({icon, checksum}: {icon: string, checksum: string}) => (
+  <View style={styles.plate}>
+    <WalletAccountIcon iconSeed={icon} />
+
+    <Spacer />
+
+    <Text style={styles.checksum}>{checksum}</Text>
+  </View>
 )
+
+const Spacer = ({height = 16}: {height?: number}) => <View style={{height, width: 16}} />
diff --git a/src/components/WalletInit/RestoreWallet/WalletAddress.js b/src/components/WalletInit/RestoreWallet/WalletAddress.js
@@ -53,7 +53,12 @@ const WalletAddress = ({
         </Text>
       </TouchableOpacity>
 
-      <TouchableOpacity activeOpacity={0.5} onPress={copyHash} disabled={showCopyNotification}>
+      <TouchableOpacity
+        activeOpacity={0.5}
+        onPress={copyHash}
+        disabled={showCopyNotification}
+        style={styles.copyButton}
+      >
         <Image source={copyIcon} style={styles.copyIcon} />
       </TouchableOpacity>
 

diff --git a/src/components/WalletInit/RestoreWallet/styles/VerifyRestoredWallet.style.js b/src/components/WalletInit/RestoreWallet/styles/VerifyRestoredWallet.style.js
@@ -9,58 +9,61 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'space-between',
     backgroundColor: COLORS.WHITE,
+  },
+  scrollView: {},
+  contentContainer: {
     paddingHorizontal: 16,
-    paddingVertical: 20,
   },
-  scrollView: {
-    paddingRight: 10,
+  plateContainer: {
+    minHeight: 72,
   },
-  textStyles: {
+  checksumLabel: {
     fontSize: 14,
+    paddingVertical: 24,
+    color: COLORS.DARK_TEXT,
   },
-  checkSumView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 12,
-    marginBottom: 32,
-    borderColor: 'red',
+  instructionsLabel: {
+    lineHeight: 32,
+    color: COLORS.DARK_TEXT,
   },
-  checksumText: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    paddingLeft: 12,
+  bulletPoint: {
+    lineHeight: 24,
+    color: COLORS.DARK_TEXT,
+  },
+  addresses: {},
+  addressesLabel: {
+    color: COLORS.DARK_TEXT,
   },
-  titleStyles: {
-    marginBottom: 8,
+  checksum: {
+    fontWeight: 'bold',
   },
-  instructionStyles: {
-    lineHeight: 27,
+  action: {
+    padding: 16,
   },
-  addressesStyles: {
-    marginTop: 32,
-    marginBottom: 32,
+
+  plate: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
+
   addressRowStyles: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingBottom: 10,
     flexWrap: 'wrap',
   },
+  copyButton: {
+    padding: 4,
+  },
   copyIcon: {
-    marginLeft: 4,
     width: 22,
     height: 22,
   },
   notifView: {
-    marginLeft: 4,
+    paddingLeft: 4,
   },
   addressHash: {
     width: 280,
     color: '#9B9B9B',
     lineHeight: 30,
   },
-  walletIcon: {
-    width: 60,
-    height: 60,
-  },
 })