Merge pull request #4979 from urbit/ixv/btc-fixes

btc: bug and style fixes related to fees

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}

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)
+      ? <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'
+              backgroundColor='veryLightGreen'
+              borderRadius='24px'
+              alignItems="center"
             >
-              <Box
-                padding={4}
-              >
-                <Row>
-                  <Text fontSize='14px' fontWeight='500'>You are sending</Text>
-                </Row>
-                <Row
-                  mt={2}
-                >
-                  <Text
-                    color='green'
-                    fontSize='14px'
-                  >{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
-                  <Text
-                    ml={2}
-                    fontSize='14px'
-                    color='gray'
-                  >{`${satsAmount} sats`}</Text>
-                </Row>
-                <Row
-                  mt={2}
-                >
-                  <Text fontSize='14px'>To:</Text>
-                  <Text
-                    ml={2}
-                    fontSize='14px'
-                    style={{'display': 'block', 'overflow-wrap': 'anywhere'}}
-                  >{payee}</Text>
-                </Row>
-              </Box>
-            </Box>
+              <Row>
+                <Text
+                  color='green'
+                  fontSize='40px'
+                >{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
+              </Row>
+              <Row>
+                <Text
+                  fontWeight="bold"
+                  fontSize='16px'
+                  color='midGreen'
+                >{`${satsAmount} sats`}</Text>
+              </Row>
+              <Row mt={2}>
+                <Text
+                  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>
+            </Col>
             <Box mt={3}>
               <Text fontSize='14px' fontWeight='500'>
                 Bridge signed transaction

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)
+      ? <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,79 +188,71 @@ 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'
+            <Col
+              p={5}
+              mt={4}
+              backgroundColor='veryLightGreen'
+              borderRadius='24px'
+              alignItems="center"
             >
-              <Text bold fontSize={1}>Invoice</Text>
-              <Icon
-                icon='X'
-                cursor='pointer'
-                onClick={() => stopSending()}
+              <Row>
+                <Text
+                  color='green'
+                  fontSize='40px'
+                >{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
+              </Row>
+              <Row>
+                <Text
+                  fontWeight="bold"
+                  fontSize='16px'
+                  color='midGreen'
+                >{`${satsAmount} sats`}</Text>
+              </Row>
+              <Row mt={2}>
+                <Text
+                  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>
+            </Col>
+            <Row mt={3} mb={2} alignItems="center">
+              <Text gray fontSize={1} fontWeight='600' mr={4}>
+                Ticket
+              </Text>
+              <Input
+                value={this.state.masterTicket}
+                fontSize="14px"
+                type="password"
+                name="masterTicket"
+                obscure={value => value.replace(/[^~-]+/g, '••••••')}
+                placeholder="••••••-••••••-••••••-••••••"
+                autoCapitalize="none"
+                autoCorrect="off"
+                color={inputColor}
+                backgroundColor={inputBg}
+                borderColor={inputBorder}
+                onChange={this.checkTicket}
               />
             </Row>
-            <Box
-              mt={4}
-              backgroundColor='rgba(0, 159, 101, 0.05)'
-              borderRadius='12px'
-            >
-              <Box
-                padding={4}
-              >
-                <Row>
-                  <Text fontSize='14px' fontWeight='500'>You are sending</Text>
-                </Row>
-                <Row
-                  mt={2}
-                >
-                  <Text
-                    color='green'
-                    fontSize='14px'
-                  >{satsToCurrency(satsAmount, denomination, currencyRates)}</Text>
-                  <Text
-                    ml={2}
-                    fontSize='14px'
-                    color='gray'
-                  >{`${satsAmount} sats`}</Text>
-                </Row>
-                <Row
-                  mt={2}
-                >
-                  <Text fontSize='14px'>To:</Text>
-                  <Text
-                    ml={2}
-                    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
-              </Text>
-            </Box>
-            <Input
-              value={this.state.masterTicket}
-              fontSize="14px"
-              type="password"
-              name="masterTicket"
-              obscure={value => value.replace(/[^~-]+/g, '••••••')}
-              placeholder="••••••-••••••-••••••-••••••"
-              autoCapitalize="none"
-              autoCorrect="off"
-              color={inputColor}
-              backgroundColor={inputBg}
-              borderColor={inputBorder}
-              onChange={this.checkTicket}
-            />
             {(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)}

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}

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,