add ability to send tx, form validation on next button

Signed-off-by: Gregory Hill <gregorydhill@outlook.com>
gregdhill · Aug 20, 2020 · 56a8055 · 56a8055
1 parent 35db1af
commit 56a8055
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Ledger BTC Wallet - React
+# Ledger BTC Wallet - React [Testnet]
 
 ```bash
 HTTPS=true yarn start

diff --git a/src/App.tsx b/src/App.tsx
@@ -31,7 +31,6 @@ export default class App extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    // TODO: hide buttons pending form validation
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
   }
@@ -71,6 +70,7 @@ export default class App extends Component<Props, State> {
 
   get previousButton() {
     let currentStep = this.state.currentStep;
+
     if (currentStep > 1) {
       return (
         <Button
@@ -87,9 +87,19 @@ export default class App extends Component<Props, State> {
   }
 
   get nextButton() {
-    let { currentStep } = this.state;
-
-    if (currentStep < 3) {
+    let { currentStep, accounts, outputs } = this.state;
+
+    if (
+      currentStep === 1 &&
+      [...accounts].reduce(
+        (total, [, info]) => (total += info.checked ? 1 : 0),
+        0
+      ) === 0
+    ) {
+      return null;
+    } else if (currentStep === 2 && outputs.size === 0) {
+      return null;
+    } else if (currentStep < 3) {
       return (
         <Button
           variant="primary"

diff --git a/src/bitcoin.ts b/src/bitcoin.ts
@@ -1,4 +1,5 @@
 import * as esplora from "@interlay/esplora-btc-api";
+import * as bitcoin from "bitcoinjs-lib";
 
 export interface UTXO {
   txid: string;
@@ -53,6 +54,20 @@ export class BitcoinApi {
       };
     });
   }
+
+  async broadcastTx(hex: string) {
+    const result = await this.txApi.postTx(hex);
+    return result.data;
+  }
+}
+
+export function getTxLink(txId: string) {
+  return `https://www.blockchain.com/btc-testnet/tx/${txId}`;
+}
+
+export function getTxId(hex: string) {
+  const tx = bitcoin.Transaction.fromHex(hex);
+  return tx.getId();
 }
 
 export function satToBtc(sat: number) {

diff --git a/src/components/SignAndSend.tsx b/src/components/SignAndSend.tsx
@@ -1,7 +1,8 @@
 import React, { Component } from "react";
-import { BitcoinApi, satToBtc, UTXO, AccountInfo } from "../bitcoin";
+import { BitcoinApi, satToBtc, UTXO, AccountInfo, getTxLink } from "../bitcoin";
 import * as ledger from "../ledger";
-import { Button, Form, Jumbotron, Alert } from "react-bootstrap";
+import { Button, Form, Jumbotron, Alert, Spinner } from "react-bootstrap";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 type FormControlElement =
   | HTMLInputElement
@@ -20,17 +21,34 @@ interface State {
   recipient: string;
   satoshis: number;
   txFee: number;
-  loading: boolean;
+  isSigning: boolean;
+  isSending: boolean;
+
+  txId?: string;
   txHex?: string;
   error?: Error;
 }
 
+const LoadingButton = () => (
+  <Button variant="primary" disabled>
+    <Spinner
+      as="span"
+      animation="border"
+      size="sm"
+      role="status"
+      aria-hidden="true"
+    />
+    <span className="sr-only">Loading...</span>
+  </Button>
+);
+
 export default class SignAndSend extends Component<Props> {
   state: State = {
     recipient: "",
     satoshis: 0,
     txFee: 0,
-    loading: false,
+    isSigning: false,
+    isSending: false,
   };
 
   componentDidMount() {
@@ -39,9 +57,26 @@ export default class SignAndSend extends Component<Props> {
     this.setState({ satoshis: total });
   }
 
+  async sendTx(hex: string) {
+    this.setState({ isSending: true });
+
+    try {
+      const txId = await this.props.apiBtc.broadcastTx(hex);
+      this.setState({ txId: txId });
+    } catch (error) {
+      this.setState({ error: error });
+    }
+    this.setState({ isSending: false });
+  }
+
   async createTransaction() {
     // clear error and previous raw tx
-    this.setState({ error: undefined, txHex: undefined });
+    this.setState({
+      error: undefined,
+      txHex: undefined,
+      txId: undefined,
+      isSigning: true,
+    });
     const { recipient, satoshis, txFee } = this.state;
     try {
       const { appBtc, apiBtc, accounts, outputs } = this.props;
@@ -67,6 +102,7 @@ export default class SignAndSend extends Component<Props> {
     } catch (error) {
       this.setState({ error: error });
     }
+    this.setState({ isSigning: false });
   }
 
   handleChange(event: React.ChangeEvent<FormControlElement>) {
@@ -77,7 +113,7 @@ export default class SignAndSend extends Component<Props> {
   }
 
   render() {
-    const { satoshis } = this.state;
+    const { satoshis, txHex, txId } = this.state;
     return (
       <div>
         <Jumbotron>
@@ -115,22 +151,46 @@ export default class SignAndSend extends Component<Props> {
           </Form.Group>
 
           <Form.Group>
-            <Button
-              variant="primary"
-              type="button"
-              onClick={() => this.createTransaction()}
-            >
-              Sign
-            </Button>
+            {!this.state.isSigning && (
+              <Button
+                variant="primary"
+                type="button"
+                onClick={() => this.createTransaction()}
+              >
+                Sign
+              </Button>
+            )}
+            {this.state.isSigning && <LoadingButton />}
           </Form.Group>
 
-          {this.state.txHex && (
-            <Form.Group controlId="toHex">
+          {txHex && (
+            <Form.Group controlId="txHex">
               <Form.Label>Raw Tx</Form.Label>
-              <Form.Control type="text" value={this.state.txHex} readOnly />
+              <Form.Control type="text" value={txHex} readOnly />
             </Form.Group>
           )}
 
+          {txHex && !txId && (
+            <Form.Group controlId="sendTx">
+              {!this.state.isSending && (
+                <Button
+                  variant="primary"
+                  type="button"
+                  onClick={() => this.sendTx(txHex)}
+                >
+                  Send
+                </Button>
+              )}
+              {this.state.isSending && <LoadingButton />}
+            </Form.Group>
+          )}
+
+          {txId && (
+            <Button onClick={() => window.open(getTxLink(txId))}>
+              {txId} <FaExternalLinkAlt className="ml-2" />
+            </Button>
+          )}
+
           {this.state.error && (
             <Form.Group>
               <Alert key="ledgerErr" variant="danger">