diff --git a/app/reducers/channels.js b/app/reducers/channels.js index b30ef4a8..3167643d 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -3,6 +3,8 @@ import { callApi } from '../api' // ------------------------------------ // Constants // ------------------------------------ +export const SET_FORM = 'SET_FORM' + export const SET_CHANNEL = 'SET_CHANNEL' export const GET_CHANNELS = 'GET_CHANNELS' @@ -11,6 +13,14 @@ export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS' // ------------------------------------ // Actions // ------------------------------------ +export function setForm(isOpen) { + return { + type: SET_FORM, + isOpen + } +} + + export function setChannel(channel) { return { type: SET_CHANNEL, @@ -41,6 +51,8 @@ export const fetchChannels = () => async (dispatch) => { // Action Handlers // ------------------------------------ const ACTION_HANDLERS = { + [SET_FORM]: (state, { isOpen }) => ({ ...state, form: { ...state.form, isOpen } }), + [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }), [GET_CHANNELS]: (state) => ({ ...state, channelsLoading: true }), @@ -63,7 +75,13 @@ export { channelsSelectors } const initialState = { channelsLoading: false, channels: [], - channel: null + channel: null, + form: { + isOpen: false, + node_key: '', + local_amt: '', + push_amt: '' + } } export default function channelsReducer(state = initialState, action) { diff --git a/app/routes/wallet/components/Wallet.js b/app/routes/wallet/components/Wallet.js index 6918ce3f..64080883 100644 --- a/app/routes/wallet/components/Wallet.js +++ b/app/routes/wallet/components/Wallet.js @@ -18,9 +18,10 @@ class Wallet extends Component { const { info, peers: { peersLoading, peers }, - channels: { channelsLoading, channels, channel }, + channels: { channelsLoading, channels, channel, form }, channelModalOpen, - setChannel + setChannel, + setForm } = this.props return ( @@ -41,6 +42,8 @@ class Wallet extends Component { modalChannel={channel} setChannel={setChannel} channelModalOpen={channelModalOpen} + form={form} + setForm={setForm} /> diff --git a/app/routes/wallet/components/components/Channels/Channels.js b/app/routes/wallet/components/components/Channels/Channels.js index 2eb93b8d..5aa3c891 100644 --- a/app/routes/wallet/components/components/Channels/Channels.js +++ b/app/routes/wallet/components/components/Channels/Channels.js @@ -1,6 +1,8 @@ // @flow import React, { Component } from 'react' +import { TiPlus } from 'react-icons/lib/ti' import ChannelModal from './components/ChannelModal' +import ChannelForm from './components/ChannelForm' import Channel from './components/Channel' import styles from './Channels.scss' @@ -11,14 +13,24 @@ class Channels extends Component { channels, modalChannel, setChannel, - channelModalOpen + channelModalOpen, + form, + setForm } = this.props return (
- -

yooooo

- -

Channels

+ + +
+

Channels

