Merge pull request #921 from mrfelton/losh11/coinbase

fix(ticker): use Coinbase API to fetch fiat ticker

app/components/Activity/Activity.js

@@ -26,7 +26,7 @@ class Activity extends Component {
     }
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const {
       fetchPayments,
       fetchInvoices,
@@ -42,12 +42,22 @@ class Activity extends Component {
     fetchChannels()
 
     // HACK: wait 10 seconds and fetch channels again, allowing the node to establish connections with the remote party
-    setTimeout(() => fetchChannels(), 10000)
+    const timer = setTimeout(() => fetchChannels(), 10000)
+    this.setState({ timer })
+  }
+
+  componentWillUnmount() {
+    const { timer } = this.state
+    clearInterval(timer)
   }
 
   renderActivity(activity) {
     const { ticker, currentTicker, showActivityModal, network, currencyName } = this.props
 
+    if (!currencyName) {
+      return null
+    }
+
     if (Object.prototype.hasOwnProperty.call(activity, 'block_hash')) {
       // activity is an on-chain tx
       return (
@@ -265,7 +275,7 @@ Activity.propTypes = {
   balance: PropTypes.object.isRequired,
   walletProps: PropTypes.object.isRequired,
 
-  currencyName: PropTypes.string.isRequired
+  currencyName: PropTypes.string
 }
 
 export default injectIntl(Activity)

app/components/Activity/Invoice/Invoice.js

@@ -60,7 +60,7 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
       <FormattedNumber
         currency={ticker.fiatTicker}
         style="currency"
-        value={btc.convert('sats', 'fiat', invoice.value, currentTicker[ticker.fiatTicker].last)}
+        value={btc.convert('sats', 'fiat', invoice.value, currentTicker[ticker.fiatTicker])}
       />
     </div>
   </div>

app/components/Activity/Payment/Payment.js

@@ -65,7 +65,7 @@ const Payment = ({
         <FormattedNumber
           currency={ticker.fiatTicker}
           style="currency"
-          value={btc.convert('sats', 'fiat', payment.value, currentTicker[ticker.fiatTicker].last)}
+          value={btc.convert('sats', 'fiat', payment.value, currentTicker[ticker.fiatTicker])}
         />
       </div>
     </div>

app/components/Activity/Transaction/Transaction.js

@@ -61,12 +61,7 @@ const Transaction = ({
       <FormattedNumber
         currency={ticker.fiatTicker}
         style="currency"
-        value={btc.convert(
-          'sats',
-          'fiat',
-          transaction.amount,
-          currentTicker[ticker.fiatTicker].last
-        )}
+        value={btc.convert('sats', 'fiat', transaction.amount, currentTicker[ticker.fiatTicker])}
       />
     </div>
   </div>

app/components/Contacts/Network/Network.js

@@ -65,6 +65,10 @@ class Network extends Component {
       intl
     } = this.props
 
+    if (!currencyName) {
+      return null
+    }
+
     const refreshClicked = () => {
       // turn the spinner on
       this.setState({ refreshing: true })
@@ -158,10 +162,7 @@ class Network extends Component {
       return 'online'
     }
 
-    const fiatAmount = btc.satoshisToFiat(
-      balance.channelBalance,
-      currentTicker[ticker.fiatTicker].last
-    )
+    const fiatAmount = btc.satoshisToFiat(balance.channelBalance, currentTicker[ticker.fiatTicker])
     const { refreshing } = this.state
     return (
       <BackgroundTertiary className={styles.network}>
@@ -409,7 +410,7 @@ Network.propTypes = {
   setSelectedChannel: PropTypes.func.isRequired,
   closeChannel: PropTypes.func.isRequired,
 
-  currencyName: PropTypes.string.isRequired
+  currencyName: PropTypes.string
 }
 
 export default injectIntl(Network)

app/components/Pay/Pay.js

@@ -316,7 +316,7 @@ class Pay extends React.Component {
    */
   handleAmountCryptoChange = e => {
     const { cryptoCurrency, currentTicker, fiatCurrency } = this.props
-    const lastPrice = currentTicker[fiatCurrency].last
+    const lastPrice = currentTicker[fiatCurrency]
     const value = convert(cryptoCurrency, 'fiat', e.target.value, lastPrice)
     this.formApi.setValue('amountFiat', value)
   }
@@ -326,7 +326,7 @@ class Pay extends React.Component {
    */
   handleAmountFiatChange = e => {
     const { cryptoCurrency, currentTicker, fiatCurrency } = this.props
-    const lastPrice = currentTicker[fiatCurrency].last
+    const lastPrice = currentTicker[fiatCurrency]
     const value = convert('fiat', cryptoCurrency, e.target.value, lastPrice)
     this.formApi.setValue('amountCrypto', value)
   }

app/components/Pay/PaySummaryLightning.js

@@ -73,7 +73,7 @@ class PaySummaryLightning extends React.PureComponent {
     const { satoshis, payeeNodeKey } = invoice
     const descriptionTag = invoice.tags.find(tag => tag.tagName === 'description') || {}
     const memo = descriptionTag.data
-    const fiatAmount = satoshisToFiat(satoshis, currentTicker[fiatCurrency].last)
+    const fiatAmount = satoshisToFiat(satoshis, currentTicker[fiatCurrency])
     const nodeAlias = getNodeAlias(payeeNodeKey, nodes)
 
     // Select an appropriate fee message...

app/components/Pay/PaySummaryOnChain.js

@@ -69,7 +69,7 @@ class PaySummaryOnChain extends React.Component {
       ...rest
     } = this.props
 
-    const fiatAmount = satoshisToFiat(amount, currentTicker[fiatCurrency].last)
+    const fiatAmount = satoshisToFiat(amount, currentTicker[fiatCurrency])
     const fee = get(onchainFees, 'fastestFee', null)
     return (
       <Box {...rest}>

app/components/Request/Request.js

@@ -141,7 +141,7 @@ class Request extends React.Component {
    */
   handleAmountCryptoChange = e => {
     const { cryptoCurrency, currentTicker, fiatCurrency } = this.props
-    const lastPrice = currentTicker[fiatCurrency].last
+    const lastPrice = currentTicker[fiatCurrency]
     const value = convert(cryptoCurrency, 'fiat', e.target.value, lastPrice)
     this.formApi.setValue('amountFiat', value)
   }
@@ -151,7 +151,7 @@ class Request extends React.Component {
    */
   handleAmountFiatChange = e => {
     const { cryptoCurrency, currentTicker, fiatCurrency } = this.props
-    const lastPrice = currentTicker[fiatCurrency].last
+    const lastPrice = currentTicker[fiatCurrency]
     const value = convert('fiat', cryptoCurrency, e.target.value, lastPrice)
     this.formApi.setValue('amountCrypto', value)
   }

app/components/Syncing/Syncing.js

@@ -20,7 +20,8 @@ class Syncing extends Component {
     syncPercentage: PropTypes.number,
     blockHeight: PropTypes.number,
     lndBlockHeight: PropTypes.number,
-    lndCfilterHeight: PropTypes.number
+    lndCfilterHeight: PropTypes.number,
+    lightningGrpcActive: PropTypes.bool
   }
 
   state = {
@@ -58,12 +59,13 @@ class Syncing extends Component {
       blockHeight,
       lndBlockHeight,
       lndCfilterHeight,
+      lightningGrpcActive,
       intl,
       theme
     } = this.props
     let { syncMessageDetail, syncMessageExtraDetail } = this.state
 
-    if (syncStatus === 'complete') {
+    if (lightningGrpcActive && syncStatus === 'complete') {
       return <Redirect to="/app" />
     }
 

app/components/UI/FiatAmountInput.js

@@ -28,8 +28,8 @@ class FiatAmountInput extends React.Component {
     if (currency !== prevProps.currency) {
       const { fieldApi } = this.props
       let value = fieldApi.getValue()
-      const lastPriceInOrigCurrency = currentTicker[prevProps.currency].last
-      const lastPriceInNewCurrency = currentTicker[currency].last
+      const lastPriceInOrigCurrency = currentTicker[prevProps.currency]
+      const lastPriceInNewCurrency = currentTicker[currency]
       // Convert to BTC.
       const btcValue = convert('fiat', 'btc', value, lastPriceInOrigCurrency)
       // Convert to new currency.

app/components/UI/Value.js

@@ -8,7 +8,7 @@ const Value = ({ value, currency, currentTicker, fiatTicker }) => {
   }
   let price
   if (currency === 'fiat') {
-    price = currentTicker[fiatTicker].last
+    price = currentTicker[fiatTicker]
   }
   return (
     <i>

app/components/Wallet/Wallet.js

@@ -33,9 +33,13 @@ const Wallet = ({
   paymentTimeout,
   theme
 }) => {
+  if (!ticker.currency) {
+    return null
+  }
+
   const fiatAmount = btc.satoshisToFiat(
     parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10),
-    currentTicker[ticker.fiatTicker].last
+    currentTicker[ticker.fiatTicker]
   )
 
   return (
@@ -175,7 +179,6 @@ Wallet.propTypes = {
   successTransactionScreen: PropTypes.object.isRequired,
   settingsProps: PropTypes.object.isRequired,
   currencyFilters: PropTypes.array.isRequired,
-  currencyName: PropTypes.string.isRequired,
   paymentTimeout: PropTypes.number.isRequired,
   setCurrency: PropTypes.func.isRequired
 }

app/containers/App.js

@@ -102,6 +102,7 @@ const mapStateToProps = state => ({
   isLoading:
     infoSelectors.infoLoading(state) ||
     tickerSelectors.tickerLoading(state) ||
+    !tickerSelectors.currencyName(state) ||
     state.balance.channelBalance === null ||
     state.balance.walletBalance === null,
 

app/containers/Syncing.js

@@ -15,6 +15,7 @@ const mapStateToProps = state => ({
   blockHeight: state.lnd.blockHeight,
   lndBlockHeight: state.lnd.lndBlockHeight,
   lndCfilterHeight: state.lnd.lndCfilterHeight,
+  lightningGrpcActive: state.lnd.lightningGrpcActive,
   isLoading: infoSelectors.infoLoading(state) || onboardingSelectors.startingLnd(state)
 })
 

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() {
-  const BASE_URL = `${scheme}blockchain.info/ticker`
+export function requestTicker(id) {
+  const BASE_URL = `${scheme}api.coinbase.com/v2/exchange-rates?currency=${id}`
   return axios({
     method: 'get',
     url: BASE_URL
@@ -21,11 +21,12 @@ export function requestTicker() {
 }
 
 export function requestTickers(ids) {
-  return axios
-    .all(ids.map(id => requestTicker(id)))
-    .then(
-      axios.spread((btcTicker, ltcTicker) => ({ btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] }))
-    )
+  return axios.all(ids.map(id => requestTicker(id))).then(
+    axios.spread((btcTicker, ltcTicker) => ({
+      btcTicker: btcTicker.data.rates,
+      ltcTicker: ltcTicker.data.rates
+    }))
+  )
 }
 
 export function requestSuggestedNodes() {

app/reducers/contactsform.js

@@ -263,11 +263,11 @@ contactFormSelectors.contactFormFiatAmount = createSelector(
   tickerSelectors.currentTicker,
   fiatTickerSelector,
   (amount, currency, currentTicker, fiatTicker) => {
-    if (!currentTicker || !currentTicker[fiatTicker].last) {
+    if (!currentTicker || !currentTicker[fiatTicker]) {
       return false
     }
 
-    return btc.convert(currency, 'fiat', amount, currentTicker[fiatTicker].last)
+    return btc.convert(currency, 'fiat', amount, currentTicker[fiatTicker])
   }
 )
 

app/reducers/ticker.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { requestTicker } from 'lib/utils/api'
+import { requestTickers } from 'lib/utils/api'
 import { currencies, getDefaultCurrency } from 'lib/i18n'
 import db from 'store/db'
 import { infoSelectors } from './info'
@@ -68,9 +68,10 @@ export function recieveTickers({ btcTicker, ltcTicker }) {
 
 export const fetchTicker = () => async dispatch => {
   dispatch(getTickers())
-  const btcTicker = await requestTicker()
-  dispatch(recieveTickers({ btcTicker }))
-  return btcTicker
+  const tickers = await requestTickers(['btc', 'ltc'])
+  dispatch(recieveTickers(tickers))
+
+  return tickers
 }
 
 // Receive IPC event for receiveCryptocurrency

internals/webpack/webpack.config.renderer.dev.js

@@ -154,7 +154,7 @@ export default merge.smart(baseConfig, {
         "'self'",
         'http://localhost:*',
         'ws://localhost:*',
-        'https://blockchain.info',
+        'https://api.coinbase.com/',
         'https://bitcoinfees.earn.com',
         'https://zap.jackmallers.com'
       ],
@@ -191,9 +191,9 @@ export default merge.smart(baseConfig, {
         pathRewrite: { '^/proxy/zap.jackmallers.com': '' },
         changeOrigin: true
       },
-      '/proxy/blockchain.info': {
-        target: 'https://blockchain.info/ticker',
-        pathRewrite: { '^/proxy/blockchain.info': '' },
+      '/proxy/api.coinbase.com': {
+        target: 'https://api.coinbase.com',
+        pathRewrite: { '^/proxy/api.coinbase.com': '' },
         changeOrigin: true
       }
     },

internals/webpack/webpack.config.renderer.prod.js

@@ -100,7 +100,7 @@ export default merge.smart(baseConfig, {
       'object-src': "'none'",
       'connect-src': [
         "'self'",
-        'https://blockchain.info',
+        'https://api.coinbase.com',
         'https://bitcoinfees.earn.com',
         'https://zap.jackmallers.com'
       ],

stories/containers/pay.stories.js

@@ -51,15 +51,9 @@ const store = new Store({
   routes: [],
 
   currentTicker: {
-    USD: {
-      last: 6477.78
-    },
-    EUR: {
-      last: 5656.01
-    },
-    GBP: {
-      last: 5052.73
-    }
+    USD: 6477.78,
+    EUR: 5656.01,
+    GBP: 5052.73
   },
 
   isProcessing: false

stories/containers/request.stories.js

@@ -37,15 +37,9 @@ const store = new Store({
   fiatCurrencies: ['USD', 'EUR', 'GBP'],
 
   currentTicker: {
-    USD: {
-      last: 6477.78
-    },
-    EUR: {
-      last: 5656.01
-    },
-    GBP: {
-      last: 5052.73
-    }
+    USD: 6477.78,
+    EUR: 5656.01,
+    GBP: 5052.73
   }
 })
 

test/unit/components/Pay/PaySummaryLightning.spec.js

@@ -5,15 +5,9 @@ import { PaySummaryLightning } from 'components/Pay'
 
 const props = {
   currentTicker: {
-    USD: {
-      last: 6477.78
-    },
-    EUR: {
-      last: 5656.01
-    },
-    GBP: {
-      last: 5052.73
-    }
+    USD: 6477.78,
+    EUR: 5656.01,
+    GBP: 5052.73
   },
   cryptoCurrency: 'btc',
   cryptoCurrencyTicker: 'BTC',

test/unit/components/Pay/PaySummaryOnchain.spec.js

@@ -7,15 +7,9 @@ const props = {
   amount: 1000,
   address: 'mmxyr3LNKbnbrf6jdGXZpCE4EDpMSZRf4c',
   currentTicker: {
-    USD: {
-      last: 6477.78
-    },
-    EUR: {
-      last: 5656.01
-    },
-    GBP: {
-      last: 5052.73
-    }
+    USD: 6477.78,
+    EUR: 5656.01,
+    GBP: 5052.73
   },
   cryptoCurrency: 'btc',
   cryptoCurrencyTicker: 'BTC',