Merge pull request #2374 from ecency/sa/transfer-screens-update

transfer screens update

ios/Podfile.lock

@@ -833,4 +833,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0282022703ad578ab2d9afbf3147ba3b373b4311
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.11.2

src/components/index.js

@@ -98,6 +98,8 @@ import VideoPlayer from './videoPlayer/videoPlayerView';
 import QRModal from './qrModal/qrModalView';
 import { SimpleChart } from './simpleChart';
 import BeneficiarySelectionContent from './beneficiarySelectionContent/beneficiarySelectionContent';
+import TransferAccountSelector from './transferAccountSelector/transferAccountSelector';
+import TransferAmountInputSection from './transferAmountInputSection/transferAmountInputSection';
 
 // Basic UI Elements
 import {
@@ -245,4 +247,6 @@ export {
   QRModal,
   SimpleChart,
   BeneficiarySelectionContent,
+  TransferAccountSelector,
+  TransferAmountInputSection,
 };

src/components/transferAccountSelector/transferAccountSelector.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, View } from 'react-native';
+import transferTypes from '../../constants/transferTypes';
+import DropdownButton from '../dropdownButton';
+import Icon from '../icon';
+import TextInput from '../textInput';
+import { TransferFormItem } from '../transferFormItem';
+import UserAvatar from '../userAvatar';
+// Styles
+import styles from './transferAccountSelectorStyles';
+
+export interface TransferAccountSelectorProps {
+  accounts: any;
+  currentAccountName: string;
+  transferType: string;
+  balance: any;
+  fetchBalance: any;
+  from: string;
+  setFrom: (value: string) => void;
+  destination: string;
+  setDestination: (value: string) => void;
+  amount: string;
+  setAmount: (value: string) => void;
+  getAccountsWithUsername: any;
+  setIsUsernameValid: (value: boolean) => void;
+  memo: string;
+  setMemo: (value: string) => void;
+}
+
+const TransferAccountSelector = ({
+  accounts,
+  currentAccountName,
+  transferType,
+  balance,
+  fetchBalance,
+  from,
+  setFrom,
+  destination,
+  setDestination,
+  amount,
+  setAmount,
+  getAccountsWithUsername,
+  setIsUsernameValid,
+  memo,
+  setMemo,
+}): JSX.Element => {
+  const intl = useIntl();
+
+  const _handleOnDropdownChange = (value) => {
+    fetchBalance(value);
+    setFrom(value);
+    if (transferType === 'convert') {
+      setDestination(value);
+    }
+  };
+
+  const _renderDropdown = (accounts, currentAccountName) => (
+    <DropdownButton
+      dropdownButtonStyle={styles.dropdownButtonStyle}
+      rowTextStyle={styles.rowTextStyle}
+      style={styles.dropdown}
+      dropdownStyle={styles.dropdownStyle}
+      textStyle={styles.dropdownText}
+      options={accounts.map((item) => item.username)}
+      defaultText={currentAccountName}
+      selectedOptionIndex={accounts.findIndex((item) => item.username === currentAccountName)}
+      onSelect={(index, value) => _handleOnDropdownChange(value)}
+    />
+  );
+
+  const _handleOnChange = (state: string, val: string) => {
+    let _amount = val.toString();
+    if (_amount.includes(',')) {
+      _amount = val.replace(',', '.');
+    }
+    if (state === 'amount') {
+      if (parseFloat(Number(_amount)) <= parseFloat(balance)) {
+        setAmount(_amount);
+      }
+    }
+    if (state === 'destination') {
+      getAccountsWithUsername(val).then((res) => {
+        const isValid = res.includes(val);
+
+        setIsUsernameValid(isValid);
+      });
+      setDestination(_amount);
+    }
+    if (state === 'memo') {
+      setMemo(_amount);
+    }
+  };
+
+  const _renderInput = (placeholder, state, keyboardType, isTextArea) => (
+    <TextInput
+      style={[isTextArea ? styles.textarea : styles.input]}
+      onChangeText={(amount) => _handleOnChange(state, amount)}
+      value={
+        state === 'destination'
+          ? destination
+          : state === 'amount'
+          ? amount
+          : state === 'memo'
+          ? memo
+          : ''
+      }
+      placeholder={placeholder}
+      placeholderTextColor="#c1c5c7"
+      autoCapitalize="none"
+      multiline={isTextArea}
+      numberOfLines={isTextArea ? 4 : 1}
+      keyboardType={keyboardType}
+    />
+  );
+  return (
+    <View style={styles.stepOneContainer}>
+      <Text style={styles.sectionHeading}>
+        {intl.formatMessage({ id: 'transfer.account_select_title' })}
+      </Text>
+      <Text style={styles.sectionSubheading}>
+        {intl.formatMessage({ id: 'transfer.account_select_description' })}
+      </Text>
+      <TransferFormItem
+        containerStyle={{ marginTop: 32 }}
+        label={intl.formatMessage({ id: 'transfer.from' })}
+        rightComponent={() => _renderDropdown(accounts, currentAccountName)}
+      />
+      {transferType !== transferTypes.CONVERT && transferType !== transferTypes.PURCHASE_ESTM && (
+        <TransferFormItem
+          label={intl.formatMessage({ id: 'transfer.to' })}
+          rightComponent={() =>
+            _renderInput(
+              intl.formatMessage({ id: 'transfer.to_placeholder' }),
+              'destination',
+              'default',
+              false,
+            )
+          }
+          containerStyle={styles.elevate}
+        />
+      )}
+
+      <View style={styles.toFromAvatarsContainer}>
+        <UserAvatar username={from} size="xl" style={styles.userAvatar} noAction />
+        <Icon style={styles.icon} name="arrow-forward" iconType="MaterialIcons" />
+        <UserAvatar username={destination} size="xl" style={styles.userAvatar} noAction />
+      </View>
+    </View>
+  );
+};
+
+export default TransferAccountSelector;

