Jack Mallers
7 years ago
16 changed files with 507 additions and 77 deletions
@ -1,15 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import styles from './CardChannel.scss' |
|
||||
|
|
||||
const CardChannel = ({ channel }) => ( |
|
||||
<li className={styles.channel}> |
|
||||
{channel.chan_id} |
|
||||
</li> |
|
||||
) |
|
||||
|
|
||||
CardChannel.propTypes = { |
|
||||
channel: PropTypes.object.isRequired |
|
||||
} |
|
||||
|
|
||||
export default CardChannel |
|
||||
@ -1,6 +0,0 @@ |
|||||
.channel { |
|
||||
width: 40%; |
|
||||
margin: 0 5% 20px 5%; |
|
||||
height: 500px; |
|
||||
background: red; |
|
||||
} |
|
||||
@ -0,0 +1,133 @@ |
|||||
|
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 |
||||
@ -0,0 +1,114 @@ |
|||||
|
@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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,129 @@ |
|||||
|
import { createSelector } from 'reselect' |
||||
|
import { ipcRenderer } from 'electron' |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Constants
|
||||
|
// ------------------------------------
|
||||
|
export const GET_DESCRIBE_NETWORK = 'GET_DESCRIBE_NETWORK' |
||||
|
export const RECEIVE_DESCRIBE_NETWORK = 'RECEIVE_DESCRIBE_NETWORK' |
||||
|
|
||||
|
export const GET_QUERY_ROUTES = 'GET_QUERY_ROUTES' |
||||
|
export const RECEIVE_QUERY_ROUTES = 'RECEIVE_QUERY_ROUTES' |
||||
|
|
||||
|
export const SET_CURRENT_ROUTE = 'SET_CURRENT_ROUTE' |
||||
|
|
||||
|
export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL' |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Actions
|
||||
|
// ------------------------------------
|
||||
|
export function getDescribeNetwork() { |
||||
|
return { |
||||
|
type: GET_DESCRIBE_NETWORK |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function getQueryRoutes(pubkey) { |
||||
|
return { |
||||
|
type: GET_QUERY_ROUTES, |
||||
|
pubkey |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function setCurrentRoute(route) { |
||||
|
return { |
||||
|
type: SET_CURRENT_ROUTE, |
||||
|
route |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export function setCurrentChannel(selectedChannel) { |
||||
|
return { |
||||
|
type: SET_CURRENT_CHANNEL, |
||||
|
selectedChannel |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Send IPC event for describeNetwork
|
||||
|
export const fetchDescribeNetwork = () => (dispatch) => { |
||||
|
dispatch(getDescribeNetwork()) |
||||
|
ipcRenderer.send('lnd', { msg: 'describeNetwork' }) |
||||
|
} |
||||
|
|
||||
|
// Receive IPC event for describeNetwork
|
||||
|
export const receiveDescribeNetwork = (event, { nodes, edges }) => dispatch => dispatch({ type: RECEIVE_DESCRIBE_NETWORK, nodes, edges }) |
||||
|
|
||||
|
export const queryRoutes = (pubkey, amount) => (dispatch) => { |
||||
|
dispatch(getQueryRoutes(pubkey)) |
||||
|
ipcRenderer.send('lnd', { msg: 'queryRoutes', data: { pubkey, amount } }) |
||||
|
} |
||||
|
|
||||
|
export const receiveQueryRoutes = (event, { routes }) => dispatch => dispatch({ type: RECEIVE_QUERY_ROUTES, routes }) |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Action Handlers
|
||||
|
// ------------------------------------
|
||||
|
const ACTION_HANDLERS = { |
||||
|
[GET_DESCRIBE_NETWORK]: state => ({ ...state, networkLoading: true }), |
||||
|
[RECEIVE_DESCRIBE_NETWORK]: (state, { nodes, edges }) => ({ ...state, networkLoading: false, nodes, edges }), |
||||
|
|
||||
|
[GET_QUERY_ROUTES]: (state, { pubkey }) => ({ ...state, networkLoading: true, selectedNode: { pubkey, routes: [], currentRoute: {} } }), |
||||
|
[RECEIVE_QUERY_ROUTES]: (state, { routes }) => ( |
||||
|
{ |
||||
|
...state, |
||||
|
networkLoading: false, |
||||
|
selectedNode: { pubkey: state.selectedNode.pubkey, routes, currentRoute: routes[0] } |
||||
|
} |
||||
|
), |
||||
|
|
||||
|
[SET_CURRENT_ROUTE]: (state, { route }) => ( |
||||
|
{ |
||||
|
...state, |
||||
|
selectedNode: { pubkey: state.selectedNode.pubkey, routes: state.selectedNode.routes, currentRoute: route } |
||||
|
} |
||||
|
), |
||||
|
|
||||
|
[SET_CURRENT_CHANNEL]: (state, { selectedChannel }) => ({ ...state, selectedChannel }) |
||||
|
} |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Selectors
|
||||
|
// ------------------------------------
|
||||
|
const networkSelectors = {} |
||||
|
const currentRouteSelector = state => state.network.selectedNode.currentRoute |
||||
|
|
||||
|
networkSelectors.currentRouteHopChanIds = createSelector( |
||||
|
currentRouteSelector, |
||||
|
(currentRoute) => { |
||||
|
if (!currentRoute.hops) { return [] } |
||||
|
|
||||
|
return currentRoute.hops.map(hop => hop.chan_id) |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
export { networkSelectors } |
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Initial State
|
||||
|
// ------------------------------------
|
||||
|
const initialState = { |
||||
|
networkLoading: false, |
||||
|
nodes: [], |
||||
|
edges: [], |
||||
|
selectedNode: { |
||||
|
pubkey: '', |
||||
|
routes: [], |
||||
|
currentRoute: {} |
||||
|
}, |
||||
|
selectedChannel: {} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// ------------------------------------
|
||||
|
// Reducer
|
||||
|
// ------------------------------------
|
||||
|
export default function activityReducer(state = initialState, action) { |
||||
|
const handler = ACTION_HANDLERS[action.type] |
||||
|
|
||||
|
return handler ? handler(state, action) : state |
||||
|
} |
||||
Loading…
Reference in new issue