Jack Mallers
7 years ago
14 changed files with 114 additions and 531 deletions
@ -1,133 +0,0 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { ForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force' |
|||
import { FaCircle } from 'react-icons/lib/fa' |
|||
import styles from './NetworkChannels.scss' |
|||
|
|||
class NetworkChannels extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
this.state = { |
|||
ready: false |
|||
} |
|||
} |
|||
|
|||
componentWillMount() { |
|||
setTimeout(() => { |
|||
this.setState({ ready: true }) |
|||
}, 1000) |
|||
|
|||
this.props.setCurrentChannel(this.props.channels[0]) |
|||
} |
|||
|
|||
render() { |
|||
const { ready } = this.state |
|||
const { |
|||
channels, |
|||
network: { nodes, edges, selectedChannel, networkLoading }, |
|||
identity_pubkey, |
|||
setCurrentChannel |
|||
} = this.props |
|||
|
|||
if (!ready || networkLoading) { |
|||
return ( |
|||
<div className={styles.networkLoading}> |
|||
<h1>loading network graph</h1> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.networkchannels}> |
|||
<div className={styles.network}> |
|||
<ForceGraph |
|||
simulationOptions={ |
|||
{ |
|||
width: 1000, |
|||
height: 1000, |
|||
strength: { |
|||
charge: -750 |
|||
} |
|||
} |
|||
} |
|||
labelAttr='label' |
|||
opacityFactor={1} |
|||
zoomOptions={{ minScale: 0.1, maxScale: 5 }} |
|||
zoom |
|||
animate |
|||
highlightDependencies |
|||
> |
|||
{ |
|||
nodes.map(node => ( |
|||
<ForceGraphNode |
|||
r={15} |
|||
label={node.pub_key} |
|||
key={node.pub_key} |
|||
node={{ id: node.pub_key }} |
|||
className={`${styles.node} ${identity_pubkey === node.pub_key && styles.active}`} |
|||
fill={identity_pubkey === node.pub_key ? 'green' : 'silver'} |
|||
/> |
|||
)) |
|||
} |
|||
{ |
|||
edges.map(edge => ( |
|||
<ForceGraphLink |
|||
className={`${styles.line} ${selectedChannel.chan_id === edge.channel_id && styles.active}`} |
|||
key={edge.channel_id} |
|||
link={{ source: edge.node1_pub, target: edge.node2_pub }} |
|||
/> |
|||
)) |
|||
} |
|||
</ForceGraph> |
|||
</div> |
|||
<div className={styles.channels}> |
|||
<ul> |
|||
{ |
|||
channels.map((channel, index) => ( |
|||
<li |
|||
key={index} |
|||
className={`${styles.channel} ${channel.chan_id === selectedChannel.chan_id && styles.active}`} |
|||
onClick={() => setCurrentChannel(channel)} |
|||
> |
|||
<header> |
|||
{ |
|||
channel.active ? |
|||
<span className={styles.active}> |
|||
<FaCircle /> |
|||
<i>active</i> |
|||
</span> |
|||
: |
|||
<span className={styles.notactive}> |
|||
<FaCircle /> |
|||
<i>not active</i> |
|||
</span> |
|||
} |
|||
</header> |
|||
<div className={styles.content}> |
|||
<div> |
|||
<h4>Remote Pubkey</h4> |
|||
<h2>{`${channel.remote_pubkey.substring(30, channel.remote_pubkey.length)}...`}</h2> |
|||
</div> |
|||
<div> |
|||
<h4>Channel Point</h4> |
|||
<h2>{`${channel.channel_point.substring(30, channel.channel_point.length)}...`}</h2> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
)) |
|||
} |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
NetworkChannels.propTypes = { |
|||
channels: PropTypes.array.isRequired, |
|||
network: PropTypes.object.isRequired, |
|||
identity_pubkey: PropTypes.string.isRequired, |
|||
setCurrentChannel: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default NetworkChannels |
|||
@ -1,114 +0,0 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
@keyframes dash { |
|||
to { |
|||
stroke-dashoffset: 1000; |
|||
} |
|||
} |
|||
|
|||
.networkLoading { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100vh; |
|||
background: $black; |
|||
|
|||
h1 { |
|||
font-size: 22px; |
|||
color: $green; |
|||
font-family: 'courier'; |
|||
text-align: center; |
|||
margin-top: 25%; |
|||
} |
|||
} |
|||
|
|||
.networkchannels { |
|||
position: relative; |
|||
} |
|||
|
|||
.network, .channels { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.network { |
|||
width: 70%; |
|||
} |
|||
|
|||
.channels { |
|||
width: calc(30% - 2px); |
|||
border: 1px solid $darkestgrey; |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
.node { |
|||
r: 15; |
|||
fill: $darkestgrey; |
|||
|
|||
.active { |
|||
r: 25; |
|||
fill: $green; |
|||
stroke: $green; |
|||
} |
|||
} |
|||
|
|||
.line.active { |
|||
stroke-width: 10; |
|||
opacity: 1; |
|||
stroke: $green; |
|||
stroke-dasharray: 100; |
|||
animation: dash 2.5s infinite linear; |
|||
} |
|||
|
|||
.channel { |
|||
padding: 10px; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
cursor: pointer; |
|||
transition: all 0.25s; |
|||
border-bottom: 1px solid $white; |
|||
|
|||
&.active, &:hover { |
|||
background: rgba(255, 255, 255, 0.4); |
|||
} |
|||
|
|||
header { |
|||
margin-bottom: 10px; |
|||
|
|||
.active { |
|||
color: $green; |
|||
} |
|||
|
|||
.notactive { |
|||
color: $green; |
|||
} |
|||
|
|||
span svg { |
|||
font-size: 10px; |
|||
} |
|||
|
|||
i { |
|||
text-transform: uppercase; |
|||
font-size: 10px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
div { |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
h4 { |
|||
text-transform: uppercase; |
|||
margin-bottom: 5px; |
|||
font-size: 10px; |
|||
color: $main; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 14px; |
|||
color: $white; |
|||
} |
|||
} |
|||
} |
|||
@ -1,86 +0,0 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { TiPlus } from 'react-icons/lib/ti' |
|||
import { FaRepeat } from 'react-icons/lib/fa' |
|||
import PeerModal from './PeerModal' |
|||
import PeerForm from './PeerForm' |
|||
import Peer from './Peer' |
|||
import styles from './Peers.scss' |
|||
|
|||
const Peers = ({ |
|||
fetchPeers, |
|||
peersLoading, |
|||
peers, |
|||
setPeer, |
|||
modalPeer, |
|||
peerModalOpen, |
|||
peerForm, |
|||
setPeerForm, |
|||
connect, |
|||
disconnect |
|||
}) => { |
|||
const refreshClicked = (event) => { |
|||
// store event in icon so we dont get an error when react clears it
|
|||
const icon = event.currentTarget |
|||
|
|||
// fetch peers
|
|||
fetchPeers() |
|||
|
|||
// clear animation after the second so we can reuse it
|
|||
setTimeout(() => { icon.style.animation = '' }, 1000) |
|||
|
|||
// spin icon for 1 sec
|
|||
icon.style.animation = 'spin 1000ms linear 1' |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.peers}> |
|||
<PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} disconnect={disconnect} /> |
|||
|
|||
<PeerForm form={peerForm} setForm={setPeerForm} connect={connect} /> |
|||
<div className={styles.header}> |
|||
<h3>Peers</h3> |
|||
<span |
|||
className={`${styles.refresh} hint--top`} |
|||
data-hint='Refresh your peers list' |
|||
|
|||
> |
|||
<FaRepeat |
|||
style={{ verticalAlign: 'baseline' }} |
|||
onClick={refreshClicked} |
|||
/> |
|||
</span> |
|||
<div |
|||
className={`${styles.connectPeer} hint--top`} |
|||
data-hint='Connect to a peer' |
|||
onClick={() => setPeerForm({ isOpen: true })} |
|||
> |
|||
<TiPlus /> |
|||
</div> |
|||
</div> |
|||
<ul> |
|||
{ |
|||
!peersLoading ? |
|||
peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />) |
|||
: |
|||
'Loading...' |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
Peers.propTypes = { |
|||
fetchPeers: PropTypes.func.isRequired, |
|||
peersLoading: PropTypes.bool.isRequired, |
|||
peers: PropTypes.array.isRequired, |
|||
setPeer: PropTypes.func.isRequired, |
|||
modalPeer: PropTypes.object, |
|||
peerModalOpen: PropTypes.bool.isRequired, |
|||
peerForm: PropTypes.object.isRequired, |
|||
setPeerForm: PropTypes.func.isRequired, |
|||
connect: PropTypes.func.isRequired, |
|||
disconnect: PropTypes.func.isRequired |
|||
} |
|||
|
|||
export default Peers |
|||
@ -1,59 +0,0 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.peers { |
|||
width: 75%; |
|||
margin: 50px auto; |
|||
|
|||
.header { |
|||
margin-bottom: 10px; |
|||
|
|||
h3, .connectPeer { |
|||
display: inline-block; |
|||
} |
|||
|
|||
h3 { |
|||
text-align: left; |
|||
} |
|||
|
|||
.refresh { |
|||
cursor: pointer; |
|||
margin-left: 5px; |
|||
font-size: 12px; |
|||
vertical-align: top; |
|||
color: $darkestgrey; |
|||
line-height: 14px; |
|||
transition: color 0.25s; |
|||
|
|||
&:hover { |
|||
color: $main; |
|||
} |
|||
} |
|||
|
|||
.connectPeer { |
|||
float: right; |
|||
cursor: pointer; |
|||
|
|||
svg { |
|||
padding: 3px; |
|||
border-radius: 50%; |
|||
border: 1px solid $main; |
|||
color: $main; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
border-color: darken($main, 10%); |
|||
color: darken($main, 10%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
text-transform: uppercase; |
|||
color: $darkestgrey; |
|||
letter-spacing: 1.6px; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue