diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js index b2f24cb0..49b89710 100644 --- a/app/components/Wallet/ReceiveModal.js +++ b/app/components/Wallet/ReceiveModal.js @@ -5,9 +5,10 @@ import copy from 'copy-to-clipboard' import QRCode from 'qrcode.react' import { showNotification } from 'notifications' import { MdClose } from 'react-icons/lib/md' +import { FaCopy } from 'react-icons/lib/fa' import styles from './ReceiveModal.scss' -const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }) => { +const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode }) => { const customStyles = { overlay: { cursor: 'pointer' @@ -48,28 +49,39 @@ const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }
- +
-

Deposit Address ( copyOnClick(address)}>Copy)

+

Deposit Address

newAddress('p2pkh')}>New Address

- {address} - hi + {address} + copyOnClick(address)} className='hint--left' data-hint='Copy address'> + +

-

Node Public Key ( copyOnClick(pubkey)}>Copy)

-

{pubkey}

+

Node Public Key

+

+ {pubkey} + copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'> + + +

diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal.scss index db832156..b2485f66 100644 --- a/app/components/Wallet/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal.scss @@ -41,6 +41,7 @@ &.active { color: $black; + font-weight: bold; } } } @@ -63,12 +64,32 @@ } p { + display: flex; + flex-direction: row; font-family: 'Roboto'; - text-align: center; font-size: 14px; font-weight: 200; background: $lightgrey; - padding: 15px; + + span { + padding: 15px; + } + + span:nth-child(1) { + flex: 9; + overflow-x: scroll; + } + + span:nth-child(2) { + background: $darkgrey; + color: $black; + cursor: pointer; + transition: all 0.25s; + + &:hover { + background: $darkestgrey; + } + } } } } diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 26394b16..8c9b0216 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -13,7 +13,8 @@ class Wallet extends Component { super(props) this.state = { - modalOpen: false + modalOpen: false, + qrCodeType: 1 } } @@ -25,7 +26,13 @@ class Wallet extends Component { newAddress } = this.props - const { modalOpen } = this.state + const { modalOpen, qrCodeType } = this.state + + const changeQrCode = () => { + const qrCodeType = this.state.qrCodeType === 1 ? 2 : 1 + + this.setState({ qrCodeType }) + } return (
@@ -38,6 +45,8 @@ class Wallet extends Component { pubkey={info.data.identity_pubkey} address={address} newAddress={newAddress} + qrCodeType={qrCodeType} + changeQrCode={changeQrCode} /> ) }