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

@@ -58,6 +58,7 @@ const InvoiceModal = ({
                   value={invoice.finalAmount}
                   currency={ticker.currency}
                   currentTicker={currentTicker}
+                  fiatTicker={ticker.fiatTicker}
                 />
               </h1>
               <section

app/components/Activity/PaymentModal.js

@@ -47,7 +47,12 @@ const PaymentModal = ({
     <div className={styles.amount}>
       <h1>
         <i className={`${styles.symbol} ${payment.value > 0 ? styles.active : undefined}`}>-</i>
-        <Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
+        <Value
+          value={payment.value}
+          currency={ticker.currency}
+          currentTicker={currentTicker}
+          fiatTicker={ticker.fiatTicker}
+        />
       </h1>
       <section
         className={styles.currentCurrency}

app/components/Activity/TransactionModal.js

@@ -57,6 +57,7 @@ const TransactionModal = ({
             value={transaction.total_fees}
             currency={ticker.currency}
             currentTicker={currentTicker}
+            fiatTicker={ticker.fiatTicker}
           />
           <span> {currencyName} fee</span>
         </div>
@@ -72,6 +73,7 @@ const TransactionModal = ({
           value={transaction.amount}
           currency={ticker.currency}
           currentTicker={currentTicker}
+          fiatTicker={ticker.fiatTicker}
         />
       </h1>
       <section

app/components/Contacts/Network.js

@@ -155,7 +155,10 @@ class Network extends Component {
       return 'online'
     }
 
-    const usdAmount = btc.satoshisToUsd(balance.channelBalance, currentTicker.price_usd)
+    const usdAmount = btc.satoshisToUsd(
+      balance.channelBalance,
+      currentTicker[ticker.fiatTicker].last
+    )
     const { refreshing } = this.state
     return (
       <div className={styles.network}>
@@ -296,6 +299,7 @@ class Network extends Component {
                               value={channel.local_balance}
                               currency={ticker.currency}
                               currentTicker={currentTicker}
+                              fiatTicker={ticker.fiatTicker}
                             />
                             <i> {currencyName}</i>
                           </p>
@@ -307,6 +311,7 @@ class Network extends Component {
                               value={channel.remote_balance}
                               currency={ticker.currency}
                               currentTicker={currentTicker}
+                              fiatTicker={ticker.fiatTicker}
                             />
                             <i>{ticker.currency.toUpperCase()}</i>
                           </p>

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 (
     <div>
       <header className={styles.submenuHeader} onClick={disableSubMenu}>
         <FaAngleLeft />
         <span>Fiat currency</span>
       </header>
-      <ul>
-        <li>USD</li>
-        <li>JPY</li>
-        <li>CNY</li>
-        <li>SGD</li>
-        <li>HKD</li>
-        <li>CAD</li>
+      <ul className={styles.fiatTickers}>
+        {fiatTickers.map(ft => (
+          <li
+            key={ft}
+            className={fiatTicker === ft && styles.active}
+            onClick={() => setFiatTicker(ft)}
+          >
+            <span>{ft}</span>
+            {fiatTicker === ft && <Isvg src={checkIcon} />}
+          </li>
+        ))}
       </ul>
     </div>
   )
 }
 
 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

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;
+    }
+  }
+}

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 <i>{value > 0 ? value : value * -1}</i>
   }
 
-  return <i>{btc.convert('sats', currency, value, currentTicker.price_usd)}</i>
+  return <i>{btc.convert('sats', currency, value, currentTicker[fiatTicker].last)}</i>
 }
 
 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

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 = ({
                 <span>
                   <Value
                     value={parseFloat(balance.walletBalance) + parseFloat(balance.channelBalance)}
-                    fromCurrency={ticker.fromCurrency}
                     currency={ticker.currency}
                     currentTicker={currentTicker}
+                    fiatTicker={ticker.fiatTicker}
                   />
                   <section className={styles.currencyContainer}>
                     <i className={styles.currency}>{currencyName}</i>

app/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>

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

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 })
 }
 

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',

app/routes/activity/components/components/Invoice/Invoice.js

@@ -41,9 +41,10 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
       <span>
         <i className={styles.plus}>+</i>
         <Value
-          value={invoice.finalAmount}
+          value={invoice.value}
           currency={ticker.currency}
           currentTicker={currentTicker}
+          fiatTicker={ticker.fiatTicker}
         />
         <i> {currencyName}</i>
       </span>

app/routes/activity/components/components/Payment/Payment.js

@@ -38,7 +38,12 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
       <div className={`hint--top-left ${styles.amount}`} data-hint="Payment amount">
         <span>
           <i className={styles.minus}>-</i>
-          <Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
+          <Value
+            value={payment.value}
+            currency={ticker.currency}
+            currentTicker={currentTicker}
+            fiatTicker={ticker.fiatTicker}
+          />
           <i> {currencyName}</i>
         </span>
         <span>${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)}</span>

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}
         />
         <i> {currencyName}</i>
       </span>

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
       }
     }
   }

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
           })
         )