preferences styling

package.json

@@ -23,6 +23,7 @@
     "@reach/router": "^1.2.1",
     "ms": "^2.1.1",
     "react": "^16.8.6",
+    "react-blockies": "^1.4.1",
     "react-dom": "^16.8.6"
   },
   "devDependencies": {

src/components/Balance.jsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Consumer } from '../store/createContext'
+import { AppContext } from '../store/createContext'
 import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
 
 const Balance = ({ balance }) => (
   <h1 className="number">
-    <Consumer>
+    <AppContext.Consumer>
       {({ currency }) =>
         formatCurrency(balance[currency], currency.toUpperCase(), locale)
           .replace(/BTC/, 'Ƀ')
           .replace(/ETH/, 'Ξ')
           .replace(/OCEAN/, 'Ọ')
       }
-    </Consumer>
+    </AppContext.Consumer>
   </h1>
 )
 

src/components/Ticker.jsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react'
-import { Consumer } from '../store/createContext'
+import { AppContext } from '../store/createContext'
 import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import './Ticker.css'
@@ -8,7 +8,7 @@ export default class Ticker extends PureComponent {
   render() {
     return (
       <footer className="number-unit-wrap ticker" {...this.props}>
-        <Consumer>
+        <AppContext.Consumer>
           {({ toggleCurrencies, currency, prices }) => (
             <>
               {Object.keys(prices).map((key, i) => (
@@ -27,7 +27,7 @@ export default class Ticker extends PureComponent {
               ))}
             </>
           )}
-        </Consumer>
+        </AppContext.Consumer>
       </footer>
     )
   }

src/components/Total.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Consumer } from '../store/createContext'
+import { AppContext } from '../store/createContext'
 import Balance from './Balance'
 import { prices } from '../../config'
 
@@ -21,7 +21,7 @@ const calculateTotalBalance = (accounts, currency) => {
 
 const Total = () => (
   <div className="number-unit number-unit--main">
-    <Consumer>
+    <AppContext.Consumer>
       {({ accounts }) => {
         const conversions = Object.assign(
           ...prices.map(key => ({
@@ -36,7 +36,7 @@ const Total = () => (
 
         return <Balance balance={balanceNew} />
       }}
-    </Consumer>
+    </AppContext.Consumer>
     <span className="label">Total Balance</span>
   </div>
 )

src/screens/Home.jsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import { Link } from '@reach/router'
-import { Consumer } from '../store/createContext'
+import { AppContext } from '../store/createContext'
 import Total from '../components/Total'
 import Account from '../components/Account'
 import Ticker from '../components/Ticker'
@@ -8,34 +8,34 @@ import Spinner from '../components/Spinner'
 import './Home.css'
 
 export default class Home extends PureComponent {
+  static contextType = AppContext
+
   render() {
+    const { isLoading, accounts, needsConfig } = this.context
+
     return (
-      <Consumer>
-        {({ isLoading, accounts, needsConfig }) => (
-          <>
-            <Link to="preferences">Settings</Link>
-            <main className="main">
-              {needsConfig ? (
-                'Needs config'
-              ) : isLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <Total />
+      <>
+        <Link to="preferences">Preferences</Link>
+        <main className="main">
+          {needsConfig ? (
+            'Needs config'
+          ) : isLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Total />
 
-                  <div className="number-unit-wrap number-unit-wrap--accounts">
-                    {accounts.map((account, i) => (
-                      <Account key={i} account={account} />
-                    ))}
-                  </div>
-                </>
-              )}
-            </main>
+              <div className="number-unit-wrap number-unit-wrap--accounts">
+                {accounts.map((account, i) => (
+                  <Account key={i} account={account} />
+                ))}
+              </div>
+            </>
+          )}
+        </main>
 
-            <Ticker style={isLoading ? { opacity: 0 } : null} />
-          </>
-        )}
-      </Consumer>
+        <Ticker style={isLoading ? { opacity: 0 } : null} />
+      </>
     )
   }
 }

src/screens/Preferences.css

@@ -2,3 +2,88 @@
     text-align: left;
     width: 100%;
 }
+
+.preferences__title {
+    font-size: 3rem;
+    margin-top: 0;
+}
+
+.preference__list {
+    padding: 0;
+    border-top: 1px solid #e2e2e2;
+}
+
+.dark .preference__list {
+    border-top-color: #303030;
+}
+
+.preference__list li {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid #e2e2e2;
+    padding-top: .3rem;
+    padding-bottom: .25rem;
+    font-family: monospace;
+}
+
+.dark .preference__list li {
+    border-bottom-color: #303030;
+}
+
+.preferences button {
+    background: none;
+    border: 0;
+    box-shadow: none;
+    margin: 0;
+    outline: 0;
+    color: #f6388a;
+    font-size: 1rem;
+    text-transform: uppercase;
+}
+
+button.delete {
+    font-size: 2rem;
+    color: #8b98a9;
+    transition: color .5s ease-out;
+}
+
+button.delete:hover {
+    color: #f6388a;
+}
+
+.preference {
+    -webkit-app-region: none;
+    -webkit-user-select: text;
+}
+
+.preference__title {
+    font-size: 1.2rem;
+    color: #8b98a9;
+}
+
+.preference .identicon {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin-top: -.2rem;
+    margin-right: .5rem;
+}
+
+.preference__input {
+    font-size: 1rem;
+    outline: 0;
+    background: none;
+    border: 0;
+    width: 80%;
+    color: #303030;
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+    font-family: monospace;
+}
+
+.dark .preference__input {
+    color: #fff;
+}

src/screens/Preferences.jsx

@@ -1,9 +1,13 @@
 import React, { PureComponent } from 'react'
 import { Link } from '@reach/router'
 import Store from 'electron-store'
+import Blockies from 'react-blockies'
 import './Preferences.css'
+import { AppContext } from '../store/createContext'
 
 export default class Preferences extends PureComponent {
+  static contextType = AppContext
+
   store = new Store()
 
   state = { accounts: [], input: '' }
@@ -26,8 +30,10 @@ export default class Preferences extends PureComponent {
       !this.state.accounts.includes(this.state.input) // duplication check
     ) {
       const joined = [...this.state.accounts, this.state.input]
+
       this.store.set('accounts', joined)
-      this.setState({ accounts: joined })
+      this.setState({ accounts: joined, input: '' })
+      this.context.setBalances(joined)
     }
   }
 
@@ -44,32 +50,51 @@ export default class Preferences extends PureComponent {
 
     this.store.set('accounts', array)
     this.setState({ accounts: array })
+    this.context.setBalances(array)
   }
 
   render() {
     return (
       <div className="preferences">
-        Hello Preferences <Link to="/">Close</Link>
-        <div>
-          {this.state.accounts &&
-            this.state.accounts.map(account => (
-              <div key={account}>
-                {account}
-                <button onClick={e => this.handleDelete(e, account)}>
-                  &times;
-                </button>
-              </div>
-            ))}
+        <h1 className="preferences__title">Preferences</h1>{' '}
+        <Link to="/">Close</Link>
+        <div className="preference">
+          <h2 className="preference__title">Accounts</h2>
+          <ul className="preference__list">
+            {this.state.accounts &&
+              this.state.accounts.map(account => (
+                <li key={account}>
+                  <div>
+                    <Blockies seed={account} size={10} scale={3} />
+                    {account}
+                  </div>
+
+                  <button
+                    className="delete"
+                    onClick={e => this.handleDelete(e, account)}
+                    title="Remove account"
+                  >
+                    &times;
+                  </button>
+                </li>
+              ))}
+            <li>
+              <input
+                type="text"
+                placeholder="0xxxxxxxx"
+                value={this.state.input}
+                onChange={this.handleInputChange}
+                className="preference__input"
+              />
+              <button
+                className="preference__input__add"
+                onClick={e => this.handleSave(e)}
+              >
+                Add
+              </button>
+            </li>
+          </ul>
         </div>
-        <form>
-          <input
-            type="text"
-            placeholder="0xxxxxxxx"
-            value={this.state.input}
-            onChange={this.handleInputChange}
-          />
-          <button onClick={e => this.handleSave(e)}>Add</button>
-        </form>
       </div>
     )
   }

src/store/AppProvider.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import ms from 'ms'
 import Store from 'electron-store'
-import { Provider } from './createContext'
+import { AppContext } from './createContext'
 import { refreshInterval, prices, oceanTokenContract } from '../../config'
 
 export default class AppProvider extends PureComponent {
@@ -18,7 +18,8 @@ export default class AppProvider extends PureComponent {
     currency: 'ocean',
     needsConfig: false,
     prices: Object.assign(...prices.map(key => ({ [key]: 0 }))),
-    toggleCurrencies: currency => this.setState({ currency })
+    toggleCurrencies: currency => this.setState({ currency }),
+    setBalances: account => this.setBalances(account)
   }
 
   async componentDidMount() {
@@ -30,15 +31,6 @@ export default class AppProvider extends PureComponent {
     await setInterval(this.setBalances, ms(refreshInterval))
 
     this.setState({ isLoading: false })
-
-    // document.addEventListener('DOMContentLoaded', () => {
-    //   this.store.onDidChange('accounts', async (newValue, oldValue) => {
-    //     const { accounts } = await this.getAccounts()
-    //     await this.setBalances(accounts)
-
-    //     console.log('hello from setting window', newValue, oldValue)
-    //   })
-    // })
   }
 
   componentWillUnmount() {
@@ -138,6 +130,10 @@ export default class AppProvider extends PureComponent {
   }
 
   render() {
-    return <Provider value={this.state}>{this.props.children}</Provider>
+    return (
+      <AppContext.Provider value={this.state}>
+        {this.props.children}
+      </AppContext.Provider>
+    )
   }
 }

src/store/createContext.jsx

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-const { Provider, Consumer } = createContext()
+const AppContext = createContext({})
 
-export { Provider, Consumer }
+export { AppContext }