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.
101 lines
3.0 KiB
101 lines
3.0 KiB
import { shell } from 'electron'
|
|
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import ReactModal from 'react-modal'
|
|
import styles from './ChannelModal.scss'
|
|
|
|
const ChannelModal = ({ isOpen, resetChannel, channel, explorerLinkBase, closeChannel }) => {
|
|
const customStyles = {
|
|
overlay: {
|
|
cursor: 'pointer',
|
|
overflowY: 'auto'
|
|
},
|
|
content: {
|
|
top: 'auto',
|
|
left: '20%',
|
|
right: '0',
|
|
bottom: 'auto',
|
|
width: '40%',
|
|
margin: '50px auto',
|
|
padding: '40px'
|
|
}
|
|
}
|
|
|
|
const closeChannelClicked = () => {
|
|
closeChannel({ channel_point: channel.channel_point })
|
|
resetChannel(null)
|
|
}
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isOpen}
|
|
contentLabel='No Overlay Click Modal'
|
|
ariaHideApp
|
|
shouldCloseOnOverlayClick
|
|
onRequestClose={() => resetChannel(null)}
|
|
parentSelector={() => document.body}
|
|
style={customStyles}
|
|
>
|
|
{
|
|
channel ?
|
|
<div className={styles.channel}>
|
|
<header className={styles.header}>
|
|
<h1 data-hint='Remote public key' className='hint--top-left'>{channel.remote_pubkey}</h1>
|
|
<h2
|
|
data-hint='Channel point'
|
|
className='hint--top-left'
|
|
onClick={() => shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}
|
|
>
|
|
{channel.channel_point}
|
|
</h2>
|
|
</header>
|
|
|
|
<div className={styles.balances}>
|
|
<section className={styles.capacity}>
|
|
<h3>{channel.capacity}</h3>
|
|
<span>Capacity</span>
|
|
</section>
|
|
<div className={styles.balance}>
|
|
<section className={styles.local}>
|
|
<h4>{channel.local_balance}</h4>
|
|
<span>Local</span>
|
|
</section>
|
|
<section className={styles.remote}>
|
|
<h4>{channel.remote_balance}</h4>
|
|
<span>Remote</span>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div className={styles.details}>
|
|
<dl>
|
|
<dt>Sent</dt>
|
|
<dd>{channel.total_satoshis_sent}</dd>
|
|
<dt>Received</dt>
|
|
<dd>{channel.total_satoshis_received}</dd>
|
|
<dt>Updates</dt>
|
|
<dd>{channel.num_updates}</dd>
|
|
</dl>
|
|
</div>
|
|
<div className={styles.close} onClick={closeChannelClicked}>
|
|
<div>Close channel</div>
|
|
</div>
|
|
<footer className={styles.active}>
|
|
<p>{channel.active ? 'Active' : 'Not active'}</p>
|
|
</footer>
|
|
</div>
|
|
:
|
|
null
|
|
}
|
|
</ReactModal>
|
|
)
|
|
}
|
|
|
|
ChannelModal.propTypes = {
|
|
isOpen: PropTypes.bool.isRequired,
|
|
resetChannel: PropTypes.func.isRequired,
|
|
channel: PropTypes.object,
|
|
explorerLinkBase: PropTypes.string.isRequired,
|
|
closeChannel: PropTypes.func.isRequired
|
|
}
|
|
|
|
export default ChannelModal
|
|
|