From d010086332918aaec1bc59e6bb40331f95dbe081 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Sat, 3 Feb 2018 18:55:49 -0600 Subject: [PATCH] feature(network) --- app/components/Contacts/Network.js | 58 ++++++++ app/components/Contacts/Network.scss | 124 ++++++++++++++++++ app/icons/search.svg | 1 + app/routes/activity/components/Activity.js | 3 +- .../activity/containers/ActivityContainer.js | 4 +- app/routes/app/components/App.js | 14 +- app/routes/app/components/App.scss | 2 +- app/routes/app/containers/AppContainer.js | 10 +- 8 files changed, 207 insertions(+), 9 deletions(-) create mode 100644 app/components/Contacts/Network.js create mode 100644 app/components/Contacts/Network.scss create mode 100644 app/icons/search.svg diff --git a/app/components/Contacts/Network.js b/app/components/Contacts/Network.js new file mode 100644 index 00000000..fd0b6c99 --- /dev/null +++ b/app/components/Contacts/Network.js @@ -0,0 +1,58 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' +import { FaAngleDown, FaCircle } from 'react-icons/lib/fa' +import { btc } from 'utils' +import plus from 'icons/plus.svg' +import search from 'icons/search.svg' +import styles from './Network.scss' + +const Network = ({ channels, balance, currentTicker }) => { + console.log('channels: ', channels) + + return ( +
+
+
+

My Network

+ + {btc.satoshisToBtc(balance.channelBalance)}BTC ≈ ${btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd).toLocaleString()} + +
+
+ +
+
+ +
+
+
+ All +
+
+ Refresh +
+
+ +
    + { + channels.channels.map(channel => { + console.log('channel: ', channel) + }) + } +
+
+ +
+ + +
+
+ ) +} + +Network.propTypes = {} + +export default Network diff --git a/app/components/Contacts/Network.scss b/app/components/Contacts/Network.scss new file mode 100644 index 00000000..07d100dd --- /dev/null +++ b/app/components/Contacts/Network.scss @@ -0,0 +1,124 @@ +@import '../../variables.scss'; + +.network { + position: relative; + width: 20%; + display: inline-block; + vertical-align: top; + height: 100vh; + background: #31343f; +} + +.header { + display: flex; + flex-direction: row; + justify-content: space-between; + background: #2D303B; + padding: 10px 20px; + color: $white; + + h2 { + font-size: 14px; + font-weight: bold; + letter-spacing: 1.2px; + } + + .channelAmount { + font-size: 10px; + opacity: 0.5; + } +} + +.channels { + padding: 20px; + + .listHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + + span { + color: white; + opacity: 0.5; + font-size: 10px; + cursor: pointer; + + &:nth-child(1) { + opacity: 1; + } + } + } + + ul { + margin-top: 20px; + } + + .channel { + display: flex; + flex-direction: row; + justify-content: space-between; + color: $white; + padding: 10px 0; + margin: 10px 0; + + span:nth-child(1) { + font-size: 12px; + } + + .online { + color: $green; + } + + .pending { + color: $orange; + } + + .offline { + color: $darkestgrey; + } + + svg { + width: 5px; + height: 5px; + } + } +} + +.search { + height: 55px; + padding: 2px 5px; + border-top: 0.5px solid #ccc; + + .input { + display: inline-block; + vertical-align: top; + height: 100%; + } + + .label { + width: 5%; + line-height: 50px; + font-size: 25px; + text-align: center; + cursor: pointer; + color: $white; + opacity: 0.5; + + svg { + width: 14px; + height:14px; + } + } + + .text { + width: 90%; + background: transparent; + outline: 0; + padding: 0 5px; + border: 0; + border-radius: 0; + height: 50px; + font-size: 12px; + color: $white; + } +} diff --git a/app/icons/search.svg b/app/icons/search.svg new file mode 100644 index 00000000..c69110d6 --- /dev/null +++ b/app/icons/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js index 229cd284..d7f951ac 100644 --- a/app/routes/activity/components/Activity.js +++ b/app/routes/activity/components/Activity.js @@ -21,14 +21,13 @@ class Activity extends Component { componentWillMount() { const { - fetchPayments, fetchInvoices, fetchTransactions, fetchBalance, fetchChannels + fetchPayments, fetchInvoices, fetchTransactions, fetchBalance } = this.props fetchBalance() fetchPayments() fetchInvoices() fetchTransactions() - fetchChannels() } renderActivity(activity) { diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js index 724f8cc7..7909bd10 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/app/routes/activity/containers/ActivityContainer.js @@ -22,7 +22,6 @@ import { } from 'reducers/activity' import { newAddress } from 'reducers/address' import { setFormType } from 'reducers/form' -import { fetchChannels } from 'reducers/channels' import Activity from '../components/Activity' @@ -39,8 +38,7 @@ const mapDispatchToProps = { newAddress, fetchBalance, updateSearchText, - setFormType, - fetchChannels + setFormType } const mapStateToProps = state => ({ diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 482bd017..c06ba788 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -4,16 +4,18 @@ import GlobalError from 'components/GlobalError' import LoadingBolt from 'components/LoadingBolt' import Form from 'components/Form' import ModalRoot from 'components/ModalRoot' -import Nav from 'components/Nav' +import Network from 'components/Contacts/Network' import styles from './App.scss' class App extends Component { componentWillMount() { - const { fetchTicker, fetchInfo, newAddress } = this.props + const { fetchTicker, fetchInfo, newAddress, fetchChannels, fetchBalance } = this.props fetchTicker() fetchInfo() newAddress('np2wkh') + fetchChannels() + fetchBalance() } render() { @@ -24,6 +26,9 @@ class App extends Component { currentTicker, form, + channels, + balance, + formProps, closeForm, @@ -52,6 +57,11 @@ class App extends Component {
{children}
+ ) } diff --git a/app/routes/app/components/App.scss b/app/routes/app/components/App.scss index 78f473a2..1f3b26ca 100644 --- a/app/routes/app/components/App.scss +++ b/app/routes/app/components/App.scss @@ -2,7 +2,7 @@ .content { position: relative; - width: 100%; + width: 80%; height: 100vh; display: inline-block; vertical-align: top; diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index 8bcd0434..148c191e 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -17,6 +17,9 @@ import { createInvoice, fetchInvoice } from 'reducers/invoice' import { fetchBlockHeight, lndSelectors } from 'reducers/lnd' +import { fetchChannels } from 'reducers/channels' +import { fetchBalance } from 'reducers/balance' + import { clearError } from 'reducers/error' @@ -48,7 +51,10 @@ const mapDispatchToProps = { fetchInvoice, fetchBlockHeight, - clearError + clearError, + + fetchChannels, + fetchBalance } const mapStateToProps = state => ({ @@ -59,6 +65,8 @@ const mapStateToProps = state => ({ info: state.info, payment: state.payment, transaction: state.transaction, + channels: state.channels, + balance: state.balance, form: state.form, payform: state.payform,