REF: Custom receive

Update details.js

BlueComponents.js

@@ -53,7 +53,7 @@ export class BlueButton extends Component {
       backgroundColor = BlueApp.settings.buttonDisabledBackgroundColor;
       fontColor = BlueApp.settings.buttonDisabledTextColor;
     }
-    let buttonWidth = width / 1.5;
+    let buttonWidth = this.props.width ? this.props.width : width / 1.5;
     if (this.props.hasOwnProperty('noMinWidth')) {
       buttonWidth = 0;
     }

MainBottomTabs.js

@@ -35,7 +35,6 @@ import rbfBumpFee from './screen/transactions/RBFBumpFee';
 import rbfCancel from './screen/transactions/RBFCancel';
 
 import receiveDetails from './screen/receive/details';
-import setReceiveAmount from './screen/receive/receiveAmount';
 
 import sendDetails from './screen/send/details';
 import ScanQRCode from './screen/send/scanQrAddress';
@@ -304,10 +303,6 @@ const MainBottomTabs = createStackNavigator(
       screen: receiveDetails,
     },
 
-    ReceiveAmount: {
-      screen: setReceiveAmount,
-    },
-
     //
 
     // LND:

screen/receive/details.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, InteractionManager, ScrollView } from 'react-native';
+import { View, InteractionManager, Platform, TextInput, KeyboardAvoidingView, Keyboard, StyleSheet, ScrollView } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import bip21 from 'bip21';
 import {
@@ -10,14 +10,18 @@ import {
   BlueButtonLink,
   BlueNavigationStyle,
   is,
+  BlueBitcoinAmount,
+  BlueText,
+  BlueSpacing20,
 } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 import Privacy from '../../Privacy';
 import Share from 'react-native-share';
-import { Chain } from '../../models/bitcoinUnits';
+import { Chain, BitcoinUnit } from '../../models/bitcoinUnits';
+import Modal from 'react-native-modal';
 /** @type {AppStorage} */
-let BlueApp = require('../../BlueApp');
+const BlueApp = require('../../BlueApp');
-let loc = require('../../loc');
+const loc = require('../../loc');
 
 export default class ReceiveDetails extends Component {
   static navigationOptions = ({ navigation }) => ({
@@ -33,7 +37,11 @@ export default class ReceiveDetails extends Component {
     this.state = {
       secret: secret,
       addressText: '',
+      customLabel: '',
+      customAmount: 0,
       bip21encoded: undefined,
+      isCustom: false,
+      isCustomModalVisible: false,
     };
   }
 
@@ -82,12 +90,10 @@ export default class ReceiveDetails extends Component {
           }
           this.setState({
             address: address,
-            addressText: address,
           });
         } else if (wallet.getAddress) {
           this.setState({
             address: wallet.getAddress(),
-            addressText: wallet.getAddress(),
           });
         }
       }
@@ -99,15 +105,102 @@ export default class ReceiveDetails extends Component {
     });
   }
 
