update touchbar with data

src/app/components/Balance.jsx

@@ -5,6 +5,7 @@ import { AppContext } from '../store/createContext'
 import { cryptoFormatter } from '../../utils'
 import './Balance.css'
 import { fadeIn } from './Animations'
+import { cryptoFormatter } from '../../utils'
 
 const Animation = posed.h1(fadeIn)
 

src/app/components/Ticker.jsx

@@ -4,6 +4,7 @@ import { AppContext } from '../store/createContext'
 import { cryptoFormatter } from '../../utils'
 import './Ticker.css'
 import { fadeIn } from './Animations'
+import { cryptoFormatter } from '../../utils'
 
 const Item = posed.div(fadeIn)
 

src/app/components/Touchbar.js

@@ -1,49 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { TouchBar, Button } from 'react-touchbar-electron'
-import { cryptoFormatter } from '../../utils'
-import { AppContext } from '../store/createContext'
-
-const TouchbarItems = ({ prices, currency, toggleCurrencies, accentColor }) => (
-  <>
-    <Button
-      label={cryptoFormatter(1, 'ocean')}
-      onClick={() => toggleCurrencies('ocean')}
-      backgroundColor={currency === 'ocean' ? accentColor : '#141414'}
-    />
-    {Object.keys(prices).map(key => (
-      <Button
-        key={key}
-        label={cryptoFormatter(prices[key], key)}
-        onClick={() => toggleCurrencies(key)}
-        backgroundColor={
-          currency !== 'ocean' && currency === key ? accentColor : '#141414'
-        }
-      />
-    ))}
-  </>
-)
-
-TouchbarItems.propTypes = {
-  prices: PropTypes.object.isRequired,
-  currency: PropTypes.string.isRequired,
-  toggleCurrencies: PropTypes.func.isRequired,
-  accentColor: PropTypes.string
-}
-
-export default class Touchbar extends PureComponent {
-  render() {
-    return (
-      <TouchBar>
-        <TouchbarItems
-          prices={this.context.prices}
-          currency={this.context.currency}
-          toggleCurrencies={this.context.toggleCurrencies}
-          accentColor={this.context.accentColor}
-        />
-      </TouchBar>
-    )
-  }
-}
-
-Touchbar.contextType = AppContext

src/app/store/AppProvider.jsx

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
 import ms from 'ms'
 import { ipcRenderer } from 'electron'
 import Store from 'electron-store'
-import { ipcRenderer } from 'electron'
 import { AppContext } from './createContext'
-import fetchData from '../util/fetch'
+import fetchData from '../utils/fetch'
 import { refreshInterval, prices, oceanTokenContract } from '../config'
 
 export default class AppProvider extends PureComponent {
@@ -21,29 +20,32 @@ export default class AppProvider extends PureComponent {
     currency: 'ocean',
     needsConfig: false,
     prices: Object.assign(...prices.map(key => ({ [key]: 0 }))),
-    toggleCurrencies: currency => this.setState({ currency }),
+    toggleCurrencies: currency => this.toggleCurrencies(currency),
     setBalances: () => this.setBalances(),
     accentColor: ''
   }
 
   async componentDidMount() {
+    // listener for accent color
     ipcRenderer.on('accent-color', (event, accentColor) => {
       this.setState({ accentColor })
     })
 
-    await this.fetchAndSetPrices()
+    // listener for touchbar
+    ipcRenderer.on('setCurrency', (evt, currency) =>
+      this.state.toggleCurrencies(currency)
+    )
+
+    const newPrizes = await this.fetchAndSetPrices()
+    this.setState({ prices: newPrizes })
+    ipcRenderer.send('prices-updated', newPrizes)
+
     await this.setBalances()
 
     setInterval(this.fetchAndSetPrices, ms(refreshInterval))
     setInterval(this.setBalances, ms(refreshInterval))
 
     this.setState({ isLoading: false })
-
-    // listener for touchbar
-    ipcRenderer.on('setCurrency', (evt, currency) => {
-      console.log('pong')
-      this.context.toggleCurrencies(currency)
-    })
   }
 
   getAccounts() {
@@ -85,7 +87,7 @@ export default class AppProvider extends PureComponent {
       }))
     )
 
