diff --git a/pkg/btc-wallet/src/js/components/lib/balance.js b/pkg/btc-wallet/src/js/components/lib/balance.js index a6e5fe7327..655b1b5142 100644 --- a/pkg/btc-wallet/src/js/components/lib/balance.js +++ b/pkg/btc-wallet/src/js/components/lib/balance.js @@ -71,6 +71,7 @@ export default class Balance extends Component { state={this.props.state} api={api} psbt={this.props.state.psbt} + fee={this.props.state.fee} currencyRates={this.props.state.currencyRates} shipWallets={this.props.state.shipWallets} value={value} diff --git a/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js b/pkg/btc-wallet/src/js/components/lib/bridgeInvoice.js index 43a9e44c04..9df9938a8d 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/invoice.js b/pkg/btc-wallet/src/js/components/lib/invoice.js index f12c4fe452..450eb4e30d 100644 --- a/pkg/btc-wallet/src/js/components/lib/invoice.js +++ b/pkg/btc-wallet/src/js/components/lib/invoice.js @@ -10,12 +10,14 @@ 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 * as bip39 from 'bip39'; import Sent from './sent.js' -import { patp2dec, isValidPatq } from 'urbit-ob'; +import { patp2dec, isValidPatq, isValidPatp } from 'urbit-ob'; import { satsToCurrency } from '../../lib/util.js'; import Error from './error.js'; @@ -56,9 +58,29 @@ export default class Invoice extends Component { broadcasting: false, }; - this.checkTicket = this.checkTicket.bind(this); - this.broadCastTx = this.broadCastTx.bind(this); - this.sendBitcoin = this.sendBitcoin.bind(this); + this.checkTicket = this.checkTicket.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); + } + + componentDidMount(){ + 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, prevState) { @@ -129,7 +151,7 @@ export default class Invoice extends Component { render() { const broadcastSuccess = this.props.state.broadcastSuccess; - const { stopSending, payee, denomination, satsAmount, psbt, currencyRates } = this.props; + const { stopSending, payee, denomination, satsAmount, psbt, currencyRates, fee } = this.props; const { sent, error } = this.state; let inputColor = 'black'; @@ -142,6 +164,19 @@ export default class Invoice extends Component { inputBorder = 'red'; } + const isShip = isValidPatp(payee); + + const icon = (isShip) + ? + : ; + return ( <> { broadcastSuccess ? @@ -153,79 +188,71 @@ export default class Invoice extends Component { satsAmount={satsAmount} /> : - - Invoice - stopSending()} + + {satsToCurrency(satsAmount, denomination, currencyRates)} + + + {`${satsAmount} sats`} + + + {`Fee: ${satsToCurrency(fee, denomination, currencyRates)} (${fee} sats)`} + + + You are paying + + + {icon} + {payee} + + + + + Ticket + + value.replace(/[^~-]+/g, '••••••')} + placeholder="••••••-••••••-••••••-••••••" + autoCapitalize="none" + autoCorrect="off" + color={inputColor} + backgroundColor={inputBg} + borderColor={inputBorder} + onChange={this.checkTicket} /> - - - - You are sending - - - {satsToCurrency(satsAmount, denomination, currencyRates)} - {`${satsAmount} sats`} - - - To: - {payee} - - - - - - Master Key - - - value.replace(/[^~-]+/g, '••••••')} - placeholder="••••••-••••••-••••••-••••••" - autoCapitalize="none" - autoCorrect="off" - color={inputColor} - backgroundColor={inputBg} - borderColor={inputBorder} - onChange={this.checkTicket} - /> {(error !== '') && this.sendBitcoin(this.state.masterTicket, psbt)} diff --git a/pkg/btc-wallet/src/js/components/lib/send.js b/pkg/btc-wallet/src/js/components/lib/send.js index ab2e8fac6b..111a69b940 100644 --- a/pkg/btc-wallet/src/js/components/lib/send.js +++ b/pkg/btc-wallet/src/js/components/lib/send.js @@ -76,9 +76,9 @@ export default class Send extends Component { let high = estimates.length - 1; this.setState({ feeChoices: { - low: [30, n.estimates[30]["sat_per_vbyte"]], + high: [30, n.estimates[30]["sat_per_vbyte"]], mid: [180, n.estimates[180]["sat_per_vbyte"]], - high: [360, n.estimates[360]["sat_per_vbyte"]], + low: [360, n.estimates[360]["sat_per_vbyte"]], } }); }) @@ -198,7 +198,7 @@ export default class Send extends Component { } - const { api, value, conversion, stopSending, denomination, psbt, currencyRates, error, network } = this.props; + const { api, value, conversion, stopSending, denomination, psbt, currencyRates, error, network, fee } = this.props; const { denomAmount, satsAmount, signing, payee, choosingSignMethod, signMethod } = this.state; const signReady = (this.state.ready && (parseInt(this.state.satsAmount) > 0)) && !signing; @@ -210,6 +210,7 @@ export default class Send extends Component { network={network} api={api} psbt={psbt} + fee={fee} currencyRates={currencyRates} stopSending={stopSending} payee={payee} @@ -223,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} diff --git a/pkg/btc-wallet/src/js/components/themes/light.js b/pkg/btc-wallet/src/js/components/themes/light.js index 2d7660ae5b..5688e07fe7 100644 --- a/pkg/btc-wallet/src/js/components/themes/light.js +++ b/pkg/btc-wallet/src/js/components/themes/light.js @@ -98,6 +98,7 @@ const theme = { green: base.green, lightGreen: scales.green30, + midGreen: scales.green60, washedGreen: scales.green10, veryLightGreen: scales.green05,