switch between currencies

src/app/store/AppProvider.jsx

@@ -87,6 +87,7 @@ export default class AppProvider extends PureComponent {
       }))
     )
 
+    ipcRenderer.send('prices-updated', newPrizes)
     return newPrizes
   }
 
@@ -121,6 +122,7 @@ export default class AppProvider extends PureComponent {
   }
 
   toggleCurrencies(currency) {
+    ipcRenderer.send('currency-updated', this.state.prices, currency)
     this.setState({ currency })
   }
 

src/main.js

@@ -21,52 +21,6 @@ if (
 const width = 620
 const height = 440
 
-const installDevTools = async mainWindow => {
-  if (isDev) {
-    const {
-      default: installExtension,
-      REACT_DEVELOPER_TOOLS
-    } = require('electron-devtools-installer')
-
-    try {
-      const name = await installExtension(REACT_DEVELOPER_TOOLS)
-      console.log(`Added Extension: ${name}`) // eslint-disable-line no-console
-
-      mainWindow.webContents.on('devtools-opened', () =>
-        mainWindow.setSize(1024, 420, true)
-      )
-      mainWindow.webContents.on('devtools-closed', () =>
-        mainWindow.setSize(width, height, true)
-      )
-    } catch (error) {
-      console.log('An error occurred: ', error) // eslint-disable-line no-console
-    }
-  }
-}
-
-const createWindowEvents = mainWindow => {
-  mainWindow.on('enter-full-screen', () =>
-    mainWindow.webContents.executeJavaScript(
-      'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')'
-    )
-  )
-  mainWindow.on('leave-full-screen', () =>
-    mainWindow.webContents.executeJavaScript(
-      'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')'
-    )
-  )
-  mainWindow.on('blur', () =>
-    mainWindow.webContents.executeJavaScript(
-      'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')'
-    )
-  )
-  mainWindow.on('focus', () =>
-    mainWindow.webContents.executeJavaScript(
-      'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')'
-    )
-  )
-}
-
 const createWindow = async () => {
   const isDarkMode = systemPreferences.isDarkMode()
 
@@ -116,6 +70,10 @@ const createWindow = async () => {
     ipcMain.on('prices-updated', (event, pricesNew) => {
       updateTouchbar(pricesNew, mainWindow, accentColor)
     })
+
+    ipcMain.on('currency-updated', (event, pricesNew, currentCurrency) => {
+      updateTouchbar(pricesNew, mainWindow, accentColor, currentCurrency)
+    })
   }
 }
 
@@ -141,6 +99,52 @@ app.on('activate', () => {
   }
 })
 
+const installDevTools = async mainWindow => {
+  if (isDev) {
+    const {
+      default: installExtension,
+      REACT_DEVELOPER_TOOLS
+    } = require('electron-devtools-installer')
+
+    try {
+      const name = await installExtension(REACT_DEVELOPER_TOOLS)
+      console.log(`Added Extension: ${name}`) // eslint-disable-line no-console
+
+      mainWindow.webContents.on('devtools-opened', () =>
+        mainWindow.setSize(1024, 420, true)
+      )
+      mainWindow.webContents.on('devtools-closed', () =>
+        mainWindow.setSize(width, height, true)
+      )
+    } catch (error) {
+      console.log('An error occurred: ', error) // eslint-disable-line no-console
+    }
+  }
+}
+
+const createWindowEvents = mainWindow => {
+  mainWindow.on('enter-full-screen', () =>
+    mainWindow.webContents.executeJavaScript(
+      'document.getElementsByTagName(\'html\')[0].classList.add(\'fullscreen\')'
+    )
+  )
+  mainWindow.on('leave-full-screen', () =>
+    mainWindow.webContents.executeJavaScript(
+      'document.getElementsByTagName(\'html\')[0].classList.remove(\'fullscreen\')'
+    )
+  )
+  mainWindow.on('blur', () =>
+    mainWindow.webContents.executeJavaScript(
+      'document.getElementsByTagName(\'html\')[0].classList.add(\'blur\')'
+    )
+  )
+  mainWindow.on('focus', () =>
+    mainWindow.webContents.executeJavaScript(
+      'document.getElementsByTagName(\'html\')[0].classList.remove(\'blur\')'
+    )
+  )
+}
+
 //
 // Accent color setting
 // macOS & Windows

src/touchbar.js

@@ -3,16 +3,18 @@ const { cryptoFormatter } = require('./utils')
 
 const { TouchBarButton } = TouchBar
 
-// const currency = ipc...
+const createButton = (
-// const prices = ipc...
+  value,
-
+  key,
-const createButton = (value, key, mainWindow, accentColor) => {
+  mainWindow,
-  return new TouchBarButton({
+  accentColor,
-    label: cryptoFormatter(value, key.toUpperCase()),
+  currentCurrency = 'ocean'
+) =>
+  new TouchBarButton({
+    label: cryptoFormatter(value, key),
     click: () => mainWindow.webContents.send('setCurrency', key),
-    backgroundColor: key === 'ocean' ? accentColor : '#141414'
+    backgroundColor: key === currentCurrency ? accentColor : '#141414'
   })
-}
 
 const buildTouchbar = (prices, mainWindow, accentColor) => {
   const touchBar = new TouchBar({
@@ -25,15 +27,22 @@ const buildTouchbar = (prices, mainWindow, accentColor) => {
   mainWindow.setTouchBar(touchBar)
 }
 
-const updateTouchbar = (prices, mainWindow, accentColor) => {
+const updateTouchbar = (
+  prices,
+  mainWindow,
+  accentColor,
+  currentCurrency = 'ocean'
+) => {
+  const items = Object.keys(prices)
+    .filter(key => key !== 'ocean')
+    .map(key =>
+      createButton(prices[key], key, mainWindow, accentColor, currentCurrency)
+    )
+
   const touchBar = new TouchBar({
     items: [
-      createButton(1, 'ocean', mainWindow, accentColor),
+      createButton(1, 'ocean', mainWindow, accentColor, currentCurrency),
-      ...Object.entries(prices)
+      ...items
-        .filter(([key]) => key !== 'ocean')
-        .map(([key, value]) =>
-          createButton(value, key, mainWindow, accentColor)
-        )
     ]
   })