migrate to hooks UiKit/WalletInit

* useIntl
* useNavigation
* useRoute

src/components/UiKit/OfflineBanner.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import {useSelector} from 'react-redux'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 
 import {isOnlineSelector} from '../../selectors'
 import Banner from './Banner'
@@ -14,10 +14,11 @@ const messages = defineMessages({
   },
 })
 
-const OfflineBanner = ({intl}: {intl: IntlShape}) => {
+const OfflineBanner = () => {
+  const intl = useIntl()
   const isOnline = useSelector(isOnlineSelector)
 
   return isOnline ? null : <Banner error text={intl.formatMessage(messages.offline)} />
 }
 
-export default injectIntl(OfflineBanner)
+export default OfflineBanner

src/components/WalletInit/ConnectNanoX/CheckNanoXScreen.js

@@ -3,15 +3,14 @@
 import React from 'react'
 import {View, ScrollView, Image, Platform, StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
-import {injectIntl, defineMessages} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 
 import {Text, Button, BulletPointItem, ProgressStep, Spacer} from '../../UiKit'
 import {confirmationMessages, ledgerMessages} from '../../../../src/i18n/global-messages'
 import {WALLET_INIT_ROUTES} from '../../../RoutesList'
 
 import image from '../../../assets/img/ledger_1.png'
 
-import type {IntlShape} from 'react-intl'
 import {useNavigation, useRoute} from '@react-navigation/native'
 
 import type {NetworkId, WalletImplementationId} from '../../../config/types'
@@ -52,7 +51,8 @@ export type Params = {
   useUSB: boolean,
 }
 
-const CheckNanoXScreen = ({intl}: {intl: IntlShape}) => {
+const CheckNanoXScreen = () => {
+  const intl = useIntl()
   const route = useRoute()
   const {networkId, walletImplementationId, useUSB} = ((route.params: any): Params)
 
@@ -104,6 +104,6 @@ const CheckNanoXScreen = ({intl}: {intl: IntlShape}) => {
   )
 }
 
-export default injectIntl(CheckNanoXScreen)
+export default CheckNanoXScreen
 
 const Actions = (props) => <View {...props} style={styles.actions} />

src/components/WalletInit/ConnectNanoX/ConnectNanoXScreen.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import {StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 
 import LedgerConnect from '../../Ledger/LedgerConnect'
 import {getHWDeviceInfo} from '../../../crypto/shelley/ledgerUtils'
@@ -34,11 +34,11 @@ const styles = StyleSheet.create({
 })
 
 type Props = {
-  intl: IntlShape,
   defaultDevices: ?Array<Device>, // for storybook
 }
 
-const ConnectNanoXScreen = ({intl, defaultDevices}: Props) => {
+const ConnectNanoXScreen = ({defaultDevices}: Props) => {
+  const intl = useIntl()
   const navigation = useNavigation()
   const route = useRoute()
   const walletImplementationId: WalletImplementationId = (route.params?.walletImplementationId: any)
@@ -87,4 +87,4 @@ const ConnectNanoXScreen = ({intl, defaultDevices}: Props) => {
   )
 }
 
-export default injectIntl(ConnectNanoXScreen)
+export default ConnectNanoXScreen

src/components/WalletInit/CreateWallet/MnemonicBackupImportanceModal.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 
 import {Text, Button, Checkbox, Modal} from '../../UiKit'
 import styles from './styles/MnemonicBackupImportanceModal.style'
@@ -31,12 +31,12 @@ const messages = defineMessages({
 
 type Props = {
   onConfirm: () => any,
-  intl: IntlShape,
   visible: boolean,
   onRequestClose: () => any,
 }
 
-const MnemonicBackupImportanceModal = ({onConfirm, intl, visible, onRequestClose}: Props) => {
+const MnemonicBackupImportanceModal = ({onConfirm, visible, onRequestClose}: Props) => {
+  const intl = useIntl()
   const [acceptedKeyStorage, setAcceptedKeyStorage] = React.useState(false)
   const [acceptedNewDeviceRecovery, setAcceptedNewDeviceRecovery] = React.useState(false)
 
@@ -67,4 +67,4 @@ const MnemonicBackupImportanceModal = ({onConfirm, intl, visible, onRequestClose
   )
 }
 
-export default injectIntl(MnemonicBackupImportanceModal)
+export default MnemonicBackupImportanceModal

src/components/WalletInit/CreateWallet/MnemonicCheckScreen.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import {SafeAreaView} from 'react-native-safe-area-context'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 import {View, ScrollView, TouchableOpacity} from 'react-native'
 import {useNavigation, useRoute} from '@react-navigation/native'
 
@@ -38,7 +38,8 @@ const messages = defineMessages({
   },
 })
 
-const MnemonicCheckScreen = ({intl}: {intl: IntlShape}) => {
+const MnemonicCheckScreen = () => {
+  const intl = useIntl()
   const navigation = useNavigation()
   const route = (useRoute(): any)
   const mnemonic: string = route.params.mnemonic
@@ -112,7 +113,7 @@ const MnemonicCheckScreen = ({intl}: {intl: IntlShape}) => {
   )
 }
 
-export default injectIntl(MnemonicCheckScreen)
+export default MnemonicCheckScreen
 
 const MnemonicInput = ({
   partialPhrase,
@@ -140,19 +141,25 @@ const MnemonicInput = ({
   )
 }
 
-const Instructions = injectIntl(({intl}: {intl: IntlShape}) => (
-  <View style={styles.instructions}>
-    <Text>{intl.formatMessage(messages.instructions)}</Text>
-  </View>
-))
+const Instructions = () => {
+  const intl = useIntl()
+
+  return (
+    <View style={styles.instructions}>
+      <Text>{intl.formatMessage(messages.instructions)}</Text>
+    </View>
+  )
+}
+
+const ErrorMessage = ({visible}: {visible: boolean}) => {
+  const intl = useIntl()
 
-const ErrorMessage = injectIntl(({intl, visible}: {intl: IntlShape, visible: boolean}) => {
   return (
     <View style={[styles.error, !visible && styles.hidden]}>
       <Text style={styles.errorMessage}>{intl.formatMessage(messages.mnemonicWordsInputInvalidPhrase)}</Text>
     </View>
   )
-})
+}
 
 const WordBadges = ({
   words,

src/components/WalletInit/CreateWallet/MnemonicExplanationModal.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import {View, Image} from 'react-native'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 import Markdown from 'react-native-easy-markdown'
 
 import {Button, Modal} from '../../UiKit'
@@ -29,29 +29,32 @@ const messages = defineMessages({
   },
 })
 
-type ExternalProps = {
+type Props = {
   onConfirm: () => any,
   visible: boolean,
   onRequestClose: () => any,
-  intl: IntlShape,
 }
 
-const MnemonicExplanationModal = ({onConfirm, intl, onRequestClose, visible}: ExternalProps) => (
-  <Modal onRequestClose={onRequestClose} visible={visible} showCloseIcon>
-    <View style={styles.imageContainer}>
-      <Image source={image} />
-    </View>
+const MnemonicExplanationModal = ({onConfirm, onRequestClose, visible}: Props) => {
+  const intl = useIntl()
 
-    <View style={styles.paragraph}>
-      <Markdown>{intl.formatMessage(messages.paragraph1)}</Markdown>
-    </View>
+  return (
+    <Modal onRequestClose={onRequestClose} visible={visible} showCloseIcon>
+      <View style={styles.imageContainer}>
+        <Image source={image} />
+      </View>
 
-    <View style={styles.paragraph}>
-      <Markdown>{intl.formatMessage(messages.paragraph2)}</Markdown>
-    </View>
+      <View style={styles.paragraph}>
+        <Markdown>{intl.formatMessage(messages.paragraph1)}</Markdown>
+      </View>
 
-    <Button onPress={onConfirm} title={intl.formatMessage(messages.nextButton)} testID="mnemonicExplanationModal" />
-  </Modal>
-)
+      <View style={styles.paragraph}>
+        <Markdown>{intl.formatMessage(messages.paragraph2)}</Markdown>
+      </View>
 
-export default injectIntl(MnemonicExplanationModal)
+      <Button onPress={onConfirm} title={intl.formatMessage(messages.nextButton)} testID="mnemonicExplanationModal" />
+    </Modal>
+  )
+}
+
+export default MnemonicExplanationModal

src/components/WalletInit/CreateWallet/MnemonicShowScreen.js

@@ -3,7 +3,7 @@
 import React from 'react'
 import {View, Image, ScrollView, Dimensions} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 
 import assert from '../../../utils/assert'
 import {Text, Button, StatusBar} from '../../UiKit'
@@ -12,6 +12,7 @@ import {WALLET_INIT_ROUTES} from '../../../RoutesList'
 import styles from './styles/MnemonicShowScreen.style'
 import MnemonicBackupImportanceModal from './MnemonicBackupImportanceModal'
 import recoveryPhrase from '../../../assets/img/recovery_phrase.png'
+import {useRoute, useNavigation} from '@react-navigation/native'
 
 const messages = defineMessages({
   mnemonicNote: {
@@ -28,12 +29,10 @@ const messages = defineMessages({
   },
 })
 
-type RouterProps = {
-  route: any,
-  navigation: any,
-}
-
-const MnemonicShowScreen = ({intl, route, navigation}: {|intl: IntlShape|} & RouterProps /* TODO: type */) => {
+const MnemonicShowScreen = () => {
+  const navigation = useNavigation()
+  const route = (useRoute(): any)
+  const intl = useIntl()
   const mnemonic = route.params.mnemonic
   const provider = route.params.provider
   const [modal, setModal] = React.useState(false)
@@ -104,4 +103,4 @@ const MnemonicShowScreen = ({intl, route, navigation}: {|intl: IntlShape|} & Rou
   )
 }
 
-export default injectIntl(MnemonicShowScreen)
+export default MnemonicShowScreen

src/components/WalletInit/RestoreWallet/ImportReadOnlyWalletScreen.js

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import {View, ScrollView, StyleSheet, StatusBar} from 'react-native'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 import {useNavigation, useRoute, useFocusEffect} from '@react-navigation/native'
 import QRCodeScanner from 'react-native-qrcode-scanner'
 
@@ -75,7 +75,8 @@ export type Params = {
   walletImplementationId: string,
 }
 
-const ImportReadOnlyWalletScreen = ({intl}: {intl: IntlShape}) => {
+const ImportReadOnlyWalletScreen = () => {
+  const intl = useIntl()
   const navigation = useNavigation()
   const route = useRoute()
   const {networkId, walletImplementationId}: Params = (route.params: any)
@@ -127,7 +128,7 @@ const ImportReadOnlyWalletScreen = ({intl}: {intl: IntlShape}) => {
   )
 }
 
-export default injectIntl(ImportReadOnlyWalletScreen)
+export default ImportReadOnlyWalletScreen
 
 const CameraOverlay = () => (
   <View

src/components/WalletInit/RestoreWallet/RestoreWalletScreen/MnemonicInput.js

@@ -4,7 +4,7 @@
 
 import React from 'react'
 import {View, Keyboard} from 'react-native'
-import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
+import {useIntl, defineMessages} from 'react-intl'
 import {validateMnemonic, wordlists} from 'bip39'
 
 import {Menu, TextInput} from '../../../UiKit'
@@ -35,40 +35,39 @@ const messages = defineMessages({
   },
 })
 
-export const MnemonicInput = injectIntl(
-  ({intl, length, onDone}: {intl: IntlShape, length: number, onDone: (phrase: string) => mixed}) => {
-    const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>((Array.from({length}).map(() => ''): any))
+export const MnemonicInput = ({length, onDone}: {length: number, onDone: (phrase: string) => mixed}) => {
+  const intl = useIntl()
+  const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>((Array.from({length}).map(() => ''): any))
 
-    const mnemonicWordsComplete = mnemonicWords.every(Boolean)
-    const isValid: boolean = mnemonicWordsComplete ? validateMnemonic(mnemonicWords.join(' ')) : false
-    const errorText = !isValid && mnemonicWordsComplete ? intl.formatMessage(messages.invalidChecksum) : ''
+  const mnemonicWordsComplete = mnemonicWords.every(Boolean)
+  const isValid: boolean = mnemonicWordsComplete ? validateMnemonic(mnemonicWords.join(' ')) : false
+  const errorText = !isValid && mnemonicWordsComplete ? intl.formatMessage(messages.invalidChecksum) : ''
 
-    const onSelect = (index: number, word: string) =>
-      setMnemonicWords((words) => {
-        const newWords = [...words]
-        newWords[index] = word
+  const onSelect = (index: number, word: string) =>
+    setMnemonicWords((words) => {
+      const newWords = [...words]
+      newWords[index] = word
 
-        return newWords
-      })
+      return newWords
+    })
 
-    React.useEffect(() => {
-      if (mnemonicWordsComplete && isValid) {
-        Keyboard.dismiss()
-        onDone(mnemonicWords.join(' '))
-      }
-    }, [mnemonicWordsComplete, isValid, mnemonicWords, onDone])
-
-    return (
-      <TextInput
-        value={mnemonicWords.join(' ')}
-        errorText={errorText}
-        render={({ref: _ref, ...inputProps}: any) => (
-          <MnemonicWordsInput onSelect={onSelect} words={mnemonicWords} {...inputProps} />
-        )}
-      />
-    )
-  },
-)
+  React.useEffect(() => {
+    if (mnemonicWordsComplete && isValid) {
+      Keyboard.dismiss()
+      onDone(mnemonicWords.join(' '))
+    }
+  }, [mnemonicWordsComplete, isValid, mnemonicWords, onDone])
+
+  return (
+    <TextInput
+      value={mnemonicWords.join(' ')}
+      errorText={errorText}
+      render={({ref: _ref, ...inputProps}: any) => (
+        <MnemonicWordsInput onSelect={onSelect} words={mnemonicWords} {...inputProps} />
+      )}
+    />
+  )
+}
 
 type MnemonicWordsInputProps = {
   words: Array<string>,