JimmyMow
7 years ago
committed by
GitHub
GitHub
39 changed files with 1725 additions and 117 deletions
@ -0,0 +1,292 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import * as d3Force from 'd3-force'; |
|||
import * as d3Selection from 'd3-selection'; |
|||
import * as d3Zoom from 'd3-zoom'; |
|||
const d3 = Object.assign({}, d3Force, d3Selection, d3Zoom) |
|||
import styles from './CanvasNetworkGraph.scss' |
|||
|
|||
function generateSimulationData(nodes, edges) { |
|||
const resNodes = nodes.map(node => Object.assign(node, { id: node.pub_key })) |
|||
const resEdges = edges.map(node => Object.assign(node, { source: node.node1_pub, target: node.node2_pub })) |
|||
|
|||
return { |
|||
nodes: resNodes, |
|||
links: resEdges |
|||
} |
|||
} |
|||
|
|||
class CanvasNetworkGraph extends Component { |
|||
constructor(props) { |
|||
super(props) |
|||
|
|||
this.state = { |
|||
width: 800, |
|||
height: 800, |
|||
|
|||
simulation: {}, |
|||
simulationData: { |
|||
nodes: [], |
|||
links: [] |
|||
}, |
|||
|
|||
svgLoaded: false |
|||
} |
|||
|
|||
this.startSimulation = this.startSimulation.bind(this) |
|||
this.zoomActions = this.zoomActions.bind(this) |
|||
this.ticked = this.ticked.bind(this) |
|||
this.restart = this.restart.bind(this) |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
const { network } = nextProps |
|||
const { simulationData: { nodes, links } } = this.state |
|||
|
|||
const simulationDataEmpty = !nodes.length && !links.length |
|||
const networkDataLoaded = network.nodes.length || network.edges.length |
|||
|
|||
// if the simulationData is empty and we have network data
|
|||
if (simulationDataEmpty && networkDataLoaded) { |
|||
this.setState({ |
|||
simulationData: generateSimulationData(network.nodes, network.edges) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
componentDidMount() { |
|||
// wait for the svg to be in the DOM before we start the simulation
|
|||
const svgInterval = setInterval(() => { |
|||
if (document.getElementById('mapContainer')) { |
|||
d3.select('#mapContainer') |
|||
.append('svg') |
|||
.attr('id', 'map') |
|||
.attr('width', 800) |
|||
.attr('height', 800) |
|||
|
|||
this.startSimulation() |
|||
|
|||
clearInterval(svgInterval) |
|||
} |
|||
}, 1000) |
|||
} |
|||
|
|||
componentDidUpdate(prevProps) { |
|||
const { |
|||
network: { nodes, edges }, |
|||
selectedPeerPubkeys, |
|||
selectedChannelIds, |
|||
currentRouteChanIds |
|||
} = this.props |
|||
|
|||
const prevNodes = prevProps.network.nodes |
|||
const prevEdges = prevProps.network.edges |
|||
|
|||
// update the simulationData only if the nodes or edges have changed
|
|||
if (prevNodes.length !== nodes.length || prevEdges.length !== edges.length) { |
|||
this.setState({ |
|||
simulationData: generateSimulationData(nodes, edges) |
|||
}) |
|||
} |
|||
|
|||
if (prevProps.selectedPeerPubkeys.length !== selectedPeerPubkeys.length) { |
|||
this.updateSelectedPeers() |
|||
} |
|||
|
|||
if (prevProps.selectedChannelIds.length !== selectedChannelIds.length) { |
|||
this.updateSelectedChannels() |
|||
} |
|||
|
|||
if (prevProps.currentRouteChanIds.length !== currentRouteChanIds.length) { |
|||
this.renderSelectedRoute() |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
d3.select('#map') |
|||
.remove() |
|||
} |
|||
|
|||
updateSelectedPeers() { |
|||
const { selectedPeerPubkeys } = this.props |
|||
|
|||
// remove active class
|
|||
d3.selectAll('.active-peer') |
|||
.each(function () { |
|||
d3.select(this).classed('active-peer', false) |
|||
}) |
|||
|
|||
// add active class to all selected peers
|
|||
selectedPeerPubkeys.forEach((pubkey) => { |
|||
d3.select(`#node-${pubkey}`).classed('active-peer', true) |
|||
}) |
|||
} |
|||
|
|||
updateSelectedChannels() { |
|||
const { selectedChannelIds } = this.props |
|||
|
|||
// remove active class
|
|||
d3.selectAll('.active-channel') |
|||
.each(function () { |
|||
d3.select(this).classed('active-channel', false) |
|||
}) |
|||
|
|||
// add active class to all selected peers
|
|||
selectedChannelIds.forEach((chanid) => { |
|||
d3.select(`#link-${chanid}`).classed('active-channel', true) |
|||
}) |
|||
} |
|||
|
|||
renderSelectedRoute() { |
|||
const { currentRouteChanIds } = this.props |
|||
|
|||
// remove all route animations before rendering new ones
|
|||
d3.selectAll('.animated-route-circle') |
|||
.each(function () { |
|||
d3.select(this).remove() |
|||
}) |
|||
|
|||
currentRouteChanIds.forEach((chanId) => { |
|||
const link = document.getElementById(`link-${chanId}`) |
|||
|
|||
if (!link) { return } |
|||
const x1 = link.x1.baseVal.value |
|||
const x2 = link.x2.baseVal.value |
|||
const y1 = link.y1.baseVal.value |
|||
const y2 = link.y2.baseVal.value |
|||
|
|||
// create the circle that represent btc traveling through a channel
|
|||
this.g |
|||
.append('circle') |
|||
.attr('id', `circle-${chanId}`) |
|||
.attr('class', 'animated-route-circle') |
|||
.attr('r', 50) |
|||
.attr('cx', x1) |
|||
.attr('cy', y1) |
|||
.attr('fill', '#FFDC53') |
|||
|
|||
// we want the animation to repeat back and forth, this function executes that visually
|
|||
const repeat = () => { |
|||
d3.select(`#circle-${chanId}`) |
|||
.transition() |
|||
.attr('cx', x2) |
|||
.attr('cy', y2) |
|||
.duration(1000) |
|||
.transition() |
|||
.duration(1000) |
|||
.attr('cx', x1) |
|||
.attr('cy', y1) |
|||
.on('end', repeat) |
|||
} |
|||
|
|||
// call repeat to animate the circle
|
|||
repeat() |
|||
}) |
|||
} |
|||
|
|||
startSimulation() { |
|||
const { simulationData: { nodes, links } } = this.state |
|||
|
|||
// grab the svg el along with the attributes
|
|||
const svg = d3.select('#map') |
|||
const width = +svg.attr('width') |
|||
const height = +svg.attr('height') |
|||
|
|||
this.g = svg.append('g').attr('transform', `translate(${width / 2},${height / 2})`) |
|||
this.link = this.g.append('g').attr('stroke', 'white').attr('stroke-width', 1.5).selectAll('.link') |
|||
this.node = this.g.append('g').attr('stroke', 'silver').attr('stroke-width', 1.5).selectAll('.node') |
|||
|
|||
this.simulation = d3.forceSimulation(nodes) |
|||
.force('charge', d3.forceManyBody().strength(-750)) |
|||
.force('link', d3.forceLink(links).id(d => d.pub_key).distance(500)) |
|||
.force('collide', d3.forceCollide(300)) |
|||
.on('tick', this.ticked) |
|||
.on('end', () => { |
|||
this.setState({ svgLoaded: true }) |
|||
}) |
|||
// zoom
|
|||
const zoom_handler = d3.zoom().on('zoom', this.zoomActions) |
|||
zoom_handler(svg) |
|||
|
|||
this.restart() |
|||
} |
|||
|
|||
zoomActions() { |
|||
this.g.attr('transform', d3Selection.event.transform) |
|||
} |
|||
|
|||
ticked() { |
|||
this.node.attr('cx', d => d.x) |
|||
.attr('cy', d => d.y) |
|||
|
|||
this.link.attr('x1', d => d.source.x) |
|||
.attr('y1', d => d.source.y) |
|||
.attr('x2', d => d.target.x) |
|||
.attr('y2', d => d.target.y) |
|||
} |
|||
|
|||
restart() { |
|||
const { identity_pubkey } = this.props |
|||
const { simulationData: { nodes, links } } = this.state |
|||
|
|||
// Apply the general update pattern to the nodes.
|
|||
this.node = this.node.data(nodes, d => d.pub_key) |
|||
this.node.exit().remove() |
|||
this.node = this.node.enter() |
|||
.append('circle') |
|||
.attr('stroke', () => 'silver') |
|||
.attr('fill', d => d.pub_key === identity_pubkey ? '#FFF' : '#353535') |
|||
.attr('r', () => 100) |
|||
.attr('id', d => `node-${d.pub_key}`) |
|||
.attr('class', 'network-node') |
|||
.merge(this.node) |
|||
|
|||
// Apply the general update pattern to the links.
|
|||
this.link = this.link.data(links, d => `${d.source.id}-${d.target.id}`) |
|||
this.link.exit().remove() |
|||
this.link = |
|||
this.link.enter() |
|||
.append('line') |
|||
.attr('id', d => `link-${d.channel_id}`) |
|||
.attr('class', 'network-link') |
|||
.merge(this.link) |
|||
|
|||
// Update and restart the simulation.
|
|||
this.simulation.nodes(nodes) |
|||
this.simulation.force('link').links(links) |
|||
this.simulation.restart() |
|||
} |
|||
|
|||
render() { |
|||
const { svgLoaded } = this.state |
|||
|
|||
return ( |
|||
<div className={styles.mapContainer} id='mapContainer'> |
|||
{ |
|||
!svgLoaded && |
|||
<div className={styles.loadingContainer}> |
|||
<div className={styles.loadingWrap}> |
|||
<div className={styles.loader} /> |
|||
<div className={styles.loaderbefore} /> |
|||
<div className={styles.circular} /> |
|||
<div className={`${styles.circular} ${styles.another}`} /> |
|||
<div className={styles.text}>loading</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
CanvasNetworkGraph.propTypes = { |
|||
identity_pubkey: PropTypes.string.isRequired, |
|||
|
|||
network: PropTypes.object.isRequired, |
|||
|
|||
selectedPeerPubkeys: PropTypes.array.isRequired, |
|||
selectedChannelIds: PropTypes.array.isRequired, |
|||
currentRouteChanIds: PropTypes.array.isRequired |
|||
} |
|||
|
|||
export default CanvasNetworkGraph |
|||
@ -0,0 +1,156 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
@keyframes fadein { |
|||
0% { background: $white; } |
|||
50% { background: lighten($secondary, 50%); } |
|||
100% { background: $secondary; animation-fill-mode:forwards; } |
|||
} |
|||
|
|||
.mapContainer { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 70%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.loadingContainer { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: $secondary; |
|||
} |
|||
|
|||
.loadingWrap { |
|||
position: relative; |
|||
top: calc(50% - 150px); |
|||
width: 150px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.loader { |
|||
position: absolute; |
|||
top: 0; |
|||
z-index: 10; |
|||
width: 50px; |
|||
height: 50px; |
|||
border: 15px solid; |
|||
border-radius: 50%; |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
animation: loadEr 3s infinite; |
|||
} |
|||
|
|||
@keyframes loadEr { |
|||
0% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
|
|||
} |
|||
10.4% { |
|||
border-top-color: rgba(44,44,44,0.5); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
} |
|||
20.8% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
} |
|||
31.2% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0.5); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
} |
|||
41.6% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
transform: rotate(40deg); |
|||
} |
|||
52% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0.5); |
|||
border-left-color: rgba(33,33,33,0); |
|||
} |
|||
62.4% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0); |
|||
} |
|||
72.8% { |
|||
border-top-color: rgba(44,44,44,0); |
|||
border-right-color: rgba(55,55,55,0); |
|||
border-bottom-color: rgba(66,66,66,0); |
|||
border-left-color: rgba(33,33,33,0.5); |
|||
} |
|||
} |
|||
|
|||
.loaderbefore { |
|||
width: 50px; |
|||
height:50px; |
|||
border: 15px solid #ddd; |
|||
border-radius: 50%; |
|||
position: absolute; |
|||
top: 0; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.circular { |
|||
position: absolute; |
|||
top: -15px; |
|||
left: -15px; |
|||
width: 70px; |
|||
height: 70px; |
|||
border: 20px solid; |
|||
border-radius: 50%; |
|||
border-top-color: #333; |
|||
border-left-color: #fff; |
|||
border-bottom-color: #333; |
|||
border-right-color: #fff; |
|||
opacity: 0.2; |
|||
animation: poof 5s infinite; |
|||
} |
|||
@keyframes poof { |
|||
0% {transform: scale(1,1) rotate(0deg); opacity: 0.2;} |
|||
50% {transform: scale(4,4) rotate(360deg); opacity: 0;} |
|||
} |
|||
.another { |
|||
opacity: 0.1; |
|||
transform: rotate(90deg); |
|||
animation: poofity 5s infinite; |
|||
animation-delay: 1s; |
|||
} |
|||
@keyframes poofity { |
|||
0% {transform: scale(1,1) rotate(90deg); opacity: 0.1;} |
|||
50% {transform: scale(4,4) rotate(-360deg); opacity: 0;} |
|||
} |
|||
|
|||
.text { |
|||
position: absolute; |
|||
top: 95px; |
|||
left: 8px; |
|||
font-family: Arial; |
|||
text-transform: uppercase; |
|||
color: #888; |
|||
animation: opaa 10s infinite; |
|||
} |
|||
@keyframes opaa { |
|||
0% {opacity: 1;} |
|||
10% {opacity: 0.5} |
|||
15% {opacity: 1;} |
|||
30% {opacity: 1;} |
|||
65% {opacity: 0.3;} |
|||
90% {opacity: 0.8;} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
import { shell } from 'electron' |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { btc } from 'utils' |
|||
import styles from './ChannelsList.scss' |
|||
|
|||
const ChannelsList = ({ channels, updateSelectedChannels, selectedChannelIds }) => ( |
|||
<ul className={styles.channels}> |
|||
{ |
|||
channels.map(channel => |
|||
<li key={channel.chan_id} className={styles.channel} onClick={() => updateSelectedChannels(channel)}> |
|||
<span className={`${styles.dot} ${selectedChannelIds.includes(channel.chan_id) && styles.active}`} /> |
|||
|
|||
<header> |
|||
<h1>Capacity: {btc.satoshisToBtc(channel.capacity)}</h1> |
|||
<span onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>Channel Point</span> |
|||
</header> |
|||
|
|||
<section> |
|||
<h4>Remote Pubkey:</h4> |
|||
<p>{channel.remote_pubkey.substring(0, Math.min(30, channel.remote_pubkey.length))}...</p> |
|||
</section> |
|||
|
|||
<section className={styles.funds}> |
|||
<div> |
|||
<h4>Sent:</h4> |
|||
<p>{btc.satoshisToBtc(channel.total_satoshis_sent)} BTC</p> |
|||
</div> |
|||
<div> |
|||
<h4>Received:</h4> |
|||
<p>{btc.satoshisToBtc(channel.total_satoshis_received)} BTC</p> |
|||
</div> |
|||
</section> |
|||
</li> |
|||
) |
|||
} |
|||
</ul> |
|||
) |
|||
|
|||
ChannelsList.propTypes = { |
|||
channels: PropTypes.array.isRequired, |
|||
updateSelectedChannels: PropTypes.func.isRequired, |
|||
selectedChannelIds: PropTypes.array.isRequired |
|||
} |
|||
|
|||
export default ChannelsList |
|||
@ -0,0 +1,78 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.channels { |
|||
color: $white; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.channel { |
|||
position: relative; |
|||
margin: 20px 0; |
|||
padding: 10px 40px; |
|||
cursor: pointer; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
background: darken(#353535, 10%); |
|||
|
|||
.dot { |
|||
background: #88D4A2; |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
top: calc(15% - 10px); |
|||
left: 5%; |
|||
width: 10px; |
|||
height: 10px; |
|||
border: 1px solid #979797; |
|||
border-radius: 50%; |
|||
|
|||
&.active { |
|||
background: #88D4A2; |
|||
} |
|||
} |
|||
|
|||
header { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
|
|||
h1 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
span { |
|||
font-size: 10px; |
|||
text-decoration: underline; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
color: #88D4A2; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
section { |
|||
margin: 10px 0; |
|||
|
|||
h4 { |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
font-size: 10px; |
|||
margin-bottom: 5px; |
|||
} |
|||
} |
|||
|
|||
.funds { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-top: 20px; |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import styles from './PeersList.scss' |
|||
|
|||
const PeersList = ({ peers, updateSelectedPeers, selectedPeerPubkeys }) => ( |
|||
<ul className={styles.peers}> |
|||
{ |
|||
peers.map(peer => |
|||
<li key={peer.peer_id} className={styles.peer} onClick={() => updateSelectedPeers(peer)}> |
|||
<span className={`${styles.dot} ${selectedPeerPubkeys.includes(peer.pub_key) && styles.active}`} /> |
|||
<h1>{peer.address}</h1> |
|||
<h4>{peer.pub_key}</h4> |
|||
</li> |
|||
) |
|||
} |
|||
</ul> |
|||
) |
|||
|
|||
PeersList.propTypes = { |
|||
peers: PropTypes.array.isRequired, |
|||
updateSelectedPeers: PropTypes.func.isRequired, |
|||
selectedPeerPubkeys: PropTypes.array.isRequired |
|||
} |
|||
|
|||
export default PeersList |
|||
@ -0,0 +1,46 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
.peers { |
|||
color: $white; |
|||
margin-top: 50px; |
|||
} |
|||
|
|||
.peer { |
|||
position: relative; |
|||
margin: 20px 0; |
|||
padding: 10px 40px; |
|||
cursor: pointer; |
|||
transition: all 0.25s; |
|||
|
|||
&:hover { |
|||
background: darken(#353535, 10%); |
|||
|
|||
.dot { |
|||
background: #5589F3; |
|||
opacity: 0.5; |
|||
} |
|||
} |
|||
|
|||
.dot { |
|||
position: absolute; |
|||
top: calc(50% - 10px); |
|||
left: 5%; |
|||
width: 10px; |
|||
height: 10px; |
|||
border: 1px solid #979797; |
|||
border-radius: 50%; |
|||
|
|||
&.active { |
|||
background: #5589F3; |
|||
} |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 16px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
h4 { |
|||
font-size: 8px; |
|||
} |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { btc } from 'utils' |
|||
import styles from './TransactionForm.scss' |
|||
|
|||
const TransactionForm = ({ updatePayReq, pay_req, loadingRoutes, payReqRoutes, setCurrentRoute, currentRoute }) => ( |
|||
<div className={styles.transactionForm}> |
|||
<div className={styles.form}> |
|||
<input |
|||
className={styles.transactionInput} |
|||
placeholder='Payment request...' |
|||
value={pay_req} |
|||
onChange={event => updatePayReq(event.target.value)} |
|||
/> |
|||
</div> |
|||
|
|||
{ |
|||
loadingRoutes && |
|||
<div className={styles.loading}> |
|||
<div className={styles.spinner} /> |
|||
<h1>calculating all routes...</h1> |
|||
</div> |
|||
} |
|||
|
|||
<ul className={styles.routes}> |
|||
{ |
|||
payReqRoutes.map((route, index) => |
|||
<li className={`${styles.route} ${currentRoute == route && styles.active}`} key={index} onClick={() => setCurrentRoute(route)}> |
|||
<header> |
|||
<h1>Route #{index + 1}</h1> |
|||
<span>Hops: {route.hops.length}</span> |
|||
</header> |
|||
|
|||
<div className={styles.data}> |
|||
<section> |
|||
<h4>Amount</h4> |
|||
<span>{btc.satoshisToBtc(route.total_amt)} BTC</span> |
|||
</section> |
|||
|
|||
<section> |
|||
<h4>Fees</h4> |
|||
<span>{btc.satoshisToBtc(route.total_fees)} BTC</span> |
|||
</section> |
|||
</div> |
|||
</li> |
|||
) |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
|
|||
TransactionForm.propTypes = { |
|||
updatePayReq: PropTypes.func.isRequired, |
|||
pay_req: PropTypes.string.isRequired, |
|||
loadingRoutes: PropTypes.bool.isRequired, |
|||
payReqRoutes: PropTypes.array.isRequired, |
|||
setCurrentRoute: PropTypes.func.isRequired, |
|||
currentRoute: PropTypes.object.isRequired |
|||
} |
|||
|
|||
export default TransactionForm |
|||
@ -0,0 +1,125 @@ |
|||
@import '../../variables.scss'; |
|||
|
|||
@-webkit-keyframes animation-rotate { |
|||
100% { |
|||
-webkit-transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
@-moz-keyframes animation-rotate { |
|||
100% { |
|||
-moz-transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
@-o-keyframes animation-rotate { |
|||
100% { |
|||
-o-transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
@keyframes animation-rotate { |
|||
100% { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
.spinner { |
|||
border: 1px solid rgba(255, 220, 83, 0.1); |
|||
border-left-color: rgba(255, 220, 83, 0.4); |
|||
-webkit-border-radius: 999px; |
|||
-moz-border-radius: 999px; |
|||
border-radius: 999px; |
|||
} |
|||
|
|||
.spinner { |
|||
margin: 0 auto; |
|||
height: 100px; |
|||
width: 100px; |
|||
-webkit-animation: animation-rotate 1000ms linear infinite; |
|||
-moz-animation: animation-rotate 1000ms linear infinite; |
|||
-o-animation: animation-rotate 1000ms linear infinite; |
|||
animation: animation-rotate 1000ms linear infinite; |
|||
} |
|||
|
|||
.loading { |
|||
margin-top: 40px; |
|||
|
|||
h1 { |
|||
text-align: center; |
|||
margin-top: 25px; |
|||
} |
|||
} |
|||
|
|||
.transactionForm { |
|||
color: $white; |
|||
margin-top: 50px; |
|||
|
|||
.form { |
|||
padding: 0 20px; |
|||
} |
|||
|
|||
.transactionInput { |
|||
outline: 0; |
|||
border: 0; |
|||
border-bottom: 1px solid $secondary; |
|||
color: $secondary; |
|||
background: transparent; |
|||
padding: 5px; |
|||
width: 100%; |
|||
font-size: 14px; |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
.routes { |
|||
margin-top: 40px; |
|||
} |
|||
|
|||
.route { |
|||
margin: 20px 0; |
|||
padding: 20px; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: darken(#353535, 10%); |
|||
} |
|||
|
|||
&.active { |
|||
background: darken(#353535, 10%); |
|||
} |
|||
|
|||
header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
margin-bottom: 20px; |
|||
|
|||
h1 { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
span { |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
font-size: 12px; |
|||
letter-spacing: 1.2px; |
|||
} |
|||
} |
|||
|
|||
.data { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
section { |
|||
h4 { |
|||
font-size: 12px; |
|||
font-weight: bold; |
|||
margin-bottom: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,42 +0,0 @@ |
|||
import zbase32 from 'zbase32' |
|||
|
|||
function convertBigEndianBufferToLong(longBuffer) { |
|||
let longValue = 0 |
|||
const byteArray = Buffer.from(longBuffer).swap64() |
|||
|
|||
for (let i = byteArray.length - 1; i >= 0; i -= 1) { |
|||
longValue = (longValue * 256) + byteArray[i] |
|||
} |
|||
|
|||
return longValue |
|||
} |
|||
|
|||
export function decodeInvoice(payreq) { |
|||
const payreqBase32 = zbase32.decode(payreq) |
|||
|
|||
const bufferHexRotated = Buffer.from(payreqBase32).toString('hex') |
|||
const bufferHex = bufferHexRotated.substr(bufferHexRotated.length - 1, bufferHexRotated.length) |
|||
+ bufferHexRotated.substr(0, bufferHexRotated.length - 1) |
|||
const buffer = Buffer.from(bufferHex, 'hex') |
|||
|
|||
const pubkeyBuffer = buffer.slice(0, 33) |
|||
const pubkey = pubkeyBuffer.toString('hex') |
|||
|
|||
const paymentHashBuffer = buffer.slice(33, 65) |
|||
const paymentHashHex = paymentHashBuffer.toString('hex') |
|||
|
|||
const valueBuffer = buffer.slice(65, 73) |
|||
|
|||
const amount = convertBigEndianBufferToLong(valueBuffer) |
|||
|
|||
return { |
|||
payreq, |
|||
pubkey, |
|||
amount, |
|||
r_hash: paymentHashHex |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
decodeInvoice |
|||
} |
|||
@ -0,0 +1,155 @@ |
|||
import React, { Component } from 'react' |
|||
import PropTypes from 'prop-types' |
|||
|
|||
import CanvasNetworkGraph from 'components/Network/CanvasNetworkGraph' |
|||
import PeersList from 'components/Network/PeersList' |
|||
import ChannelsList from 'components/Network/ChannelsList' |
|||
import TransactionForm from 'components/Network/TransactionForm' |
|||
|
|||
import styles from './Network.scss' |
|||
|
|||
class Network extends Component { |
|||
componentWillMount() { |
|||
const { fetchDescribeNetwork, fetchPeers, fetchChannels } = this.props |
|||
|
|||
fetchPeers() |
|||
fetchChannels() |
|||
fetchDescribeNetwork() |
|||
} |
|||
|
|||
componentDidUpdate(prevProps) { |
|||
const { payReqIsLn, network: { pay_req }, fetchInvoiceAndQueryRoutes, clearQueryRoutes } = this.props |
|||
|
|||
// If LN go retrieve invoice details
|
|||
if ((prevProps.network.pay_req !== pay_req) && payReqIsLn) { |
|||
fetchInvoiceAndQueryRoutes(pay_req) |
|||
} |
|||
|
|||
if (prevProps.payReqIsLn && !payReqIsLn) { |
|||
clearQueryRoutes() |
|||
} |
|||
} |
|||
|
|||
componentWillUnmount() { |
|||
const { clearQueryRoutes, resetPayReq, clearSelectedChannels, clearSelectedPeers } = this.props |
|||
|
|||
clearQueryRoutes() |
|||
resetPayReq() |
|||
clearSelectedChannels() |
|||
clearSelectedPeers() |
|||
} |
|||
|
|||
render() { |
|||
const { |
|||
setCurrentTab, |
|||
updateSelectedPeers, |
|||
setCurrentRoute, |
|||
|
|||
network, |
|||
selectedPeerPubkeys, |
|||
currentRouteChanIds, |
|||
|
|||
peers: { peers }, |
|||
|
|||
activeChannels, |
|||
selectedChannelIds, |
|||
updateSelectedChannels, |
|||
|
|||
updatePayReq, |
|||
|
|||
identity_pubkey |
|||
} = this.props |
|||
|
|||
const renderContent = () => { |
|||
switch (network.currentTab) { |
|||
case 1: |
|||
return <PeersList peers={peers} updateSelectedPeers={updateSelectedPeers} selectedPeerPubkeys={selectedPeerPubkeys} /> |
|||
case 2: |
|||
return <ChannelsList channels={activeChannels} updateSelectedChannels={updateSelectedChannels} selectedChannelIds={selectedChannelIds} /> |
|||
case 3: |
|||
return ( |
|||
<TransactionForm |
|||
updatePayReq={updatePayReq} |
|||
pay_req={network.pay_req} |
|||
loadingRoutes={network.fetchingInvoiceAndQueryingRoutes} |
|||
payReqRoutes={network.payReqRoutes} |
|||
setCurrentRoute={setCurrentRoute} |
|||
currentRoute={network.currentRoute} |
|||
/> |
|||
) |
|||
default: |
|||
return <span /> |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<CanvasNetworkGraph |
|||
className={styles.network} |
|||
network={network} |
|||
identity_pubkey={identity_pubkey} |
|||
selectedPeerPubkeys={selectedPeerPubkeys} |
|||
selectedChannelIds={selectedChannelIds} |
|||
currentRouteChanIds={currentRouteChanIds} |
|||
/> |
|||
|
|||
<section className={styles.toolbox}> |
|||
<ul className={styles.tabs}> |
|||
<li |
|||
className={`${styles.tab} ${styles.peersTab} ${network.currentTab === 1 && styles.active}`} |
|||
onClick={() => setCurrentTab(1)} |
|||
> |
|||
Peers |
|||
</li> |
|||
<li |
|||
className={`${styles.tab} ${styles.channelsTab} ${network.currentTab === 2 && styles.active}`} |
|||
onClick={() => setCurrentTab(2)} |
|||
> |
|||
Channels |
|||
</li> |
|||
<li |
|||
className={`${styles.tab} ${styles.transactionsTab} ${network.currentTab === 3 && styles.active}`} |
|||
onClick={() => setCurrentTab(3)} |
|||
> |
|||
Transactions |
|||
</li> |
|||
</ul> |
|||
|
|||
<div className={styles.content}> |
|||
{renderContent()} |
|||
</div> |
|||
</section> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
Network.propTypes = { |
|||
fetchDescribeNetwork: PropTypes.func.isRequired, |
|||
fetchPeers: PropTypes.func.isRequired, |
|||
setCurrentTab: PropTypes.func.isRequired, |
|||
fetchChannels: PropTypes.func.isRequired, |
|||
fetchInvoiceAndQueryRoutes: PropTypes.func.isRequired, |
|||
clearQueryRoutes: PropTypes.func.isRequired, |
|||
resetPayReq: PropTypes.func.isRequired, |
|||
clearSelectedChannels: PropTypes.func.isRequired, |
|||
clearSelectedPeers: PropTypes.func.isRequired, |
|||
updateSelectedPeers: PropTypes.func.isRequired, |
|||
setCurrentRoute: PropTypes.func.isRequired, |
|||
updateSelectedChannels: PropTypes.func.isRequired, |
|||
updatePayReq: PropTypes.func.isRequired, |
|||
|
|||
network: PropTypes.object.isRequired, |
|||
peers: PropTypes.object.isRequired, |
|||
|
|||
selectedPeerPubkeys: PropTypes.array.isRequired, |
|||
currentRouteChanIds: PropTypes.array.isRequired, |
|||
activeChannels: PropTypes.array.isRequired, |
|||
selectedChannelIds: PropTypes.array.isRequired, |
|||
|
|||
identity_pubkey: PropTypes.string.isRequired, |
|||
|
|||
payReqIsLn: PropTypes.bool.isRequired |
|||
} |
|||
|
|||
export default Network |
|||
@ -0,0 +1,81 @@ |
|||
@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, .toolbox { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
height: 100vh; |
|||
} |
|||
|
|||
.network { |
|||
width: 70%; |
|||
} |
|||
|
|||
.toolbox { |
|||
width: 30%; |
|||
height: 100%; |
|||
background: #353535; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.tabs { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-top: 40px; |
|||
|
|||
.tab { |
|||
color: $white; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
width: 100%; |
|||
padding: 10px 0; |
|||
border-bottom: 1px solid #464646; |
|||
transition: all 0.5s; |
|||
|
|||
&.peersTab:hover, &.peersTab.active { |
|||
border-bottom: 1px solid #588CF0; |
|||
} |
|||
|
|||
&.channelsTab:hover, &.channelsTab.active { |
|||
border-bottom: 1px solid #88D4A2; |
|||
} |
|||
|
|||
&.transactionsTab:hover, &.transactionsTab.active { |
|||
border-bottom: 1px solid #FFDC53; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
import { withRouter } from 'react-router' |
|||
import { connect } from 'react-redux' |
|||
|
|||
import { |
|||
fetchDescribeNetwork, |
|||
|
|||
setCurrentTab, |
|||
|
|||
updateSelectedPeers, |
|||
clearSelectedPeers, |
|||
|
|||
updateSelectedChannels, |
|||
clearSelectedChannels, |
|||
|
|||
setCurrentRoute, |
|||
|
|||
updatePayReq, |
|||
resetPayReq, |
|||
|
|||
fetchInvoiceAndQueryRoutes, |
|||
clearQueryRoutes, |
|||
|
|||
networkSelectors |
|||
} from '../../../reducers/network' |
|||
import { fetchPeers } from '../../../reducers/peers' |
|||
import { fetchChannels, channelsSelectors } from '../../../reducers/channels' |
|||
|
|||
import Network from '../components/Network' |
|||
|
|||
const mapDispatchToProps = { |
|||
fetchDescribeNetwork, |
|||
setCurrentTab, |
|||
|
|||
updateSelectedPeers, |
|||
clearSelectedPeers, |
|||
|
|||
updatePayReq, |
|||
fetchInvoiceAndQueryRoutes, |
|||
setCurrentRoute, |
|||
clearQueryRoutes, |
|||
resetPayReq, |
|||
|
|||
fetchPeers, |
|||
|
|||
fetchChannels, |
|||
updateSelectedChannels, |
|||
clearSelectedChannels |
|||
} |
|||
|
|||
const mapStateToProps = state => ({ |
|||
network: state.network, |
|||
peers: state.peers, |
|||
identity_pubkey: state.info.data.identity_pubkey, |
|||
|
|||
selectedPeerPubkeys: networkSelectors.selectedPeerPubkeys(state), |
|||
selectedChannelIds: networkSelectors.selectedChannelIds(state), |
|||
payReqIsLn: networkSelectors.payReqIsLn(state), |
|||
currentRouteChanIds: networkSelectors.currentRouteChanIds(state), |
|||
activeChannels: channelsSelectors.activeChannels(state) |
|||
}) |
|||
|
|||
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network)) |
|||
@ -0,0 +1,3 @@ |
|||
import NetworkContainer from './containers/NetworkContainer' |
|||
|
|||
export default NetworkContainer |
|||
Loading…
Reference in new issue