diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js
index 716112bf8..2e289265d 100644
--- a/src/components/basicHeader/view/basicHeaderView.js
+++ b/src/components/basicHeader/view/basicHeaderView.js
@@ -74,7 +74,6 @@ class BasicHeaderView extends Component {
isLoading,
isLoggedIn,
isModalHeader,
- isPostSending,
rightButtonText,
isPreviewActive,
isReply,
diff --git a/src/components/transferFormItem/index.js b/src/components/transferFormItem/index.js
new file mode 100644
index 000000000..395eb9155
--- /dev/null
+++ b/src/components/transferFormItem/index.js
@@ -0,0 +1 @@
+export { default as TransferFormItem } from './view/transferFormItemView';
diff --git a/src/components/transferFormItem/view/transferFormItemStyles.js b/src/components/transferFormItem/view/transferFormItemStyles.js
new file mode 100644
index 000000000..27d2511c6
--- /dev/null
+++ b/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,
+ },
+});
diff --git a/src/components/transferFormItem/view/transferFormItemView.js b/src/components/transferFormItem/view/transferFormItemView.js
new file mode 100644
index 000000000..d53dfd7f5
--- /dev/null
+++ b/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 }) => (
+
+ {label && {label}}
+ {rightComponent && rightComponent()}
+
+);
+
+export default TransferFormItemView;
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 2f1819f9a..c15d0bfec 100644
--- a/src/config/locales/en-US.json
+++ b/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"
}
}
diff --git a/src/screens/transfer/container/transferContainer.js b/src/screens/transfer/container/transferContainer.js
index a89775606..45d8c0984 100644
--- a/src/screens/transfer/container/transferContainer.js
+++ b/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 ;
+ return (
+
+ );
}
}
-const mapStateToProps = state => ({});
+const mapStateToProps = state => ({
+ accounts: state.account.otherAccounts,
+});
export default connect(mapStateToProps)(ExampleContainer);
diff --git a/src/screens/transfer/screen/transferScreen.js b/src/screens/transfer/screen/transferScreen.js
index 51f452def..a246f8ed5 100644
--- a/src/screens/transfer/screen/transferScreen.js
+++ b/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 }) => test;
+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) => (
+ this._setState(state, text)}
+ value={this.state[state]}
+ placeholder={placeholder}
+ placeholderTextColor="#c1c5c7"
+ autoCapitalize="none"
+ keyboardType="numeric"
+ />
+ );
+
+ _renderDropdown = accounts => (
+ item.username)}
+ defaultText={accounts[0].username}
+ selectedOptionIndex={0}
+ onSelect={(index, value) => this.setState({ from: value })}
+ />
+ );
+
+ _renderDescription = text => {text};
+
+ render() {
+ const { accounts, intl } = this.props;
+ const { destination, isUsernameValid, amount } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+ this._renderDropdown(accounts)}
+ />
+ this._renderInput(
+ intl.formatMessage({ id: 'transfer.to_placeholder' }),
+ 'destination',
+ )
+ }
+ />
+ this._renderInput('Amount', 'amount')}
+ />
+ this._renderDescription(intl.formatMessage({ id: 'transfer.amount_desc' }))
+ }
+ />
+ this._renderInput(intl.formatMessage({ id: 'transfer.memo_placeholder' }), 'memo')
+ }
+ />
+ this._renderDescription(intl.formatMessage({ id: 'transfer.memo_desc' }))
+ }
+ />
+
+
+ this.ActionSheet.show()}
+ >
+ NEXT
+
+
+
+ (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;
+ }}
+ />
+
+ );
+ }
+}
+
+export default injectIntl(TransferView);
diff --git a/src/screens/transfer/screen/transferStyles.js b/src/screens/transfer/screen/transferStyles.js
index 7e2389661..3423d69e0 100644
--- a/src/screens/transfer/screen/transferStyles.js
+++ b/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,
},
});