Merge branch 'develop' into restore-wallet

src/components/Settings/RemoveWalletScreen.js

@@ -1,10 +1,8 @@
 // @flow
 
 import React from 'react'
-import {connect} from 'react-redux'
-import {compose} from 'redux'
+import {useSelector, useDispatch} from 'react-redux'
 import {View, ScrollView} from 'react-native'
-import {withHandlers} from 'recompose'
 import {injectIntl, defineMessages, type IntlShape} from 'react-intl'
 
 import {Button, Text, Checkbox, TextInput, StatusBar} from '../UiKit'
@@ -16,7 +14,6 @@ import {ignoreConcurrentAsyncHandler} from '../../utils/utils'
 
 import styles from './styles/RemoveWalletScreen.style'
 
-import type {State} from '../../state'
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 const messages = defineMessages({
@@ -52,45 +49,47 @@ const messages = defineMessages({
   },
 })
 
-const handleRemoveWallet =
-  ({navigation, removeCurrentWallet}) =>
-  async () => {
-    await removeCurrentWallet()
-    navigation.navigate(WALLET_ROOT_ROUTES.WALLET_SELECTION)
-  }
-
-type Prop = {
+type Props = {
   intl: IntlShape,
-  walletName: string,
-  isHW: boolean,
-  typedWalletName: string,
-  setTypedWalletName: (string) => any,
-  handleRemoveWallet: () => any,
-  setHasMnemonicWrittenDown: (boolean) => any,
-  hasMnemonicWrittenDown: boolean,
+  navigation: any,
 }
 
-const RemoveWalletScreen = ({intl, walletName, isHW, handleRemoveWallet}: Prop) => {
+const RemoveWalletScreen = ({intl, navigation}: Props) => {
+  const walletName = useSelector(walletNameSelector)
+  const isHW = useSelector(isHWSelector)
+  const dispatch = useDispatch()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const handleRemoveWallet = React.useCallback(
+    ignoreConcurrentAsyncHandler(
+      () => async () => {
+        await dispatch(removeCurrentWallet())
+        navigation.navigate(WALLET_ROOT_ROUTES.WALLET_SELECTION)
+      },
+      1000,
+    )(),
+    [],
+  )
   const [hasMnemonicWrittenDown, setHasMnemonicWrittenDown] = React.useState(false)
   const [typedWalletName, setTypedWalletName] = React.useState('')
 
   const disabled = (!isHW && !hasMnemonicWrittenDown) || walletName !== typedWalletName
 
   return (
     <View style={styles.container}>
-      <StatusBar type="dark" />
+      <StatusBar type={'dark'} />
 
       <View style={styles.descriptionContainer}>
         {!isHW && <Text style={styles.description}>{intl.formatMessage(messages.descriptionParagraph1)}</Text>}
         <Text style={styles.description}>{intl.formatMessage(messages.descriptionParagraph2)}</Text>
       </View>
 
-      <ScrollView contentContainerStyle={styles.screenContainer} keyboardDismissMode="on-drag">
+      <ScrollView bounces={false} contentContainerStyle={styles.contentContainer} keyboardDismissMode="on-drag">
         <View style={styles.walletInfo}>
           <Text style={styles.walletNameLabel}>{intl.formatMessage(messages.walletName)}</Text>
+          <Spacer height={8} />
           <Text style={styles.walletName}>{walletName}</Text>
 
-          <Spacer />
+          <Spacer height={24} />
 
           <TextInput
             autoFocus
@@ -102,6 +101,7 @@ const RemoveWalletScreen = ({intl, walletName, isHW, handleRemoveWallet}: Prop)
             errorText={
               typedWalletName !== walletName ? intl.formatMessage(messages.walletNameMismatchError) : undefined
             }
+            returnKeyType={'done'}
           />
         </View>
       </ScrollView>
@@ -115,6 +115,8 @@ const RemoveWalletScreen = ({intl, walletName, isHW, handleRemoveWallet}: Prop)
           />
         )}
 
+        <Spacer height={16} />
+
         <Button
           onPress={handleRemoveWallet}
           title={intl.formatMessage(messages.remove)}
@@ -126,21 +128,6 @@ const RemoveWalletScreen = ({intl, walletName, isHW, handleRemoveWallet}: Prop)
   )
 }
 
-export default injectIntl(
-  compose(
-    connect(
-      (state: State) => ({
-        walletName: walletNameSelector(state),
-        isHW: isHWSelector(state),
-      }),
-      {
-        removeCurrentWallet,
-      },
-    ),
-    withHandlers({
-      handleRemoveWallet: ignoreConcurrentAsyncHandler(handleRemoveWallet, 1000),
-    }),
-  )(RemoveWalletScreen),
-)
+export default injectIntl(RemoveWalletScreen)
 
 const Spacer = ({height = 16, style}: {height?: number, style?: ViewStyleProp}) => <View style={[{height}, style]} />

src/components/Settings/styles/RemoveWalletScreen.style.js

@@ -9,43 +9,41 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: COLORS.BACKGROUND,
   },
