Completed transfer design

src/components/basicHeader/view/basicHeaderView.js

@@ -74,7 +74,6 @@ class BasicHeaderView extends Component {
       isLoading,
       isLoggedIn,
       isModalHeader,
-      isPostSending,
       rightButtonText,
       isPreviewActive,
       isReply,

src/components/transferFormItem/index.js

@@ -0,0 +1 @@
+export { default as TransferFormItem } from './view/transferFormItemView';

src/components/transferFormItem/view/transferFormItemStyles.js

@@ -0,0 +1,17 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+  },
+  leftPart: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+  },
+  rightPart: {
+    flex: 2,
+    padding: 10,
+  },
+});

src/components/transferFormItem/view/transferFormItemView.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import styles from './transferFormItemStyles';
+
+/* Props
+ * ------------------------------------------------
+ *   @prop { type }    name                - Description....
+ */
+
+const TransferFormItemView = ({ rightComponent, label }) => (
+  <View style={styles.container}>
+    <View style={styles.leftPart}>{label && <Text>{label}</Text>}</View>
+    <View style={styles.rightPart}>{rightComponent && rightComponent()}</View>
+  </View>
+);
+
+export default TransferFormItemView;

src/config/locales/en-US.json

@@ -164,7 +164,8 @@
     "cancel": "Cancel",
     "delete": "Delete",
     "copied": "Copied!",
-    "no_internet": "No connection!"
+    "no_internet": "No connection!",
+    "confirm": "Confirm"
   },
   "post": {
     "reblog_alert": "Are you sure you want to reblog?"
@@ -231,5 +232,17 @@
     "reputation": "reputation",
     "votes": "votes",
     "age": "age"
+  },
+  "transfer": {
+    "title": "Transfer To Account",
+    "from": "From",
+    "to": "To",
+    "amount": "Amount",
+    "memo": "Memo",
+    "information": "1",
+    "amount_desc": "2",
+    "memo_desc": "This memo is public",
+    "to_placeholder": "3",
+    "memo_placeholder": "4"
   }
 }

src/screens/transfer/container/transferContainer.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 // Services and Actions
+import { lookupAccounts } from '../../../providers/steem/dsteem';
 
 // Middleware
 
@@ -27,15 +28,30 @@ class ExampleContainer extends Component {
   // Component Life Cycle Functions
 
   // Component Functions
+  _getAccountsWithUsername = async (username) => {
+    const validUsers = await lookupAccounts(username);
+    return validUsers;
+  };
+
+  _transferToAccount = (from, destination, amount, memo) => {
+    console.log('from, destination, amount, memo, :', from, destination, amount, memo);
+  };
 
   render() {
-    // eslint-disable-next-line
-    const {} = this.props;
+    const { accounts } = this.props;
 
-    return <TransferView />;
+    return (
+      <TransferView
+        accounts={accounts}
+        getAccountsWithUsername={this._getAccountsWithUsername}
+        transferToAccount={this._transferToAccount}
+      />
+    );
   }
 }
 
-const mapStateToProps = state => ({});
+const mapStateToProps = state => ({
+  accounts: state.account.otherAccounts,
+});
 
 export default connect(mapStateToProps)(ExampleContainer);

src/screens/transfer/screen/transferScreen.js

@@ -1,12 +1,170 @@
-import React from 'react';
-import { Text } from 'react-native';
-import styles from './transferStyles';
+/* eslint-disable no-restricted-globals */
+import React, { Fragment, Component } from 'react';
+import { Text, View } from 'react-native';
+import ActionSheet from 'react-native-actionsheet';
+import { injectIntl } from 'react-intl';
 
+import { BasicHeader } from '../../../components/basicHeader';
+import { TextInput } from '../../../components/textInput';
+import { TransferFormItem } from '../../../components/transferFormItem';
+import { MainButton } from '../../../components/mainButton';
+import { DropdownButton } from '../../../components/dropdownButton';
+import { UserAvatar } from '../../../components/userAvatar';
+import { Icon } from '../../../components/icon';
+
+import styles from './transferStyles';
 /* Props
  * ------------------------------------------------
  *   @prop { type }    name                - Description....
  */
 
-const TransferView = ({ x, y, z }) => <Text>test</Text>;
+class TransferView extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      from: props.accounts[0].username,
+      destination: '',
+      amount: '',
+      memo: '',
+      isUsernameValid: false,
+    };
+  }
 