-  async componentWillUnmount() {
+  componentWillUnmount() {
     Privacy.disableBlur();
   }
 
+  renderCustomAmountModal = () => {
+    return (
+      <Modal
+        isVisible={this.state.isCustomModalVisible}
+        style={styles.bottomModal}
+        onBackdropPress={() => {
+          Keyboard.dismiss();
+          this.setState({ isCustomModalVisible: false });
+        }}
+      >
+        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'position' : null}>
+          <View style={styles.modalContent}>
+            <BlueBitcoinAmount amount={this.state.customAmount || ''} onChangeText={text => this.setState({ customAmount: text })} />
+            <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,
+              }}
+            >
+              <TextInput
+                onChangeText={text => this.setState({ customLabel: text })}
+                placeholder={loc.receive.details.label}
+                value={this.state.customLabel || ''}
+                numberOfLines={1}
+                style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
+              />
+            </View>
+            <BlueSpacing20 />
+            <View>
+              <BlueButton
+                title={loc.receive.details.create}
+                onPress={() => {
+                  this.setState({
+                    isCustom: true,
+                    isCustomModalVisible: false,
+                    bip21encoded: bip21.encode(this.state.address, { amount: this.state.customAmount, label: this.state.customLabel }),
+                  });
+                }}
+              />
+              <BlueSpacing20 />
+              <BlueButtonLink
+                title="Reset"
+                onPress={() => {
+                  this.setState({
+                    isCustom: false,
+                    isCustomModalVisible: false,
+                    customAmount: '',
+                    customLabel: '',
+                    bip21encoded: bip21.encode(this.state.addresss),
+                  });
+                }}
+              />
+            </View>
+            <BlueSpacing20 />
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  };
+
+  showCustomAmountModal = () => {
+    this.setState({ isCustomModalVisible: true });
+  };
+
   render() {
     return (
       <SafeBlueArea style={{ flex: 1 }}>
         <ScrollView contentContainerStyle={{ justifyContent: 'space-between' }}>
           <View style={{ marginTop: 32, alignItems: 'center', paddingHorizontal: 16 }}>
+            {this.state.isCustom && (
+              <>
+                <BlueText
+                  style={{ color: '#0c2550', fontWeight: '600', fontSize: 36, textAlign: 'center', paddingBottom: 24 }}
+                  numberOfLines={1}
+                >
+                  {this.state.customAmount} {BitcoinUnit.BTC}
+                </BlueText>
+                <BlueText style={{ color: '#0c2550', fontWeight: '600', textAlign: 'center', paddingBottom: 24 }} numberOfLines={1}>
+                  {this.state.customLabel}
+                </BlueText>
+              </>
+            )}
             {this.state.bip21encoded === undefined ? (
               <View style={{ alignItems: 'center', width: 300, height: 300 }}>
                 <BlueLoading />
@@ -124,17 +217,10 @@ export default class ReceiveDetails extends Component {
                 getRef={c => (this.qrCodeSVG = c)}
               />
             )}
-            <BlueCopyTextToClipboard text={this.state.addressText} />
+            <BlueCopyTextToClipboard text={this.state.isCustom ? this.state.bip21encoded : this.state.addressText} />
           </View>
           <View style={{ alignItems: 'center', alignContent: 'flex-end', marginBottom: 24 }}>
-            <BlueButtonLink
+            <BlueButtonLink title={loc.receive.details.setAmount} onPress={this.showCustomAmountModal} />
-              title={loc.receive.details.setAmount}
-              onPress={() => {
-                this.props.navigation.navigate('ReceiveAmount', {
-                  address: this.state.address,
-                });
-              }}
-            />
             <View>
               <BlueButton
                 icon={{
@@ -144,12 +230,12 @@ export default class ReceiveDetails extends Component {
                 }}
                 onPress={async () => {
                   if (this.qrCodeSVG === undefined) {
-                    Share.open({ message: `bitcoin:${this.state.address}` }).catch(error => console.log(error));
+                    Share.open({ message: this.state.bip21encoded }).catch(error => console.log(error));
                   } else {
                     InteractionManager.runAfterInteractions(async () => {
                       this.qrCodeSVG.toDataURL(data => {
                         let shareImageBase64 = {
-                          message: `bitcoin:${this.state.address}`,
+                          message: this.state.bip21encoded,
                           url: `data:image/png;base64,${data}`,
                         };
                         Share.open(shareImageBase64).catch(error => console.log(error));
@@ -161,12 +247,31 @@ export default class ReceiveDetails extends Component {
               />
             </View>
           </View>
+          {this.renderCustomAmountModal()}
         </ScrollView>
       </SafeBlueArea>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  modalContent: {
+    backgroundColor: '#FFFFFF',
+    padding: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    borderColor: 'rgba(0, 0, 0, 0.1)',
+    minHeight: 350,
+    height: 350,
+  },
+  bottomModal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+});
+
 ReceiveDetails.propTypes = {
   navigation: PropTypes.shape({
     goBack: PropTypes.func,

screen/receive/receiveAmount.js

@@ -1,168 +0,0 @@
-import React, { Component } from 'react';
-import { View, Share, TextInput, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
-import QRCode from 'react-native-qrcode-svg';
-import bip21 from 'bip21';
-import {
-  SafeBlueArea,
-  BlueCard,
-  BlueButton,
-  BlueNavigationStyle,
-  BlueBitcoinAmount,
-  BlueText,
-  BlueCopyTextToClipboard,
-} from '../../BlueComponents';
-import PropTypes from 'prop-types';
-import Privacy from '../../Privacy';
-/** @type {AppStorage} */
-let BlueApp = require('../../BlueApp');
-let loc = require('../../loc');
-const { width } = Dimensions.get('window');
-
-export default class ReceiveAmount extends Component {
-  static navigationOptions = ({ navigation }) => ({
-    ...BlueNavigationStyle(navigation, true),
-    title: loc.receive.header,
-    headerLeft: null,
-  });
-
-  static propTypes = {
-    navigation: PropTypes.shape({
-      state: PropTypes.shape({
-        params: PropTypes.shape({
-          address: PropTypes.string,
-        }),
-      }),
-    }),
-  };
-
-  constructor(props) {
-    super(props);
-    let address = props.navigation.state.params.address;
-
-    this.state = {
-      address: address,
-      addressText: address,
-      amount: undefined,
-      label: undefined,
-      amountSet: false,
-    };
-  }
-
-  async componentDidMount() {
-    Privacy.enableBlur();
-  }
-
-  async componentWillUnmount() {
-    Privacy.disableBlur();
-  }
-
-  determineSize = () => {
-    if (width > 312) {
-      return width - 48;
-    }
-    return 312;
-  };
-
-  renderDefault() {
-    return (
-      <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,
-          }}
-        >
-          <TextInput
-            onChangeText={text => this.setState({ label: text })}
-            placeholder={loc.receive.details.label}
-            value={this.state.label || ''}
-            numberOfLines={1}
-            style={{ flex: 1, marginHorizontal: 8, minHeight: 33 }}
-            editable={!this.state.isLoading}
-          />
-        </View>
-        <BlueCard>
-          <BlueButton
-            title={loc.receive.details.create}
-            onPress={() => {
-              this.setState({
-                amountSet: true,
-                bip21: bip21.encode(this.state.address, { amount: this.state.amount, label: this.state.label }),
-              });
-            }}
-          />
-        </BlueCard>
-      </View>
-    );
-  }
-
-  renderWithSetAmount() {
-    return (
-      <View style={{ justifyContent: 'space-between' }}>
-        <BlueText style={{ color: '#0c2550', fontWeight: '600', textAlign: 'center', paddingBottom: 24 }} numberOfLines={1}>
-          {this.state.label}
-        </BlueText>
-        <View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 16 }}>
-          <QRCode
-            value={this.state.bip21}
-            logo={require('../../img/qr-code.png')}
-            size={this.determineSize()}
-            logoSize={90}
-            color={BlueApp.settings.foregroundColor}
-            logoBackgroundColor={BlueApp.settings.brandingColor}
-            ecl={'Q'}
-          />
-        </View>
-        <View style={{ alignItems: 'center', justifyContent: 'space-between' }}>
-          <BlueCopyTextToClipboard text={this.state.bip21} />
-        </View>
-      </View>
-    );
-  }
-
-  render() {
-    return (
-      <SafeBlueArea style={{ flex: 1 }}>
-        <ScrollView>
-          <View style={{ flex: 1, backgroundColor: '#FFFFFF', justifyContent: 'space-between' }}>
-            <KeyboardAvoidingView behavior="position">
-              <BlueBitcoinAmount
-                amount={this.state.amount || ''}
-                onChangeText={text => this.setState({ amount: text })}
-                disabled={this.state.amountSet}
-              />
-              {this.state.amountSet ? this.renderWithSetAmount() : this.renderDefault()}
-            </KeyboardAvoidingView>
-            {this.state.amountSet && (
-              <BlueCard>
-                <BlueButton
-                  icon={{
-                    name: 'share-alternative',
-                    type: 'entypo',
-                    color: BlueApp.settings.buttonTextColor,
-                  }}
-                  onPress={async () => {
-                    Share.share({
-                      message: this.state.bip21,
-                    });
-                  }}
-                  title={loc.receive.details.share}
-                />
-              </BlueCard>
-            )}
-          </View>
-        </ScrollView>
-      </SafeBlueArea>
-    );
-  }
-}