feat(wallet setup): mnemonic input word suggestion redesign (#3218)

apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.stories.tsx

@@ -1,18 +1,94 @@
-import {action} from '@storybook/addon-actions'
 import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {View} from 'react-native'
 
+import {MnemonicWordInputRef} from '../../useCases/RestoreWallet/RestoreWalletScreen'
 import {MnemonicInput} from './MnemonicInput'
 
 storiesOf('MnemonicInput', module)
-  .add('valid', () => (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <MnemonicInput validate={() => true} length={15} onDone={action('onDone')} />
-    </View>
-  ))
-  .add('invalid', () => (
-    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-      <MnemonicInput validate={() => false} length={15} onDone={action('onDone')} />
-    </View>
-  ))
+  .add('valid', () => {
+    const [suggestedWords, setSuggestedWords] = React.useState<Array<string>>([])
+    const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>(Array.from({length}).map(() => ''))
+    const mnenonicRefs = React.useRef(mnemonicWords.map(() => React.createRef<MnemonicWordInputRef>())).current
+    const [_, setFocusedIndex] = React.useState<number>(0)
+    const [mnemonicSelectedWords, setMnemonicSelectedWords] = React.useState<Array<string>>(
+      Array.from({length: 15}).map(() => ''),
+    )
+    const [mnemonic, setMnemonic] = React.useState('')
+
+    const onSelect = (index: number, word: string) => {
+      setMnemonicWords((words) => {
+        const newWords = [...words]
+        newWords[index] = word
+
+        return newWords
+      })
+
+      setSuggestedWords([])
+    }
+
+    const onFocus = (index: number) => {
+      setFocusedIndex(index)
+    }
+
+    return (
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+        <MnemonicInput
+          mnenonicRefs={mnenonicRefs}
+          suggestedWords={suggestedWords}
+          setSuggestedWords={setSuggestedWords}
+          length={15}
+          onDone={setMnemonic}
+          onSelect={onSelect}
+          onFocus={onFocus}
+          isValidPhrase={true}
+          mnemonicSelectedWords={mnemonicSelectedWords}
+          setMnemonicSelectedWords={setMnemonicSelectedWords}
+          mnemonic={mnemonic}
+        />
+      </View>
+    )
+  })
+  .add('invalid', () => {
+    const [suggestedWords, setSuggestedWords] = React.useState<Array<string>>([])
+    const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>(Array.from({length}).map(() => ''))
+    const mnenonicRefs = React.useRef(mnemonicWords.map(() => React.createRef<MnemonicWordInputRef>())).current
+    const [_, setFocusedIndex] = React.useState<number>(0)
+    const [mnemonicSelectedWords, setMnemonicSelectedWords] = React.useState<Array<string>>(
+      Array.from({length: 15}).map(() => ''),
+    )
+    const [mnemonic, setMnemonic] = React.useState('')
+
+    const onSelect = (index: number, word: string) => {
+      setMnemonicWords((words) => {
+        const newWords = [...words]
+        newWords[index] = word
+
+        return newWords
+      })
+
+      setSuggestedWords([])
+    }
+
+    const onFocus = (index: number) => {
+      setFocusedIndex(index)
+    }
+
+    return (
+      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+        <MnemonicInput
+          mnenonicRefs={mnenonicRefs}
+          suggestedWords={suggestedWords}
+          setSuggestedWords={setSuggestedWords}
+          length={15}
+          onDone={setMnemonic}
+          onSelect={onSelect}
+          onFocus={onFocus}
+          isValidPhrase={false}
+          mnemonicSelectedWords={mnemonicSelectedWords}
+          setMnemonicSelectedWords={setMnemonicSelectedWords}
+          mnemonic={mnemonic}
+        />
+      </View>
+    )
+  })