feature(multi-currency): calculates value based on current currency

app/routes/activity/components/Activity.js

@@ -20,7 +20,7 @@ class Activity extends Component {
 
   render() {
     const { tab } = this.state
-    const { activity: { activityLoading, payments, invoices } } = this.props
+    const { ticker, activity: { activityLoading, payments, invoices } } = this.props
     
     if (activityLoading) { return <div>Loading...</div> }
     return (
@@ -55,9 +55,9 @@ class Activity extends Component {
             >
               {
                 tab === 1 ?
-                  <Payments key={1} payments={payments} />
+                  <Payments key={1} payments={payments} ticker={ticker} />
                 :
-                  <Invoices key={2} invoices={invoices} />
+                  <Invoices key={2} invoices={invoices} ticker={ticker} />
               }
             </CSSTransitionGroup>
           </div>

app/routes/activity/components/Activity.scss

@@ -55,6 +55,7 @@
 
 		  &.active {
 				color: #eec27b;
+				font-weight: bold;
 		  }
 		}
 	}

app/routes/activity/components/components/Invoices.js

@@ -2,12 +2,12 @@
 import React, { Component } from 'react'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { satoshisToBtc } from '../../../../utils/bitcoin'
+import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
 import styles from './Invoices.scss'
 
 class Invoices extends Component {
 	render() {
-		const { invoices } = this.props
+		const { invoices, ticker } = this.props
 		return (
 			<ul className={styles.invoices}>
         <li className={styles.invoiceTitles}>
@@ -31,7 +31,14 @@ class Invoices extends Component {
                   <div>{invoice.memo}</div>
                 </div>
                 <div className={styles.right}>
-                  <div className={invoice.settled ? styles.settled : null}>{satoshisToBtc(invoice.value, 2500)}</div>
+                  <div className={invoice.settled ? styles.settled : null}>
+                    {
+                      ticker.currency === 'btc' ?
+                        satoshisToBtc(invoice.value)
+                      :
+                        satoshisToUsd(invoice.value, ticker.btcTicker.price_usd) 
+                    }
+                  </div>
                 </div>
               </li>
             )

app/routes/activity/components/components/Payments.js

@@ -2,12 +2,12 @@
 import React, { Component } from 'react'
 import Moment from 'react-moment'
 import 'moment-timezone'
-import { satoshisToBtc } from '../../../../utils/bitcoin'
+import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
 import styles from './Payments.scss'
 
 class Payments extends Component {
 	render() {
-		const { payments } = this.props
+		const { payments, ticker } = this.props
 		return (
 			<ul className={styles.payments}>
         <li className={styles.paymentTitles}>
@@ -36,10 +36,24 @@ class Payments extends Component {
                   </div>
                 </div>
                 <div className={styles.right}>
-                  <span className={styles.fee}>{payment.fee === '0' ? '0' : satoshisToBtc(payment.fee, 2500)}</span>
+                  <span className={styles.fee}>
+                  {
+                    ticker.currency === 'btc' ?
+                      satoshisToBtc(payment.fee)
+                    :
+                      satoshisToUsd(payment.fee, ticker.btcTicker.price_usd) 
+                  }
+                  </span>
                 </div>
                 <div className={styles.right}>
-                  <span className={styles.value}>{satoshisToBtc(payment.value, 2500)}</span>
+                  <span className={styles.value}>
+                    {
+                      ticker.currency === 'btc' ?
+                        satoshisToBtc(payment.value)
+                      :
+                        satoshisToUsd(payment.value, ticker.btcTicker.price_usd) 
+                    }
+                  </span>
                 </div>
               </li>
             )

app/routes/activity/containers/ActivityContainer.js

@@ -7,7 +7,8 @@ const mapDispatchToProps = {
 }
 
 const mapStateToProps = (state) => ({
-	activity: state.activity
+	activity: state.activity,
+	ticker: state.ticker
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)

app/routes/app/components/App.js

@@ -44,6 +44,7 @@ class App extends Component {
           payment={payment}
           fetchPeers={fetchPeers}
           peers={peers}
+          ticker={ticker}
         />
         <Nav 
           ticker={ticker}

app/routes/app/components/components/Form.js

@@ -16,6 +16,7 @@ class Form extends Component {
       setPubkey,
       payment: { amount, message, pubkey },
       peers: { peers },
+      ticker: { currency },
       isOpen,
       close
     } = this.props
@@ -29,7 +30,12 @@ class Form extends Component {
           <div className={styles.content}>
             <section className={styles.amountContainer}>
               <label>
-                <FaBitcoin />
+                {
+                  currency === 'btc' ?
+                    <FaBitcoin />
+                  :
+                    <FaDollar />
+                }
               </label>
               <input
                 type='text'

app/routes/app/components/components/Nav.js

@@ -4,13 +4,12 @@ import { Link } from 'react-router-dom'
 import ReactSVG from 'react-svg'
 import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
 import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
-import { satoshisToBtc } from '../../../../utils/bitcoin'
+import { satoshisToBtc, satoshisToUsd } from '../../../../utils/bitcoin'
 import styles from './Nav.scss'
 
 class Nav extends Component {
   render() {
     const { ticker, balance, setCurrency, formClicked } = this.props
-    console.log('ticker: ', ticker)
     return (
       <nav className={styles.nav}>
         <ul className={styles.info}>
@@ -31,11 +30,27 @@ class Nav extends Component {
           <li className={`${styles.balance} ${styles.link}`}>
             <p data-hint='Wallet balance' className='hint--bottom-left'>
               <span>{ticker.currency === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
-              <span>{satoshisToBtc(balance.walletBalance)}</span>
+              <span>
+                {
+                  ticker.currency === 'btc' ?
+                    satoshisToBtc(balance.walletBalance)
+                  :
+                    satoshisToUsd(balance.walletBalance, ticker.btcTicker.price_usd)
+                }
+              </span>
             </p>
             <p data-hint='Channel balance' className='hint--bottom-left'>
-              <span>{ticker.currency === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
-              <span>{satoshisToBtc(balance.channelBalance)}</span>
+              <span>
+                {ticker.currency === 'btc' ? <FaBitcoin /> : <FaDollar />}
+              </span>
+              <span>
+                {
+                  ticker.currency === 'btc' ?
+                    satoshisToBtc(balance.channelBalance)
+                  :
+                    satoshisToUsd(balance.channelBalance, ticker.btcTicker.price_usd)
+                }
+              </span>
             </p>
           </li>
         </ul>

app/utils/bitcoin.js

@@ -19,5 +19,5 @@ export function satoshisToUsd(satoshis, price) {
 }
 
 export function btcToUsd(btc, price) {
-  return (btc * price).toFixed(2)
+	return parseFloat((btc * price).toFixed(2)).toLocaleString('en')
 }