From 5a307dfba8c2225f830d2e7e67e290f7a68dce2d Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Sat, 26 Aug 2017 22:58:35 -0500 Subject: [PATCH 1/3] feature(ticker): replace hard coded ticker with currentTicker --- app/api/index.js | 11 ++- app/reducers/ticker.js | 76 ++++++++++++++----- app/routes/activity/components/Activity.js | 5 +- .../components/components/Invoices.js | 7 +- .../components/components/Payments.js | 9 ++- .../activity/containers/ActivityContainer.js | 5 +- app/routes/app/components/App.js | 3 + .../app/components/components/Form/Form.js | 7 +- app/routes/app/components/components/Nav.js | 8 +- app/routes/app/containers/AppContainer.js | 6 +- app/routes/wallet/components/Wallet.js | 4 +- .../components/Channels/Channels.js | 20 ++++- .../Channels/components/Channel/Channel.js | 6 +- .../components/ChannelForm/ChannelForm.js | 6 +- .../ClosedPendingChannel.js | 8 +- .../OpenPendingChannel/OpenPendingChannel.js | 8 +- .../wallet/containers/WalletContainer.js | 5 +- 17 files changed, 136 insertions(+), 58 deletions(-) diff --git a/app/api/index.js b/app/api/index.js index f1b5bb2f..3873274d 100644 --- a/app/api/index.js +++ b/app/api/index.js @@ -1,7 +1,7 @@ import axios from 'axios' -export default function requestTicker() { - const BASE_URL = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/' +export function requestTicker(id) { + const BASE_URL = `https://api.coinmarketcap.com/v1/ticker/${id}/` return axios({ method: 'get', url: BASE_URL @@ -9,3 +9,10 @@ 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) => { + return { btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] } + })) +} \ No newline at end of file diff --git a/app/reducers/ticker.js b/app/reducers/ticker.js index 6e9a5fdb..da9ae95f 100644 --- a/app/reducers/ticker.js +++ b/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 RECIEVE_TICKER = 'RECIEVE_TICKER' +export const SET_CRYPTO = 'SET_CRYPTO' +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,38 +24,69 @@ 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, - ticker + type: GET_TICKERS } } -export const fetchTicker = () => async (dispatch) => { - dispatch(getTicker()) - const ticker = await requestTicker() - dispatch(recieveTicker(ticker)) +export function recieveTickers({ btcTicker, ltcTicker }) { + return { + type: RECIEVE_TICKERS, + btcTicker, + ltcTicker + } +} + +export const fetchTicker = (id) => async (dispatch) => { + dispatch(getTickers()) + const tickers = await requestTickers(['bitcoin', 'litecoin']) + 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 }), - [RECIEVE_TICKER]: (state, { ticker }) => ( - { ...state, tickerLoading: false, btcTicker: ticker[0] } + [SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }), + [GET_TICKERS]: state => ({ ...state, tickerLoading: true }), + [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 // ------------------------------------ @@ -55,11 +94,12 @@ const initialState = { tickerLoading: false, currency: 'btc', crypto: 'btc', - btcTicker: null + btcTicker: null, + ltcTicker: null } export default function tickerReducer(state = initialState, action) { const handler = ACTION_HANDLERS[action.type] return handler ? handler(state, action) : state -} +} \ No newline at end of file diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js index f2dddbec..f22ad27a 100644 --- a/app/routes/activity/components/Activity.js +++ b/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
Loading...
} @@ -75,6 +76,7 @@ class Activity extends Component { ticker={ticker} setPayment={setPayment} paymentModalOpen={paymentModalOpen} + currentTicker={currentTicker} /> : } diff --git a/app/routes/activity/components/components/Invoices.js b/app/routes/activity/components/components/Invoices.js index f6a46c18..443f3440 100644 --- a/app/routes/activity/components/components/Invoices.js +++ b/app/routes/activity/components/components/Invoices.js @@ -14,7 +14,8 @@ const Invoices = ({ invoices, ticker, setInvoice, - invoiceModalOpen + invoiceModalOpen, + currentTicker }) => (
@@ -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) } @@ -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) }
diff --git a/app/routes/activity/components/components/Payments.js b/app/routes/activity/components/components/Payments.js index f286453c..442a1996 100644 --- a/app/routes/activity/components/components/Payments.js +++ b/app/routes/activity/components/components/Payments.js @@ -12,7 +12,8 @@ const Payments = ({ payments, ticker, setPayment, - paymentModalOpen + paymentModalOpen, + currentTicker }) => (
@@ -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) } @@ -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) }
@@ -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) } diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js index 6ecbb3e2..1b3cba45 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/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) diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 1571f911..30d51a02 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -29,6 +29,7 @@ class App extends Component { createInvoice, payInvoice, fetchInvoice, + currentTicker, children } = this.props @@ -49,12 +50,14 @@ class App extends Component { payInvoice={payInvoice} fetchInvoice={fetchInvoice} formInvoice={formInvoice} + currentTicker={currentTicker} />