From 97fce4c4c40d8e5fa98e064102a68eaf5c0d708a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pavel=20=C5=A0ev=C4=8D=C3=ADk?= <pajaseviwow@gmail.com>
Date: Fri, 21 Dec 2018 13:38:42 +0100
Subject: [PATCH] Feature: let user set amount and label on receive screen

---
 loc/en.js                 |   2 +
 screen/receive/details.js | 135 +++++++++++++++++++++++++++++---------
 2 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/loc/en.js b/loc/en.js
index db0923f9c..34c6c643b 100644
--- a/loc/en.js
+++ b/loc/en.js
@@ -153,6 +153,8 @@ module.exports = {
       title: 'Share this address with payer',
       share: 'share',
       copiedToClipboard: 'Copied to clipboard.',
+      amount: 'amount to receive (BTC)',
+      label: 'note to sender',
     },
   },
   buyBitcoin: {
diff --git a/screen/receive/details.js b/screen/receive/details.js
index ffcf97e3c..01e48cf17 100644
--- a/screen/receive/details.js
+++ b/screen/receive/details.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native';
+import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share, TextInput, KeyboardAvoidingView } from 'react-native';
 import { QRCode } from 'react-native-custom-qr-codes';
 import bip21 from 'bip21';
 import { BlueLoading, SafeBlueArea, BlueButton, BlueNavigationStyle, is } from '../../BlueComponents';
@@ -26,6 +26,8 @@ export default class ReceiveDetails extends Component {
       address: address,
       secret: secret,
       addressText: '',
+      amount: undefined,
+      label: undefined,
     };
 
     // EV(EV.enum.RECEIVE_ADDRESS_CHANGED, this.refreshFunction.bind(this));
@@ -77,44 +79,117 @@ export default class ReceiveDetails extends Component {
     });
   };
 
+  setAmount = value => {
+    if (!value || parseFloat(value) <= 0) {
+      this.setState({ amount: undefined });
+    } else {
+      this.setState({ amount: value });
+    }
+  };
+
+  setLabel = text => {
+    if (!text) {
+      this.setState({ label: undefined });
+    } else {
+      this.setState({ label: text });
+    }
+  };
+
   render() {
     console.log('render() receive/details, address,secret=', this.state.address, ',', this.state.secret);
     if (this.state.isLoading) {
       return <BlueLoading />;
     }
 
+    const { amount, label } = this.state;
+
     return (
       <SafeBlueArea style={{ flex: 1 }}>
         <View style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}>
-          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
-            <QRCode
-              content={bip21.encode(this.state.address)}
-              size={(is.ipad() && 300) || 300}
-              color={BlueApp.settings.foregroundColor}
-              backgroundColor={BlueApp.settings.brandingColor}
-              logo={require('../../img/qr-code.png')}
-            />
-            <TouchableOpacity onPress={this.copyToClipboard}>
-              <Animated.Text style={styles.address} numberOfLines={0}>
-                {this.state.addressText}
-              </Animated.Text>
-            </TouchableOpacity>
-          </View>
-          <View style={{ marginBottom: 24 }}>
-            <BlueButton
-              icon={{
-                name: 'share-alternative',
-                type: 'entypo',
-                color: BlueApp.settings.buttonTextColor,
-              }}
-              onPress={async () => {
-                Share.share({
-                  message: this.state.address,
-                });
-              }}
-              title={loc.receive.details.share}
-            />
-          </View>
+          <KeyboardAvoidingView behavior="position">
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
+              <QRCode
+                content={bip21.encode(this.state.address, { amount, label })}
+                size={(is.ipad() && 300) || 300}
+                color={BlueApp.settings.foregroundColor}
+                backgroundColor={BlueApp.settings.brandingColor}
+                logo={require('../../img/qr-code.png')}
+              />
+              <TouchableOpacity onPress={this.copyToClipboard}>
+                <Animated.Text style={styles.address} numberOfLines={0}>
+                  {this.state.addressText}
+                </Animated.Text>
+              </TouchableOpacity>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  borderColor: '#d2d2d2',
+                  borderBottomColor: '#d2d2d2',
+                  borderWidth: 1.0,
+                  borderBottomWidth: 0.5,
+                  backgroundColor: '#f5f5f5',
+                  minHeight: 44,
+                  height: 44,
+                  marginHorizontal: 20,
+                  alignItems: 'center',
+                  marginVertical: 8,
+                  borderRadius: 4,
+                  width: '100%',
+                }}
+              >
+                <TextInput
+                  onChangeText={this.setLabel}
+                  placeholder={loc.receive.details.label}
+                  value={this.state.label}
+                  numberOfLines={1}
+                  style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
+                  editable={!this.state.isLoading}
+                />
+              </View>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  borderColor: '#d2d2d2',
+                  borderBottomColor: '#d2d2d2',
+                  borderWidth: 1.0,
+                  borderBottomWidth: 0.5,
+                  backgroundColor: '#f5f5f5',
+                  minHeight: 44,
+                  height: 44,
+                  marginHorizontal: 20,
+                  alignItems: 'center',
+                  marginVertical: 8,
+                  borderRadius: 4,
+                  width: '100%',
+                }}
+              >
+                <TextInput
+                  onChangeText={this.setAmount}
+                  placeholder={loc.receive.details.amount}
+                  value={this.state.amount}
+                  numberOfLines={1}
+                  style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
+                  editable={!this.state.isLoading}
+                  keyboardType="numeric"
+                />
+              </View>
+            </View>
+            <View style={{ marginBottom: 24 }}>
+              <BlueButton
+                icon={{
+                  name: 'share-alternative',
+                  type: 'entypo',
+                  color: BlueApp.settings.buttonTextColor,
+                }}
+                onPress={async () => {
+                  Share.share({
+                    message: this.state.address,
+                  });
+                }}
+                title={loc.receive.details.share}
+              />
+            </View>
+          </KeyboardAvoidingView>
         </View>
       </SafeBlueArea>
     );