Jack Mallers
7 years ago
29 changed files with 431 additions and 393 deletions
@ -1,93 +1,94 @@ |
|||
// @flow
|
|||
import { shell } from 'electron' |
|||
import React, { Component } from 'react' |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import ReactModal from 'react-modal' |
|||
import styles from './ChannelModal.scss' |
|||
|
|||
class ChannelModal extends Component { |
|||
render() { |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
const ChannelModal = ({ isOpen, resetChannel, channel }) => { |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
} |
|||
|
|||
const { isOpen, resetChannel, channel } = this.props |
|||
|
|||
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(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)} |
|||
> |
|||
{channel.channel_point} |
|||
</h2> |
|||
</header> |
|||
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(`https://testnet.smartbit.com.au/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> |
|||
<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 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}> |
|||
<div>Close channel</div> |
|||
</div> |
|||
<footer className={styles.active}> |
|||
<p>{channel.active ? 'Active' : 'Not active'}</p> |
|||
</footer> |
|||
</div> |
|||
: |
|||
null |
|||
} |
|||
</ReactModal> |
|||
) |
|||
} |
|||
<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}> |
|||
<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 |
|||
} |
|||
|
|||
export default ChannelModal |
|||
|
|||
@ -1,80 +1,85 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import ReactModal from 'react-modal' |
|||
import styles from './PeerForm.scss' |
|||
|
|||
class PeerForm extends Component { |
|||
render() { |
|||
const submit = () => { |
|||
const { form: { pubkey, host } } = this.props |
|||
const PeerForm = ({ form, setForm, connect }) => { |
|||
const submit = () => { |
|||
const { pubkey, host } = form |
|||
|
|||
this.props.connect({ pubkey, host }).then((success) => { |
|||
if (success.data) { setForm({ isOpen: false }) } |
|||
}) |
|||
} |
|||
connect({ pubkey, host }).then((success) => { |
|||
if (success.data) { setForm({ isOpen: false }) } |
|||
}) |
|||
} |
|||
|
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
} |
|||
|
|||
const { form, setForm, connect } = this.props |
|||
return ( |
|||
<div> |
|||
<ReactModal |
|||
isOpen={form.isOpen} |
|||
contentLabel='No Overlay Click Modal' |
|||
ariaHideApp |
|||
shouldCloseOnOverlayClick |
|||
onRequestClose={() => setForm({ isOpen: false })} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
<div className={styles.form}> |
|||
<h1 className={styles.title}>Connect to a peer</h1> |
|||
return ( |
|||
<div> |
|||
<ReactModal |
|||
isOpen={form.isOpen} |
|||
contentLabel='No Overlay Click Modal' |
|||
ariaHideApp |
|||
shouldCloseOnOverlayClick |
|||
onRequestClose={() => setForm({ isOpen: false })} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
<div className={styles.form}> |
|||
<h1 className={styles.title}>Connect to a peer</h1> |
|||
|
|||
<section className={styles.pubkey}> |
|||
<label>Pubkey</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Public key' |
|||
value={form.pubkey} |
|||
onChange={event => setForm({ pubkey: event.target.value })} |
|||
/> |
|||
</section> |
|||
<section className={styles.local}> |
|||
<label>Address</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Host address' |
|||
value={form.host} |
|||
onChange={event => setForm({ host: event.target.value })} |
|||
/> |
|||
</section> |
|||
<section className={styles.pubkey}> |
|||
<label htmlFor='pubkey'>Pubkey</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Public key' |
|||
value={form.pubkey} |
|||
onChange={event => setForm({ pubkey: event.target.value })} |
|||
id='pubkey' |
|||
/> |
|||
</section> |
|||
<section className={styles.local}> |
|||
<label htmlFor='address'>Address</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Host address' |
|||
value={form.host} |
|||
onChange={event => setForm({ host: event.target.value })} |
|||
id='address' |
|||
/> |
|||
</section> |
|||
|
|||
<div className={styles.buttonGroup}> |
|||
<div className={styles.button} onClick={submit}> |
|||
Submit |
|||
</div> |
|||
<div className={styles.buttonGroup}> |
|||
<div className={styles.button} onClick={submit}> |
|||
Submit |
|||
</div> |
|||
</div> |
|||
</ReactModal> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
</ReactModal> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
PeerForm.propTypes = { |
|||
form: PropTypes.object.isRequired, |
|||
setForm: PropTypes.func.isRequired, |
|||
connect: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default PeerForm |
|||
|
|||
@ -1,76 +1,76 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import ReactModal from 'react-modal' |
|||
import styles from './PeerModal.scss' |
|||
|
|||
class PeerModal extends Component { |
|||
render() { |
|||
const disconnectClicked = () => { |
|||
const { peer, disconnect } = this.props |
|||
const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { |
|||
const disconnectClicked = () => { |
|||
disconnect({ pubkey: peer.pub_key }) |
|||
.then(success => (success ? resetPeer(null) : null)) |
|||
} |
|||
|
|||
disconnect({ pubkey: peer.pub_key }) |
|||
.then(success => (success ? resetPeer(null) : null)) |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
} |
|||
|
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content: { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
} |
|||
|
|||
const { isOpen, resetPeer, peer, disconnect } = this.props |
|||
|
|||
return ( |
|||
<ReactModal |
|||
isOpen={isOpen} |
|||
contentLabel='No Overlay Click Modal' |
|||
ariaHideApp |
|||
shouldCloseOnOverlayClick |
|||
onRequestClose={() => resetPeer(null)} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
{ |
|||
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> |
|||
return ( |
|||
<ReactModal |
|||
isOpen={isOpen} |
|||
contentLabel='No Overlay Click Modal' |
|||
ariaHideApp |
|||
shouldCloseOnOverlayClick |
|||
onRequestClose={() => resetPeer(null)} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
{ |
|||
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={disconnectClicked}> |
|||
<div>Disconnect peer</div> |
|||
</div> |
|||
<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> |
|||
: |
|||
null |
|||
} |
|||
</ReactModal> |
|||
) |
|||
} |
|||
<div className={styles.close} onClick={disconnectClicked}> |
|||
<div>Disconnect peer</div> |
|||
</div> |
|||
</div> |
|||
: |
|||
null |
|||
} |
|||
</ReactModal> |
|||
) |
|||
} |
|||
|
|||
PeerModal.propTypes = { |
|||
isOpen: PropTypes.bool.isRequired, |
|||
resetPeer: PropTypes.func.isRequired, |
|||
peer: PropTypes.object, |
|||
disconnect: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default PeerModal |
|||
|
|||
Loading…
Reference in new issue