Jack Mallers
7 years ago
11 changed files with 15 additions and 337 deletions
@ -1,22 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import styles from './PeersList.scss' |
|
||||
|
|
||||
const PeersList = ({ peers }) => ( |
|
||||
<ul> |
|
||||
{ |
|
||||
peers.map(peer => |
|
||||
<li className={styles.peer} key={peer.peer_id}> |
|
||||
<h1>{peer.address}</h1> |
|
||||
<h4>{peer.pub_key}</h4> |
|
||||
</li> |
|
||||
) |
|
||||
} |
|
||||
</ul> |
|
||||
) |
|
||||
|
|
||||
PeersList.propTypes = { |
|
||||
peers: PropTypes.array.isRequired |
|
||||
} |
|
||||
|
|
||||
export default PeersList |
|
@ -1,18 +0,0 @@ |
|||||
@import '../../variables.scss'; |
|
||||
|
|
||||
.peer { |
|
||||
margin: 20px 0; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
&:hover { |
|
||||
opacity: 0.5; |
|
||||
} |
|
||||
|
|
||||
h1 { |
|
||||
margin-bottom: 5px; |
|
||||
} |
|
||||
|
|
||||
h4 { |
|
||||
font-size: 10px; |
|
||||
} |
|
||||
} |
|
@ -1,23 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import styles from './TransactionForm.scss' |
|
||||
|
|
||||
const TransactionForm = ({}) => ( |
|
||||
<div> |
|
||||
<input |
|
||||
type='text' |
|
||||
placeholder='payment request' |
|
||||
className={styles.input} |
|
||||
/> |
|
||||
|
|
||||
<div className={styles.submitContainer}> |
|
||||
<span className={styles.submit}>submit</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
) |
|
||||
|
|
||||
TransactionForm.propTypes = { |
|
||||
|
|
||||
} |
|
||||
|
|
||||
export default TransactionForm |
|
@ -1,28 +0,0 @@ |
|||||
@import '../../variables.scss'; |
|
||||
|
|
||||
.input { |
|
||||
width: 100%; |
|
||||
background: $secondary; |
|
||||
color: $terminalgreen; |
|
||||
-webkit-appearance: none; |
|
||||
border: none; |
|
||||
border-bottom: 1px solid $terminalgreen; |
|
||||
padding: 5px; |
|
||||
outline: 0; |
|
||||
} |
|
||||
|
|
||||
.submitContainer { |
|
||||
margin-top: 20px; |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
.submit { |
|
||||
padding: 5px; |
|
||||
color: $terminalgreen; |
|
||||
cursor: pointer; |
|
||||
|
|
||||
&:hover { |
|
||||
background: $terminalgreen; |
|
||||
color: $secondary; |
|
||||
} |
|
||||
} |
|
@ -1,125 +0,0 @@ |
|||||
import React, { Component } from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
|
|
||||
import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force' |
|
||||
import LoadingBolt from 'components/LoadingBolt' |
|
||||
import PeersList from 'components/Network/PeersList' |
|
||||
import TransactionForm from 'components/Network/TransactionForm' |
|
||||
|
|
||||
import styles from './Network.scss' |
|
||||
|
|
||||
class Network extends Component { |
|
||||
componentWillMount() { |
|
||||
const { fetchDescribeNetwork, fetchPeers, fetchChannels } = this.props |
|
||||
|
|
||||
fetchDescribeNetwork() |
|
||||
fetchPeers() |
|
||||
fetchChannels() |
|
||||
} |
|
||||
|
|
||||
render() { |
|
||||
const { |
|
||||
setCurrentTab, |
|
||||
|
|
||||
network: { nodes, edges, selectedNode, networkLoading, currentTab }, |
|
||||
peers: { peers }, |
|
||||
channels, |
|
||||
identity_pubkey |
|
||||
} = this.props |
|
||||
|
|
||||
console.log('props: ', this.props) |
|
||||
|
|
||||
if (networkLoading) return <LoadingBolt /> |
|
||||
|
|
||||
const renderTab = () => { |
|
||||
switch(currentTab) { |
|
||||
case 1: |
|
||||
return <PeersList peers={peers} /> |
|
||||
break |
|
||||
case 2: |
|
||||
return <h1>channels</h1> |
|
||||
break |
|
||||
case 3: |
|
||||
return <TransactionForm /> |
|
||||
break |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<div className={styles.container}> |
|
||||
<section className={styles.network}> |
|
||||
<InteractiveForceGraph |
|
||||
simulationOptions={ |
|
||||
{ |
|
||||
height: 1000, |
|
||||
width: 800, |
|
||||
strength: { |
|
||||
charge: -750 |
|
||||
}, |
|
||||
animate: true |
|
||||
} |
|
||||
} |
|
||||
labelAttr='label' |
|
||||
onSelectNode={node => console.log('node: ', node)} |
|
||||
opacityFactor={1} |
|
||||
zoomOptions={{ minScale: 0.1, maxScale: 5 }} |
|
||||
zoom |
|
||||
highlightDependencies |
|
||||
> |
|
||||
<path d="M534.7054286266647, 460.3260926684966" fill="red" stroke="blue" /> |
|
||||
{ |
|
||||
nodes.map(node => { |
|
||||
return ( |
|
||||
<ForceGraphNode |
|
||||
r={15} |
|
||||
label={node.pub_key} |
|
||||
key={node.pub_key} |
|
||||
node={{ id: node.pub_key }} |
|
||||
fill={ |
|
||||
identity_pubkey === node.pub_key || selectedNode.pubkey === node.pub_key ? '#00FF00' : 'black' |
|
||||
} |
|
||||
/> |
|
||||
) |
|
||||
}) |
|
||||
} |
|
||||
{ |
|
||||
edges.map(edge => { |
|
||||
return ( |
|
||||
<ForceGraphLink |
|
||||
className={selectedNode.pubkey.length} |
|
||||
key={edge.channel_id} |
|
||||
link={{ source: edge.node1_pub, target: edge.node2_pub }} |
|
||||
stroke={'silver'} |
|
||||
strokeWidth='5' |
|
||||
ref={line => this[edge.channel_id] = line} |
|
||||
/> |
|
||||
) |
|
||||
}) |
|
||||
} |
|
||||
</InteractiveForceGraph> |
|
||||
</section> |
|
||||
<section className={styles.data}> |
|
||||
<ul className={styles.tabs}> |
|
||||
<li className={`${styles.tab} ${currentTab === 1 && styles.active}`} onClick={() => setCurrentTab(1)}> |
|
||||
<h2>Peers</h2> |
|
||||
</li> |
|
||||
<li className={`${styles.tab} ${currentTab === 2 && styles.active}`} onClick={() => setCurrentTab(2)}> |
|
||||
<h2>Channels</h2> |
|
||||
</li> |
|
||||
<li className={`${styles.tab} ${currentTab === 3 && styles.active}`} onClick={() => setCurrentTab(3)}> |
|
||||
<h2>Transaction</h2> |
|
||||
</li> |
|
||||
</ul> |
|
||||
|
|
||||
<div className={styles.currentTab}> |
|
||||
{renderTab()} |
|
||||
</div> |
|
||||
</section> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
Network.propTypes = {} |
|
||||
|
|
||||
export default Network |
|
@ -1,83 +0,0 @@ |
|||||
@import '../../../variables.scss'; |
|
||||
|
|
||||
@keyframes dash { |
|
||||
to { |
|
||||
stroke-dashoffset: 1000; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@keyframes fadein { |
|
||||
0% { background: $white; } |
|
||||
50% { background: lighten($secondary, 50%); } |
|
||||
100% { background: $secondary; animation-fill-mode:forwards; } |
|
||||
} |
|
||||
|
|
||||
.container { |
|
||||
width: 100%; |
|
||||
height: 100vh; |
|
||||
animation: fadein 0.5s; |
|
||||
animation-timing-function:linear; |
|
||||
animation-fill-mode:forwards; |
|
||||
animation-iteration-count: 1; |
|
||||
|
|
||||
line.active { |
|
||||
opacity: 1; |
|
||||
stroke: green; |
|
||||
stroke-width: 5; |
|
||||
stroke-dasharray: 100; |
|
||||
animation: dash 2.5s infinite linear; |
|
||||
} |
|
||||
|
|
||||
circle { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.network, .data { |
|
||||
display: inline-block; |
|
||||
vertical-align: top; |
|
||||
height: 100vh; |
|
||||
} |
|
||||
|
|
||||
.network { |
|
||||
width: 70%; |
|
||||
} |
|
||||
|
|
||||
.data { |
|
||||
width: calc(30% - 1px); |
|
||||
color: #00FF00; |
|
||||
word-wrap: break-word; |
|
||||
overflow-y: scroll; |
|
||||
border-left: 1px solid $darkgrey; |
|
||||
font-family: 'Courier New'; |
|
||||
|
|
||||
.tabs { |
|
||||
margin-top: 20px; |
|
||||
padding: 0 20px; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
|
|
||||
.tab { |
|
||||
padding: 10px; |
|
||||
cursor: pointer; |
|
||||
transition: all 0.25s; |
|
||||
|
|
||||
&:hover { |
|
||||
background: #00FF00; |
|
||||
color: $black; |
|
||||
opacity: 0.5; |
|
||||
} |
|
||||
|
|
||||
&.active { |
|
||||
background: #00FF00; |
|
||||
color: $black; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.currentTab { |
|
||||
margin-top: 20px; |
|
||||
padding: 20px; |
|
||||
} |
|
||||
} |
|
@ -1,24 +0,0 @@ |
|||||
import { withRouter } from 'react-router' |
|
||||
import { connect } from 'react-redux' |
|
||||
|
|
||||
import { fetchDescribeNetwork, setCurrentTab } from 'reducers/network' |
|
||||
import { fetchPeers } from 'reducers/peers' |
|
||||
import { fetchChannels } from 'reducers/channels' |
|
||||
|
|
||||
import Network from '../components/Network' |
|
||||
|
|
||||
const mapDispatchToProps = { |
|
||||
setCurrentTab, |
|
||||
fetchDescribeNetwork, |
|
||||
fetchPeers, |
|
||||
fetchChannels |
|
||||
} |
|
||||
|
|
||||
const mapStateToProps = state => ({ |
|
||||
network: state.network, |
|
||||
peers: state.peers, |
|
||||
channels: state.channels, |
|
||||
identity_pubkey: state.info.data.identity_pubkey |
|
||||
}) |
|
||||
|
|
||||
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network)) |
|
@ -1,3 +0,0 @@ |
|||||
import NetworkContainer from './containers/NetworkContainer' |
|
||||
|
|
||||
export default NetworkContainer |
|
Loading…
Reference in new issue