Merge pull request #81 from BlueWallet/development

FIX: Added share button to Receive screen. User is now able to tap-to-copy
2025-02-22 15:04:50 +01:00 · 2018-09-29 21:27:04 -04:00 · 2018-09-29 21:27:04 -04:00 · 5a225a7a62
commit 5a225a7a62
parent 83d3a662fd ae2ce9038b
9 changed files with 84 additions and 68 deletions
--- a/BlueComponents.js
+++ b/BlueComponents.js
@ -212,7 +212,7 @@ export class BlueListItem extends Component {
          fontWeight: '500',
        }}
        subtitleStyle={{ color: '#9aa0aa' }}
-        subtitleNumberOfLines={2}
+        subtitleNumberOfLines={1}
      />
    );
  }
--- a/loc/en.js
+++ b/loc/en.js
@ -88,8 +88,8 @@ module.exports = {
    },
    details: {
      title: 'transaction details',
-      from: 'From',
-      to: 'To',
+      from: 'Input',
+      to: 'Output',
      copy: 'Copy',
    },
  },
@ -128,6 +128,8 @@ module.exports = {
    header: 'Receive',
    details: {
      title: 'Share this address with payer',
+      share: 'share',
+      copiedToClipboard: 'Copied to clipboard.',
    },
  },
  settings: {
--- a/loc/es.js
+++ b/loc/es.js
@ -90,13 +90,11 @@ module.exports = {
      title: 'Detalles de Transaccion',
      from: 'De',
      to: 'A',
+      copy: 'Copiar',
    },
  },
  send: {
-    list: {
-      tabBarLabel: 'Enviar',
-      header: 'Elige monedero',
-    },
+    header: 'Elige monedero',
    details: {
      title: 'Crear Transaccion',
      amount_fiels_is_not_valid: 'La cantidad no es válida',
@ -127,12 +125,11 @@ module.exports = {
    },
  },
  receive: {
-    list: {
-      tabBarLabel: 'Recivir',
-      header: 'Elige el monedero',
-    },
+    header: 'Elige el monedero',
    details: {
      title: 'Comparte esta dirección con el pagador',
+      share: 'Compartir',
+      copiedToClipboard: 'Copiado a portapapeles.',
    },
  },
  settings: {
--- a/loc/pt_BR.js
+++ b/loc/pt_BR.js
@ -90,13 +90,11 @@ module.exports = {
      title: 'Detalhes da transação',
      from: 'De',
      to: 'Para',
+      copy: 'Copiar',
    },
  },
  send: {
-    list: {
-      tabBarLabel: 'Enviar',
-      header: 'Enviar',
-    },
+    header: 'Enviar',
    details: {
      title: 'Criar Transacção',
      amount_fiels_is_not_valid: 'Campo de quantia não é válido',
@ -127,12 +125,11 @@ module.exports = {
    },
  },
  receive: {
-    list: {
-      tabBarLabel: 'Receber',
-      header: 'Receber',
-    },
+    header: 'Receber',
    details: {
      title: 'Partilhar este endereço com o pagador',
+      share: '',
+      copiedToClipboard: '',
    },
  },
  settings: {
--- a/loc/pt_PT.js
+++ b/loc/pt_PT.js
@ -90,13 +90,11 @@ module.exports = {
      title: 'Detalhes da transacção',
      from: 'De',
      to: 'Para',
+      copy: 'Copiar',
    },
  },
  send: {
-    list: {
-      tabBarLabel: 'Enviar',
-      header: 'Enviar',
-    },
+    header: 'Enviar',
    details: {
      title: 'Criar Transacção',
      amount_fiels_is_not_valid: 'Campo de quantia não é válido',
@ -127,12 +125,11 @@ module.exports = {
    },
  },
  receive: {
-    list: {
-      tabBarLabel: 'Receber',
-      header: 'Receber',
-    },
+    header: 'Receber',
    details: {
      title: 'Partilhar este endereço com o pagador',
+      share: '',
+      copiedToClipboard: '',
    },
  },
  settings: {
--- a/loc/ru.js
+++ b/loc/ru.js
@ -89,13 +89,11 @@ module.exports = {
      title: 'Детали транзакци',
      from: 'От',
      to: 'Кому',
+      copy: '',
    },
  },
  send: {
-    list: {
-      tabBarLabel: 'Отправить',
-      header: 'Отправить',
-    },
+    header: 'Отправить',
    details: {
      title: 'Создать Транзакцию',
      amount_fiels_is_not_valid: 'Поле не валидно',
@ -126,12 +124,11 @@ module.exports = {
    },
  },
  receive: {
-    list: {
-      tabBarLabel: 'Получить',
-      header: 'Получить',
-    },
+    header: 'Получить',
    details: {
      title: 'Покажите этот адрес плательщику',
+      share: '',
+      copiedToClipboard: '',
    },
  },
  settings: {
--- a/loc/ua.js
+++ b/loc/ua.js
@ -90,13 +90,11 @@ module.exports = {
      title: 'Деталі транзакції',
      from: 'Від',
      to: 'Кому',
+      copy: '',
    },
  },
  send: {
-    list: {
-      tabBarLabel: 'Переказ',
-      header: 'Переказ',
-    },
+    header: 'Переказ',
    details: {
      title: 'Створити Транзакцію',
      amount_fiels_is_not_valid: 'Поле не валідно',
@ -127,12 +125,11 @@ module.exports = {
    },
  },
  receive: {
-    list: {
-      tabBarLabel: 'Отримати',
-      header: 'Отримати',
-    },
+    header: 'Отримати',
    details: {
      title: 'Покажіть цю адресу платникові',
+      share: '',
+      copiedToClipboard: '',
    },
  },
  settings: {
--- a/screen/receive/details.js
+++ b/screen/receive/details.js
@ -1,13 +1,12 @@
 import React, { Component } from 'react';
-import { Dimensions, View } from 'react-native';
+import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native';
 import QRCode from 'react-native-qrcode';
-import { BlueLoading, BlueFormInputAddress, SafeBlueArea, BlueCard, BlueHeaderDefaultSub, is } from '../../BlueComponents';
+import { BlueLoading, SafeBlueArea, BlueButton, BlueHeaderDefaultSub, is } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
 // let EV = require('../../events');
-const { width } = Dimensions.get('window');

 export default class ReceiveDetails extends Component {
  static navigationOptions = {
@ -25,6 +24,7 @@ export default class ReceiveDetails extends Component {
      isLoading: true,
      address: address,
      secret: secret,
+      addressText: '',
    };

    // EV(EV.enum.RECEIVE_ADDRESS_CHANGED, this.refreshFunction.bind(this));
@ -56,6 +56,7 @@ export default class ReceiveDetails extends Component {
        BlueApp.saveToDisk(); // caching whatever getAddressAsync() generated internally
        this.setState({
          address: address,
+          addressText: address,
          isLoading: false,
        });
      }, 1);
@ -63,10 +64,18 @@ export default class ReceiveDetails extends Component {
      this.setState({
        isLoading: false,
        address,
+        addressText: '',
      });
    }
  }

+  copyToClipboard = () => {
+    this.setState({ addressText: loc.receive.details.copiedToClipboard }, () => {
+      Clipboard.setString(this.state.address);
+      setTimeout(() => this.setState({ addressText: this.state.address }), 1000);
+    });
+  };
+
  render() {
    console.log('render() receive/details, address,secret=', this.state.address, ',', this.state.secret);
    if (this.state.isLoading) {
@ -75,27 +84,30 @@ export default class ReceiveDetails extends Component {

    return (
      <SafeBlueArea style={{ flex: 1 }}>
-        <BlueCard
-          containerStyle={{
-            alignItems: 'center',
-            flex: 1,
-            borderColor: 'red',
-            borderWidth: 7,
-          }}
-        >
-          <BlueFormInputAddress editable value={this.state.address} />
-        </BlueCard>
-
-        <View
-          style={{
-            left: (width - ((is.ipad() && 250) || 312)) / 2,
-          }}
-        >
-          <QRCode
-            value={this.state.address}
-            size={(is.ipad() && 250) || 312}
-            bgColor={BlueApp.settings.foregroundColor}
-            fgColor={BlueApp.settings.brandingColor}
+        <View style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <QRCode
+              value={this.state.address}
+              size={(is.ipad() && 300) || 300}
+              bgColor={BlueApp.settings.foregroundColor}
+              fgColor={BlueApp.settings.brandingColor}
+            />
+            <TouchableOpacity onPress={this.copyToClipboard}>
+              <Animated.Text style={styles.address}>{this.state.addressText}</Animated.Text>
+            </TouchableOpacity>
+          </View>
+          <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>
      </SafeBlueArea>
@ -103,6 +115,14 @@ export default class ReceiveDetails extends Component {
  }
 }

+const styles = StyleSheet.create({
+  address: {
+    marginVertical: 32,
+    fontSize: 15,
+    color: '#9aa0aa',
+  },
+});
+
 ReceiveDetails.propTypes = {
  navigation: PropTypes.shape({
    goBack: PropTypes.function,
--- a/screen/transactions/details.js
+++ b/screen/transactions/details.js
@ -1,6 +1,15 @@
 import React, { Component } from 'react';
 import { View, ScrollView, TouchableOpacity, Linking } from 'react-native';
-import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20, BlueCopyToClipboardButton } from '../../BlueComponents';
+import {
+  BlueButton,
+  SafeBlueArea,
+  BlueCard,
+  BlueText,
+  BlueHeaderDefaultSub,
+  BlueLoading,
+  BlueSpacing20,
+  BlueCopyToClipboardButton,
+} from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');