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.
78 lines
2.0 KiB
78 lines
2.0 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import ReactModal from 'react-modal'
|
|
import { MdClose } from 'react-icons/lib/md'
|
|
|
|
import styles from './PeerModal.scss'
|
|
|
|
const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => {
|
|
const customStyles = {
|
|
overlay: {
|
|
cursor: 'pointer',
|
|
overflowY: 'auto'
|
|
},
|
|
content: {
|
|
top: 'auto',
|
|
left: '20%',
|
|
right: '0',
|
|
bottom: 'auto',
|
|
width: '40%',
|
|
margin: '50px auto',
|
|
borderRadius: 'none',
|
|
padding: '0'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isOpen}
|
|
contentLabel='No Overlay Click Modal'
|
|
ariaHideApp
|
|
shouldCloseOnOverlayClick
|
|
onRequestClose={() => resetPeer(null)}
|
|
parentSelector={() => document.body}
|
|
style={customStyles}
|
|
>
|
|
<div className={styles.closeContainer}>
|
|
<span onClick={() => resetPeer(null)}>
|
|
<MdClose />
|
|
</span>
|
|
</div>
|
|
{
|
|
peer &&
|
|
<div className={styles.peer}>
|
|
<header className={styles.header}>
|
|
<h1 data-hint='Peer address' className='hint--top-left'>{peer.address}</h1>
|
|
<h2 data-hint='Peer public key' className='hint--top-left'>{peer.pub_key}</h2>
|
|
</header>
|
|
|
|
<div className={styles.details}>
|
|
<dl>
|
|
<dt>Satoshis Received</dt>
|
|
<dd>{peer.sat_recv}</dd>
|
|
<dt>Satoshis Sent</dt>
|
|
<dd>{peer.sat_sent}</dd>
|
|
<dt>Bytes Received</dt>
|
|
<dd>{peer.bytes_recv}</dd>
|
|
<dt>Bytes Sent</dt>
|
|
<dd>{peer.bytes_sent}</dd>
|
|
</dl>
|
|
</div>
|
|
<div className={styles.close} onClick={() => disconnect({ pubkey: peer.pub_key })}>
|
|
<div>Disconnect peer</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</ReactModal>
|
|
)
|
|
}
|
|
|
|
PeerModal.propTypes = {
|
|
isOpen: PropTypes.bool.isRequired,
|
|
resetPeer: PropTypes.func.isRequired,
|
|
peer: PropTypes.object,
|
|
disconnect: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default PeerModal
|
|
|