mirror of
https://github.com/urbit/shrub.git
synced 2024-12-24 03:14:30 +03:00
Merge pull request #4979 from urbit/ixv/btc-fixes
btc: bug and style fixes related to fees
This commit is contained in:
matildepark
GitHub
commit
a0a04746e7
@ -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}
|
||||
|
||||
@ -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)
|
||||
? <Sigil ship={payee} size={24} color="black" classes={''} icon padding={5}/>
|
||||
: <Box backgroundColor="lighterGray"
|
||||
width="24px"
|
||||
height="24px"
|
||||
textAlign="center"
|
||||
alignItems="center"
|
||||
borderRadius="2px"
|
||||
p={1}
|
||||
><Icon icon="Bitcoin" color="gray"/></Box>;
|
||||
|
||||
return (
|
||||
<>
|
||||
{ this.props.state.broadcastSuccess ?
|
||||
@ -101,60 +134,52 @@ export default class BridgeInvoice extends Component {
|
||||
satsAmount={satsAmount}
|
||||
/> :
|
||||
<Col
|
||||
height='400px'
|
||||
ref={this.setInvoiceRef}
|
||||
width='100%'
|
||||
backgroundColor='white'
|
||||
borderRadius='48px'
|
||||
mb={5}
|
||||
p={5}
|
||||
>
|
||||
<Row
|
||||
justifyContent='space-between'
|
||||
alignItems='center'
|
||||
>
|
||||
<Text bold fontSize={1}>Invoice</Text>
|
||||
<Icon
|
||||
icon='X'
|
||||
cursor='pointer'
|
||||
onClick={() => stopSending()}
|
||||
/>
|
||||
</Row>
|
||||
<Box
|
||||
<Col
|
||||
p={5}
|
||||
mt={4}
|
||||
backgroundColor='rgba(0, 159, 101, 0.05)'
|
||||
borderRadius='12px'
|
||||
>
|
||||
<Box
|
||||
padding={4}
|
||||
backgroundColor='veryLightGreen'
|
||||
borderRadius='24px'
|
||||
alignItems="center"
|
||||
>
|
||||
<Row>
|
||||
<Text fontSize='14px' fontWeight='500'>You are sending</Text>
|
||||
</Row>
|
||||
<Row
|
||||
mt={2}
|
||||
>
|
||||
<Text
|
||||
color='green'
|
||||
fontSize='14px'
|
||||
fontSize='40px'
|
||||
>{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
|
||||
</Row>
|
||||
<Row>
|
||||
<Text
|
||||
ml={2}
|
||||
fontSize='14px'
|
||||
color='gray'
|
||||
fontWeight="bold"
|
||||
fontSize='16px'
|
||||
color='midGreen'
|
||||
>{`${satsAmount} sats`}</Text>
|
||||
</Row>
|
||||
<Row
|
||||
mt={2}
|
||||
>
|
||||
<Text fontSize='14px'>To:</Text>
|
||||
<Row mt={2}>
|
||||
<Text
|
||||
ml={2}
|
||||
fontSize='14px'
|
||||
color='midGreen'
|
||||
>{`Fee: ${satsToCurrency(fee, denomination, currencyRates)} (${fee} sats)`}</Text>
|
||||
</Row>
|
||||
<Row mt={4} >
|
||||
<Text fontSize='16px' fontWeight="bold" color="gray">You are paying</Text>
|
||||
</Row>
|
||||
<Row mt={2} alignItems="center">
|
||||
{icon}
|
||||
<Text ml={2}
|
||||
mono
|
||||
color="gray"
|
||||
fontSize='14px'
|
||||
style={{'display': 'block', 'overflow-wrap': 'anywhere'}}
|
||||
>{payee}</Text>
|
||||
</Row>
|
||||
</Box>
|
||||
</Box>
|
||||
</Col>
|
||||
<Box mt={3}>
|
||||
<Text fontSize='14px' fontWeight='500'>
|
||||
Bridge signed transaction
|
||||
|
||||
@ -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';
|
||||
@ -59,6 +61,26 @@ export default class Invoice extends Component {
|
||||
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)
|
||||
? <Sigil ship={payee} size={24} color="black" classes={''} icon padding={5}/>
|
||||
: <Box backgroundColor="lighterGray"
|
||||
width="24px"
|
||||
height="24px"
|
||||
textAlign="center"
|
||||
alignItems="center"
|
||||
borderRadius="2px"
|
||||
p={1}
|
||||
><Icon icon="Bitcoin" color="gray"/></Box>;
|
||||
|
||||
return (
|
||||
<>
|
||||
{ broadcastSuccess ?
|
||||
@ -153,65 +188,56 @@ export default class Invoice extends Component {
|
||||
satsAmount={satsAmount}
|
||||
/> :
|
||||
<Col
|
||||
height='400px'
|
||||
ref={this.setInvoiceRef}
|
||||
width='100%'
|
||||
backgroundColor='white'
|
||||
borderRadius='48px'
|
||||
mb={5}
|
||||
p={5}
|
||||
>
|
||||
<Row
|
||||
justifyContent='space-between'
|
||||
alignItems='center'
|
||||
>
|
||||
<Text bold fontSize={1}>Invoice</Text>
|
||||
<Icon
|
||||
icon='X'
|
||||
cursor='pointer'
|
||||
onClick={() => stopSending()}
|
||||
/>
|
||||
</Row>
|
||||
<Box
|
||||
<Col
|
||||
p={5}
|
||||
mt={4}
|
||||
backgroundColor='rgba(0, 159, 101, 0.05)'
|
||||
borderRadius='12px'
|
||||
>
|
||||
<Box
|
||||
padding={4}
|
||||
backgroundColor='veryLightGreen'
|
||||
borderRadius='24px'
|
||||
alignItems="center"
|
||||
>
|
||||
<Row>
|
||||
<Text fontSize='14px' fontWeight='500'>You are sending</Text>
|
||||
</Row>
|
||||
<Row
|
||||
mt={2}
|
||||
>
|
||||
<Text
|
||||
color='green'
|
||||
fontSize='14px'
|
||||
fontSize='40px'
|
||||
>{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
|
||||
</Row>
|
||||
<Row>
|
||||
<Text
|
||||
ml={2}
|
||||
fontSize='14px'
|
||||
color='gray'
|
||||
fontWeight="bold"
|
||||
fontSize='16px'
|
||||
color='midGreen'
|
||||
>{`${satsAmount} sats`}</Text>
|
||||
</Row>
|
||||
<Row
|
||||
mt={2}
|
||||
>
|
||||
<Text fontSize='14px'>To:</Text>
|
||||
<Row mt={2}>
|
||||
<Text
|
||||
ml={2}
|
||||
fontSize='14px'
|
||||
color='midGreen'
|
||||
>{`Fee: ${satsToCurrency(fee, denomination, currencyRates)} (${fee} sats)`}</Text>
|
||||
</Row>
|
||||
<Row mt={4} >
|
||||
<Text fontSize='16px' fontWeight="bold" color="gray">You are paying</Text>
|
||||
</Row>
|
||||
<Row mt={2} alignItems="center">
|
||||
{icon}
|
||||
<Text ml={2}
|
||||
mono
|
||||
color="gray"
|
||||
fontSize='14px'
|
||||
style={{'display': 'block', 'overflow-wrap': 'anywhere'}}
|
||||
>{payee}</Text>
|
||||
</Row>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box mt={3} mb={2}>
|
||||
<Text gray fontSize={1} fontWeight='600'>
|
||||
Master Key
|
||||
</Col>
|
||||
<Row mt={3} mb={2} alignItems="center">
|
||||
<Text gray fontSize={1} fontWeight='600' mr={4}>
|
||||
Ticket
|
||||
</Text>
|
||||
</Box>
|
||||
<Input
|
||||
value={this.state.masterTicket}
|
||||
fontSize="14px"
|
||||
@ -226,6 +252,7 @@ export default class Invoice extends Component {
|
||||
borderColor={inputBorder}
|
||||
onChange={this.checkTicket}
|
||||
/>
|
||||
</Row>
|
||||
{(error !== '') &&
|
||||
<Row>
|
||||
<Error
|
||||
@ -245,7 +272,10 @@ export default class Invoice extends Component {
|
||||
children='Send BTC'
|
||||
mr={3}
|
||||
fontSize={1}
|
||||
border="none"
|
||||
borderRadius='24px'
|
||||
color={(this.state.ready && !error && !this.state.broadcasting) ? "white" : "lighterGray"}
|
||||
backgroundColor={(this.state.ready && !error && !this.state.broadcasting) ? "green" : "veryLightGray"}
|
||||
py='24px'
|
||||
px='24px'
|
||||
onClick={() => this.sendBitcoin(this.state.masterTicket, psbt)}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -98,6 +98,7 @@ const theme = {
|
||||
|
||||
green: base.green,
|
||||
lightGreen: scales.green30,
|
||||
midGreen: scales.green60,
|
||||
washedGreen: scales.green10,
|
||||
veryLightGreen: scales.green05,
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user