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