BlueWallet/screen/transactions/RBF-create.js

/** @type {AppStorage}  */
let BlueApp = require('../../BlueApp')
import React, { Component } from 'react';
import { ActivityIndicator, TextInput,  View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { SafeAreaView, } from 'react-navigation';
import { Icon, Card, Header, } from 'react-native-elements'
import { List, Button, ListItem } from 'react-native-elements'
import { FormLabel, FormInput, Text, FormValidationMessage } from 'react-native-elements'
import {
  BlueLoading, BlueSpacing20, BlueList, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueListItem, BlueHeader,
  BlueFormInput, BlueSpacing
} from '../../BlueComponents'
let EV = require('../../events')
let BigNumber = require('bignumber.js')
let bitcoinjs = require('bitcoinjs-lib')

export default class SendCreate extends Component {


  static navigationOptions = {
    tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons
        name={focused ? 'ios-list-box' : 'ios-list-box-outline'}
        size={26}
        style={{ color: tintColor }}
      />
    ),
  }

  constructor(props) {
    super(props);
    console.log('send/create constructor')
    if (!props.navigation.state.params.feeDelta) {
      props.navigation.state.params.feeDelta = '0'
    }
    this.state = {
      isLoading : true,
      feeDelta: props.navigation.state.params.feeDelta,
      newDestinationAddress: props.navigation.state.params.newDestinationAddress,
      txid: props.navigation.state.params.txid,
      sourceTx: props.navigation.state.params.sourceTx,
      fromWallet: props.navigation.state.params.sourceWallet,
    }

  }

  async componentDidMount() {
    console.log('RBF-create - componentDidMount')

    let utxo = []

    let lastSequence = 0
    let totalInputAmountSatoshi = 0
    for (let input of this.state.sourceTx.inputs){
      if (input.sequence > lastSequence) {
        lastSequence = input.sequence
      }
      totalInputAmountSatoshi += input.output_value
      // let amount = new BigNumber(input.output_value)
      // amount = amount.div(10000000).toString(10)
      utxo.push({
        tx_hash : input.prev_hash,
        tx_output_n : input.output_index,
        value: input.output_value,
      })
    }

    // check seq=MAX and fail if it is
    if (lastSequence === bitcoinjs.Transaction.DEFAULT_SEQUENCE) {
      return this.setState({
        isLoading: false,
        nonReplaceable : true
      })
      // lastSequence = 1
    }

    let tx_metadata = BlueApp.tx_metadata[this.state.txid]
    if (tx_metadata) {
      if (tx_metadata.last_sequence) {
        lastSequence = Math.max(lastSequence, tx_metadata.last_sequence)
      }
    }

    lastSequence += 1

    let changeAddress
    let transferAmount
    let totalOutputAmountSatoshi = 0
    for (let o of this.state.sourceTx.outputs) {
      totalOutputAmountSatoshi += o.value
      if (o.addresses[0] === this.state.fromWallet.getAddress()) { // change
        changeAddress = o.addresses[0]
      } else {
        transferAmount = new BigNumber(o.value)
        transferAmount = transferAmount.div(100000000).toString(10)
      }
    }
    let oldFee = new BigNumber(totalInputAmountSatoshi - totalOutputAmountSatoshi)
    oldFee = parseFloat(oldFee.div(100000000).toString(10))

    console.log('changeAddress = ', changeAddress)
    console.log('utxo', utxo)
    console.log('lastSequence', lastSequence)
    console.log('totalInputAmountSatoshi', totalInputAmountSatoshi)
    console.log('totalOutputAmountSatoshi', totalOutputAmountSatoshi)
    console.log('transferAmount', transferAmount)
    console.log('oldFee', oldFee)


    let newFee = new BigNumber(oldFee)
    newFee = newFee.add(this.state.feeDelta).toString(10)
    console.log('new Fee', newFee)


    // creating TX

    setTimeout(() => { // more responsive
      let tx
      try {
        tx = this.state.fromWallet.createTx(utxo, transferAmount, newFee, this.state.newDestinationAddress, false, lastSequence)
        BlueApp.tx_metadata[this.state.txid] = tx_metadata || {}
        BlueApp.tx_metadata[this.state.txid]['last_sequence'] = lastSequence

        // in case new TX get confirmed, we must save metadata under new txid
        let bitcoin = require('bitcoinjs-lib');
        let txDecoded = bitcoin.Transaction.fromHex(tx);
        let txid = txDecoded.getId();
        BlueApp.tx_metadata[txid] = BlueApp.tx_metadata[this.state.txid]
        BlueApp.tx_metadata[txid]['txhex'] = tx
        //
        BlueApp.saveToDisk()
        console.log('BlueApp.tx_metadata[this.state.txid]', BlueApp.tx_metadata[this.state.txid])
      } catch (err) {
        console.log(err)
        return this.setState({
          isError: true,
          errorMessage: JSON.stringify(err.message)
        })
      }

      let newFeeSatoshi = new BigNumber(newFee)
      newFeeSatoshi = parseInt(newFeeSatoshi.mul(100000000))
      let satoshiPerByte =  Math.round(newFeeSatoshi / (tx.length/2))
      this.setState({
        isLoading: false,
        size: Math.round(tx.length/2),
        tx,
        satoshiPerByte : satoshiPerByte,
        amount : transferAmount,
        fee: newFee,
      })
    }, 10)
  }

  async broadcast() {
    console.log('broadcasting', this.state.tx)
    let result = await this.state.fromWallet.broadcastTx(this.state.tx)
    console.log('broadcast result = ', result)
    if (typeof result === 'string') {
      result = JSON.parse(result)
    }
    if ((result && result.error)) {
      this.setState({broadcastErrorMessage : JSON.stringify(result.error), broadcastSuccessMessage : ''})
    } else {
      this.setState({broadcastErrorMessage : ''})
      this.setState({broadcastSuccessMessage : 'Success! TXID: ' + JSON.stringify(result.result)})
    }
  }


  render() {
    const {navigate} = this.props.navigation;

    if (this.state.isError) {
      return (
        <SafeBlueArea  style={{flex: 1, paddingTop: 20}}>
          <BlueSpacing/>
          <BlueCard title={"Replace Transaction"} style={{alignItems: 'center', flex: 1}}>
            <BlueText>Error creating transaction. Invalid address or send amount?</BlueText>
            <FormValidationMessage>{this.state.errorMessage}</FormValidationMessage>
          </BlueCard>
          <BlueButton
            onPress={() =>this.props.navigation.goBack()}
            title="Go back"
          />
        </SafeBlueArea>
      );
    }

    if (this.state.isLoading) {
      return (
        <BlueLoading/>
      );
    }

    if (this.state.nonReplaceable) {
      return (
        <SafeBlueArea style={{flex: 1, paddingTop: 20}}>
          <BlueSpacing20/>
          <BlueSpacing20/>
          <BlueSpacing20/>
          <BlueSpacing20/>
          <BlueSpacing20/>

          <BlueText h4>This transaction is not replaceable</BlueText>

          <BlueButton
            onPress={() =>
              this.props.navigation.goBack()
            }
            title="Back"
          />
        </SafeBlueArea>
      );
    }




    return (
      <SafeBlueArea  style={{flex: 1, paddingTop: 20}}>
        <BlueSpacing/>
        <BlueCard title={"Replace Transaction"} style={{alignItems: 'center', flex: 1}}>

          <BlueText>This is transaction hex, signed and ready to be broadcast to the network. Continue?</BlueText>

          <TextInput
            style={{borderColor: '#ebebeb', borderWidth: 1, marginTop:20, color:'#ebebeb'}}
            maxHeight={70}
            multiline={true}
            editable={false}
            value={this.state.tx}
          />

          <BlueSpacing20/>

          <BlueText style={{paddingTop:20}} >To: {this.state.newDestinationAddress}</BlueText>
          <BlueText>Amount: {this.state.amount} BTC</BlueText>
          <BlueText>Fee: {this.state.fee} BTC</BlueText>
          <BlueText>TX size: {this.state.size} Bytes</BlueText>
          <BlueText>satoshiPerByte: {this.state.satoshiPerByte} Sat/B</BlueText>

        </BlueCard>




        <BlueButton
          icon={{name: 'megaphone', type: 'octicon'}}
          onPress={() =>
            this.broadcast()
          }
          title="Broadcast"
        />


        <BlueButton
          icon={{name: 'arrow-left', type: 'octicon'}}
          onPress={() =>
            this.props.navigation.goBack()
          }
          title="Go back"
        />

        <FormValidationMessage>{this.state.broadcastErrorMessage}</FormValidationMessage>
        <Text style={{padding:20, color:"#080"}}>{this.state.broadcastSuccessMessage}</Text>





      </SafeBlueArea>
    );
  }
}