src/components/transferAccountSelector/transferAccountSelectorStyles.ts

@@ -0,0 +1,102 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  stepOneContainer: {
+    zIndex: 2,
+    paddingVertical: 16,
+    borderRadius: 12,
+    backgroundColor: '$primaryLightBackground',
+  },
+
+  toFromAvatarsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 16,
+    marginTop: 16,
+  },
+
+  input: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    color: '$primaryBlack',
+    // width: 172,
+    flex: 1,
+    minHeight: 35,
+  },
+
+  textarea: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 8,
+    padding: 10,
+    color: '$primaryBlack',
+    flex: 1,
+    height: 75,
+  },
+
+  icon: {
+    fontSize: 40,
+    color: '$iconColor',
+    marginHorizontal: 20,
+  },
+  rowTextStyle: {
+    fontSize: 12,
+    color: '$primaryDarkGray',
+    padding: 5,
+  },
+  dropdownText: {
+    fontSize: 14,
+    paddingLeft: 12,
+    paddingHorizontal: 14,
+    // color: '$primaryDarkGray',
+    color: '$primaryBlack',
+  },
+  dropdownStyle: {
+    marginTop: 15,
+    minWidth: 192,
+    width: 192,
+    maxHeight: '$deviceHeight - 200',
+  },
+  dropdownButtonStyle: {
+    borderColor: '$borderColor',
+    borderWidth: 1,
+    height: 44,
+    width: '100%',
+    borderRadius: 8,
+  },
+  dropdown: {
+    flexGrow: 1,
+    width: 150,
+  },
+
+  avatar: {
+    marginBottom: 30,
+  },
+
+  elevate: {
+    zIndex: 1,
+  },
+  sectionHeading: {
+    paddingHorizontal: 16,
+    marginBottom: 0,
+    fontSize: 18,
+    fontWeight: '700',
+    color: '$primaryBlack',
+    textAlign: 'left',
+  },
+  sectionSubheading: {
+    paddingHorizontal: 16,
+    marginTop: 8,
+    fontSize: 14,
+    color: '$primaryBlack',
+    fontWeight: '600',
+    textAlign: 'left',
+  },
+});

