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