zap-desktop/app/components/Wallet/ReceiveModal.js

import React from 'react'
import PropTypes from 'prop-types'
import copy from 'copy-to-clipboard'
import QRCode from 'qrcode.react'
import copyIcon from 'icons/copy.svg'
import Isvg from 'react-inlinesvg'

import x from 'icons/x.svg'
import { showNotification } from 'notifications'

import styles from './ReceiveModal.scss'

class ReceiveModal extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      qrCodeType: 1
    }
  }

  render() {
    const copyOnClick = (data) => {
      copy(data)
      showNotification('Noice', 'Successfully copied to clipboard')
    }

    const changeQrCode = () => {
      if (this.state.qrCodeType === 1) {
        this.setState({ qrCodeType: 2 })
      } else {
        this.setState({ qrCodeType: 1 })
      }
    }

    const {
      isOpen,
      pubkey,
      address,
      alias,
      closeReceiveModal,
      network
    } = this.props

    const { qrCodeType } = this.state

    if (!isOpen) { return null }

    return (
      <div className={styles.container}>
        <div className={styles.closeContainer}>
          <span onClick={closeReceiveModal}>
            <Isvg src={x} />
          </span>
        </div>

        <div className={styles.content}>
          <section className={styles.left}>
            <header className={styles.header}>
              <h2>{alias && alias.length ? alias : pubkey.substring(0, 10)}</h2>

              <div className={styles.qrCodeOptions}>
                <div className={qrCodeType === 1 && styles.active} onClick={changeQrCode}>Node Pubkey</div>
                <div className={qrCodeType === 2 && styles.active} onClick={changeQrCode}>Bitcoin Address</div>
              </div>
            </header>

            <div className={styles.qrCodeContainer}>
              <QRCode
                value={qrCodeType === 1 ? pubkey : address}
                renderAs='svg'
                size={150}
                bgColor='transparent'
                fgColor='white'
                level='L'
              />
            </div>
          </section>
          <section className={styles.right}>
            <div className={styles.pubkey}>
              <h4>Node Public Key</h4>
              <p>
                <span className={styles.data}>{pubkey}</span>
                <span onClick={() => copyOnClick(pubkey)} className={`${styles.copy} hint--left`} data-hint='Copy pubkey'>
                  <Isvg src={copyIcon} />
                </span>
              </p>
            </div>

            <div className={styles.address}>
              <h4>Bitcoin {network.name} Address</h4>
              <p>
                <span className={styles.data}>{address}</span>
                <span onClick={() => copyOnClick(address)} className={`${styles.copy} hint--left`} data-hint='Copy address'>
                  <Isvg src={copyIcon} />
                </span>
              </p>
            </div>
          </section>
        </div>
      </div>
    )
  }
}

ReceiveModal.propTypes = {
  network: PropTypes.shape({
    name: PropTypes.string
  }).isRequired,
  isOpen: PropTypes.bool.isRequired,
  pubkey: PropTypes.string,
  address: PropTypes.string.isRequired,
  alias: PropTypes.string,
  closeReceiveModal: PropTypes.func.isRequired
}

export default ReceiveModal