Merge pull request #2 from kremalicious/feature/touchbar

Touch Bar 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,50 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { TouchBar, Button } from 'react-touchbar-electron'
+import { locale } from '../util/moneyFormatter'
+import { formatCurrency } from '@coingecko/cryptoformat'
+import { AppContext } from '../store/createContext'
+
+const TouchbarItems = ({ prices, currency, toggleCurrencies }) => (
+  <>
+    <Button
+      label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
+      onClick={() => toggleCurrencies('ocean')}
+      backgroundColor={currency === 'ocean' ? '#f6388a' : '#141414'}
+    />
+    {Object.keys(prices).map(key => (
+      <Button
+        key={key}
+        label={formatCurrency(prices[key], key.toUpperCase(), locale)
+          .replace(/BTC/, 'Ƀ')
+          .replace(/ETH/, 'Ξ')}
+        onClick={() => toggleCurrencies(key)}
+        backgroundColor={
+          currency !== 'ocean' && currency === key ? '#f6388a' : '#141414'
+        }
+      />
+    ))}
+  </>
+)
+
+TouchbarItems.propTypes = {
+  prices: PropTypes.object.isRequired,
+  currency: PropTypes.string.isRequired,
+  toggleCurrencies: PropTypes.func.isRequired
+}
+
+export default class Touchbar extends PureComponent {
+  render() {
+    return (
+      <TouchBar>
+        <TouchbarItems
+          prices={this.context.prices}
+          currency={this.context.currency}
+          toggleCurrencies={this.context.toggleCurrencies}
+        />
+      </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', () => {