touchbar support

package.json

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

src/app/App.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import { Router, Location } from '@reach/router'
 import { webFrame } from 'electron'
 import posed, { PoseGroup } from 'react-pose'
-import AppProvider from './store/AppProvider'
 import Titlebar from './components/Titlebar'
 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
@@ -37,7 +37,7 @@ PosedRouter.propTypes = {
 export default class App extends PureComponent {
   render() {
     return (
-      <AppProvider>
+      <>
         <Titlebar />
         <div className="app">
           <PosedRouter>
@@ -45,7 +45,9 @@ export default class App extends PureComponent {
             <Preferences path="/preferences" />
           </PosedRouter>
         </div>
-      </AppProvider>
+
+        <Touchbar />
+      </>
     )
   }
 }

src/app/components/Touchbar.js

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react'
+import { TouchBar, Button } from 'react-touchbar-electron'
+import { locale } from '../util/moneyFormatter'
+import { formatCurrency } from '@coingecko/cryptoformat'
+import { AppContext } from '../store/createContext'
+
+export default class Touchbar extends PureComponent {
+  items = (
+    <>
+      <Button
+        label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
+        onClick={() => this.context.toggleCurrencies('ocean')}
+      />
+      {Object.keys(this.context.prices).map(key => (
+        <Button
+          key={key}
+          label={formatCurrency(
+            this.context.prices[key],
+            key.toUpperCase(),
+            locale
+          )
+            .replace(/BTC/, 'Ƀ')
+            .replace(/ETH/, 'Ξ')}
+          onClick={() => this.context.toggleCurrencies(key)}
+        />
+      ))}
+    </>
+  )
+
+  render() {
+    return <TouchBar>{this.items}</TouchBar>
+  }
+}
+
+Touchbar.contextType = AppContext

src/app/index.js

@@ -1,5 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
+import { TouchBarProvider } from 'react-touchbar-electron'
+import AppProvider from './store/AppProvider'
 import App from './App'
 
 document.body.style.backgroundColor = '#141414'
@@ -9,4 +11,11 @@ let root = document.createElement('div')
 root.id = 'root'
 document.body.appendChild(root)
 
-render(<App />, document.getElementById('root'))
+render(
+  <AppProvider>
+    <TouchBarProvider>
+      <App />
+    </TouchBarProvider>
+  </AppProvider>,
+  document.getElementById('root')
+)

src/main.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const { app, BrowserWindow, systemPreferences } = require('electron')
+const { touchBarWrapper } = require('react-touchbar-electron')
 
 let mainWindow
 
@@ -106,6 +107,8 @@ const createWindow = async () => {
 
   // Load menubar menu items
   require('./menu.js')
+
+  touchBarWrapper(mainWindow)
 }
 
 app.on('ready', () => {