define conversion prices in config

config.js

@@ -1,5 +1,6 @@
 module.exports = {
   accounts: ['ETH ADDRESS 1', 'ETH ADDRESS 2'],
+  prices: ['eur', 'usd', 'btc', 'eth'],
   refreshInterval: '1m',
   oceanTokenContract: '0x985dd3D42De1e256d09e1c10F112bCCB8015AD41'
 }

src/components/Account.jsx

@@ -7,11 +7,7 @@ export default class Account extends PureComponent {
   static propTypes = {
     account: PropTypes.shape({
       address: PropTypes.string.isRequired,
-      balance: PropTypes.shape({
-        ocean: PropTypes.number.isRequired,
-        eur: PropTypes.number.isRequired,
-        usd: PropTypes.number.isRequired
-      }).isRequired
+      balance: PropTypes.object.isRequired
     })
   }
 

src/components/Balance.jsx

@@ -18,8 +18,10 @@ const Balance = ({ balance }) => {
             <span className="balance">Ξ {numberFormatter(eth) || 0}</span>
           ) : currency === 'eur' ? (
             <span className="balance">{fiatFormatter('EUR', eur)}</span>
-          ) : (
+          ) : currency === 'usd' ? (
             <span className="balance">{fiatFormatter('USD', usd)}</span>
+          ) : (
+            <span className="balance">{numberFormatter(currency)}</span>
           )
         }
       </Consumer>
@@ -28,13 +30,7 @@ const Balance = ({ balance }) => {
 }
 
 Balance.propTypes = {
-  balance: PropTypes.shape({
-    ocean: PropTypes.number.isRequired,
-    btc: PropTypes.number.isRequired,
-    eth: PropTypes.number.isRequired,
-    eur: PropTypes.number.isRequired,
-    usd: PropTypes.number.isRequired
-  })
+  balance: PropTypes.object.isRequired
 }
 
 export default Balance

src/components/Total.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Consumer } from '../store/createContext'
 import Balance from './Balance'
+import { prices } from '../../config'
 
 const calculateTotalBalance = (accounts, currency) => {
   const balanceTotalArray = []
@@ -22,21 +23,18 @@ const Total = () => (
   <div className="number-unit number-unit--main">
     <Consumer>
       {({ accounts }) => {
-        const totalOcean = calculateTotalBalance(accounts, 'ocean')
-        const totalBtc = calculateTotalBalance(accounts, 'btc')
-        const totalEth = calculateTotalBalance(accounts, 'eth')
-        const totalEur = calculateTotalBalance(accounts, 'eur')
-        const totalUsd = calculateTotalBalance(accounts, 'usd')
+        const conversions = Object.assign(
+          ...prices.map(key => ({
+            [key]: calculateTotalBalance(accounts, key)
+          }))
+        )
 
-        const balance = {
-          ocean: totalOcean,
-          btc: totalBtc,
-          eth: totalEth,
-          eur: totalEur,
-          usd: totalUsd
+        const balanceNew = {
+          ocean: calculateTotalBalance(accounts, 'ocean'),
+          ...conversions
         }
 
-        return <Balance balance={balance} />
+        return <Balance balance={balanceNew} />
       }}
     </Consumer>
     <span className="label">Total balance</span>

src/store/AppProvider.jsx

@@ -2,7 +2,12 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import ms from 'ms'
 import { Provider } from './createContext'
-import { accounts, refreshInterval, oceanTokenContract } from '../../config'
+import {
+  accounts,
+  refreshInterval,
+  oceanTokenContract,
+  prices
+} from '../../config'
 
 export default class AppProvider extends PureComponent {
   static propTypes = {
@@ -12,11 +17,15 @@ export default class AppProvider extends PureComponent {
   state = {
     accounts: [],
     currency: 'ocean',
+    prices: Object.assign(...prices.map(key => ({ [key]: 0 }))),
     toggleCurrencies: currency => this.setState({ currency })
   }
 
-  componentDidMount() {
-    this.setBalances()
+  async componentDidMount() {
+    await this.fetchAndSetPrices()
+    await this.setBalances()
+
+    setInterval(this.fetchAndSetPrices, ms(refreshInterval))
     setInterval(this.setBalances, ms(refreshInterval))
   }
 
@@ -54,13 +63,19 @@ export default class AppProvider extends PureComponent {
     return balance
   }
 
-  fetchPrice = async () => {
+  fetchAndSetPrices = async () => {
+    const currencies = prices.join(',')
     const json = await this.fetch(
-      'https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=btc,eth,usd,eur'
+      `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}`
     )
 
-    const { btc, eth, usd, eur } = json['ocean-protocol']
-    return { btc, eth, usd, eur }
+    await this.setState({
+      prices: Object.assign(
+        ...prices.map(key => ({
+          [key]: json['ocean-protocol'][key]
+        }))
+      )
+    })
   }
 
   setBalances = async () => {
@@ -68,23 +83,24 @@ export default class AppProvider extends PureComponent {
     // when they are changed instead of resetting all to 0 here
     this.clearAccounts()
 
-    const { btc, eth, usd, eur } = await this.fetchPrice()
-
     accounts.map(async account => {
       const oceanBalance = await this.fetchBalance(account)
 
+      const conversions = Object.assign(
+        ...prices.map(key => ({
+          [key]: oceanBalance * this.state.prices[key] || 0
+        }))
+      )
+
       const newAccount = {
         address: account,
         balance: {
           ocean: oceanBalance || 0,
-          btc: oceanBalance * btc || 0,
-          eth: oceanBalance * eth || 0,
-          eur: oceanBalance * eur || 0,
-          usd: oceanBalance * usd || 0
+          ...conversions
         }
       }
 
-      this.setState(prevState => ({
+      await this.setState(prevState => ({
         accounts: [...prevState.accounts, newAccount]
       }))
     })

src/util/openUrl.js

@@ -4,4 +4,4 @@ const openUrl = url => {
   shell.openExternal(url)
 }
 
-export { openUrl }
+module.exports = { openUrl }