Fiat rates

Author: monokh

package-lock.json

@@ -48,6 +48,7 @@
     "pbkdf2": "^3.1.1",
     "qrcode": "^1.4.4",
     "qs": "^6.9.4",
+    "svg-url-loader": "^6.0.0",
     "uuid": "^8.1.0",
     "v-tooltip": "^2.0.3",
     "vue": "^2.6.11",

package.json

@@ -76,6 +76,13 @@ svg {
     font-size: $font-size-sm;
     font-weight: bold;
     text-transform: uppercase;
+    width: 100%;
+
+    .label-append {
+      float: right;
+      color: $text-muted;
+      font-weight: normal;
+    }
   }
   label.btn {
     text-transform: none;
@@ -89,6 +96,8 @@ svg {
   }
   .confirm-value {
     font-size: $input-font-size;
+    line-height: $input-font-size + 4px;
+    margin-bottom: 0;
   }
   .form-control-address {
     font-size: $font-size-lg;

src/assets/bg/asset_list.svg

@@ -1,25 +1,32 @@
+import { random } from 'lodash-es'
 import store from './store'
 
 let balanceInterval
-const BALANCE_UPDATE_INTERVAL = 30000
+let fiatRatesInterval
 
 store.subscribe(({ type, payload }, state) => {
   switch (type) {
     case 'CHANGE_ACTIVE_NETWORK':
       store.dispatch('updateBalances', { network: state.activeNetwork, walletId: state.activeWalletId })
       store.dispatch('updateMarketData', { network: state.activeNetwork })
-
       break
 
     case 'UNLOCK_WALLET':
       store.dispatch('updateBalances', { network: state.activeNetwork, walletId: state.activeWalletId })
+      store.dispatch('updateFiatRates')
       store.dispatch('updateMarketData', { network: state.activeNetwork })
       store.dispatch('checkPendingSwaps', { walletId: state.activeWalletId })
 
       if (!balanceInterval) {
         balanceInterval = setInterval(() => {
           store.dispatch('updateBalances', { network: state.activeNetwork, walletId: state.activeWalletId })
-        }, BALANCE_UPDATE_INTERVAL)
+        }, random(20000, 30000))
+      }
+
+      if (!fiatRatesInterval) {
+        fiatRatesInterval = setInterval(() => {
+          store.dispatch('updateFiatRates')
+        }, random(20000, 30000))
       }
 
       break

src/assets/scss/style.scss

@@ -22,6 +22,7 @@ import { unlockWallet } from './unlockWallet'
 import { lockWallet } from './lockWallet'
 import { updateBalances } from './updateBalances'
 import { updateFees } from './updateFees'
+import { updateFiatRates } from './updateFiatRates'
 import { updateMarketData } from './updateMarketData'
 
 export {
@@ -49,5 +50,6 @@ export {
   lockWallet,
   updateBalances,
   updateFees,
+  updateFiatRates,
   updateMarketData
 }

src/background.js

@@ -0,0 +1,11 @@
+import { getPrices } from '../utils'
+import { NetworkAssets } from '../factory/client'
+
+export const updateFiatRates = async ({ commit }) => {
+  const assets = NetworkAssets.mainnet.concat(NetworkAssets.testnet)
+  const fiatRates = await getPrices(assets, 'usd')
+
+  commit('UPDATE_FIAT_RATES', { fiatRates })
+
+  return fiatRates
+}

src/store/actions/index.js

@@ -73,6 +73,9 @@ export default {
 
     Vue.set(state.fees[network][walletId], asset, fees)
   },
+  UPDATE_FIAT_RATES (state, { fiatRates }) {
+    state.fiatRates = fiatRates
+  },
   UPDATE_MARKET_DATA (state, { network, marketData }) {
     Vue.set(state.marketData, network, marketData)
   }

src/store/actions/updateFiatRates.js

@@ -15,6 +15,7 @@ export default {
   encryptedWallets: null,
   addresses: {},
   balances: {},
+  fiatRates: {},
   fees: {},
   history: {},
   marketData: {},

src/store/mutations.js

@@ -75,3 +75,29 @@ export const getMarketData = agent => {
     }
   }).then(res => res.data)
 }
+
+const COIN_GECKO_CACHE = {}
+const COIN_GECKO_API = 'https://api.coingecko.com/api/v3'
+
+async function getCoins () {
+  if ('coins' in COIN_GECKO_CACHE) {
+    return COIN_GECKO_CACHE.coins
+  }
+
+  const response = await axios.get(`${COIN_GECKO_API}/coins/list`)
+  const coins = response.data
+  COIN_GECKO_CACHE.coins = coins
+  return coins
+}
+
+export async function getPrices (baseCurrencies, toCurrency) {
+  const coins = await getCoins()
+  const coindIds = baseCurrencies.map(currency => coins.find(coin => coin.symbol === currency.toLowerCase()).id)
+  const response = await axios.get(`${COIN_GECKO_API}/simple/price?ids=${coindIds.join(',')}&vs_currencies=${toCurrency}`)
+  const prices = response.data
+  const symbolPrices = Object.entries(prices).reduce((curr, [id, toPrices]) => {
+    const currencySymbol = coins.find(coin => coin.id === id).symbol
+    return Object.assign(curr, { [currencySymbol.toUpperCase()]: toPrices[toCurrency] })
+  }, {})
+  return symbolPrices
+}