-  removeButton: {
-    backgroundColor: COLORS.RED,
-    marginTop: 10,
-  },
+
   descriptionContainer: {
-    backgroundColor: COLORS.LIGHT_GRAY,
-    paddingVertical: 17,
-    paddingHorizontal: 15,
+    backgroundColor: COLORS.BACKGROUND,
+    padding: 16,
   },
   description: {
-    fontSize: 15,
-    lineHeight: 22,
+    fontSize: 16,
+    lineHeight: 24,
     textAlign: 'center',
   },
-  error: {
-    color: COLORS.RED,
+
+  walletInfo: {
+    flex: 1,
+  },
+  walletNameLabel: {
+    fontSize: 16,
   },
   walletName: {
     color: COLORS.DISABLED,
     fontSize: 16,
-    marginBottom: 7,
-  },
-  walletNameLabel: {
-    fontSize: 13,
-    marginBottom: 2,
-  },
-  walletInfo: {
-    flex: 1,
   },
-  screenContainer: {
-    marginTop: 5,
+
+  contentContainer: {
+    paddingTop: 8,
     padding: 16,
     flexGrow: 1,
   },
+
   actions: {
     padding: 16,
   },
+  removeButton: {
+    backgroundColor: COLORS.RED,
+    paddingTop: 10,
+  },
 })
 
 export default styles

src/components/UiKit/Checkbox.js

@@ -1,42 +1,27 @@
 // @flow
 
 import React from 'react'
-import {withHandlers} from 'recompose'
 import {TouchableOpacity, Image} from 'react-native'
 
 import styles from './styles/Checkbox.style'
 import Text from './Text'
 import checkIcon from '../../assets/img/check.png'
 import checkEmptyIcon from '../../assets/img/check-empty.png'
 
-import type {ComponentType} from 'react'
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'
 
 type Props = {
   checked: boolean,
   text: string,
-  handleChange: () => void,
+  onChange: (checked: boolean) => void,
   style?: ViewStyleProp,
   testID?: string,
 }
-const Checkbox = ({checked, text, handleChange, style, testID}: Props) => (
-  <TouchableOpacity style={[styles.container, style]} onPress={handleChange} testID={testID}>
+const Checkbox = ({checked, text, onChange, style, testID}: Props) => (
+  <TouchableOpacity style={[styles.container, style]} onPress={() => onChange(!checked)} testID={testID}>
     <Image source={checked ? checkIcon : checkEmptyIcon} />
     <Text style={styles.text}>{text}</Text>
   </TouchableOpacity>
 )
 
-type ExternalProps = {
-  checked: boolean,
-  text: string,
-  onChange: (checked: boolean) => void,
-  style?: Object,
-  testID?: string,
-}
-
-export default (withHandlers({
-  handleChange:
-    ({onChange, checked}) =>
-    () =>
-      onChange(!checked),
-})(Checkbox): ComponentType<ExternalProps>)
+export default Checkbox

src/components/UiKit/Checkbox.stories.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {storiesOf} from '@storybook/react-native'
+import {action} from '@storybook/addon-actions'
+
+import Checkbox from './Checkbox'
+
+const styles = StyleSheet.create({
+  checkbox: {
+    padding: 16,
+    justifyContent: 'center',
+    flex: 1,
+  },
+})
+
+const CheckboxWrapper = () => {
+  const [checked, setChecked] = React.useState(false)
+
+  return (
+    <Checkbox
+      text={checked ? 'this is the checked text' : 'this is the unchecked text'}
+      checked={checked}
+      onChange={(value) => {
+        action('checked')(value)
+        setChecked(value)
+      }}
+    />
+  )
+}
+
+storiesOf('Checkbox', module)
+  .addDecorator((getStory) => <View style={styles.checkbox}>{getStory()}</View>)
+  .add('default', () => <CheckboxWrapper />)