Merge branch 'master' into heath-ledger

package.json

@@ -11,6 +11,7 @@
         "@web3-react/injected-connector": "^6.0.7",
         "bignumber.js": "^9.0.0",
         "classnames": "^2.2.6",
+        "console.history": "^1.5.1",
         "ethereumjs-common": "^1.5.0",
         "ethereumjs-tx": "^2.1.2",
         "history": "^4.9.0",

src/components/deposit/Confirming.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 import { formatSatsToBtc } from '../../utils'
 
@@ -18,7 +19,7 @@ const Confirming = ({ signerFee, error }) => {
           { error ? 'Error confirming transaction' : 'Confirming...' }
         </div>
         <hr />
-        <div className="description">
+        <Description error={error}>
           <div>
             Waiting for transaction confirmations. We’ll send you a browser
             notification when your TBTC is ready to be minted.
@@ -28,10 +29,7 @@ const Confirming = ({ signerFee, error }) => {
             <span className="signer-fee-label">Signer Fee: </span>
             {signerFee} BTC*
           </div>
-        </div>
-        <div className="error">
-          { error }
-        </div>
+        </Description>
       </div>
     </div>
   )

src/components/deposit/GetAddress.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 
-const GetAddress = ({ status, btcAddressError }) => {
+const GetAddress = ({ status, error }) => {
   const [statusText, setStatusText] = useState('Generating BTC address...')
   useEffect(() => {
     if (status === 3) {
@@ -24,12 +25,9 @@ const GetAddress = ({ status, btcAddressError }) => {
           Initiating deposit
         </div>
         <hr />
-        <div className="description">
+        <Description error={error}>
           {statusText}
-        </div>
-        <div className="error">
-          { btcAddressError }
-        </div>
+        </Description>
       </div>
     </div >
   )
@@ -38,7 +36,7 @@ const GetAddress = ({ status, btcAddressError }) => {
 const mapStateToProps = (state, ownProps) => {
   return {
     status: state.deposit.invoiceStatus,
-    btcAddressError: state.deposit.btcAddressError,
+    error: state.deposit.btcAddressError,
   }
 }
 

src/components/deposit/Invoice.js

@@ -3,6 +3,7 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
 import { requestADeposit } from '../../actions'
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 
 const Invoice = ({ requestADeposit, error }) => {
@@ -23,12 +24,9 @@ const Invoice = ({ requestADeposit, error }) => {
           { error ? 'Error initiating deposit' : 'Initiating deposit' }
         </div>
         <hr />
-        <div className="description">
+        <Description error={error}>
           Initiating...
-        </div>
-        <div className="error">
-          { error }
-        </div>
+        </Description>
       </div>
     </div >
   )

src/components/deposit/LotSizeSelector.js

@@ -10,7 +10,7 @@ const LotSizeOption = ({ lotSize, onClick, selected }) => {
       onClick={handleClick}>
         <input type="radio" id={lotSize} name="lot-size" value={lotSize} 
           checked={selected} readOnly />
-        <label className="lot-size-option-label">
+        <label className="lot-size-option-label" htmlFor={lotSize}>
           {lotSize}&nbsp;&nbsp;฿
         </label>
     </li>

src/components/deposit/Pay.js

@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom"
 
 import StatusIndicator from '../svgs/StatusIndicator'
 import CopyAddressField from '../lib/CopyAddressField'
+import Description from "../lib/Description"
 
 import { formatSatsToBtc } from '../../utils'
 
@@ -30,19 +31,16 @@ const PayComponent = ({ btcAddress, btcAmount, signerFee, error }) => {
           Pay: {btcAmount} BTC
         </div>
         <hr />
-        <div className="description">
+        <Description error={error}>
           <div>
             Scan the QR code or click to copy the address below into your wallet.
           </div>
           <div className="signer-fee">
             <span className="signer-fee-label">Signer Fee: </span>
             {signerFee} BTC*
           </div>
-        </div>
-        <CopyAddressField address={btcAddress} qrCodeUrl={btcURL} />
-        <div className="error">
-          { error }
-        </div>
+          <CopyAddressField address={btcAddress} qrCodeUrl={btcURL} />
+        </Description>
       </div>
     </div>
   )

src/components/deposit/Prove.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { useParams, withRouter } from 'react-router-dom'
 
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 
 function Prove(props) {
@@ -16,7 +17,7 @@ class ProveComponent extends Component {
   }
 
   render() {
-    const { provingDeposit, proveDepositError } = this.props
+    const { provingDeposit, error } = this.props
 
     return (
       <div className="prove">
@@ -31,22 +32,19 @@ class ProveComponent extends Component {
             {
               provingDeposit
               ? 'Submitting Proof...'
-              : proveDepositError
+              : error
                 ? 'Error submitting proof'
                 : 'Received!'
             }
           </div>
           <hr />
-          <div className="description">
+          <Description error={error}>
             {
               provingDeposit
               ? 'Generating SPV and submitting to the sidechain...'
               : 'Finally, let’s submit proof to the sidechain and get you your TBTC.'
             }
-          </div>
-          <div className="error">
-            { proveDepositError }
-          </div>
+          </Description>
         </div>
       </div>
     )
@@ -57,7 +55,7 @@ class ProveComponent extends Component {
 const mapStateToProps = (state, ownProps) => {
   return {
       provingDeposit: state.deposit.provingDeposit,
-      proveDepositError: state.deposit.proveDepositError
+      error: state.deposit.proveDepositError
   }
 }
 

src/components/deposit/Start.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import history from '../../history'
 import { requestPermission } from '../../lib/notifications'
 import { selectLotSize, requestAvailableLotSizes } from '../../actions'
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 import BTCLogo from '../svgs/btclogo'
 import { useWeb3React } from '@web3-react/core'
@@ -51,13 +52,11 @@ const Start = ({
         { error ? 'Error getting available lot sizes' : 'Select Lot Size' }
       </div>
       <hr />
-      <div className={error ? "error" : "description"}>
-        { error ? error : (
-          <LotSizeSelector
-            lotSizes={availableLotSizes}
-            onSelect={selectLotSize} />
-        )}
-      </div>
+      <Description error={error}>
+        <LotSizeSelector
+          lotSizes={availableLotSizes}
+          onSelect={selectLotSize} />
+      </Description>
       <div className='cta'>
         <button
           onClick={handleClickPay}

src/components/lib/CopyAddressField.js

@@ -15,30 +15,28 @@ const CopyAddressField = ({ address, qrCodeUrl }) => {
   }
 
   return (
-    <div className="copy-address-field">
-      <div className="copy-address">
-        { qrCodeUrl ? (
-          <div className="qr-code-wrapper">
-            <QRCodeIcon />
-            <div className="qr-code">
-              <QRCode
-                value={qrCodeUrl}
-                renderAs="svg"
-                size={225} />
-            </div>
+    <div className="copy-address-field" onClick={handleCopyClick}>
+      { qrCodeUrl ? (
+        <div className="qr-code-wrapper">
+          <QRCodeIcon />
+          <div className="qr-code">
+            <QRCode
+              value={qrCodeUrl}
+              renderAs="svg"
+              size={225} />
           </div>
-        ) : ''}
-        <div className="address" onClick={handleCopyClick}>
-          {address}
-        </div>
-        <div className="copy-text">
-          { isCopied ? 'copied!' : 'copy' }
         </div>
+      ) : ''}
+      <div className="address">
+        {address}
+      </div>
+      <div className="copy-text">
+        { isCopied ? 'copied!' : 'copy' }
       </div>
       <textarea
-          className="hidden-copy-field"
-          ref={hiddenCopyFieldRef}
-          defaultValue={address || ''} />
+        className="hidden-copy-field"
+        ref={hiddenCopyFieldRef}
+        defaultValue={address || ''} />
     </div>
   )
 }

src/components/lib/Description.js

@@ -0,0 +1,9 @@
+import React from "react"
+
+const Description = ({ children, error }) => (
+  <div className={error ? "error" : "description"}>
+    { error ? error : children }
+  </div>
+)
+
+export default Description

src/components/lib/Footer.js

@@ -9,7 +9,8 @@ class Footer extends Component {
     email: '',
     success: false,
     error: '',
-    loading: false
+    loading: false,
+    errorLogUrl: ''
   }
 
   handleInput = (evt) => {
@@ -51,6 +52,15 @@ class Footer extends Component {
     }
   }
 
+  handleDownloadError = (e) => {
+    const blob = new Blob(
+      [JSON.stringify(console.history, null, 2)], { type: 'application/json' }
+    )
+    this.setState({
+      errorLogUrl: window.URL.createObjectURL(blob)
+    })
+  }
+
   render() {
     const { includeSubscription } = this.props
     const { email, error, success, loading } = this.state
@@ -68,6 +78,12 @@ class Footer extends Component {
               </a>
             </div>
           </div>
+          <a
+            className="download-error-button" onClick={this.handleDownloadError}
+            href={this.state.errorLogUrl}
+            download={`tbtc-dapp-console-log-${new Date().getTime()}.json`}>
+              Download Error Log ↓
+          </a>
         </div>
         {
           includeSubscription && (

src/components/lib/index.js

@@ -1,9 +1,11 @@
+import Description from './Description'
 import Footer from './Footer'
 import Header from './Header'
 import Modal from './Modal'
 import Web3Status from './Web3Status'
 
 export {
+    Description,
     Footer,
     Header,
     Modal,

src/components/redemption/Confirming.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
+import Description from "../lib/Description"
 import StatusIndicator from '../svgs/StatusIndicator'
 
 const Confirming = ({ txHash, btcNetwork, error }) => {
@@ -20,24 +21,17 @@ const Confirming = ({ txHash, btcNetwork, error }) => {
           { error ? 'Error confirming transaction' : 'Confirming...' }
         </div>
         <hr />
-        <div className="description">
+        <Description error={error}>
           <p>We're waiting to confirm your transaction.</p>
           {
             txHash
-            ? <a className=""href={blockExplorerUrl}
+            ? <a href={blockExplorerUrl}
                 target="_blank" rel="noopener noreferrer">
                   Follow along in block explorer
               </a>
             : ''
           }
-          {
-            error
-            ? <div className="error">
-                { error }
-              </div>
-            : ''
-          }
-        </div>
+        </Description>
       </div>
     </div>
   )