make touchbar work

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={() => this.context.toggleCurrencies('ocean')}
+      onClick={() => toggleCurrencies('ocean')}
+      backgroundColor={currency === 'ocean' ? '#f6388a' : '#141414'}
     />
-      {Object.keys(this.context.prices).map(key => (
+    {Object.keys(prices).map(key => (
       <Button
         key={key}
-          label={formatCurrency(
-            this.context.prices[key],
-            key.toUpperCase(),
-            locale
-          )
+        label={formatCurrency(prices[key], key.toUpperCase(), locale)
           .replace(/BTC/, 'Ƀ')
           .replace(/ETH/, 'Ξ')}
-          onClick={() => this.context.toggleCurrencies(key)}
+        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>{this.items}</TouchBar>
+    return (
+      <TouchBar>
+        <TouchbarItems
+          prices={this.context.prices}
+          currency={this.context.currency}
+          toggleCurrencies={this.context.toggleCurrencies}
+        />
+      </TouchBar>
+    )
   }
 }