Jack Mallers
8 years ago
14 changed files with 283 additions and 147 deletions
@ -0,0 +1,42 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import ChannelModal from './components/ChannelModal' |
|||
import Channel from './components/Channel' |
|||
import styles from './Channels.scss' |
|||
|
|||
class Channels extends Component { |
|||
render() { |
|||
const { |
|||
channelsLoading, |
|||
channels, |
|||
modalChannel, |
|||
setChannel, |
|||
channelModalOpen |
|||
} = this.props |
|||
return ( |
|||
<div className={styles.channels}> |
|||
<ChannelModal isOpen={channelModalOpen} resetChannel={setChannel}> |
|||
<h1>yooooo</h1> |
|||
</ChannelModal> |
|||
<h3>Channels</h3> |
|||
<ul> |
|||
{ |
|||
!channelsLoading && channels.length ? |
|||
channels.map(channel => |
|||
<Channel |
|||
key={channel.chan_id} |
|||
channel={channel} |
|||
setChannel={setChannel} |
|||
/> |
|||
) |
|||
: |
|||
'Loading...' |
|||
} |
|||
</ul> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default Channels |
|||
@ -0,0 +1,15 @@ |
|||
@import '../../../../../variables.scss'; |
|||
|
|||
.channels { |
|||
width: 75%; |
|||
margin: 50px auto; |
|||
|
|||
h3 { |
|||
text-transform: uppercase; |
|||
color: $darkestgrey; |
|||
letter-spacing: 1.6px; |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import styles from './Channel.scss' |
|||
|
|||
class Channel extends Component { |
|||
render() { |
|||
const { channel, setChannel } = this.props |
|||
return ( |
|||
<li className={styles.channel} onClick={() => setChannel(channel)}> |
|||
<div className={styles.left}> |
|||
<section className={styles.remotePubkey}> |
|||
<span>Remote Pubkey</span> |
|||
<h4>{channel.remote_pubkey}</h4> |
|||
</section> |
|||
<section className={styles.channelPoint}> |
|||
<span>Channel Point</span> |
|||
<h4>{channel.channel_point}</h4> |
|||
</section> |
|||
</div> |
|||
<div className={styles.right}> |
|||
<section className={styles.capacity}> |
|||
<span>Capacity</span> |
|||
<h2>{channel.capacity}</h2> |
|||
</section> |
|||
<div className={styles.balances}> |
|||
<section> |
|||
<h4>{channel.local_balance}</h4> |
|||
<span>Local</span> |
|||
</section> |
|||
<section> |
|||
<h4>{channel.remote_balance}</h4> |
|||
<span>Remote</span> |
|||
</section> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default Channel |
|||
@ -0,0 +1,76 @@ |
|||
@import '../../../../../../../variables.scss'; |
|||
|
|||
.channel { |
|||
position: relative; |
|||
background: $white; |
|||
padding: 10px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
border-top: 1px solid $black; |
|||
|
|||
&:first-child { |
|||
border: none; |
|||
} |
|||
|
|||
.left, .right { |
|||
padding: 0 10px; |
|||
margin-bottom: 5; |
|||
|
|||
section { |
|||
margin-bottom: 20px; |
|||
|
|||
span { |
|||
text-transform: uppercase; |
|||
letter-spacing: 1.6px; |
|||
color: $black; |
|||
font-size: 10px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 30px; |
|||
padding: 5px 0; |
|||
color: $main; |
|||
} |
|||
|
|||
h4 { |
|||
margin-top: 5px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.left { |
|||
flex: 7; |
|||
border-right: 1px solid $grey; |
|||
} |
|||
|
|||
.right { |
|||
flex: 3; |
|||
|
|||
.capacity { |
|||
text-align: center; |
|||
border-bottom: 1px solid $grey; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.balances { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
section { |
|||
flex: 5; |
|||
text-align: center; |
|||
|
|||
h4 { |
|||
color: $main; |
|||
font-size: 20px; |
|||
} |
|||
|
|||
&:first-child { |
|||
border-right: 1px solid $grey; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import Channel from './Channel' |
|||
|
|||
export default Channel |
|||
@ -0,0 +1,39 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import ReactModal from 'react-modal' |
|||
import styles from './ChannelModal.scss' |
|||
|
|||
class ChannelModal extends Component { |
|||
render() { |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer' |
|||
}, |
|||
content : { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto' |
|||
} |
|||
} |
|||
const { isOpen, resetChannel, children } = this.props |
|||
return ( |
|||
<ReactModal |
|||
isOpen={isOpen} |
|||
contentLabel="No Overlay Click Modal" |
|||
ariaHideApp={true} |
|||
shouldCloseOnOverlayClick={true} |
|||
onRequestClose={() => resetChannel(null)} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
{children} |
|||
</ReactModal> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default ChannelModal |
|||
@ -0,0 +1,3 @@ |
|||
import ChannelModal from './ChannelModal' |
|||
|
|||
export default ChannelModal |
|||
@ -0,0 +1,3 @@ |
|||
import Channels from './Channels' |
|||
|
|||
export default Channels |
|||
@ -1,19 +1,25 @@ |
|||
import { connect } from 'react-redux' |
|||
import { fetchInfo } from '../../../reducers/info' |
|||
import { fetchPeers } from '../../../reducers/peers' |
|||
import { fetchChannels } from '../../../reducers/channels' |
|||
import { fetchChannels, setChannel, channelsSelectors } from '../../../reducers/channels' |
|||
import Wallet from '../components/Wallet' |
|||
|
|||
const mapDispatchToProps = { |
|||
fetchInfo, |
|||
|
|||
fetchPeers, |
|||
fetchChannels |
|||
|
|||
fetchChannels, |
|||
setChannel |
|||
} |
|||
|
|||
const mapStateToProps = (state) => ({ |
|||
info: state.info, |
|||
|
|||
peers: state.peers, |
|||
channels: state.channels |
|||
channels: state.channels, |
|||
|
|||
channelModalOpen: channelsSelectors.channelModalOpen(state) |
|||
}) |
|||
|
|||
export default connect(mapStateToProps, mapDispatchToProps)(Wallet) |
|||
Loading…
Reference in new issue