feature(currency): ability to set currency

app/reducers/ticker.js

@@ -2,12 +2,20 @@ import { requestTicker } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SET_CURRENCY = 'SET_CURRENCY'
 export const GET_TICKER = 'GET_TICKER'
 export const RECIEVE_TICKER = 'RECIEVE_TICKER'
 
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function setCurrency(currency) {
+  return {
+    type: SET_CURRENCY,
+    currency
+  }
+}
+
 export function getTicker() {
   return {
     type: GET_TICKER
@@ -33,6 +41,7 @@ export const fetchTicker = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SET_CURRENCY]: (state, { currency }) => ({ ...state, currency }),
   [GET_TICKER]: (state) => ({ ...state, tickerLoading: true }),
   [RECIEVE_TICKER]: (state, { ticker }) => ({...state, btcTicker: ticker[0] })
 }
@@ -42,7 +51,7 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   tickerLoading: false,
-  current: 'btc',
+  currency: 'btc',
   crypto: 'btc',
   btcTicker: null
 }

app/routes/app/components/App.js

@@ -27,8 +27,9 @@ class App extends Component {
       setMessage,
       setPubkey,
       payment,
-      fetchPeers,
       peers,
+      fetchPeers,
+      setCurrency,
       children
     } = this.props
 
@@ -47,6 +48,7 @@ class App extends Component {
         <Nav 
           ticker={ticker}
           balance={balance}
+          setCurrency={setCurrency}
           formClicked={(type) => this.setState({ form: true })} 
         />
         <div className={styles.content}>

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

@@ -64,7 +64,6 @@ class Form extends Component {
                     <h4>Connected Peers</h4>
                     {
                       peers.map(peer => {
-                        console.log('peer: ', peer)
                         return(
                           <li key={peer.pub_key} className={styles.peer} onClick={() => setPubkey(peer.pub_key)}>
                             <p className={styles.address}>{peer.address}</p>

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

@@ -9,25 +9,32 @@ import styles from './Nav.scss'
 
 class Nav extends Component {
   render() {
-    const { ticker, balance, formClicked } = this.props
+    const { ticker, balance, setCurrency, formClicked } = this.props
+    console.log('ticker: ', ticker)
     return (
       <nav className={styles.nav}>
         <ul className={styles.info}>
           <li className={`${styles.currencies} ${styles.link}`}>
-            <span className={`${styles.currency} ${ticker.current === 'btc' ? styles.active : ''}`}>
+            <span 
+              className={`${styles.currency} ${ticker.currency === 'btc' ? styles.active : ''}`}
+              onClick={() => setCurrency('btc')}
+            >
               <FaBitcoin />
             </span>
-            <span className={`${styles.currency} ${ticker.current === 'usd' ? styles.active : ''}`}>
+            <span
+              className={`${styles.currency} ${ticker.currency === 'usd' ? styles.active : ''}`}
+              onClick={() => setCurrency('usd')}
+            >
               <FaDollar />
             </span>
           </li>
           <li className={`${styles.balance} ${styles.link}`}>
             <p data-hint='Wallet balance' className='hint--bottom-left'>
-              <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
+              <span>{ticker.currency === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.walletBalance)}</span>
             </p>
             <p data-hint='Channel balance' className='hint--bottom-left'>
-              <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
+              <span>{ticker.currency === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.channelBalance)}</span>
             </p>
           </li>

app/routes/app/containers/AppContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import App from '../components/App'
-import { fetchTicker } from '../../../reducers/ticker'
+import { fetchTicker, setCurrency } from '../../../reducers/ticker'
 import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { fetchPeers } from '../../../reducers/peers'
@@ -8,6 +8,7 @@ import { setAmount, setMessage, setPubkey } from '../../../reducers/payment'
 
 const mapDispatchToProps = {
 	fetchTicker,
+	setCurrency,
 	fetchBalance,
 	fetchInfo,
 	fetchPeers,