Remote Pubkey
@@ -30,6 +45,7 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
+ Local
{
ticker.currency === 'btc' ?
@@ -38,9 +54,9 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
}
- Local
+ Remote
{
ticker.currency === 'btc' ?
@@ -49,7 +65,6 @@ const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
}
- Remote
diff --git a/app/components/Channels/Channel.scss b/app/components/Channels/Channel.scss
index b14fcd06..3fe5376d 100644
--- a/app/components/Channels/Channel.scss
+++ b/app/components/Channels/Channel.scss
@@ -2,12 +2,13 @@
.channel {
position: relative;
- background: $white;
+ background: $lightgrey;
+ margin: 5px 0;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
- border-top: 1px solid $grey;
+ border-top: 1px solid $white;
cursor: pointer;
transition: all 0.25s;
@@ -19,17 +20,36 @@
border: none;
}
- .status {
- color: $main;
+ header {
position: absolute;
- top: 0;
+ top: 10px;
left: 10px;
- padding: 10px;
- text-transform: uppercase;
- font-weight: bold;
- font-size: 10px;
+
+ .status, .active, .notactive {
+ padding: 10px;
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 10px;
+ }
+
+ .status {
+ color: $main;
+ }
+
+ .active i, .notactive i {
+ margin-left: 5px;
+ }
+
+ .active {
+ color: $green;
+ }
+
+ .notactive {
+ color: $red;
+ }
}
+
.left, .right {
padding: 0 10px;
margin-bottom: 5;
@@ -60,7 +80,6 @@
.left {
flex: 7;
- border-right: 1px solid $grey;
}
.right {
@@ -68,7 +87,6 @@
.capacity {
text-align: center;
- border-bottom: 1px solid $grey;
margin-bottom: 10px;
}
@@ -84,10 +102,6 @@
color: $main;
font-size: 16px;
}
-
- &:first-child {
- border-right: 1px solid $grey;
- }
}
}
}
diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js
index 5b6bbb57..9ab5209c 100644
--- a/app/routes/channels/components/Channels.js
+++ b/app/routes/channels/components/Channels.js
@@ -1,7 +1,11 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
+
import { FaAlignJustify, FaThLarge } from 'react-icons/lib/fa'
import { MdSearch } from 'react-icons/lib/md'
+
+import Channel from 'components/Channels/Channel'
+
import styles from './Channels.scss'
class Channels extends Component {
@@ -11,8 +15,13 @@ class Channels extends Component {
render() {
const {
- channels
+ channels: { channels },
+ allChannels,
+
+ ticker,
+ currentTicker
} = this.props
+ console.log('channels: ', channels)
return (