feature(channels): display value in current currency and link channel point

app/routes/wallet/components/Wallet.js

@@ -18,6 +18,7 @@ class Wallet extends Component {
   render() {
   	const {
   		info,
+      ticker,
   		peers: { peersLoading, peers, peer, peerForm },
   		channels: { channelsLoading, channels, channel, channelForm },
       setPeer,
@@ -49,6 +50,7 @@ class Wallet extends Component {
             disconnect={disconnectRequest}
           />
           <Channels
+            ticker={ticker}
             channelsLoading={channelsLoading}
             channels={channels}
             modalChannel={channel}

app/routes/wallet/components/components/Channels/Channels.js

@@ -9,6 +9,7 @@ import styles from './Channels.scss'
 class Channels extends Component {
   render() {
     const {
+        ticker,
         channelsLoading,
         channels,
         modalChannel,
@@ -17,6 +18,7 @@ class Channels extends Component {
         channelForm,
         setChannelForm
     } = this.props
+    console.log('ticker: ', ticker)
     return (
         <div className={styles.channels}>
             <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
@@ -37,8 +39,9 @@ class Channels extends Component {
                         channels.map(channel => 
                             <Channel
                                 key={channel.chan_id}
+                                ticker={ticker}
                                 channel={channel}
-                                setChannel={setChannel} 
+                                setChannel={setChannel}
                             />
                         )
                     :

app/routes/wallet/components/components/Channels/components/Channel/Channel.js

@@ -1,10 +1,11 @@
 // @flow
 import React, { Component } from 'react'
+import { btc } from '../../../../../../../utils'
 import styles from './Channel.scss'
 
 class Channel extends Component {
   render() {
-    const { channel, setChannel } = this.props
+    const { ticker, channel, setChannel } = this.props
     return (
         <li className={styles.channel} onClick={() => setChannel(channel)}>
             <div className={styles.left}>
@@ -20,15 +21,36 @@ class Channel extends Component {
             <div className={styles.right}>
                 <section className={styles.capacity}>
                     <span>Capacity</span>
-                    <h2>{channel.capacity}</h2>
+                    <h2>
+                        {
+                          ticker.currency === 'btc' ?
+                            btc.satoshisToBtc(channel.capacity)
+                          :
+                            btc.satoshisToUsd(channel.capacity, ticker.btcTicker.price_usd)
+                        }
+                    </h2>
                 </section>
                 <div className={styles.balances}>
                     <section>
-                        <h4>{channel.local_balance}</h4>
+                        <h4>
+                            {
+                              ticker.currency === 'btc' ?
+                                btc.satoshisToBtc(channel.local_balance)
+                              :
+                                btc.satoshisToUsd(channel.local_balance, ticker.btcTicker.price_usd)
+                            }
+                        </h4>
                         <span>Local</span>
                     </section>
                     <section>
-                        <h4>{channel.remote_balance}</h4>
+                        <h4>
+                            {
+                              ticker.currency === 'btc' ?
+                                btc.satoshisToBtc(channel.remote_balance)
+                              :
+                                btc.satoshisToUsd(channel.remote_balance, ticker.btcTicker.price_usd)
+                            }
+                        </h4>
                         <span>Remote</span>
                     </section>
                 </div>

app/routes/wallet/components/components/Channels/components/Channel/Channel.scss

@@ -70,7 +70,7 @@
 
 				h4 {
 					color: $main;
-					font-size: 20px;
+					font-size: 16px;
 				}
 
 				&:first-child {

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.js

@@ -1,4 +1,5 @@
 // @flow
+import { shell } from 'electron'
 import React, { Component } from 'react'
 import ReactModal from 'react-modal'
 import styles from './ChannelModal.scss'
@@ -38,7 +39,13 @@ class ChannelModal extends Component {
             <div className={styles.channel}>
               <header className={styles.header}>
                 <h1 data-hint='Remote public key' className='hint--top-left'>{channel.remote_pubkey}</h1>
-                <h2 data-hint='Channel point' className='hint--top-left'>{channel.channel_point}</h2>
+                <h2
+                  data-hint='Channel point'
+                  className='hint--top-left'
+                  onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}
+                >
+                  {channel.channel_point}
+                </h2>
               </header>
 
               <div className={styles.balances}>

app/routes/wallet/components/components/Channels/components/ChannelModal/ChannelModal.scss

@@ -18,6 +18,11 @@
 		color: $darkestgrey;
 		font-size: 14px;
 		text-align: center;
+
+		&:hover {
+			color: $main;
+			text-decoration: underline; 
+		}
 	}
 }
 

app/routes/wallet/containers/WalletContainer.js

@@ -33,6 +33,7 @@ const mapDispatchToProps = {
 
 const mapStateToProps = (state) => ({
 	info: state.info,
+	ticker: state.ticker,
 	
 	peers: state.peers,
 	channels: state.channels,