Improve broadcasting experience #66

MainBottomTabs.js

@@ -22,6 +22,7 @@ import sendDetails from './screen/send/details';
 import sendScanQrAddress from './screen/send/scanQrAddress';
 import sendCreate from './screen/send/create';
 import Confirm from './screen/send/confirm';
+import Success from './screen/send/success';
 
 import ManageFunds from './screen/lnd/manageFunds';
 import ScanLndInvoice from './screen/lnd/scanLndInvoice';
@@ -56,6 +57,15 @@ const WalletsStackNavigator = createStackNavigator({
   },
 });
 
+const SuccessTransactionStackNavigation = createStackNavigator(
+  {
+    Success: {
+      screen: Success,
+    },
+  },
+  { mode: 'modal', headerMode: 'none' },
+);
+
 const CreateTransactionStackNavigator = createStackNavigator({
   SendDetails: {
     screen: sendDetails,
@@ -113,6 +123,13 @@ const Tabs = createStackNavigator(
     TransactionDetails: {
       screen: details,
     },
+    Success: {
+      screen: SuccessTransactionStackNavigation,
+      navigationOptions: {
+        header: null,
+        gesturesEnabled: false,
+      },
+    },
     RBF: {
       screen: rbf,
     },

loc/en.js

@@ -117,6 +117,9 @@ module.exports = {
       header: 'Confirm',
       sendNow: 'Send now',
     },
+    success: {
+      done: 'Done',
+    },
     create: {
       details: 'Details',
       title: 'create transaction',

loc/es.js

@@ -97,6 +97,13 @@ module.exports = {
   },
   send: {
     header: 'enviar',
+    confirm: {
+      header: 'Confirm',
+      sendNow: 'Send now',
+    },
+    success: {
+      done: 'Done',
+    },
     details: {
       title: 'Crear Transaccion',
       amount_field_is_not_valid: 'La cantidad no es válida',
@@ -116,6 +123,7 @@ module.exports = {
     },
     create: {
       title: 'Crear una Transaccion',
+      details: 'Detalles',
       error: 'Error al crear una transacción. ¿Dirección o cantidad estan invalidas?',
       go_back: 'Regresar',
       this_is_hex: 'Este es representacion hex de transacción, firmado y listo para ser transmitido a la red. ¿Continuar?',

loc/pt_BR.js

@@ -98,6 +98,13 @@ module.exports = {
   },
   send: {
     header: 'Enviar',
+    confirm: {
+      header: 'Confirm',
+      sendNow: 'Send now',
+    },
+    success: {
+      done: 'Done',
+    },
     details: {
       title: 'Criar Transacção',
       amount_field_is_not_valid: 'Campo de quantia não é válido',
@@ -117,6 +124,7 @@ module.exports = {
     },
     create: {
       title: 'Criar Transacção',
+      details: 'Details',
       error: 'Erro ao criar transação. Endereço inválido ou quantia?',
       go_back: 'Voltar',
       this_is_hex: 'Este é o hex da transação, assinado e pronto para ser difundido para a network. Continuar?',

loc/pt_PT.js

@@ -97,6 +97,13 @@ module.exports = {
   },
   send: {
     header: 'Enviar',
+    confirm: {
+      header: 'Confirm',
+      sendNow: 'Send now',
+    },
+    success: {
+      done: 'Done',
+    },
     details: {
       title: 'Criar Transacção',
       amount_field_is_not_valid: 'Campo de quantia não é válido',
@@ -116,6 +123,7 @@ module.exports = {
     },
     create: {
       title: 'Criar Transacção',
+      details: 'Details',
       error: 'Erro ao criar transacção. Endereço inválido ou quantia?',
       go_back: 'Voltar',
       this_is_hex: 'Este é o hex da transacção, assinado e pronto para ser difundido para a network. Continuar?',

loc/ru.js

@@ -96,6 +96,13 @@ module.exports = {
   },
   send: {
     header: 'Отправить',
+    confirm: {
+      header: 'Confirm',
+      sendNow: 'Send now',
+    },
+    success: {
+      done: 'Done',
+    },
     details: {
       title: 'Создать Транзакцию',
       amount_field_is_not_valid: 'Поле не валидно',
@@ -115,6 +122,7 @@ module.exports = {
     },
     create: {
       title: 'Создать Транзакцию',
+      details: 'Details',
       error: 'Ошибка при создании транзакции. Неправильный адрес назначения или недостаточно средств?',
       go_back: 'Назад',
       this_is_hex: 'Это данные транзакции. Транзакция подписана и готова быть транслирована в сеть. Продолжить?',

loc/ua.js

@@ -113,8 +113,16 @@ module.exports = {
       create: 'Створити',
       remaining_balance: 'Залишок балансу',
     },
+    confirm: {
+      header: 'Confirm',
+      sendNow: 'Send now',
+    },
+    success: {
+      done: 'Done',
+    },
     create: {
       title: 'Створити Транзакцію',
+      details: 'Details',
       error: 'Помилка при створенні транзакції. Невiрна адреса призначення або недостатньо коштiв?',
       go_back: 'Назад',
       this_is_hex: 'Це дані транзакції. Транзакція підписана і готова бути трансльована в мережу. Продовжити?',

screen/send/confirm.js

@@ -53,8 +53,12 @@ export default class Confirm extends Component {
         alert(JSON.stringify(result.error));
       } else {
         EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED); // someone should fetch txs
-        alert('Transaction has been successfully broadcasted. Your transaction ID is: ' + JSON.stringify(result.result));
-        this.props.navigation.navigate('Wallets');
+        this.props.navigation.navigate('Success', {
+          satoshiPerByte: Number(this.state.satoshiPerByte),
+          amount: this.state.amount,
+          address: this.state.address,
+          dismissModal: () => this.props.navigation.dismiss(),
+        });
       }
     });
   }
@@ -62,7 +66,7 @@ export default class Confirm extends Component {
   render() {
     return (
       <SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
-        <BlueHeaderDefaultSub leftText={loc.send.confirm.header.toLowerCase()} onClose={() => navigation.goBack(null)} />
+        <BlueHeaderDefaultSub leftText={loc.send.confirm.header.toLowerCase()} rightComponent={null} />
         <BlueCard style={{ alignItems: 'center', flex: 1 }}>
           <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
             <Text
@@ -155,6 +159,7 @@ Confirm.propTypes = {
     goBack: PropTypes.function,
     getParam: PropTypes.function,
     navigate: PropTypes.function,
+    dismiss: PropTypes.function,
     state: PropTypes.shape({
       params: PropTypes.shape({
         amount: PropTypes.string,

screen/send/create.js

@@ -44,8 +44,12 @@ export default class SendCreate extends Component {
         alert(JSON.stringify(result.error));
       } else {
         EV(EV.enum.REMOTE_TRANSACTIONS_COUNT_CHANGED); // someone should fetch txs
-        alert('Transaction has been successfully broadcasted. Your transaction ID is: ' + JSON.stringify(result.result));
-        this.props.navigation.navigate('Wallets');
+        this.props.navigation.navigate('Success', {
+          satoshiPerByte: Number(this.state.satoshiPerByte),
+          amount: this.state.amount,
+          address: this.state.address,
+          dismissModal: () => this.props.navigation.dismiss(),
+        });
       }
     });
   }
@@ -53,7 +57,7 @@ export default class SendCreate extends Component {
   render() {
     return (
       <SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
-        <BlueHeaderDefaultSub leftText={loc.send.create.details.toLowerCase()} onClose={() => this.props.navigation.goBack(null)} />
+        <BlueHeaderDefaultSub leftText={loc.send.create.details.toLowerCase()} rightComponent={null} />
         <ScrollView>
           <BlueCard style={{ alignItems: 'center', flex: 1 }}>
             <BlueText style={{ color: '#0c2550', fontWeight: '500' }}>{loc.send.create.this_is_hex}</BlueText>
@@ -135,6 +139,7 @@ SendCreate.propTypes = {
     goBack: PropTypes.function,
     getParam: PropTypes.function,
     navigate: PropTypes.function,
+    dismiss: PropTypes.function,
     state: PropTypes.shape({
       params: PropTypes.shape({
         amount: PropTypes.string,

screen/send/details.js

@@ -46,7 +46,7 @@ export default class SendDetails extends Component {
     let fromAddress;
     if (props.navigation.state.params) fromAddress = props.navigation.state.params.fromAddress;
     let fromSecret;
-    if (props.navigation.state.params.fromSecret) fromSecret = props.navigation.state.params.fromSecret;
+    if (props.navigation.state.params) fromSecret = props.navigation.state.params.fromSecret;
     let fromWallet = {};
 
     let startTime2 = Date.now();
@@ -538,7 +538,8 @@ SendDetails.propTypes = {
       params: PropTypes.shape({
         address: PropTypes.string,
         fromAddress: PropTypes.string,
-        fromSecret: PropTypes.string,
+        satoshiPerByte: PropTypes.string,
+        fromSecret: PropTypes.fromSecret,
         memo: PropTypes.string,
       }),
     }),

screen/send/success.js

@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import { Image, View } from 'react-native';
+import { Text } from 'react-native-elements';
+import { BlueButton, SafeBlueArea, BlueCard } from '../../BlueComponents';
+import { BitcoinUnit } from '../../models/bitcoinUnits';
+import PropTypes from 'prop-types';
+/** @type {AppStorage} */
+// let BlueApp = require('../../BlueApp');
+let loc = require('../../loc');
+
+export default class Success extends Component {
+  constructor(props) {
+    super(props);
+    console.log('send/create constructor');
+
+    this.state = {
+      amount: props.navigation.state.params.amount,
+      address: props.navigation.state.params.address,
+      satoshiPerByte: props.navigation.getParam('satoshiPerByte'),
+    };
+  }
+
+  async componentDidMount() {
+    console.log('send/create - componentDidMount');
+    console.log('address = ', this.state.address);
+  }
+
+  render() {
+    return (
+      <SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
+        <BlueCard style={{ alignItems: 'center', flex: 1 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 76, paddingBottom: 16 }}>
+            <Text
+              style={{
+                color: '#0f5cc0',
+                fontSize: 36,
+                fontWeight: '600',
+              }}
+            >
+              {this.state.amount}
+            </Text>
+            <Text
+              style={{
+                color: '#0f5cc0',
+                fontSize: 16,
+                marginHorizontal: 4,
+                paddingBottom: 6,
+                fontWeight: '600',
+                alignSelf: 'flex-end',
+              }}
+            >
+              {' ' + BitcoinUnit.BTC}
+            </Text>
+          </View>
+          <Text
+            style={{
+              color: '#37c0a1',
+              fontSize: 14,
+              marginHorizontal: 4,
+              paddingBottom: 6,
+              fontWeight: '500',
+              alignSelf: 'center',
+            }}
+          >
+            {Number(this.state.satoshiPerByte).toFixed(0)} {BitcoinUnit.SATS}
+          </Text>
+        </BlueCard>
+        <View
+          style={{
+            backgroundColor: '#ccddf9',
+            width: 120,
+            height: 120,
+            borderRadius: 60,
+            alignSelf: 'center',
+            justifyContent: 'center',
+            marginTop: 43,
+            marginBottom: 53,
+          }}
+        >
+          <Image style={{ alignSelf: 'center' }} source={require('../../img/baseline-check-24-px.png')} />
+        </View>
+        <BlueCard>
+          <BlueButton
+            onPress={() => {
+              this.props.navigation.getParam('dismissModal')();
+            }}
+            title={loc.send.success.done}
+            style={{ maxWidth: 263, paddingHorizontal: 56 }}
+          />
+        </BlueCard>
+      </SafeBlueArea>
+    );
+  }
+}
+
+Success.propTypes = {
+  navigation: PropTypes.shape({
+    goBack: PropTypes.function,
+    getParam: PropTypes.function,
+    navigate: PropTypes.function,
+    state: PropTypes.shape({
+      params: PropTypes.shape({
+        amount: PropTypes.string,
+        satoshiPerByte: PropTypes.number,
+        address: PropTypes.string,
+      }),
+    }),
+  }),
+};