shrub/pkg/btc-wallet/src/js/components/lib/balance.js

import React, { Component } from 'react';
import { Row, Text, Button, Col } from '@tlon/indigo-react';
import Send from './send.js';
import CurrencyPicker from './currencyPicker.js';
import { satsToCurrency } from '../../lib/util.js';
import { store } from '../../store.js';

export default class Balance extends Component {
  constructor(props) {
    super(props);

    this.state = {
      sending: false,
      copiedButton: false,
      copiedString: false,
    };

    this.copyAddress = this.copyAddress.bind(this);
  }

  copyAddress(arg) {
    let address = this.props.state.address;
    navigator.clipboard.writeText(address);
    this.props.api.btcWalletCommand({ 'gen-new-address': null });

    if (arg === 'button') {
      this.setState({ copiedButton: true });
      setTimeout(() => {
        this.setState({ copiedButton: false });
      }, 2000);
    } else if (arg === 'string') {
      this.setState({ copiedString: true });
      setTimeout(() => {
        this.setState({ copiedString: false });
      }, 2000);
    }
  }

  render() {
    const sats = this.props.state.confirmedBalance || 0;
    const unconfirmedSats = this.props.state.unconfirmedBalance;

    const unconfirmedString = unconfirmedSats ? ` (${unconfirmedSats}) ` : '';

    const denomination = this.props.state.denomination;
    const value = satsToCurrency(
      sats,
      denomination,
      this.props.state.currencyRates
    );
    const sendDisabled = sats === 0;
    const addressText =
      this.props.state.address === null
        ? ''
        : this.props.state.address.slice(0, 6) +
          '...' +
          this.props.state.address.slice(-6);

    const conversion = this.props.state.currencyRates[denomination].last;

    return (
      <>
        {this.state.sending ? (
          <Send
            state={this.props.state}
            api={this.props.api}
            psbt={this.props.state.psbt}
            fee={this.props.state.fee}
            currencyRates={this.props.state.currencyRates}
            shipWallets={this.props.state.shipWallets}
            value={value}
            denomination={denomination}
            sats={sats}
            conversion={conversion}
            network={this.props.network}
            error={this.props.state.error}
            stopSending={() => {
              this.setState({ sending: false });
              store.handleEvent({
                data: { psbt: '', fee: 0, error: '', 'broadcast-fail': null },
              });
            }}
          />
        ) : (
          <Col
            height="400px"
            width="100%"
            backgroundColor="white"
            borderRadius="48px"
            justifyContent="space-between"
            mb={5}
            p={5}
          >
            <Row justifyContent="space-between">
              <Text color="orange" fontSize={1}>
                Balance
              </Text>
              <Text
                color="lightGray"
                fontSize="14px"
                mono
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  this.copyAddress('string');
                }}
              >
                {this.state.copiedString ? 'copied' : addressText}
              </Text>
              <CurrencyPicker
                api={this.props.api}
                denomination={denomination}
                currencies={this.props.state.currencyRates}
              />
            </Row>
            <Col justifyContent="center" alignItems="center">
              <Text
                fontSize="40px"
                color="orange"
                style={{ whiteSpace: 'nowrap' }}
              >
                {value}
              </Text>
              <Text
                fontSize={1}
                color="orange"
              >{`${sats}${unconfirmedString} sats`}</Text>
            </Col>
            <Row flexDirection="row-reverse">
              <Button
                disabled={sendDisabled}
                fontSize={1}
                fontWeight="bold"
                color={sendDisabled ? 'lighterGray' : 'white'}
                backgroundColor={sendDisabled ? 'veryLightGray' : 'orange'}
                style={{ cursor: sendDisabled ? 'default' : 'pointer' }}
                borderColor="none"
                borderRadius="24px"
                height="48px"
                onClick={() => this.setState({ sending: true })}
              >
                Send
              </Button>
              <Button
                mr={3}
                disabled={this.state.copiedButton}
                fontSize={1}
                fontWeight="bold"
                color={this.state.copiedButton ? 'green' : 'orange'}
                backgroundColor={
                  this.state.copiedButton ? 'veryLightGreen' : 'midOrange'
                }
                style={{
                  cursor: this.state.copiedButton ? 'default' : 'pointer',
                }}
                borderColor="none"
                borderRadius="24px"
                height="48px"
                onClick={() => {
                  this.copyAddress('button');
                }}
              >
                {this.state.copiedButton ? 'Address Copied!' : 'Copy Address'}
              </Button>
            </Row>
          </Col>
        )}
      </>
    );
  }
}