basic setup without react-touchbar-electron

package.json

@@ -27,8 +27,7 @@
     "react": "^16.8.6",
     "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6",
-    "react-pose": "^4.0.8",
-    "react-touchbar-electron": "0.0.1"
+    "react-pose": "^4.0.8"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/app/App.jsx

@@ -8,7 +8,6 @@ import Home from './screens/Home'
 import Preferences from './screens/Preferences'
 import './App.css'
 import { defaultAnimation } from './components/Animations'
-import Touchbar from './components/Touchbar'
 
 //
 // Disable zooming
@@ -51,8 +50,6 @@ export default class App extends PureComponent {
             <Preferences path="/preferences" />
           </PosedRouter>
         </div>
-
-        <Touchbar />
       </>
     )
   }

src/app/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from 'react-dom'
-import { TouchBarProvider } from 'react-touchbar-electron'
 import AppProvider from './store/AppProvider'
 import App from './App'
 
@@ -13,9 +12,7 @@ document.body.appendChild(root)
 
 render(
   <AppProvider>
-    <TouchBarProvider>
-      <App />
-    </TouchBarProvider>
+    <App />
   </AppProvider>,
   document.getElementById('root')
 )

src/app/store/AppProvider.jsx

@@ -3,6 +3,7 @@ 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 { refreshInterval, prices, oceanTokenContract } from '../config'
@@ -37,6 +38,12 @@ export default class AppProvider extends PureComponent {
     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() {

src/main.js

@@ -1,8 +1,8 @@
 const path = require('path')
 const { app, BrowserWindow, systemPreferences } = require('electron')
-const { touchBarWrapper } = require('react-touchbar-electron')
 const pkg = require('../package.json')
 const buildMenu = require('./menu')
+const buildTouchbar = require('./touchbar')
 const { rgbaToHex } = require('./utils')
 
 let mainWindow
@@ -108,7 +108,8 @@ const createWindow = async () => {
   // Load menubar
   buildMenu(mainWindow)
   // Load touchbar
-  process.platform === 'darwin' && touchBarWrapper(mainWindow)
+  process.platform === 'darwin' &&
+    buildTouchbar(mainWindow, app.getLocale())
 }
 
 app.on('ready', () => {

src/touchbar.js

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

webpack.common.config.js

@@ -2,11 +2,10 @@ const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CopyPlugin = require('copy-webpack-plugin')
 
-// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
 const defaultInclude = [path.resolve(__dirname, 'src')]
 
 module.exports = {
-  entry: path.resolve(__dirname, 'src') + '/app/index.js',
+  entry: path.resolve(__dirname, 'src', 'app', 'index.js'),
   output: {
     path: path.resolve(__dirname, 'build'),
     filename: 'bundle.js',
@@ -33,11 +32,6 @@ module.exports = {
         test: /\.svg$/,
         use: ['@svgr/webpack'],
         include: defaultInclude
-      },
-      {
-        test: /\.(eot|ttf|woff|woff2)$/,
-        use: ['file-loader?name=font/[name]__[hash:base64:5].[ext]'],
-        include: defaultInclude
       }
     ]
   },