make prices a Map to preserve order

src/app/components/Ticker.jsx

@@ -11,8 +11,10 @@ export default class Ticker extends PureComponent {
   static contextType = AppContext
 
   items = activeStyle =>
-    Object.keys(this.context.prices).map((key, i) => (
-      <Item key={i} className="number-unit">
+    // convert Map to array first, cause for...of or forEach returns undefined,
+    // so it cannot be mapped to a collection of elements
+    [...this.context.prices.entries()].map(([key, value]) => (
+      <Item key={key} className="number-unit">
         <button
           className="label label--price"
           onClick={() => this.context.toggleCurrencies(key)}
@@ -23,7 +25,7 @@ export default class Ticker extends PureComponent {
               : {}
           }
         >
-          {cryptoFormatter(this.context.prices[key], key)}
+          {cryptoFormatter(value, key)}
         </button>
       </Item>
     ))

src/app/components/Total.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import { AppContext } from '../store/createContext'
 import Balance from './Balance'
-import { prices } from '../../config'
+import { conversions } from '../../config'
 
 const calculateTotalBalance = (accounts, currency) => {
   const balanceTotalArray = []
@@ -23,15 +23,15 @@ export default class Total extends PureComponent {
   static contextType = AppContext
 
   render() {
-    const conversions = Object.assign(
-      ...prices.map(key => ({
+    const conversionsBalance = Object.assign(
+      ...conversions.map(key => ({
         [key]: calculateTotalBalance(this.context.accounts, key)
       }))
     )
 
     const balanceNew = {
       ocean: calculateTotalBalance(this.context.accounts, 'ocean'),
-      ...conversions
+      ...conversionsBalance
     }
 
     return (

src/app/store/AppProvider.jsx

@@ -5,7 +5,13 @@ import { ipcRenderer } from 'electron'
 import Store from 'electron-store'
 import { AppContext } from './createContext'
 import fetchData from '../utils/fetch'
-import { refreshInterval, prices, oceanTokenContract } from '../../config'
+import { refreshInterval, conversions, oceanTokenContract } from '../../config'
+
+// construct initial prices Map to get consistent
+// order for Ticker and Touchbar
+let pricesMap = new Map()
+pricesMap.set('ocean', 1)
+conversions.map(key => pricesMap.set(key, 0))
 
 export default class AppProvider extends PureComponent {
   static propTypes = {
@@ -19,7 +25,7 @@ export default class AppProvider extends PureComponent {
     accounts: [],
     currency: 'ocean',
     needsConfig: false,
-    prices: Object.assign(...prices.map(key => ({ [key]: 0 }))),
+    prices: pricesMap,
     toggleCurrencies: currency => this.toggleCurrencies(currency),
     setBalances: () => this.setBalances(),
     accentColor: ''
@@ -74,20 +80,17 @@ export default class AppProvider extends PureComponent {
   }
 
   fetchAndSetPrices = async () => {
-    const currencies = prices.join(',')
+    const currencies = conversions.join(',')
     const json = await fetchData(
       `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}`
     )
 
-    const newPrizes = Object.assign(
-      ...prices.map(key => ({
-        ocean: 1,
-        [key]: json['ocean-protocol'][key]
-      }))
-    )
+    let newPrices = new Map(this.state.prices) // make a shallow copy of the Map
+    conversions.map(key => newPrices.set(key, json['ocean-protocol'][key])) // modify the copy
 
-    ipcRenderer.send('prices-updated', newPrizes)
-    return newPrizes
+    ipcRenderer.send('prices-updated', Array.from(newPrices)) // convert Map to array, ipc messages seem to kill it
+    this.setState({ prices: newPrices })
+    return newPrices
   }
 
   setBalances = async () => {
@@ -98,9 +101,9 @@ export default class AppProvider extends PureComponent {
     for (const account of accountsPref) {
       const oceanBalance = await this.getBalance(account)
 
-      const conversions = Object.assign(
-        ...prices.map(key => ({
-          [key]: oceanBalance * this.state.prices[key] || 0
+      const conversionsBalance = Object.assign(
+        ...conversions.map(key => ({
+          [key]: oceanBalance * this.state.prices.get(key) || 0
         }))
       )
 
@@ -108,7 +111,7 @@ export default class AppProvider extends PureComponent {
         address: account,
         balance: {
           ocean: oceanBalance,
-          ...conversions
+          ...conversionsBalance
         }
       }
 
@@ -121,7 +124,8 @@ export default class AppProvider extends PureComponent {
   }
 
   toggleCurrencies(currency) {
-    ipcRenderer.send('currency-updated', this.state.prices, currency)
+    const pricesNew = Array.from(this.state.prices)
+    ipcRenderer.send('currency-updated', pricesNew, currency)
     this.setState({ currency })
   }
 

src/config.js

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

src/main.js

@@ -4,7 +4,6 @@ const pkg = require('../package.json')
 const buildMenu = require('./menu')
 const { buildTouchbar, updateTouchbar } = require('./touchbar')
 const { rgbaToHex } = require('./utils')
-const { prices } = require('./config')
 
 let mainWindow
 
@@ -65,7 +64,7 @@ const createWindow = async () => {
   // Load touchbar
   if (process.platform === 'darwin') {
     const accentColor = getAccentColor()
-    buildTouchbar(prices, mainWindow, accentColor)
+    buildTouchbar(mainWindow, accentColor)
 
     ipcMain.on('prices-updated', (event, pricesNew) => {
       updateTouchbar(pricesNew, mainWindow, accentColor)

src/touchbar.js

@@ -1,5 +1,6 @@
 const { TouchBar } = require('electron')
 const { cryptoFormatter } = require('./utils')
+const { conversions } = require('./config')
 
 const { TouchBarButton } = TouchBar
 
@@ -16,11 +17,11 @@ const createButton = (
     backgroundColor: key === currentCurrency ? accentColor : '#141414'
   })
 
-const buildTouchbar = (prices, mainWindow, accentColor) => {
+const buildTouchbar = (mainWindow, accentColor) => {
   const touchBar = new TouchBar({
     items: [
       createButton(1, 'ocean', mainWindow, accentColor),
-      ...prices.map(key => createButton(0, key, mainWindow, accentColor))
+      ...conversions.map(key => createButton(0, key, mainWindow, accentColor))
     ]
   })
 
@@ -28,22 +29,23 @@ const buildTouchbar = (prices, mainWindow, accentColor) => {
 }
 
 const updateTouchbar = (
-  prices,
+  pricesNew,
   mainWindow,
   accentColor,
   currentCurrency = 'ocean'
 ) => {
-  const items = Object.keys(prices)
-    .filter(key => key !== 'ocean')
-    .map(key =>
-      createButton(prices[key], key, mainWindow, accentColor, currentCurrency)
+  const items = pricesNew.map(item => {
+    return createButton(
+      item[1],
+      item[0],
+      mainWindow,
+      accentColor,
+      currentCurrency
     )
+  })
 
   const touchBar = new TouchBar({
-    items: [
-      createButton(1, 'ocean', mainWindow, accentColor, currentCurrency),
-      ...items
-    ]
+    items: [...items]
   })
 
   mainWindow.setTouchBar(touchBar)