+
setForm(true)} + > + +
+
    { !channelsLoading && channels.length ? diff --git a/app/routes/wallet/components/components/Channels/Channels.scss b/app/routes/wallet/components/components/Channels/Channels.scss index f3fbc7f2..c2085f5b 100644 --- a/app/routes/wallet/components/components/Channels/Channels.scss +++ b/app/routes/wallet/components/components/Channels/Channels.scss @@ -1,15 +1,45 @@ @import '../../../../../variables.scss'; .channels { - width: 75%; - margin: 50px auto; + width: 75%; + margin: 50px auto; + + .header { + margin-bottom: 10px; + + h3, .openChannel { + display: inline-block; + } h3 { - text-transform: uppercase; - color: $darkestgrey; - letter-spacing: 1.6px; - font-size: 14px; - font-weight: 400; - margin-bottom: 10px; + text-align: left; + } + + .openChannel { + float: right; + cursor: pointer; + + svg { + padding: 3px; + border-radius: 50%; + border: 1px solid $main; + color: $main; + transition: all 0.25s; + + &:hover { + border-color: darken($main, 10%); + color: darken($main, 10%); + } + } } - } \ No newline at end of file + } + + h3 { + text-transform: uppercase; + color: $darkestgrey; + letter-spacing: 1.6px; + font-size: 14px; + font-weight: 400; + margin-bottom: 10px; + } +} \ No newline at end of file diff --git a/app/routes/wallet/components/components/Channels/components/Channel/Channel.scss b/app/routes/wallet/components/components/Channels/components/Channel/Channel.scss index 1a45199c..c6ddce2b 100644 --- a/app/routes/wallet/components/components/Channels/components/Channel/Channel.scss +++ b/app/routes/wallet/components/components/Channels/components/Channel/Channel.scss @@ -8,6 +8,7 @@ flex-direction: row; justify-content: space-between; border-top: 1px solid $black; + cursor: pointer; &:first-child { border: none; diff --git a/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.js b/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.js new file mode 100644 index 00000000..a3ec6b0a --- /dev/null +++ b/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.js @@ -0,0 +1,77 @@ +// @flow +import React, { Component } from 'react' +import ReactModal from 'react-modal' +import styles from './ChannelForm.scss' + +class ChannelForm extends Component { + render() { + const customStyles = { + overlay: { + cursor: 'pointer', + overflowY: 'auto' + }, + content : { + top: 'auto', + left: '20%', + right: '0', + bottom: 'auto', + width: '40%', + margin: '50px auto', + padding: '40px' + } + } + + const { form, setForm } = this.props + return ( +
    + setForm(false)} + parentSelector={() => document.body} + style={customStyles} + > +
    +

    Open a new channel

    + +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    + Submit +
    +
    +
    +     +
    + ) + } +} + + +export default ChannelForm \ No newline at end of file diff --git a/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.scss b/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.scss new file mode 100644 index 00000000..47de48de --- /dev/null +++ b/app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.scss @@ -0,0 +1,69 @@ +@import '../../../../../../../variables.scss'; + +.title { + text-align: center; + font-size: 24px; + color: $black; + margin-bottom: 50px; +} + +.pubkey, .local, .push { + display: flex; + justify-content: center; + font-size: 18px; + height: auto; + min-height: 55px; + margin-bottom: 20px; + border: 1px solid $traditionalgrey; + border-radius: 6px; + position: relative; + padding: 0 20px; + + label, input[type=text] { + font-size: inherit; + } + + label { + padding-top: 19px; + padding-bottom: 12px; + color: $traditionalgrey; + } + + input[type=text] { + width: 100%; + border: none; + outline: 0; + -webkit-appearance: none; + height: 55px; + padding: 0 10px; + } +} + +.buttonGroup { + width: 100%; + display: flex; + flex-direction: row; + border-radius: 6px; + overflow: hidden; + + .button { + cursor: pointer; + height: 55px; + min-height: 55px; + text-transform: none; + font-size: 18px; + transition: opacity .2s ease-out; + background: $main; + color: $white; + border: none; + font-weight: 500; + padding: 0; + width: 100%; + text-align: center; + line-height: 55px; + + &:first-child { + border-right: 1px solid lighten($main, 20%); + } + } +} \ No newline at end of file diff --git a/app/routes/wallet/components/components/Channels/components/ChannelForm/index.js b/app/routes/wallet/components/components/Channels/components/ChannelForm/index.js new file mode 100644 index 00000000..1bcf89ef --- /dev/null +++ b/app/routes/wallet/components/components/Channels/components/ChannelForm/index.js @@ -0,0 +1,3 @@ +import ChannelForm from './ChannelForm' + +export default ChannelForm \ No newline at end of file diff --git a/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js b/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js index b965ae02..8ecaf813 100644 --- a/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js +++ b/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js @@ -7,7 +7,8 @@ class ChannelModal extends Component { render() { const customStyles = { overlay: { - cursor: 'pointer' + cursor: 'pointer', + overflowY: 'auto' }, content : { top: 'auto', @@ -15,22 +16,68 @@ class ChannelModal extends Component { right: '0', bottom: 'auto', width: '40%', - margin: '50px auto' + margin: '50px auto', + padding: '40px' } } - const { isOpen, resetChannel, children } = this.props + + const { isOpen, resetChannel, channel } = this.props + return ( - resetChannel(null)} - parentSelector={() => document.body} - style={customStyles} - > - {children} - + resetChannel(null)} + parentSelector={() => document.body} + style={customStyles} + > + { + channel ? +
    +
    +

    {channel.remote_pubkey}

    +

    {channel.channel_point}

    +
    + +
    +
    +

    {channel.capacity}

    + Capacity +
    +
    +
    +

    {channel.local_balance}

    + Local +
    +
    +

    {channel.remote_balance}

    + Remote +
    +
    +
    +
    +
    +
    Sent
    +
    {channel.total_satoshis_sent}
    +
    Received
    +
    {channel.total_satoshis_received}
    +
    Updates
    +
    {channel.num_updates}
    +
    +
    +
    +
    Close channel
    +
    + +
    + : + null + } +     ) } } diff --git a/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss b/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss index e69de29b..564112f2 100644 --- a/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss +++ b/app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss @@ -0,0 +1,119 @@ +@import '../../../../../../../variables.scss'; + +.modalChannel { + padding: 40px; +} + +.header { + margin-bottom: 50px; + + h1 { + color: $black; + text-align: center; + margin-bottom: 5px; + font-weight: bold; + } + + h2 { + color: $darkestgrey; + font-size: 14px; + text-align: center; + } +} + +.balances { + .capacity { + text-align: center; + align-items: center; + + h3 { + color: $main; + font-size: 40px; + } + + span { + color: $black; + font-size: 16px; + } + } + + .balance { + display: flex; + flex-direction: row; + justify-content: space-between; + + .local, .remote { + flex: 5; + padding: 10px 30px; + text-align: center; + + h4 { + font-size: 20px; + color: $main; + } + + span { + color: $black; + font-size: 12px; + } + } + } +} + +.details { + width: 75%; + margin: 20px auto; + + dt { + text-align: left; + float: left; + clear: left; + font-weight: 500; + padding: 20px 35px 19px 0; + color: $black; + font-weight: bold; + } + + dd { + text-align: right; + font-weight: 400; + padding: 19px 0; + margin-left: 0; + border-top: 1px solid $darkgrey; + } +} + +.close { + text-align: center; + + div { + width: 35%; + margin: 0 auto; + cursor: pointer; + height: 55px; + min-height: 55px; + text-transform: none; + font-size: 18px; + transition: opacity .2s ease-out; + background: $red; + color: $white; + border: none; + font-weight: 500; + padding: 0; + text-align: center; + line-height: 55px; + transition: all 0.25s; + border-radius: 5px; + + &:hover { + background: darken($red, 10%); + } + } +} + +.active { + color: $darkestgrey; + text-align: center; + margin-top: 50px; + text-transform: uppercase; +} \ No newline at end of file diff --git a/app/routes/wallet/containers/WalletContainer.js b/app/routes/wallet/containers/WalletContainer.js index 01cf9829..be04e83e 100644 --- a/app/routes/wallet/containers/WalletContainer.js +++ b/app/routes/wallet/containers/WalletContainer.js @@ -1,7 +1,12 @@ import { connect } from 'react-redux' import { fetchInfo } from '../../../reducers/info' import { fetchPeers } from '../../../reducers/peers' -import { fetchChannels, setChannel, channelsSelectors } from '../../../reducers/channels' +import { + fetchChannels, + setChannel, + channelsSelectors, + setForm +} from '../../../reducers/channels' import Wallet from '../components/Wallet' const mapDispatchToProps = { @@ -10,7 +15,9 @@ const mapDispatchToProps = { fetchPeers, fetchChannels, - setChannel + setChannel, + + setForm } const mapStateToProps = (state) => ({