src/components/transferAmountInputSection/transferAmountInputSection.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, TouchableOpacity, View } from 'react-native';
+import TextInput from '../textInput';
+import { TransferFormItem } from '../transferFormItem';
+
+// Styles
+import styles from './transferAmountInputSectionStyles';
+import transferTypes from '../../constants/transferTypes';
+
+export interface TransferAmountInputSectionProps {
+  balance: number;
+  getAccountsWithUsername: any;
+  setIsUsernameValid: (value: boolean) => void;
+  destination: string;
+  setDestination: (value: string) => void;
+  memo: string;
+  setMemo: (value: string) => void;
+  amount: string;
+  setAmount: (value: string) => void;
+  hsTransfer: boolean;
+  transferType: string;
+  selectedAccount: any;
+  fundType: any;
+  currentAccountName: string;
+}
+
+const TransferAmountInputSection = ({
+  balance,
+  getAccountsWithUsername,
+  setIsUsernameValid,
+  setDestination,
+  destination,
+  memo,
+  setMemo,
+  amount,
+  setAmount,
+  hsTransfer,
+  transferType,
+  selectedAccount,
+  fundType,
+  currentAccountName,
+}): JSX.Element => {
+  const intl = useIntl();
+
+  const _handleOnChange = (state, val) => {
+    let _amount = val.toString();
+    if (_amount.includes(',')) {
+      _amount = val.replace(',', '.');
+    }
+    if (state === 'amount') {
+      if (parseFloat(Number(_amount)) <= parseFloat(balance)) {
+        setAmount(_amount);
+      }
+    }
+    if (state === 'destination') {
+      getAccountsWithUsername(val).then((res) => {
+        const isValid = res.includes(val);
+
+        setIsUsernameValid(isValid);
+      });
+      setDestination(_amount);
+    }
+    if (state === 'memo') {
+      setMemo(_amount);
+    }
+  };
+
+  const _renderInput = (placeholder, state, keyboardType, isTextArea) => (
+    <TextInput
+      style={[isTextArea ? styles.textarea : styles.input]}
+      onChangeText={(amount) => _handleOnChange(state, amount)}
+      value={
+        state === 'destination'
+          ? destination
+          : state === 'amount'
+          ? amount
+          : state === 'memo'
+          ? memo
+          : ''
+      }
+      placeholder={placeholder}
+      placeholderTextColor="#c1c5c7"
+      autoCapitalize="none"
+      multiline={isTextArea}
+      numberOfLines={isTextArea ? 4 : 1}
+      keyboardType={keyboardType}
+    />
+  );
+
+  const _renderDescription = (text) => <Text style={styles.description}>{text}</Text>;
+  const _renderCenterDescription = (text) => <Text style={styles.centerDescription}>{text}</Text>;
+
+  return (
+    <View style={styles.stepTwoContainer}>
+      <Text style={styles.sectionHeading}>
+        {intl.formatMessage({ id: 'transfer.amount_select_title' })}
+      </Text>
+      <Text style={styles.sectionSubheading}>
+        {intl.formatMessage({ id: 'transfer.amount_select_description' })}
+      </Text>
+      <TransferFormItem
+        label={intl.formatMessage({ id: 'transfer.amount' })}
+        rightComponent={() =>
+          _renderInput(intl.formatMessage({ id: 'transfer.amount' }), 'amount', 'numeric', false)
+        }
+      />
+      <TransferFormItem
+        rightComponentStyle={styles.transferItemRightStyle}
+        containerStyle={styles.transferItemContainer}
+        rightComponent={() => (
+          <TouchableOpacity onPress={() => _handleOnChange('amount', balance)}>
+            {_renderDescription(
+              `${intl.formatMessage({
+                id: 'transfer.amount_desc',
+              })} ${balance} ${fundType === 'ESTM' ? 'Points' : fundType}`,
+            )}
+          </TouchableOpacity>
+        )}
+      />
+      {(transferType === transferTypes.POINTS ||
+        transferType === transferTypes.TRANSFER_TOKEN ||
+        transferType === transferTypes.TRANSFER_TO_SAVINGS) && (
+        <TransferFormItem
+          label={intl.formatMessage({ id: 'transfer.memo' })}
+          rightComponent={() =>
+            _renderInput(
+              intl.formatMessage({ id: 'transfer.memo_placeholder' }),
+              'memo',
+              'default',
+              true,
+            )
+          }
+          containerStyle={{ height: 80 }}
+        />
+      )}
+      {(transferType === transferTypes.POINTS || transferType === transferTypes.TRANSFER_TOKEN) && (
+        <TransferFormItem
+          rightComponentStyle={styles.transferItemRightStyle}
+          containerStyle={styles.transferItemContainer}
+          rightComponent={() =>
+            _renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' }))
+          }
+        />
+      )}
+      {transferType === transferTypes.CONVERT && (
+        <TransferFormItem
+          rightComponent={() =>
+            _renderCenterDescription(intl.formatMessage({ id: 'transfer.convert_desc' }))
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+export default TransferAmountInputSection;

src/components/transferAmountInputSection/transferAmountInputSectionStyles.ts

@@ -0,0 +1,85 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
+  stepOneContainer: {
+    zIndex: 2,
+    paddingVertical: 16,
+    borderRadius: 12,
+    backgroundColor: '$primaryLightBackground',
+  },
+  stepTwoContainer: {
+    paddingVertical: 16,
+    marginTop: 16,
+    borderRadius: 12,
+    backgroundColor: '$primaryLightBackground',
+  },
+  stepThreeContainer: {
+    alignItems: 'center',
+    marginTop: 16,
+    marginVertical: 16,
+  },
+
+  input: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    color: '$primaryBlack',
+    // width: 172,
+    flex: 1,
+    minHeight: 35,
+  },
+
+  error: {
+    borderWidth: 1,
+    borderColor: 'red',
+  },
+  textarea: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 8,
+    padding: 10,
+    color: '$primaryBlack',
+    flex: 1,
+    height: 75,
+  },
+  description: {
+    fontSize: 12,
+    color: '$primaryBlack',
+    fontWeight: '600',
+    textAlign: 'right',
+  },
+  centerDescription: {
+    marginTop:8,
+    fontSize: 12,
+    color: '$primaryBlack',
+    fontWeight: '600',
+  },
+  transferItemContainer: {
+    height: 20,
+  },
+  transferItemRightStyle: {
+    justifyContent: 'flex-end',
+  },
+  sectionHeading: {
+    paddingHorizontal: 16,
+    marginBottom: 0,
+    fontSize: 18,
+    fontWeight: '700',
+    color: '$primaryBlack',
+    textAlign: 'left',
+  },
+  sectionSubheading: {
+    paddingHorizontal: 16,
+    marginTop: 8,
+    marginBottom: 20,
+    fontSize: 14,
+    color: '$primaryBlack',
+    fontWeight: '600',
+    textAlign: 'left',
+  },
+});

src/components/transferFormItem/view/transferFormItemView.js

@@ -7,10 +7,12 @@ import styles from './transferFormItemStyles';
  *   @prop { type }    name                - Description....
  */
 
-const TransferFormItemView = ({ rightComponent, label, containerStyle }) => (
+const TransferFormItemView = ({ rightComponent, label, containerStyle, rightComponentStyle }) => (
   <View style={[styles.container, containerStyle]}>
     <View style={styles.leftPart}>{label && <Text style={styles.text}>{label}</Text>}</View>
-    <View style={styles.rightPart}>{rightComponent && rightComponent()}</View>
+    <View style={[styles.rightPart, rightComponentStyle]}>
+      {rightComponent && rightComponent()}
+    </View>
   </View>
 );
 

src/config/locales/en-US.json

@@ -655,8 +655,11 @@
     "powering_down_subheading": "You are currently powering down.",
     "powering_down_info": "Next power down is in {days} days, {hp} HIVE",
     "invalid_amount": "Invalid Amount",
-    "invalid_amount_desc": "Please enter valid amount"
+    "invalid_amount_desc": "Please enter valid amount",
-
+    "account_select_title": "Account Details",
+    "account_select_description": "Operations related to funds are irreversible, make sure receivers username is correct",
+    "amount_select_title": "Transfer Details",
+    "amount_select_description": "Enter transfer amount within maximum available balance and must be greater than 0.001"
   },
   "boost": {
     "title": "Get Points",

src/constants/transferTypes.ts

@@ -0,0 +1,29 @@
+const TRANSFER_TOKEN = 'transfer_token';
+const PURCHASE_ESTM = 'purchase_estm';
+const CONVERT = 'convert';
+const TRANSFER_TO_SAVINGS = 'transfer_to_savings';
+const TRANSFER_TO_VESTING = 'transfer_to_vesting';
+const POINTS = 'points';
+const WITHDRAW_HIVE = 'withdraw_hive';
+const WITHDRAW_HBD = 'withdraw_hbd';
+const DELEGATE = 'delegate';
+const POWER_DOWN = 'power_down';
+const ADDRESS_VIEW = 'address_view';
+const DELEGATE_VESTING_SHARES = 'delegate_vesting_shares';
+const WITHDRAW_VESTING = 'withdraw_vesting'
+
+export default {
+  TRANSFER_TOKEN,
+  PURCHASE_ESTM,
+  CONVERT,
+  TRANSFER_TO_SAVINGS,
+  TRANSFER_TO_VESTING,
+  POINTS,
+  WITHDRAW_HIVE,
+  WITHDRAW_HBD,
+  DELEGATE,
+  POWER_DOWN,
+  ADDRESS_VIEW,
+  DELEGATE_VESTING_SHARES,
+  WITHDRAW_VESTING
+};

src/screens/transfer/screen/transferScreen.js

@@ -1,25 +1,24 @@
 import React, { Fragment, useState, useRef } from 'react';
-import { Text, View, ScrollView, TouchableOpacity } from 'react-native';
+import { Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
 
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { hsOptions } from '../../../constants/hsOptions';
 import AUTH_TYPE from '../../../constants/authType';
 
 import {
   BasicHeader,
-  TextInput,
-  TransferFormItem,
   MainButton,
-  DropdownButton,
-  UserAvatar,
-  Icon,
   Modal,
+  TransferAccountSelector,
+  TransferAmountInputSection,
 } from '../../../components';
 
 import styles from './transferStyles';
 import { OptionsModal } from '../../../components/atoms';
+import transferTypes from '../../../constants/transferTypes';
 
 const TransferView = ({
   currentAccountName,
@@ -65,9 +64,6 @@ const TransferView = ({
   const [isTransfering, setIsTransfering] = useState(false);
   const confirm = useRef(null);
 
-  //useEffect(() => {
-  //}, []);
-
   const _handleTransferAction = () => {
     setIsTransfering(true);
     if (accountType === AUTH_TYPE.STEEM_CONNECT) {
@@ -77,76 +73,9 @@ const TransferView = ({
     }
   };
 
-  const _handleOnChange = (state, val) => {
-    let _amount = val.toString();
-    if (_amount.includes(',')) {
-      _amount = val.replace(',', '.');
-    }
-    if (state === 'amount') {
-      if (parseFloat(Number(_amount)) <= parseFloat(balance)) {
-        setAmount(_amount);
-      }
-    }
-    if (state === 'destination') {
-      getAccountsWithUsername(val).then((res) => {
-        const isValid = res.includes(val);
-
-        setIsUsernameValid(isValid);
-      });
-      setDestination(_amount);
-    }
-    if (state === 'memo') {
-      setMemo(_amount);
-    }
-  };
-
-  const _renderInput = (placeholder, state, keyboardType, isTextArea) => (
-    <TextInput
-      style={[isTextArea ? styles.textarea : styles.input]}
-      onChangeText={(amount) => _handleOnChange(state, amount)}
-      value={
-        state === 'destination'
-          ? destination
-          : state === 'amount'
-          ? amount
-          : state === 'memo'
-          ? memo
-          : ''
-      }
-      placeholder={placeholder}
-      placeholderTextColor="#c1c5c7"
-      autoCapitalize="none"
-      multiline={isTextArea}
-      numberOfLines={isTextArea ? 4 : 1}
-      keyboardType={keyboardType}
-    />
-  );
-  const _renderDropdown = (accounts, currentAccountName) => (
-    <DropdownButton
-      dropdownButtonStyle={styles.dropdownButtonStyle}
-      rowTextStyle={styles.rowTextStyle}
-      style={styles.dropdown}
-      dropdownStyle={styles.dropdownStyle}
-      textStyle={styles.dropdownText}
-      options={accounts.map((item) => item.username)}
-      defaultText={currentAccountName}
-      selectedOptionIndex={accounts.findIndex((item) => item.username === currentAccountName)}
-      onSelect={(index, value) => _handleOnDropdownChange(value)}
-    />
-  );
-
-  const _handleOnDropdownChange = (value) => {
-    fetchBalance(value);
-    setFrom(value);
-    if (transferType === 'convert') {
-      setDestination(value);
-    }
-  };
-
-  const _renderDescription = (text) => <Text style={styles.description}>{text}</Text>;
   let path;
   if (hsTransfer) {
-    if (transferType === 'points') {
+    if (transferType !== transferTypes.CONVERT) {
       const json = JSON.stringify({
         sender: get(selectedAccount, 'name'),
         receiver: destination,
@@ -159,27 +88,30 @@ const TransferView = ({
       )}%22%5D&required_posting_auths=%5B%5D&id=ecency_point_transfer&json=${encodeURIComponent(
         json,
       )}`;
-    } else if (transferType === 'transfer_to_savings') {
+    } else if (transferType === transferTypes.TRANSFER_TO_SAVINGS) {
       path = `sign/transfer_to_savings?from=${currentAccountName}&to=${destination}&amount=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}&memo=${encodeURIComponent(memo)}`;
-    } else if (transferType === 'delegate_vesting_shares') {
+    } else if (transferType === transferTypes.DELEGATE_VESTING_SHARES) {
       path = `sign/delegate_vesting_shares?delegator=${currentAccountName}&delegatee=${destination}&vesting_shares=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}`;
-    } else if (transferType === 'transfer_to_vesting') {
+    } else if (transferType === transferTypes.TRANSFER_TO_VESTING) {
       path = `sign/transfer_to_vesting?from=${currentAccountName}&to=${destination}&amount=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}`;
-    } else if (transferType === 'withdraw_hive' || transferType === 'withdraw_hbd') {
+    } else if (
+      transferType === transferTypes.WITHDRAW_HIVE ||
+      transferType === transferTypes.WITHDRAW_HBD
+    ) {
       path = `sign/transfer_from_savings?from=${currentAccountName}&to=${destination}&amount=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}&request_id=${new Date().getTime() >>> 0}`;
-    } else if (transferType === 'convert') {
+    } else if (transferType === transferTypes.CONVERT) {
       path = `sign/convert?owner=${currentAccountName}&amount=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}&requestid=${new Date().getTime() >>> 0}`;
-    } else if (transferType === 'withdraw_vesting') {
+    } else if (transferType === transferTypes.WITHDRAW_VESTING) {
       path = `sign/withdraw_vesting?account=${currentAccountName}&vesting_shares=${encodeURIComponent(
         `${amount} ${fundType}`,
       )}`;
@@ -192,78 +124,45 @@ const TransferView = ({
   return (
     <Fragment>
       <BasicHeader title={intl.formatMessage({ id: `transfer.${transferType}` })} />
-      <View style={styles.container}>
+
-        <ScrollView contentContainerStyle={styles.fullHeight}>
+      <KeyboardAwareScrollView
-          <View style={[styles.toFromAvatarsContainer, { marginBottom: 16 }]}>
+        keyboardShouldPersistTaps
-            <UserAvatar username={from} size="xl" style={styles.userAvatar} noAction />
+        contentContainerStyle={[styles.grow, { padding: 16 }]}
-            <Icon style={styles.icon} name="arrow-forward" iconType="MaterialIcons" />
+      >
-            <UserAvatar username={destination} size="xl" style={styles.userAvatar} noAction />
+        <View style={styles.container}>
-          </View>
+          <TransferAccountSelector
-          <View style={styles.middleContent}>
+            accounts={accounts}
-            <TransferFormItem
+            currentAccountName={currentAccountName}
-              label={intl.formatMessage({ id: 'transfer.from' })}
+            transferType={transferType}
-              rightComponent={() => _renderDropdown(accounts, currentAccountName)}
+            balance={balance}
-            />
+            fetchBalance={fetchBalance}
-            {transferType !== 'convert' && (
+            getAccountsWithUsername={getAccountsWithUsername}
-              <TransferFormItem
+            from={from}
-                label={intl.formatMessage({ id: 'transfer.to' })}
+            setFrom={setFrom}
-                rightComponent={() =>
+            destination={destination}
-                  _renderInput(
+            setDestination={setDestination}
-                    intl.formatMessage({ id: 'transfer.to_placeholder' }),
+            amount={amount}
-                    'destination',
+            setAmount={setAmount}
-                    'default',
+            setIsUsernameValid={setIsUsernameValid}
-                  )
+            memo={memo}
-                }
+            setMemo={setMemo}
-              />
+          />
-            )}
+          <TransferAmountInputSection
-            <TransferFormItem
+            balance={balance}
-              label={intl.formatMessage({ id: 'transfer.amount' })}
+            getAccountsWithUsername={getAccountsWithUsername}
-              rightComponent={() =>
+            setIsUsernameValid={setIsUsernameValid}
-                _renderInput(intl.formatMessage({ id: 'transfer.amount' }), 'amount', 'numeric')
+            setDestination={setDestination}
-              }
+            destination={destination}
-            />
+            memo={memo}
-            <TransferFormItem
+            setMemo={setMemo}
-              rightComponent={() => (
+            amount={amount}
-                <TouchableOpacity onPress={() => _handleOnChange('amount', balance)}>
+            setAmount={setAmount}
-                  {_renderDescription(
+            hsTransfer={hsTransfer}
-                    `${intl.formatMessage({
+            transferType={transferType}
-                      id: 'transfer.amount_desc',
+            selectedAccount={selectedAccount}
-                    })} ${balance} ${fundType === 'ESTM' ? 'Points' : fundType}`,
+            fundType={fundType}
-                  )}
+            currentAccountName={currentAccountName}
-                </TouchableOpacity>
+          />
-              )}
-            />
-            {(transferType === 'points' ||
-              transferType === 'transfer_token' ||
-              transferType === 'transfer_to_savings') && (
-              <TransferFormItem
-                label={intl.formatMessage({ id: 'transfer.memo' })}
-                rightComponent={() =>
-                  _renderInput(
-                    intl.formatMessage({ id: 'transfer.memo_placeholder' }),
-                    'memo',
-                    'default',
-                    true,
-                  )
-                }
-              />
-            )}
-            {(transferType === 'points' || transferType === 'transfer_token') && (
-              <TransferFormItem
-                containerStyle={{ marginTop: 40 }}
-                rightComponent={() =>
-                  _renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' }))
-                }
-              />
-            )}
-            {transferType === 'convert' && (
-              <TransferFormItem
-                rightComponent={() =>
-                  _renderDescription(intl.formatMessage({ id: 'transfer.convert_desc' }))
-                }
-              />
-            )}
-          </View>
           <View style={styles.bottomContent}>
             <MainButton
               style={styles.button}
@@ -274,8 +173,9 @@ const TransferView = ({
               <Text style={styles.buttonText}>{intl.formatMessage({ id: 'transfer.next' })}</Text>
             </MainButton>
           </View>
-        </ScrollView>
+        </View>
-      </View>
+      </KeyboardAwareScrollView>
+
       <OptionsModal
         ref={confirm}
         options={[

src/screens/transfer/screen/transferStyles.js

@@ -249,6 +249,10 @@ export default EStyleSheet.create({
     padding: 16,
     backgroundColor: '$primaryBackgroundColor',
   },
+  avoidingViewContainer: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+  },
   elevate: {
     zIndex: 1,
   },