btc: invoice page style fixes and fee display

2025-01-02 17:43:32 +03:00 · 2021-06-03 14:28:12 -07:00 · 2021-06-03 14:28:12 -07:00 · ee865af32f
commit ee865af32f
parent cb7da7cbba
4 changed files with 103 additions and 70 deletions
--- 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}
--- 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)
+      ? <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)}
--- a/pkg/btc-wallet/src/js/components/lib/send.js
+++ b/pkg/btc-wallet/src/js/components/lib/send.js
@ -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}
--- 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,