You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.3 KiB
87 lines
2.3 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import ReactModal from 'react-modal'
|
|
import copy from 'copy-to-clipboard'
|
|
import QRCode from 'qrcode.react'
|
|
import { showNotification } from 'notifications'
|
|
import { MdClose } from 'react-icons/lib/md'
|
|
import styles from './ReceiveModal.scss'
|
|
|
|
const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }) => {
|
|
const customStyles = {
|
|
overlay: {
|
|
cursor: 'pointer'
|
|
},
|
|
content: {
|
|
top: 'auto',
|
|
left: '20%',
|
|
right: '0',
|
|
bottom: 'auto',
|
|
width: '40%',
|
|
margin: '50px auto',
|
|
borderRadius: 'none',
|
|
padding: '0'
|
|
}
|
|
}
|
|
|
|
const copyOnClick = (data) => {
|
|
copy(data)
|
|
showNotification('Noice', 'Successfully copied to clipboard')
|
|
}
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isOpen}
|
|
ariaHideApp
|
|
shouldCloseOnOverlayClick
|
|
contentLabel='No Overlay Click Modal'
|
|
onRequestClose={() => hideActivityModal()}
|
|
parentSelector={() => document.body}
|
|
style={customStyles}
|
|
>
|
|
<div className={styles.closeContainer}>
|
|
<span onClick={() => hideActivityModal()}>
|
|
<MdClose />
|
|
</span>
|
|
</div>
|
|
|
|
<div className={styles.container}>
|
|
<header>
|
|
<div className={styles.qrcodes}>
|
|
<QRCode value={address} />
|
|
</div>
|
|
|
|
<ul className={styles.tabs}>
|
|
<li className={styles.active}>Wallet address</li>
|
|
<li>Node pubkey</li>
|
|
</ul>
|
|
</header>
|
|
<section>
|
|
<div className={styles.addressHeader}>
|
|
<h4>Deposit Address (<span onClick={() => copyOnClick(address)}>Copy</span>)</h4>
|
|
<span className={styles.newAddress} onClick={() => newAddress('p2pkh')}>New Address</span>
|
|
</div>
|
|
<p>
|
|
{address}
|
|
<span>hi</span>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>Node Public Key (<span onClick={() => copyOnClick(pubkey)}>Copy</span>)</h4>
|
|
<p>{pubkey}</p>
|
|
</section>
|
|
</div>
|
|
</ReactModal>
|
|
)
|
|
}
|
|
|
|
ReceiveModal.propTypes = {
|
|
isOpen: PropTypes.bool.isRequired,
|
|
hideActivityModal: PropTypes.func.isRequired,
|
|
pubkey: PropTypes.string.isRequired,
|
|
address: PropTypes.string.isRequired,
|
|
newAddress: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default ReceiveModal
|
|
|