-export default TransferView;
+  // Component Life Cycles
+
+  // Component Functions
+  _setState = (key, value) => {
+    const { getAccountsWithUsername } = this.props;
+
+    if (key) {
+      switch (key) {
+        case 'destination':
+          getAccountsWithUsername(value).then((res) => {
+            const isValid = res.includes(value);
+
+            this.setState({ isUsernameValid: isValid });
+          });
+          this.setState({ [key]: value });
+          break;
+        case 'amount':
+          if (!isNaN(value)) this.setState({ [key]: value });
+          break;
+
+        default:
+          this.setState({ [key]: value });
+          break;
+      }
+    }
+  };
+
+  _handleTransferAction = () => {
+    const { transferToAccount } = this.props;
+    const {
+      from, destination, amount, memo,
+    } = this.state;
+
+    transferToAccount(from, destination, amount, memo);
+  };
+
+  _renderInput = (placeholder, state) => (
+    <TextInput
+      style={styles.input}
+      onChangeText={text => this._setState(state, text)}
+      value={this.state[state]}
+      placeholder={placeholder}
+      placeholderTextColor="#c1c5c7"
+      autoCapitalize="none"
+      keyboardType="numeric"
+    />
+  );
+
+  _renderDropdown = accounts => (
+    <DropdownButton
+      style={styles.dropdown}
+      options={accounts.map(item => item.username)}
+      defaultText={accounts[0].username}
+      selectedOptionIndex={0}
+      onSelect={(index, value) => this.setState({ from: value })}
+    />
+  );
+
+  _renderDescription = text => <Text style={styles.description}>{text}</Text>;
+
+  render() {
+    const { accounts, intl } = this.props;
+    const { destination, isUsernameValid, amount } = this.state;
+
+    return (
+      <Fragment>
+        <BasicHeader title={intl.formatMessage({ id: 'transfer.title' })} />
+        <View style={styles.container}>
+          <View style={styles.topContent}>
+            <UserAvatar
+              username={accounts[0].username}
+              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 style={styles.middleContent}>
+            <TransferFormItem
+              label={intl.formatMessage({ id: 'transfer.from' })}
+              rightComponent={() => this._renderDropdown(accounts)}
+            />
+            <TransferFormItem
+              label={intl.formatMessage({ id: 'transfer.to' })}
+              rightComponent={() => this._renderInput(
+                intl.formatMessage({ id: 'transfer.to_placeholder' }),
+                'destination',
+              )
+              }
+            />
+            <TransferFormItem
+              label={intl.formatMessage({ id: 'transfer.amount' })}
+              rightComponent={() => this._renderInput('Amount', 'amount')}
+            />
+            <TransferFormItem
+              rightComponent={() => this._renderDescription(intl.formatMessage({ id: 'transfer.amount_desc' }))
+              }
+            />
+            <TransferFormItem
+              label={intl.formatMessage({ id: 'transfer.memo' })}
+              rightComponent={() => this._renderInput(intl.formatMessage({ id: 'transfer.memo_placeholder' }), 'memo')
+              }
+            />
+            <TransferFormItem
+              rightComponent={() => this._renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' }))
+              }
+            />
+          </View>
+          <View style={styles.bottomContent}>
+            <MainButton
+              style={styles.button}
+              isDisable={!(amount && isUsernameValid)}
+              onPress={() => this.ActionSheet.show()}
+            >
+              <Text style={styles.buttonText}>NEXT</Text>
+            </MainButton>
+          </View>
+        </View>
+        <ActionSheet
+          ref={o => (this.ActionSheet = o)}
+          options={[
+            intl.formatMessage({ id: 'alert.confirm' }),
+            intl.formatMessage({ id: 'alert.cancel' }),
+          ]}
+          title={intl.formatMessage({ id: 'transfer.information' })}
+          cancelButtonIndex={1}
+          destructiveButtonIndex={0}
+          onPress={(index) => {
+            index === 0 ? this._handleTransferAction() : null;
+          }}
+        />
+      </Fragment>
+    );
+  }
+}
+
+export default injectIntl(TransferView);

src/screens/transfer/screen/transferStyles.js

@@ -1,7 +1,56 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  styleName: {
-    // TODO: If we need default style. We can put there.
+  container: {
+    flex: 1,
+    backgroundColor: '$primaryBackgroundColor',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  topContent: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  middleContent: {
+    flex: 3,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bottomContent: {
+    flex: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 10,
+    padding: 10,
+  },
+  description: {
+    color: '$iconColor',
+  },
+  button: {
+    width: '$deviceWidth / 3',
+    marginTop: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '$white',
+  },
+  dropdown: {
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    borderRadius: 10,
+    flex: 1,
+    padding: 10,
+  },
+  icon: {
+    fontSize: 40,
+    color: '$iconColor',
+    marginHorizontal: 20,
   },
 });