From a5d5022688e3bfbf5f529cf26e2c59fdbcefc221 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 13 May 2019 22:54:40 +0200
Subject: [PATCH 1/2] touchbar support

---
 package.json                   |  3 ++-
 src/app/App.jsx                |  8 +++++---
 src/app/components/Touchbar.js | 35 ++++++++++++++++++++++++++++++++++
 src/app/index.js               | 11 ++++++++++-
 src/main.js                    |  3 +++
 5 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/Touchbar.js

diff --git a/package.json b/package.json
index dc16487..f4dffa2 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/App.jsx b/src/app/App.jsx
index bc9fac5..2292113 100644
--- a/src/app/App.jsx
+++ b/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 />
+      </>
     )
   }
 }
diff --git a/src/app/components/Touchbar.js b/src/app/components/Touchbar.js
new file mode 100644
index 0000000..4dbc342
--- /dev/null
+++ b/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
diff --git a/src/app/index.js b/src/app/index.js
index 4911bcf..f34f57e 100644
--- a/src/app/index.js
+++ b/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')
+)
diff --git a/src/main.js b/src/main.js
index 1c1998b..1b20268 100644
--- a/src/main.js
+++ b/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', () => {

From 8b3d0df2032084b40eb1b30722c04b4ad33da416 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 15 May 2019 22:25:36 +0200
Subject: [PATCH 2/2] make touchbar work

---
 src/app/components/Touchbar.js | 57 +++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/app/components/Touchbar.js b/src/app/components/Touchbar.js
index 4dbc342..abc4e43 100644
--- a/src/app/components/Touchbar.js
+++ b/src/app/components/Touchbar.js
@@ -1,34 +1,49 @@
 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'
 
-export default class Touchbar extends PureComponent {
-  items = (
-    <>
+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
-        label={formatCurrency(1, 'OCEAN', locale).replace(/OCEAN/, 'Ọ')}
-        onClick={() => this.context.toggleCurrencies('ocean')}
+        key={key}
+        label={formatCurrency(prices[key], key.toUpperCase(), locale)
+          .replace(/BTC/, 'Ƀ')
+          .replace(/ETH/, 'Ξ')}
+        onClick={() => toggleCurrencies(key)}
+        backgroundColor={
+          currency !== 'ocean' && currency === key ? '#f6388a' : '#141414'
+        }
       />
-      {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)}
-        />
-      ))}
-    </>
-  )
+    ))}
+  </>
+)
 
+TouchbarItems.propTypes = {
+  prices: PropTypes.object.isRequired,
+  currency: PropTypes.string.isRequired,
+  toggleCurrencies: PropTypes.func.isRequired
+}
+
+export default class Touchbar extends PureComponent {
   render() {
-    return <TouchBar>{this.items}</TouchBar>
+    return (
+      <TouchBar>
+        <TouchbarItems
+          prices={this.context.prices}
+          currency={this.context.currency}
+          toggleCurrencies={this.context.toggleCurrencies}
+        />
+      </TouchBar>
+    )
   }
 }