diff --git a/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js b/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js index 43a9e44c0..9df9938a8 100644 --- a/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js +++ b/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js @@ -10,8 +10,11 @@ import { LoadingSpinner, } from '@tlon/indigo-react'; +import { Sigil } from './sigil.js'; + import * as bitcoin from 'bitcoinjs-lib'; import * as kg from 'urbit-key-generation'; +import { isValidPatp } from 'urbit-ob'; import Sent from './sent.js' import Error from './error.js' @@ -32,6 +35,8 @@ export default class BridgeInvoice extends Component { this.checkTxHex = this.checkTxHex.bind(this); this.broadCastTx = this.broadCastTx.bind(this); this.sendBitcoin = this.sendBitcoin.bind(this); + this.clickDismiss = this.clickDismiss.bind(this); + this.setInvoiceRef = this.setInvoiceRef.bind(this); } broadCastTx(hex) { @@ -43,6 +48,21 @@ export default class BridgeInvoice extends Component { componentDidMount() { window.open('https://bridge.urbit.org/?kind=btc&utx=' + this.props.psbt); + document.addEventListener("click", this.clickDismiss); + } + + componentWillUnmount(){ + document.removeEventListener("click", this.clickDismiss); + } + + setInvoiceRef(n){ + this.invoiceRef = n; + } + + clickDismiss(e){ + if (this.invoiceRef && !(this.invoiceRef.contains(e.target))){ + this.props.stopSending(); + } } componentDidUpdate(prevProps){ @@ -77,7 +97,7 @@ export default class BridgeInvoice extends Component { } render() { - const { stopSending, payee, denomination, satsAmount, psbt, currencyRates } = this.props; + const { stopSending, payee, denomination, satsAmount, psbt, currencyRates, fee } = this.props; const { error, txHex } = this.state; let inputColor = 'black'; @@ -90,6 +110,19 @@ export default class BridgeInvoice extends Component { inputBorder = 'red'; } + const isShip = isValidPatp(payee); + + const icon = (isShip) + ? + : ; + return ( <> { this.props.state.broadcastSuccess ? @@ -101,60 +134,52 @@ export default class BridgeInvoice extends Component { satsAmount={satsAmount} /> : - - Invoice - stopSending()} - /> - - - - - You are sending - - - {satsToCurrency(satsAmount, denomination, currencyRates)} - {`${satsAmount} sats`} - - - To: - {payee} - - - + + {satsToCurrency(satsAmount, denomination, currencyRates)} + + + {`${satsAmount} sats`} + + + {`Fee: ${satsToCurrency(fee, denomination, currencyRates)} (${fee} sats)`} + + + You are paying + + + {icon} + {payee} + + Bridge signed transaction diff --git a/pkg/btc-wallet/src/js/components/lib/send.js b/pkg/btc-wallet/src/js/components/lib/send.js index 42d6a6b3c..111a69b94 100644 --- a/pkg/btc-wallet/src/js/components/lib/send.js +++ b/pkg/btc-wallet/src/js/components/lib/send.js @@ -224,6 +224,7 @@ export default class Send extends Component { state={this.props.state} api={api} psbt={psbt} + fee={fee} currencyRates={currencyRates} stopSending={stopSending} payee={payee}