ADD: open tx in external blockexplorer

BlueComponents.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { LinearGradient, Constants } from 'expo';
 import { Icon, Button, FormLabel, FormInput, Text, Header, List, ListItem } from 'react-native-elements';
-import { TouchableOpacity, ActivityIndicator, View, StyleSheet, Dimensions, Image, SafeAreaView } from 'react-native';
+import { TouchableOpacity, ActivityIndicator, View, StyleSheet, Dimensions, Image, SafeAreaView, Clipboard } from 'react-native';
 import { WatchOnlyWallet, LegacyWallet } from './class';
 import Carousel from 'react-native-snap-carousel';
 import { HDLegacyP2PKHWallet } from './class/hd-legacy-p2pkh-wallet';
@@ -146,6 +146,14 @@ export class BlueButtonLink extends Component {
   }
 }
 
+export const BlueCopyToClipboardButton = ({ stringToCopy }) => {
+  return (
+    <TouchableOpacity {...this.props} onPress={() => Clipboard.setString(stringToCopy)}>
+      <Text style={{ fontSize: 13, fontWeight: '400', color: '#68bbe1' }}>{loc.transactions.details.copy}</Text>
+    </TouchableOpacity>
+  );
+};
+
 export class SafeBlueArea extends Component {
   render() {
     return (

loc/en.js

@@ -87,9 +87,10 @@ module.exports = {
       conf: 'conf',
     },
     details: {
-      title: 'transaction',
-      from: 'Inputs',
-      to: 'Outputs',
+      title: 'transaction details',
+      from: 'From',
+      to: 'To',
+      copy: 'Copy',
     },
   },
   send: {

screen/transactions/details.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { View, ScrollView } from 'react-native';
-import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20 } from '../../BlueComponents';
+import { View, ScrollView, TouchableOpacity, Linking } from 'react-native';
+import { BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub, BlueLoading, BlueSpacing20, BlueCopyToClipboardButton } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -90,21 +90,41 @@ export default class TransactionsDetails extends Component {
               }
             })()}
 
-            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.from}</BlueText>
+            <View style={{ flex: 1, flexDirection: 'row', marginBottom: 4, justifyContent: 'space-between' }}>
+              <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.from}</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={this.state.from.filter(onlyUnique).join(', ')} />
+            </View>
             <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.from.filter(onlyUnique).join(', ')}</BlueText>
 
-            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.to}</BlueText>
+            <View style={{ flex: 1, flexDirection: 'row', marginBottom: 4, justifyContent: 'space-between' }}>
+              <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>{loc.transactions.details.to}</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={this.state.to.filter(onlyUnique).join(', ')} />
+            </View>
             <BlueText style={{ marginBottom: 26, color: 'grey' }}>
               {arrDiff(this.state.from, this.state.to.filter(onlyUnique)).join(', ')}
             </BlueText>
 
-            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Txid</BlueText>
-            <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.hash}</BlueText>
+            <View style={{ flex: 1, flexDirection: 'row', marginBottom: 4, justifyContent: 'space-between' }}>
+              <BlueText style={{ fontSize: 16, fontWeight: '500' }}>Txid</BlueText>
+              <BlueCopyToClipboardButton stringToCopy={this.state.tx.hash} />
+            </View>
+            <TouchableOpacity
+              onPress={() => {
+                const url = `https://live.blockcypher.com/btc/tx/${this.state.tx.hash}`;
+                Linking.canOpenURL(url).then(supported => {
+                  if (supported) {
+                    Linking.openURL(url);
+                  }
+                });
+              }}
+            >
+              <BlueText style={{ marginBottom: 26, color: 'grey' }}>{this.state.tx.hash}</BlueText>
+            </TouchableOpacity>
 
             <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Received</BlueText>
             <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.received)}</BlueText>
 
-            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmed</BlueText>
+            <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Block Height</BlueText>
             <BlueText style={{ marginBottom: 26, color: 'grey' }}>{formatTime(this.state.tx.block_height)}</BlueText>
 
             <BlueText style={{ fontSize: 16, fontWeight: '500', marginBottom: 4 }}>Confirmations</BlueText>