From 7671d41eb2365f1a4bae7a7022476921f38ca6d3 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Tue, 31 Jul 2018 13:48:24 -0500 Subject: [PATCH] feat(fiat): convert to bci api feat(fiat): wire up setFiatTicker fix(fiat): enable fixed height w scrolling feat(fiat): add active style --- app/components/Activity/InvoiceModal.js | 1 + app/components/Activity/PaymentModal.js | 7 +++- app/components/Activity/TransactionModal.js | 2 + app/components/Contacts/Network.js | 7 +++- app/components/Settings/Fiat.js | 27 ++++++++---- app/components/Settings/Fiat.scss | 17 ++++++++ app/components/Value/Value.js | 7 ++-- app/components/Wallet/Wallet.js | 4 +- app/icons/check.svg | 1 + app/lib/utils/api.js | 4 +- app/reducers/balance.js | 1 + app/reducers/ticker.js | 42 +++++++++++++++++-- .../components/components/Invoice/Invoice.js | 3 +- .../components/components/Payment/Payment.js | 7 +++- .../components/Transaction/Transaction.js | 1 + .../activity/containers/ActivityContainer.js | 8 +++- webpack.config.renderer.dev.js | 8 ++-- 17 files changed, 117 insertions(+), 30 deletions(-) create mode 100644 app/icons/check.svg diff --git a/app/components/Activity/InvoiceModal.js b/app/components/Activity/InvoiceModal.js index ffa96398..779f8738 100644 --- a/app/components/Activity/InvoiceModal.js +++ b/app/components/Activity/InvoiceModal.js @@ -58,6 +58,7 @@ const InvoiceModal = ({ value={invoice.finalAmount} currency={ticker.currency} currentTicker={currentTicker} + fiatTicker={ticker.fiatTicker} />

0 ? styles.active : undefined}`}>- - +

{currencyName} fee @@ -72,6 +73,7 @@ const TransactionModal = ({ value={transaction.amount} currency={ticker.currency} currentTicker={currentTicker} + fiatTicker={ticker.fiatTicker} />
@@ -296,6 +299,7 @@ class Network extends Component { value={channel.local_balance} currency={ticker.currency} currentTicker={currentTicker} + fiatTicker={ticker.fiatTicker} /> {currencyName}

@@ -307,6 +311,7 @@ class Network extends Component { value={channel.remote_balance} currency={ticker.currency} currentTicker={currentTicker} + fiatTicker={ticker.fiatTicker} /> {ticker.currency.toUpperCase()}

diff --git a/app/components/Settings/Fiat.js b/app/components/Settings/Fiat.js index a8e672a4..2c8cf03e 100644 --- a/app/components/Settings/Fiat.js +++ b/app/components/Settings/Fiat.js @@ -1,29 +1,38 @@ import React from 'react' import PropTypes from 'prop-types' import FaAngleLeft from 'react-icons/lib/fa/angle-left' +import Isvg from 'react-inlinesvg' +import checkIcon from 'icons/check.svg' import styles from './Fiat.scss' -const Fiat = ({ disableSubMenu }) => { +const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => { return (
Fiat currency
-
    -
  • USD
    • -
  • JPY
    • -
  • CNY
    • -
  • SGD
    • -
  • HKD
    • -
  • CAD
    • +
      + {fiatTickers.map(ft => ( +
    • setFiatTicker(ft)} + > + {ft} + {fiatTicker === ft && } +
      • + ))}
) } Fiat.propTypes = { - disableSubMenu: PropTypes.func.isRequired + fiatTicker: PropTypes.string.isRequired, + fiatTickers: PropTypes.array.isRequired, + disableSubMenu: PropTypes.func.isRequired, + setFiatTicker: PropTypes.func.isRequired } export default Fiat diff --git a/app/components/Settings/Fiat.scss b/app/components/Settings/Fiat.scss index 2cfd4322..cdd7987c 100644 --- a/app/components/Settings/Fiat.scss +++ b/app/components/Settings/Fiat.scss @@ -1,3 +1,5 @@ +@import '../../styles/variables.scss'; + .submenuHeader { padding: 15px; background: lighten(#1d1f27, 20%); @@ -7,3 +9,18 @@ justify-content: end; align-items: center; } + +.fiatTickers { + height: 300px; + overflow-y: scroll; + + .active { + background: #0f0f0f; + + svg { + height: 10px; + width: 10px; + color: $green; + } + } +} diff --git a/app/components/Value/Value.js b/app/components/Value/Value.js index 66745484..56f891b1 100644 --- a/app/components/Value/Value.js +++ b/app/components/Value/Value.js @@ -2,18 +2,19 @@ import React from 'react' import PropTypes from 'prop-types' import { btc } from 'lib/utils' -const Value = ({ value, currency, currentTicker }) => { +const Value = ({ value, currency, currentTicker, fiatTicker }) => { if (currency === 'sats') { return {value > 0 ? value : value * -1} } - return {btc.convert('sats', currency, value, currentTicker.price_usd)} + return {btc.convert('sats', currency, value, currentTicker[fiatTicker].last)} } Value.propTypes = { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), currency: PropTypes.string.isRequired, - currentTicker: PropTypes.object.isRequired + currentTicker: PropTypes.object.isRequired, + fiatTicker: PropTypes.string.isRequired } export default Value diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 33d08c86..06fd9e3b 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -34,7 +34,7 @@ const Wallet = ({ }) => { const usdAmount = btc.satoshisToUsd( parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10), - currentTicker.price_usd + currentTicker[ticker.fiatTicker].last ) const onCurrencyFilterClick = currency => { @@ -73,9 +73,9 @@ const Wallet = ({
{currencyName} diff --git a/app/icons/check.svg b/app/icons/check.svg new file mode 100644 index 00000000..1c209899 --- /dev/null +++ b/app/icons/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/lib/utils/api.js b/app/lib/utils/api.js index e1524bba..00e33f74 100644 --- a/app/lib/utils/api.js +++ b/app/lib/utils/api.js @@ -12,8 +12,8 @@ import axios from 'axios' // defined on the webpack dev server. const scheme = process.env.HOT ? '/proxy/' : 'https://' -export function requestTicker(id) { - const BASE_URL = `${scheme}api.coinmarketcap.com/v1/ticker/${id}` +export function requestTicker() { + const BASE_URL = `${scheme}blockchain.info/ticker` return axios({ method: 'get', url: BASE_URL diff --git a/app/reducers/balance.js b/app/reducers/balance.js index e9620030..954c20b3 100644 --- a/app/reducers/balance.js +++ b/app/reducers/balance.js @@ -22,6 +22,7 @@ export const fetchBalance = () => async dispatch => { // Receive IPC event for balance export const receiveBalance = (event, { walletBalance, channelBalance }) => dispatch => { + // dispatch({ type: RECEIVE_BALANCE, walletBalance, channelBalance }) dispatch({ type: RECEIVE_BALANCE, walletBalance, channelBalance }) } diff --git a/app/reducers/ticker.js b/app/reducers/ticker.js index aa567a06..ef99349c 100644 --- a/app/reducers/ticker.js +++ b/app/reducers/ticker.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect' -import { requestTickers } from 'lib/utils/api' +import { requestTicker } from 'lib/utils/api' import { infoSelectors } from './info' // ------------------------------------ @@ -7,6 +7,7 @@ import { infoSelectors } from './info' // ------------------------------------ export const SET_CURRENCY = 'SET_CURRENCY' export const SET_CRYPTO = 'SET_CRYPTO' +export const SET_FIAT_TICKER = 'SET_FIAT_TICKER' export const GET_TICKERS = 'GET_TICKERS' export const RECIEVE_TICKERS = 'RECIEVE_TICKERS' @@ -33,6 +34,13 @@ export function setCrypto(crypto) { } } +export function setFiatTicker(fiatTicker) { + return { + type: SET_FIAT_TICKER, + fiatTicker + } +} + export function getTickers() { return { type: GET_TICKERS @@ -49,10 +57,10 @@ export function recieveTickers({ btcTicker, ltcTicker }) { export const fetchTicker = () => async dispatch => { dispatch(getTickers()) - const tickers = await requestTickers(['bitcoin', 'litecoin']) - dispatch(recieveTickers(tickers)) + const btcTicker = await requestTicker() + dispatch(recieveTickers({ btcTicker })) - return tickers + return btcTicker } // Receive IPC event for receiveCryptocurrency @@ -67,6 +75,7 @@ export const receiveCryptocurrency = (event, currency) => dispatch => { const ACTION_HANDLERS = { [SET_CURRENCY]: (state, { currency }) => ({ ...state, fromCurrency: state.currency, currency }), [SET_CRYPTO]: (state, { crypto }) => ({ ...state, crypto }), + [SET_FIAT_TICKER]: (state, { fiatTicker }) => ({ ...state, fiatTicker }), [GET_TICKERS]: state => ({ ...state, tickerLoading: true }), [RECIEVE_TICKERS]: (state, { btcTicker, ltcTicker }) => ({ ...state, @@ -125,6 +134,31 @@ const initialState = { crypto: '', btcTicker: null, ltcTicker: null, + fiatTicker: 'USD', + fiatTickers: [ + 'USD', + 'AUD', + 'BRL', + 'CAD', + 'CHF', + 'CLP', + 'CNY', + 'DKK', + 'EUR', + 'GBP', + 'HKD', + 'INR', + 'ISK', + 'JPY', + 'KRW', + 'NZD', + 'PLN', + 'RUB', + 'SEK', + 'SGD', + 'THB', + 'TWB' + ], currencyFilters: [ { key: 'btc', diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js index b7ae7e6c..5ec25b2f 100644 --- a/app/routes/activity/components/components/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Invoice/Invoice.js @@ -41,9 +41,10 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa + {currencyName} diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js index 4ad30f97..a1fd4198 100644 --- a/app/routes/activity/components/components/Payment/Payment.js +++ b/app/routes/activity/components/components/Payment/Payment.js @@ -38,7 +38,12 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
- - + {currencyName} ${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)} diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js index c4c303d4..16e805b2 100644 --- a/app/routes/activity/components/components/Transaction/Transaction.js +++ b/app/routes/activity/components/components/Transaction/Transaction.js @@ -41,6 +41,7 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu value={transaction.amount} currency={ticker.currency} currentTicker={currentTicker} + fiatTicker={ticker.fiatTicker} /> {currencyName} diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js index e90a45ab..8f188f01 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/app/routes/activity/containers/ActivityContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux' -import { setCurrency, tickerSelectors } from 'reducers/ticker' +import { setCurrency, setFiatTicker, tickerSelectors } from 'reducers/ticker' import { fetchBalance } from 'reducers/balance' import { fetchInvoices, setInvoice, invoiceSelectors } from 'reducers/invoice' import { setPayment, fetchPayments, paymentSelectors } from 'reducers/payment' @@ -26,6 +26,7 @@ import Activity from '../components/Activity' const mapDispatchToProps = { setCurrency, + setFiatTicker, setPayment, setInvoice, fetchPayments, @@ -120,7 +121,10 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({ setActiveSubMenu: dispatchProps.setActiveSubMenu, fiatProps: { - disableSubMenu: dispatchProps.disableSubMenu + fiatTicker: stateProps.ticker.fiatTicker, + fiatTickers: stateProps.ticker.fiatTickers, + disableSubMenu: dispatchProps.disableSubMenu, + setFiatTicker: dispatchProps.setFiatTicker } } } diff --git a/webpack.config.renderer.dev.js b/webpack.config.renderer.dev.js index 67303d1a..7178f2d0 100644 --- a/webpack.config.renderer.dev.js +++ b/webpack.config.renderer.dev.js @@ -228,7 +228,7 @@ export default merge.smart(baseConfig, { "'self'", 'http://localhost:*', 'ws://localhost:*', - 'https://api.coinmarketcap.com', + 'https://blockchain.info/ticker', 'https://zap.jackmallers.com' ], 'script-src': ["'self'", 'http://localhost:*', "'unsafe-eval'"], @@ -285,9 +285,9 @@ export default merge.smart(baseConfig, { ) app.use( convert( - proxy('/proxy/api.coinmarketcap.com', { - target: 'https://api.coinmarketcap.com', - pathRewrite: { '^/proxy/api.coinmarketcap.com': '' }, + proxy('/proxy/blockchain.info', { + target: 'https://blockchain.info/ticker', + pathRewrite: { '^/proxy/blockchain.info': '' }, changeOrigin: true }) )