-    this.setState({ prices: newPrizes })
+    return newPrizes
   }
 
   setBalances = async () => {
@@ -118,6 +120,10 @@ export default class AppProvider extends PureComponent {
     }
   }
 
+  toggleCurrencies(currency) {
+    this.setState({ currency })
+  }
+
   render() {
     return (
       <AppContext.Provider value={this.state}>

src/main.js

@@ -1,9 +1,10 @@
 const path = require('path')
-const { app, BrowserWindow, systemPreferences } = require('electron')
+const { app, BrowserWindow, systemPreferences, ipcMain } = require('electron')
 const pkg = require('../package.json')
 const buildMenu = require('./menu')
-const buildTouchbar = require('./touchbar')
+const { buildTouchbar, updateTouchbar } = require('./touchbar')
 const { rgbaToHex } = require('./utils')
+const { prices } = require('./app/config')
 
 let mainWindow
 
@@ -109,7 +110,13 @@ const createWindow = async () => {
   buildMenu(mainWindow)
   // Load touchbar
   process.platform === 'darwin' &&
-    buildTouchbar(mainWindow, app.getLocale())
+    const systemAccentColor = systemPreferences.getAccentColor()
+    buildTouchbar(prices, mainWindow, systemAccentColor)
+
+    ipcMain.on('prices-updated', (event, pricesNew) => {
+      updateTouchbar(pricesNew, mainWindow, systemAccentColor)
+    })
+  }
 }
 
 app.on('ready', () => {

src/touchbar.js

@@ -1,37 +1,42 @@
 const { TouchBar } = require('electron')
-const { formatCurrency } = require('@coingecko/cryptoformat')
+const { cryptoFormatter } = require('./utils')
-const { prices } = require('./app/config')
 
 const { TouchBarButton } = TouchBar
 
 // const currency = ipc...
 // const prices = ipc...
 
-const createButton = (price, key, locale, mainWindow) => {
+const createButton = (value, key, mainWindow, systemAccentColor) =>
-  const formattedPrice = formatCurrency(price, key.toUpperCase(), locale)
+  new TouchBarButton({
-    .replace(/OCEAN/, 'Ọ')
+    label: cryptoFormatter(value, key.toUpperCase()),
-    .replace(/BTC/, 'Ƀ')
+    click: () => mainWindow.webContents.send('setCurrency', key),
-    .replace(/ETH/, 'Ξ')
+    backgroundColor: key === 'ocean' ? systemAccentColor : '#141414'
-
-  return new TouchBarButton({
-    label: formattedPrice,
-    click: () => {
-      console.log('ping')
-      mainWindow.webContents.send('setCurrency', key)
-    }
-    // backgroundColor: currency === 'ocean' ? '#f6388a' : '#141414'
   })
-}
 
-const buildTouchbar = (mainWindow, locale) => {
+const buildTouchbar = (prices, mainWindow, systemAccentColor) => {
   const touchBar = new TouchBar({
     items: [
-      createButton(1, 'ocean', locale, mainWindow),
+      createButton(1, 'ocean', mainWindow, systemAccentColor),
-      ...prices.map(key => createButton(0, key, locale, mainWindow))
+      ...prices.map(key => createButton(0, key, mainWindow, systemAccentColor))
     ]
   })
 
   mainWindow.setTouchBar(touchBar)
 }
 
-module.exports = buildTouchbar
+const updateTouchbar = (prices, mainWindow, systemAccentColor) => {
+  const touchBar = new TouchBar({
+    items: [
+      createButton(1, 'ocean', mainWindow, systemAccentColor),
+      ...Object.entries(prices)
+        .filter(([key]) => key !== 'ocean')
+        .map(([key, value]) =>
+          createButton(value, key, mainWindow, systemAccentColor)
+        )
+    ]
+  })
+
+  mainWindow.setTouchBar(touchBar)
+}
+
+module.exports = { buildTouchbar, updateTouchbar }