From 26720dead0841c4c133cf733f5ad631b339e5f75 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 4 Jun 2018 17:34:03 +0100
Subject: [PATCH] Wallet page improvements (#155)

* wallet page send form improvements
* style tweaks for the send form input fields
---
 app/src/component/walletSend/view.js | 52 ++++++++++++++++++++++------
 app/src/styles/wallet.js             |  8 +++--
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/app/src/component/walletSend/view.js b/app/src/component/walletSend/view.js
index 73cc59c..2559410 100644
--- a/app/src/component/walletSend/view.js
+++ b/app/src/component/walletSend/view.js
@@ -16,9 +16,13 @@ type Props = {
 };
 
 class WalletSend extends React.PureComponent<Props> {
+  amountInput = null;
+  
   state = {
     amount: null,
-    address: null
+    address: null,
+    addressChanged: false,
+    addressValid: false
   };
   
   componentWillUpdate(nextProps) {
@@ -52,6 +56,22 @@ class WalletSend extends React.PureComponent<Props> {
       this.setState({ address: null, amount: null });
     }
   }
+  
+  handleAddressInputBlur = () => {
+    if (this.state.addressChanged && !this.state.addressValid) {
+      const { notify } = this.props;
+      notify({
+        message: 'The recipient address is not a valid LBRY address.',
+        displayType: ['toast']
+      });
+    }
+  }
+  
+  handleAddressInputSubmit = () => {
+    if (this.amountInput) {
+      this.amountInput.focus();
+    }
+  }
 
   render() {
     const { balance } = this.props;
@@ -62,20 +82,30 @@ class WalletSend extends React.PureComponent<Props> {
     return (
       <View style={walletStyle.card}>
         <Text style={walletStyle.title}>Send Credits</Text>
-        <Text style={walletStyle.text}>Amount</Text>
-        <View style={[walletStyle.amountRow, walletStyle.bottomMarginMedium]}>
-          <TextInput onChangeText={value => this.setState({amount: value})}
-                     keyboardType={'numeric'}
-                     value={this.state.amount}
-                     style={[walletStyle.input, walletStyle.amountInput]} />
-          <Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
-        </View>
         <Text style={walletStyle.text}>Recipient address</Text>
-        <View style={walletStyle.row}>
-          <TextInput onChangeText={value => this.setState({address: value})}
+        <View style={[walletStyle.row, walletStyle.bottomMarginMedium]}>
+          <TextInput onChangeText={value => this.setState({
+                       address: value,
+                       addressChanged: true,
+                       addressValid: (value.trim().length == 0 || regexAddress.test(value))
+                     })}
+                     onBlur={this.handleAddressInputBlur}
+                     onSubmitEditing={this.handleAddressInputSubmit}
                      placeholder={'bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs'}
                      value={this.state.address}
+                     returnKeyType={'next'}
                      style={[walletStyle.input, walletStyle.addressInput, walletStyle.bottomMarginMedium]} />
+        </View>
+        <Text style={walletStyle.text}>Amount</Text>
+        <View style={walletStyle.row}>
+          <View style={walletStyle.amountRow}>
+            <TextInput ref={ref => this.amountInput = ref}
+                       onChangeText={value => this.setState({amount: value})}
+                       keyboardType={'numeric'}
+                       value={this.state.amount}
+                       style={[walletStyle.input, walletStyle.amountInput]} />
+            <Text style={[walletStyle.text, walletStyle.currency]}>LBC</Text>
+          </View>
           <Button text={'Send'}
                   style={[walletStyle.button, walletStyle.sendButton]}
                   disabled={!canSend}
diff --git a/app/src/styles/wallet.js b/app/src/styles/wallet.js
index 724a22f..da79f90 100644
--- a/app/src/styles/wallet.js
+++ b/app/src/styles/wallet.js
@@ -112,10 +112,14 @@ const walletStyle = StyleSheet.create({
   },
   amountInput: {
     alignSelf: 'flex-start',
-    width: 150
+    width: 100,
+    fontSize: 16,
+    letterSpacing: 1
   },
   addressInput: {
-    width: '80%'
+    flex: 1,
+    fontSize: 16,
+    letterSpacing: 1.5
   },
   warning: {
     backgroundColor: Colors.Orange,