Merge pull request #9 from LN-Zap/fix/refactor-ticker

Refactor hard-coded tickers to currentTicker

app/api/index.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
-export default function requestTicker() {
+export function requestTicker(id) {
-  const BASE_URL = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/'
+  const BASE_URL = `https://api.coinmarketcap.com/v1/ticker/${id}/`
   return axios({
     method: 'get',
     url: BASE_URL
@@ -9,3 +9,8 @@ export default function requestTicker() {
     .then(response => response.data)
     .catch(error => error)
 }
+
+export function requestTickers(ids) {
+  return axios.all(ids.map(id => requestTicker(id)))
+    .then(axios.spread((btcTicker, ltcTicker) => ({ btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] })))
+}

app/lnd/methods/index.js

@@ -20,7 +20,10 @@ export default function (lnd, event, msg, data) {
   switch (msg) {
     case 'info':
       info(lnd)
-        .then(infoData => event.sender.send('receiveInfo', infoData))
+        .then((infoData) => {
+          event.sender.send('receiveInfo', infoData)
+          event.sender.send('receiveCryptocurrency', infoData.chains[0])
+        })
         .catch(error => console.log('info error: ', error))
       break
     case 'newaddress':

app/reducers/ipc.js

@@ -1,6 +1,7 @@
 import createIpc from 'redux-electron-ipc'
 import { receiveInfo } from './info'
 import { receiveAddress } from './address'
+import { receiveCryptocurrency } from './ticker'
 import { receivePeers, connectSuccess, disconnectSuccess } from './peers'
 import {
   receiveChannels,
@@ -32,7 +33,8 @@ const ipc = createIpc({
   pushchannelstatus,
   connectSuccess,
   disconnectSuccess,
-  receiveAddress
+  receiveAddress,
+  receiveCryptocurrency
 })
 
 export default ipc

app/reducers/ticker.js

@@ -1,10 +1,18 @@
-import requestTicker from '../api'
+import { createSelector } from 'reselect'
+import { requestTickers } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
 export const SET_CURRENCY = 'SET_CURRENCY'
-export const GET_TICKER = 'GET_TICKER'
+export const SET_CRYPTO = 'SET_CRYPTO'
-export const RECIEVE_TICKER = 'RECIEVE_TICKER'
+export const GET_TICKERS = 'GET_TICKERS'
+export const RECIEVE_TICKERS = 'RECIEVE_TICKERS'
+
+// Map for crypto names to crypto tickers
+const cryptoTickers = {
+  bitcoin: 'btc',
+  litecoin: 'ltc'
+}
 
 // ------------------------------------
 // Actions
@@ -16,46 +24,78 @@ export function setCurrency(currency) {
   }
 }
 
-export function getTicker() {
+export function setCrypto(crypto) {
   return {
-    type: GET_TICKER
+    type: SET_CRYPTO,
+    crypto
   }
 }
 
-export function recieveTicker(ticker) {
+export function getTickers() {
   return {
-    type: RECIEVE_TICKER,
+    type: GET_TICKERS
-    ticker
+  }
+}
+
+export function recieveTickers({ btcTicker, ltcTicker }) {
+  return {
+    type: RECIEVE_TICKERS,
+    btcTicker,
+    ltcTicker
   }
 }
 
 export const fetchTicker = () => async (dispatch) => {
-  dispatch(getTicker())
+  dispatch(getTickers())
-  const ticker = await requestTicker()
+  const tickers = await requestTickers(['bitcoin', 'litecoin'])
-  dispatch(recieveTicker(ticker))
+  dispatch(recieveTickers(tickers))
 
-  return ticker
+  return tickers
 }
 
+// Receive IPC event for receiveCryptocurrency
+export const receiveCryptocurrency = (event, currency) => (dispatch) => {
+  dispatch({ type: SET_CURRENCY, currency: cryptoTickers[currency] })
+  dispatch({ type: SET_CRYPTO, crypto: cryptoTickers[currency] })
+}
+
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
   [SET_CURRENCY]: (state, { currency }) => ({ ...state, currency }),
-  [GET_TICKER]: state => ({ ...state, tickerLoading: true }),
+  [SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }),
-  [RECIEVE_TICKER]: (state, { ticker }) => (
+  [GET_TICKERS]: state => ({ ...state, tickerLoading: true }),
-    { ...state, tickerLoading: false, btcTicker: ticker[0] }
+  [RECIEVE_TICKERS]: (state, { btcTicker, ltcTicker }) => (
+    { ...state, tickerLoading: false, btcTicker, ltcTicker }
   )
 }
 
+// Selectors
+const tickerSelectors = {}
+const cryptoSelector = state => state.ticker.crypto
+const bitcoinTickerSelector = state => state.ticker.btcTicker
+const litecoinTickerSelector = state => state.ticker.ltcTicker
+
+tickerSelectors.currentTicker = createSelector(
+  cryptoSelector,
+  bitcoinTickerSelector,
+  litecoinTickerSelector,
+  (crypto, btcTicker, ltcTicker) => (crypto === 'btc' ? btcTicker : ltcTicker)
+)
+
+export { tickerSelectors }
+
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
   tickerLoading: false,
-  currency: 'btc',
+  currency: '',
-  crypto: 'btc',
+  crypto: '',
-  btcTicker: null
+  btcTicker: null,
+  ltcTicker: null
 }
 
 export default function tickerReducer(state = initialState, action) {

app/routes/activity/components/Activity.js

@@ -31,7 +31,8 @@ class Activity extends Component {
       setPayment,
       setInvoice,
       paymentModalOpen,
-      invoiceModalOpen
+      invoiceModalOpen,
+      currentTicker
     } = this.props
 
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
@@ -75,6 +76,7 @@ class Activity extends Component {
                   ticker={ticker}
                   setPayment={setPayment}
                   paymentModalOpen={paymentModalOpen}
+                  currentTicker={currentTicker}
                 />
                 :
                 <Invoices
@@ -83,6 +85,7 @@ class Activity extends Component {
                   ticker={ticker}
                   setInvoice={setInvoice}
                   invoiceModalOpen={invoiceModalOpen}
+                  currentTicker={currentTicker}
                 />
             }
           </div>
@@ -103,7 +106,8 @@ Activity.propTypes = {
   setPayment: PropTypes.func.isRequired,
   setInvoice: PropTypes.func.isRequired,
   paymentModalOpen: PropTypes.bool.isRequired,
-  invoiceModalOpen: PropTypes.bool.isRequired
+  invoiceModalOpen: PropTypes.bool.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Activity

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

@@ -14,7 +14,8 @@ const Invoices = ({
   invoices,
   ticker,
   setInvoice,
-  invoiceModalOpen
+  invoiceModalOpen,
+  currentTicker
 }) => (
   <div>
     <Modal isOpen={invoiceModalOpen} resetObject={setInvoice}>
@@ -34,7 +35,7 @@ const Invoices = ({
                   ticker.currency === 'btc' ?
                     btc.satoshisToBtc(invoice.value)
                     :
-                    btc.satoshisToUsd(invoice.value, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(invoice.value, currentTicker.price_usd)
                 }
               </span>
             </h1>
@@ -91,7 +92,7 @@ const Invoices = ({
                   ticker.currency === 'btc' ?
                     btc.satoshisToBtc(invoiceItem.value)
                     :
-                    btc.satoshisToUsd(invoiceItem.value, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(invoiceItem.value, currentTicker.price_usd)
                 }
               </div>
             </div>
@@ -107,7 +108,8 @@ Invoices.propTypes = {
   invoices: PropTypes.array.isRequired,
   ticker: PropTypes.object.isRequired,
   setInvoice: PropTypes.func.isRequired,
-  invoiceModalOpen: PropTypes.bool.isRequired
+  invoiceModalOpen: PropTypes.bool.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Invoices

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

@@ -12,7 +12,8 @@ const Payments = ({
   payments,
   ticker,
   setPayment,
-  paymentModalOpen
+  paymentModalOpen,
+  currentTicker
 }) => (
   <div>
     <Modal isOpen={paymentModalOpen} resetObject={setPayment}>
@@ -32,7 +33,7 @@ const Payments = ({
                   ticker.currency === 'btc' ?
                     btc.satoshisToBtc(payment.value)
                     :
-                    btc.satoshisToUsd(payment.value, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(payment.value, currentTicker.price_usd)
                 }
               </span>
             </h1>
@@ -81,7 +82,7 @@ const Payments = ({
                   ticker.currency === 'btc' ?
                     btc.satoshisToBtc(paymentItem.fee)
                     :
-                    btc.satoshisToUsd(paymentItem.fee, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd)
                 }
               </span>
             </div>
@@ -91,7 +92,7 @@ const Payments = ({
                   ticker.currency === 'btc' ?
                     btc.satoshisToBtc(paymentItem.value)
                     :
-                    btc.satoshisToUsd(paymentItem.value, ticker.btcTicker.price_usd)
+                    btc.satoshisToUsd(paymentItem.value, currentTicker.price_usd)
                 }
               </span>
             </div>
@@ -107,7 +108,8 @@ Payments.propTypes = {
   payments: PropTypes.array.isRequired,
   ticker: PropTypes.object.isRequired,
   setPayment: PropTypes.func.isRequired,
-  paymentModalOpen: PropTypes.bool.isRequired
+  paymentModalOpen: PropTypes.bool.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Payments

app/routes/activity/containers/ActivityContainer.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { tickerSelectors } from '../../../reducers/ticker'
 import {
   fetchInvoices,
   searchInvoices,
@@ -31,7 +32,9 @@ const mapStateToProps = state => ({
   ticker: state.ticker,
 
   paymentModalOpen: paymentSelectors.paymentModalOpen(state),
-  invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state)
+  invoiceModalOpen: invoiceSelectors.invoiceModalOpen(state),
+
+  currentTicker: tickerSelectors.currentTicker(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)

app/routes/app/components/App.js

@@ -6,10 +6,11 @@ import styles from './App.scss'
 
 class App extends Component {
   componentWillMount() {
-    const { fetchTicker, fetchBalance } = this.props
+    const { fetchTicker, fetchBalance, fetchInfo } = this.props
 
     fetchTicker()
     fetchBalance()
+    fetchInfo()
   }
 
   render() {
@@ -29,9 +30,12 @@ class App extends Component {
       createInvoice,
       payInvoice,
       fetchInvoice,
+      currentTicker,
       children
     } = this.props
 
+    if (!currentTicker) { return <div>Loading...</div> }
+
     return (
       <div>
         <Form
@@ -49,12 +53,14 @@ class App extends Component {
           payInvoice={payInvoice}
           fetchInvoice={fetchInvoice}
           formInvoice={formInvoice}
+          currentTicker={currentTicker}
         />
         <Nav
           ticker={ticker}
           balance={balance}
           setCurrency={setCurrency}
           formClicked={formType => setForm({ modalOpen: true, formType })}
+          currentTicker={currentTicker}
         />
         <div className={styles.content}>
           {children}
@@ -82,6 +88,8 @@ App.propTypes = {
   createInvoice: PropTypes.func.isRequired,
   payInvoice: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
+  fetchInfo: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object,
   children: PropTypes.object.isRequired
 }
 

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

@@ -10,16 +10,17 @@ const Form = ({
   setAmount,
   setMessage,
   setPaymentRequest,
-  ticker: { currency, btcTicker },
+  ticker: { currency },
   isOpen,
   close,
   createInvoice,
   payInvoice,
   fetchInvoice,
-  formInvoice
+  formInvoice,
+  currentTicker
 }) => {
   const requestClicked = () => {
-    createInvoice(amount, message, currency, btcTicker.price_usd)
+    createInvoice(amount, message, currency, currentTicker.price_usd)
     close()
   }
 
@@ -33,7 +34,7 @@ const Form = ({
     if (payreq.length === 124) { fetchInvoice(payreq) }
   }
 
-  const calculateAmount = value => (currency === 'btc' ? btc.satoshisToBtc(value) : btc.satoshisToUsd(value, btcTicker.price_usd))
+  const calculateAmount = value => (currency === 'btc' ? btc.satoshisToBtc(value) : btc.satoshisToUsd(value, currentTicker.price_usd))
 
   return (
     <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
@@ -121,7 +122,8 @@ Form.propTypes = {
   createInvoice: PropTypes.func.isRequired,
   payInvoice: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
-  formInvoice: PropTypes.object.isRequired
+  formInvoice: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Form

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

@@ -7,12 +7,12 @@ import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
 import { btc } from '../../../../utils'
 import styles from './Nav.scss'
 
-const Nav = ({ ticker, balance, setCurrency, formClicked }) => (
+const Nav = ({ ticker, balance, setCurrency, formClicked, currentTicker }) => (
   <nav className={styles.nav}>
     <ul className={styles.info}>
       <li className={`${styles.currencies} ${styles.link}`}>
         <span
-          data-hint={ticker.btcTicker ? ticker.btcTicker.price_usd : null}
+          data-hint={currentTicker ? currentTicker.price_usd : null}
           className={`${styles.currency} ${ticker.currency === 'btc' ? styles.active : ''} hint--bottom`}
           onClick={() => setCurrency('btc')}
         >
@@ -33,7 +33,7 @@ const Nav = ({ ticker, balance, setCurrency, formClicked }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(balance.walletBalance)
                 :
-                btc.satoshisToUsd(balance.walletBalance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(balance.walletBalance, currentTicker.price_usd)
             }
           </span>
         </p>
@@ -46,7 +46,7 @@ const Nav = ({ ticker, balance, setCurrency, formClicked }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(balance.channelBalance)
                 :
-                btc.satoshisToUsd(balance.channelBalance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd)
             }
           </span>
         </p>
@@ -92,7 +92,8 @@ Nav.propTypes = {
   ticker: PropTypes.object.isRequired,
   balance: PropTypes.object.isRequired,
   setCurrency: PropTypes.func.isRequired,
-  formClicked: PropTypes.func.isRequired
+  formClicked: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Nav

app/routes/app/containers/AppContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import App from '../components/App'
-import { fetchTicker, setCurrency } from '../../../reducers/ticker'
+import { fetchTicker, setCurrency, tickerSelectors } from '../../../reducers/ticker'
 import { fetchBalance } from '../../../reducers/balance'
 import { fetchInfo } from '../../../reducers/info'
 import { createInvoice, fetchInvoice } from '../../../reducers/invoice'
@@ -35,7 +35,9 @@ const mapStateToProps = state => ({
   balance: state.balance,
   payment: state.payment,
   form: state.form,
-  invoice: state.invoice
+  invoice: state.invoice,
+
+  currentTicker: tickerSelectors.currentTicker(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(App)

app/routes/wallet/components/Wallet.js

@@ -7,9 +7,8 @@ import styles from './Wallet.scss'
 
 class Wallet extends Component {
   componentWillMount() {
-    const { fetchInfo, fetchPeers, fetchChannels, newAddress } = this.props
+    const { fetchPeers, fetchChannels, newAddress } = this.props
 
-    fetchInfo()
     fetchPeers()
     fetchChannels()
     newAddress('p2pkh')
@@ -31,7 +30,8 @@ class Wallet extends Component {
       connectRequest,
       disconnectRequest,
       allChannels,
-      openChannel
+      openChannel,
+      currentTicker
     } = this.props
 
     return (
@@ -74,6 +74,7 @@ class Wallet extends Component {
             channelForm={channelForm}
             setChannelForm={setChannelForm}
             openChannel={openChannel}
+            currentTicker={currentTicker}
           />
         </section>
       </div>
@@ -82,7 +83,6 @@ class Wallet extends Component {
 }
 
 Wallet.propTypes = {
-  fetchInfo: PropTypes.func.isRequired,
   fetchPeers: PropTypes.func.isRequired,
   fetchChannels: PropTypes.func.isRequired,
   info: PropTypes.object.isRequired,
@@ -100,7 +100,8 @@ Wallet.propTypes = {
   allChannels: PropTypes.array.isRequired,
   openChannel: PropTypes.func.isRequired,
   newAddress: PropTypes.func.isRequired,
-  address: PropTypes.string.isRequired
+  address: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 

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

@@ -18,11 +18,12 @@ const Channels = ({
   channelForm,
   setChannelForm,
   allChannels,
-  openChannel
+  openChannel,
+  currentTicker
 }) => (
   <div className={styles.channels}>
     <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
-    <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} />
+    <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} currentTicker={currentTicker} />
     <div className={styles.header}>
       <h3>Channels</h3>
       <div
@@ -39,11 +40,21 @@ const Channels = ({
           allChannels.map((channel, index) => {
             if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
               return (
-                <OpenPendingChannel key={index} channel={channel} ticker={ticker} />
+                <OpenPendingChannel
+                  key={index}
+                  channel={channel}
+                  ticker={ticker}
+                  currentTicker={currentTicker}
+                />
               )
             } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) {
               return (
-                <ClosedPendingChannel key={index} channel={channel} ticker={ticker} />
+                <ClosedPendingChannel
+                  key={index}
+                  channel={channel}
+                  ticker={ticker}
+                  currentTicker={currentTicker}
+                />
               )
             }
             return (
@@ -52,6 +63,7 @@ const Channels = ({
                 ticker={ticker}
                 channel={channel}
                 setChannel={setChannel}
+                currentTicker={currentTicker}
               />
             )
           })
@@ -72,7 +84,8 @@ Channels.propTypes = {
   channelForm: PropTypes.object.isRequired,
   setChannelForm: PropTypes.func.isRequired,
   allChannels: PropTypes.array.isRequired,
-  openChannel: PropTypes.func.isRequired
+  openChannel: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Channels

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { btc } from '../../../../../../../utils'
 import styles from './Channel.scss'
 
-const Channel = ({ ticker, channel, setChannel }) => (
+const Channel = ({ ticker, channel, setChannel, currentTicker }) => (
   <li className={styles.channel} onClick={() => setChannel(channel)}>
     <h1 className={styles.status}>Status: Open</h1>
     <div className={styles.left}>
@@ -24,7 +24,7 @@ const Channel = ({ ticker, channel, setChannel }) => (
             ticker.currency === 'btc' ?
               btc.satoshisToBtc(channel.capacity)
               :
-              btc.satoshisToUsd(channel.capacity, ticker.btcTicker.price_usd)
+              btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
           }
         </h2>
       </section>
@@ -35,7 +35,7 @@ const Channel = ({ ticker, channel, setChannel }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.local_balance)
                 :
-                btc.satoshisToUsd(channel.local_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Local</span>
@@ -46,7 +46,7 @@ const Channel = ({ ticker, channel, setChannel }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.remote_balance)
                 :
-                btc.satoshisToUsd(channel.remote_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Remote</span>
@@ -59,7 +59,8 @@ const Channel = ({ ticker, channel, setChannel }) => (
 Channel.propTypes = {
   ticker: PropTypes.object.isRequired,
   channel: PropTypes.object.isRequired,
-  setChannel: PropTypes.func.isRequired
+  setChannel: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default Channel

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

@@ -5,12 +5,12 @@ import { FaUser, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
 import { usd, btc } from '../../../../../../../utils'
 import styles from './ChannelForm.scss'
 
-const ChannelForm = ({ form, setForm, ticker, peers, openChannel }) => {
+const ChannelForm = ({ form, setForm, ticker, peers, openChannel, currentTicker }) => {
   const submitClicked = () => {
     const { node_key, local_amt, push_amt } = form
 
-    const localamt = ticker.currency === 'btc' ? btc.btcToSatoshis(local_amt) : btc.btcToSatoshis(usd.usdToBtc(local_amt, ticker.btcTicker.price_usd))
+    const localamt = ticker.currency === 'btc' ? btc.btcToSatoshis(local_amt) : btc.btcToSatoshis(usd.usdToBtc(local_amt, currentTicker.price_usd))
-    const pushamt = ticker.currency === 'btc' ? btc.btcToSatoshis(push_amt) : btc.btcToSatoshis(usd.usdToBtc(push_amt, ticker.btcTicker.price_usd))
+    const pushamt = ticker.currency === 'btc' ? btc.btcToSatoshis(push_amt) : btc.btcToSatoshis(usd.usdToBtc(push_amt, currentTicker.price_usd))
 
     openChannel({ pubkey: node_key, localamt, pushamt })
     setForm({ isOpen: false })
@@ -129,7 +129,8 @@ ChannelForm.propTypes = {
   setForm: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
   peers: PropTypes.array.isRequired,
-  openChannel: PropTypes.func.isRequired
+  openChannel: PropTypes.func.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default ChannelForm

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { btc } from '../../../../../../../utils'
 import styles from './ClosedPendingChannel.scss'
 
-const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid } }) => (
+const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid }, currentTicker }) => (
   <li className={styles.channel} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${closing_txid}`)}>
     <h1 className={styles.closing}>Status: Closing</h1>
     <div className={styles.left}>
@@ -25,7 +25,7 @@ const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid } }) =>
             ticker.currency === 'btc' ?
               btc.satoshisToBtc(channel.capacity)
               :
-              btc.satoshisToUsd(channel.capacity, ticker.btcTicker.price_usd)
+              btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
           }
         </h2>
       </section>
@@ -36,7 +36,7 @@ const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid } }) =>
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.local_balance)
                 :
-                btc.satoshisToUsd(channel.local_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Local</span>
@@ -47,7 +47,7 @@ const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid } }) =>
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.remote_balance)
                 :
-                btc.satoshisToUsd(channel.remote_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Remote</span>
@@ -59,7 +59,8 @@ const ClosedPendingChannel = ({ ticker, channel: { channel, closing_txid } }) =>
 
 ClosedPendingChannel.propTypes = {
   ticker: PropTypes.object.isRequired,
-  channel: PropTypes.object.isRequired
+  channel: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default ClosedPendingChannel

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { btc } from '../../../../../../../utils'
 import styles from './OpenPendingChannel.scss'
 
-const OpenPendingChannel = ({ ticker, channel: { channel } }) => (
+const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker }) => (
   <li className={styles.channel} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${channel.channel_point.split(':')[0]}`)}>
     <h1 className={styles.pending}>Status: Pending</h1>
     <div className={styles.left}>
@@ -25,7 +25,7 @@ const OpenPendingChannel = ({ ticker, channel: { channel } }) => (
             ticker.currency === 'btc' ?
               btc.satoshisToBtc(channel.capacity)
               :
-              btc.satoshisToUsd(channel.capacity, ticker.btcTicker.price_usd)
+              btc.satoshisToUsd(channel.capacity, currentTicker.price_usd)
           }
         </h2>
       </section>
@@ -36,7 +36,7 @@ const OpenPendingChannel = ({ ticker, channel: { channel } }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.local_balance)
                 :
-                btc.satoshisToUsd(channel.local_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Local</span>
@@ -47,7 +47,7 @@ const OpenPendingChannel = ({ ticker, channel: { channel } }) => (
               ticker.currency === 'btc' ?
                 btc.satoshisToBtc(channel.remote_balance)
                 :
-                btc.satoshisToUsd(channel.remote_balance, ticker.btcTicker.price_usd)
+                btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd)
             }
           </h4>
           <span>Remote</span>
@@ -59,7 +59,8 @@ const OpenPendingChannel = ({ ticker, channel: { channel } }) => (
 
 OpenPendingChannel.propTypes = {
   ticker: PropTypes.object.isRequired,
-  channel: PropTypes.object.isRequired
+  channel: PropTypes.object.isRequired,
+  currentTicker: PropTypes.object.isRequired
 }
 
 export default OpenPendingChannel

app/routes/wallet/containers/WalletContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { newAddress } from '../../../reducers/address'
-import { fetchInfo } from '../../../reducers/info'
+import { tickerSelectors } from '../../../reducers/ticker'
 import {
   fetchPeers,
   setPeer,
@@ -22,8 +22,6 @@ import Wallet from '../components/Wallet'
 const mapDispatchToProps = {
   newAddress,
 
-  fetchInfo,
-
   fetchPeers,
   setPeer,
   connectRequest,
@@ -49,7 +47,9 @@ const mapStateToProps = state => ({
   allChannels: channelsSelectors.allChannels(state),
 
   peerModalOpen: peersSelectors.peerModalOpen(state),
-  channelModalOpen: channelsSelectors.channelModalOpen(state)
+  channelModalOpen: channelsSelectors.channelModalOpen(state),
+
+  currentTicker: tickerSelectors.currentTicker(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Wallet)

test/reducers/__snapshots__/ticker.spec.js.snap

@@ -3,17 +3,29 @@
 exports[`reducers tickerReducer should correctly getTicker 1`] = `
 Object {
   "btcTicker": null,
-  "crypto": "btc",
+  "crypto": "",
-  "currency": "btc",
+  "currency": "",
+  "ltcTicker": null,
   "tickerLoading": true,
 }
 `;
 
 exports[`reducers tickerReducer should correctly receiveTicker 1`] = `
 Object {
-  "btcTicker": "f",
+  "btcTicker": undefined,
-  "crypto": "btc",
+  "crypto": "",
-  "currency": "btc",
+  "currency": "",
+  "ltcTicker": undefined,
+  "tickerLoading": false,
+}
+`;
+
+exports[`reducers tickerReducer should correctly setCrypto 1`] = `
+Object {
+  "btcTicker": null,
+  "crypto": "foo",
+  "currency": "",
+  "ltcTicker": null,
   "tickerLoading": false,
 }
 `;
@@ -21,8 +33,9 @@ Object {
 exports[`reducers tickerReducer should correctly setCurrency 1`] = `
 Object {
   "btcTicker": null,
-  "crypto": "btc",
+  "crypto": "",
   "currency": "foo",
+  "ltcTicker": null,
   "tickerLoading": false,
 }
 `;
@@ -30,8 +43,9 @@ Object {
 exports[`reducers tickerReducer should handle initial state 1`] = `
 Object {
   "btcTicker": null,
-  "crypto": "btc",
+  "crypto": "",
-  "currency": "btc",
+  "currency": "",
+  "ltcTicker": null,
   "tickerLoading": false,
 }
 `;

test/reducers/ticker.spec.js

@@ -1,7 +1,8 @@
 import tickerReducer, {
   SET_CURRENCY,
-  GET_TICKER,
+  SET_CRYPTO,
-  RECIEVE_TICKER
+  GET_TICKERS,
+  RECIEVE_TICKERS
 } from '../../app/reducers/ticker'
 
 describe('reducers', () => {
@@ -14,24 +15,32 @@ describe('reducers', () => {
       expect(SET_CURRENCY).toEqual('SET_CURRENCY')
     })
 
+    it('should have SET_CRYPTO', () => {
+      expect(SET_CRYPTO).toEqual('SET_CRYPTO')
+    })
+
     it('should have GET_TICKER', () => {
-      expect(GET_TICKER).toEqual('GET_TICKER')
+      expect(GET_TICKERS).toEqual('GET_TICKERS')
     })
 
     it('should have RECIEVE_TICKER', () => {
-      expect(RECIEVE_TICKER).toEqual('RECIEVE_TICKER')
+      expect(RECIEVE_TICKERS).toEqual('RECIEVE_TICKERS')
     })
 
     it('should correctly setCurrency', () => {
       expect(tickerReducer(undefined, { type: SET_CURRENCY, currency: 'foo' })).toMatchSnapshot()
     })
 
+    it('should correctly setCrypto', () => {
+      expect(tickerReducer(undefined, { type: SET_CRYPTO, crypto: 'foo' })).toMatchSnapshot()
+    })
+
     it('should correctly getTicker', () => {
-      expect(tickerReducer(undefined, { type: GET_TICKER })).toMatchSnapshot()
+      expect(tickerReducer(undefined, { type: GET_TICKERS })).toMatchSnapshot()
     })
 
     it('should correctly receiveTicker', () => {
-      expect(tickerReducer(undefined, { type: RECIEVE_TICKER, ticker: 'foo' })).toMatchSnapshot()
+      expect(tickerReducer(undefined, { type: RECIEVE_TICKERS, ticker: 'foo' })).toMatchSnapshot()
     })
   })
 })