update WalletSettingsScreen

* remove hocs
* fix typo
* add strings

src/RoutesList.js

@@ -48,7 +48,7 @@ export const SETTINGS_ROUTES = {
   FINGERPRINT_LINK: 'fingerprint-link',
   REMOVE_WALLET: 'remove-wallet',
   CHANGE_LANGUAGE: 'change-language',
-  EASY_COMFIRMATION: 'easy-confirmation',
+  EASY_CONFIRMATION: 'easy-confirmation',
   CHANGE_PASSWORD: 'change-password',
   CHANGE_CUSTOM_PIN: 'change-custom-pin',
   BIO_AUTHENTICATE: 'bio-authenticate',

src/components/Settings/SettingsScreenNavigator.js

@@ -168,7 +168,7 @@ const SettingsScreenNavigator = injectIntl(({intl}: {intl: IntlShape}) => (
       options={{headerShown: false}}
     />
     <Stack.Screen
-      name={SETTINGS_ROUTES.EASY_COMFIRMATION}
+      name={SETTINGS_ROUTES.EASY_CONFIRMATION}
       component={ToggleEasyConfirmationScreen}
       options={{
         title: intl.formatMessage(messages.toggleEachConfirmationTitle),

src/components/Settings/WalletSettingsScreen.js

@@ -1,9 +1,7 @@
 // @flow
 
 import React from 'react'
-import {compose} from 'redux'
-import {withHandlers} from 'recompose'
-import {connect} from 'react-redux'
+import {useSelector, useDispatch} from 'react-redux'
 import {ScrollView, StyleSheet, Switch} from 'react-native'
 import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
 
@@ -16,7 +14,6 @@ import {
   isSystemAuthEnabledSelector,
   easyConfirmationSelector,
   walletNameSelector,
-  languageSelector,
   isHWSelector,
   isReadOnlySelector,
   walletMetaSelector,
@@ -33,7 +30,6 @@ import {isByron, isHaskellShelley} from '../../config/config'
 import {getNetworkConfigById} from '../../config/networks'
 
 import type {Navigation} from '../../types/navigation'
-import type {ComponentType} from 'react'
 import type {NetworkId, WalletImplementationId} from '../../config/types'
 import type {MessageDescriptor} from 'react-intl'
 
@@ -83,6 +79,14 @@ const messages = defineMessages({
     id: 'components.settings.walletsettingscreen.shelleyWallet',
     defaultMessage: '!!!Shelley-era wallet',
   },
+  unknownWalletType: {
+    id: 'components.settings.walletsettingscreen.unknownWalletType',
+    defaultMessage: '!!!Unknown Wallet Type',
+  },
+  about: {
+    id: 'components.settings.walletsettingscreen.about',
+    defaultMessage: '!!!About',
+  },
 })
 
 const styles = StyleSheet.create({
@@ -91,7 +95,7 @@ const styles = StyleSheet.create({
   },
 })
 
-const _getNetworkName = (networkId: NetworkId) => {
+const getNetworkName = (networkId: NetworkId) => {
   // note(v-almonacid): this throws when switching wallet
   try {
     const config = getNetworkConfigById(networkId)
@@ -101,131 +105,108 @@ const _getNetworkName = (networkId: NetworkId) => {
   }
 }
 
-const _getWalletType = (implId: WalletImplementationId): ?MessageDescriptor => {
-  if (isByron(implId)) return messages.byronWallet
-  else if (isHaskellShelley(implId)) return messages.shelleyWallet
-  else return null
+const getWalletType = (implementationId: WalletImplementationId): MessageDescriptor => {
+  if (isByron(implementationId)) return messages.byronWallet
+  if (isHaskellShelley(implementationId)) return messages.shelleyWallet
+
+  return messages.unknownWalletType
 }
 
-type Props = {intl: IntlShape} & Object /* TODO: type */
-
-const WalletSettingsScreen = ({
-  onToggleEasyConfirmation,
-  isEasyConfirmationEnabled,
-  isSystemAuthEnabled,
-  intl,
-  walletName,
-  onSwitchWallet,
-  onLogout,
-  isHW,
-  isReadOnly,
-  walletMeta,
-}: Props) => (
-  <ScrollView style={styles.scrollView}>
-    <StatusBar type="dark" />
-
-    <SettingsSection>
-      <PressableSettingsItem label={intl.formatMessage(messages.switchWallet)} onPress={onSwitchWallet} />
-
-      <PressableSettingsItem label={intl.formatMessage(messages.logout)} onPress={onLogout} />
-    </SettingsSection>
-
-    <SettingsSection title={intl.formatMessage(messages.walletName)}>
-      <NavigatedSettingsItem label={walletName} navigateTo={SETTINGS_ROUTES.CHANGE_WALLET_NAME} />
-    </SettingsSection>
-
-    <SettingsSection title={intl.formatMessage(messages.security)}>
-      <NavigatedSettingsItem
-        label={intl.formatMessage(messages.changePassword)}
-        navigateTo={SETTINGS_ROUTES.CHANGE_PASSWORD}
-        disabled={isHW || isReadOnly}
-      />
-
-      <SettingsItem
-        label={intl.formatMessage(messages.easyConfirmation)}
-        disabled={!isSystemAuthEnabled || isHW || isReadOnly}
-      >
-        <Switch
-          value={isEasyConfirmationEnabled}
-          onValueChange={onToggleEasyConfirmation}
+type Props = {|intl: IntlShape, navigation: Navigation, route: any, intl: IntlShape|}
+
+const WalletSettingsScreen = ({intl, navigation}: Props) => {
+  const isSystemAuthEnabled = useSelector(isSystemAuthEnabledSelector)
+  const isEasyConfirmationEnabled = useSelector(easyConfirmationSelector)
+  const walletName = useSelector(walletNameSelector)
+  const isHW = useSelector(isHWSelector)
+  const isReadOnly = useSelector(isReadOnlySelector)
+  const walletMeta = useSelector(walletMetaSelector)
+
+  const dispatch = useDispatch()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onLogout = React.useCallback(
+    ignoreConcurrentAsyncHandler(
+      () => async () => {
+        const selection = await showConfirmationDialog(
+          // $FlowFixMe
+          confirmationMessages.logout,
+          intl,
+        )
+
+        if (selection === DIALOG_BUTTONS.YES) {
+          await dispatch(logout())
+        }
+      },
+      500,
+    )(),
+    [],
+  )
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const onSwitchWallet = React.useCallback(
+    ignoreConcurrentAsyncHandler(
+      () => async () => {
+        await dispatch(closeWallet())
+        navigation.navigate(WALLET_ROOT_ROUTES.WALLET_SELECTION)
+      },
+      1000,
+    )(),
+    [navigation],
+  )
+
+  const onToggleEasyConfirmation = () => {
+    navigation.navigate(SETTINGS_ROUTES.EASY_CONFIRMATION)
+  }
+
+  return (
+    <ScrollView bounces={false} style={styles.scrollView}>
+      <StatusBar type="dark" />
+
+      <SettingsSection>
+        <PressableSettingsItem label={intl.formatMessage(messages.switchWallet)} onPress={onSwitchWallet} />
+        <PressableSettingsItem label={intl.formatMessage(messages.logout)} onPress={onLogout} />
+      </SettingsSection>
+
+      <SettingsSection title={intl.formatMessage(messages.walletName)}>
+        <NavigatedSettingsItem label={walletName} navigateTo={SETTINGS_ROUTES.CHANGE_WALLET_NAME} />
+      </SettingsSection>
+
+      <SettingsSection title={intl.formatMessage(messages.security)}>
+        <NavigatedSettingsItem
+          label={intl.formatMessage(messages.changePassword)}
+          navigateTo={SETTINGS_ROUTES.CHANGE_PASSWORD}
+          disabled={isHW || isReadOnly}
+        />
+
+        <SettingsItem
+          label={intl.formatMessage(messages.easyConfirmation)}
           disabled={!isSystemAuthEnabled || isHW || isReadOnly}
+        >
+          <Switch
+            value={isEasyConfirmationEnabled}
+            onValueChange={onToggleEasyConfirmation}
+            disabled={!isSystemAuthEnabled || isHW || isReadOnly}
+          />
+        </SettingsItem>
+      </SettingsSection>
+
+      <SettingsSection>
+        <NavigatedSettingsItem
+          label={intl.formatMessage(messages.removeWallet)}
+          navigateTo={SETTINGS_ROUTES.REMOVE_WALLET}
         />
-      </SettingsItem>
-    </SettingsSection>
-
-    <SettingsSection>
-      <NavigatedSettingsItem
-        label={intl.formatMessage(messages.removeWallet)}
-        navigateTo={SETTINGS_ROUTES.REMOVE_WALLET}
-      />
-    </SettingsSection>
-
-    <SettingsSection title="About">
-      <SettingsBuildItem label={intl.formatMessage(messages.network)} value={_getNetworkName(walletMeta.networkId)} />
-      {_getWalletType(walletMeta.walletImplementationId) != null && (
+      </SettingsSection>
+
+      <SettingsSection title={intl.formatMessage(messages.about)}>
+        <SettingsBuildItem label={intl.formatMessage(messages.network)} value={getNetworkName(walletMeta.networkId)} />
+
         <SettingsBuildItem
           label={intl.formatMessage(messages.walletType)}
-          value={intl.formatMessage(_getWalletType(walletMeta.walletImplementationId))}
+          value={intl.formatMessage(getWalletType(walletMeta.walletImplementationId))}
         />
-      )}
-    </SettingsSection>
-  </ScrollView>
-)
-
-export default injectIntl(
-  (compose(
-    connect((state) => ({
-      isSystemAuthEnabled: isSystemAuthEnabledSelector(state),
-      isEasyConfirmationEnabled: easyConfirmationSelector(state),
-      key: languageSelector(state),
-    })),
-    connect(
-      (state) => ({
-        walletName: walletNameSelector(state),
-        isHW: isHWSelector(state),
-        isReadOnly: isReadOnlySelector(state),
-        walletMeta: walletMetaSelector(state),
-      }),
-      {
-        closeWallet,
-        logout,
-      },
-    ),
-    withHandlers({
-      onToggleEasyConfirmation:
-        ({navigation}) =>
-        () => {
-          navigation.navigate(SETTINGS_ROUTES.EASY_COMFIRMATION)
-        },
-    }),
-    withHandlers({
-      onSwitchWallet: ignoreConcurrentAsyncHandler(
-        ({navigation, closeWallet}) =>
-          async () => {
-            await closeWallet()
-            navigation.navigate(WALLET_ROOT_ROUTES.WALLET_SELECTION)
-          },
-        1000,
-      ),
-      onLogout: ignoreConcurrentAsyncHandler(
-        ({logout, intl}: {intl: IntlShape, logout: any}) =>
-          async () => {
-            const selection = await showConfirmationDialog(
-              // $FlowFixMe
-              confirmationMessages.logout,
-              intl,
-            )
-
-            if (selection === DIALOG_BUTTONS.YES) {
-              await logout()
-            }
-          },
-        500,
-      ),
-    }),
-  )(WalletSettingsScreen): ComponentType<{|
-    navigation: Navigation,
-    route: any,
-    intl: IntlShape,
-  |}>),
-)
+      </SettingsSection>
+    </ScrollView>
+  )
+}
+
+export default injectIntl(WalletSettingsScreen)

src/i18n/locales/en-US.json

@@ -203,6 +203,7 @@
   "components.settings.toggleeasyconfirmationscreen.enableMasterPassword": "Master password",
   "components.settings.toggleeasyconfirmationscreen.enableWarning": "Please remember your master password, as you may need it in case your biometrics data are removed from the device.",
   "components.settings.toggleeasyconfirmationscreen.title": "Easy confirmation",
+  "components.settings.walletsettingscreen.unknownWalletType": "Unknown Wallet Type",
   "components.settings.walletsettingscreen.byronWallet": "Byron-era wallet",
   "components.settings.walletsettingscreen.changePassword": "Change spending password",
   "components.settings.walletsettingscreen.easyConfirmation": "Easy transaction confirmation",
@@ -215,6 +216,7 @@
   "components.settings.walletsettingscreen.title": "Settings",
   "components.settings.walletsettingscreen.walletName": "Wallet name",
   "components.settings.walletsettingscreen.walletType": "Wallet type:",
+  "components.settings.walletsettingscreen.about": "About",
   "components.stakingcenter.confirmDelegation.delegateButtonLabel": "Delegate",
   "components.stakingcenter.confirmDelegation.ofFees": "of fees",
   "components.stakingcenter.confirmDelegation.rewardsExplanation": "Current approximation of rewards that you will receive per epoch:",