Merge pull request #38 from kremalicious/feature/refactor

refactor for css modules

.editorconfig

@@ -8,6 +8,3 @@ end_of_line = lf
 insert_final_newline = true
 charset = utf-8
 trim_trailing_whitespace = true
-
-[*.css,*.scss]
-indent_size = 4

.stylelintrc

@@ -3,10 +3,5 @@
     "stylelint-config-standard",
     "stylelint-config-css-modules",
     "./node_modules/prettier-stylelint/config.js"
-  ],
-  "rules": {
-    "indentation": 4,
-    "declaration-empty-line-before": null,
-    "number-leading-zero": "never"
-  }
+  ]
 }

package.json

@@ -11,7 +11,9 @@
     "package": "electron-builder build -mwl -p never && open ./dist",
     "dist": "rm -rf {dist,build}/ && npm run build && npm run package",
     "release": "release-it --non-interactive",
-    "changelog": "auto-changelog -p"
+    "changelog": "auto-changelog -p",
+    "format": "prettier --write 'src/**/*.{js,jsx}' && npm run format:css",
+    "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'"
   },
   "repository": "https://github.com/kremalicious/blowfish.git",
   "homepage": "https://github.com/kremalicious/blowfish",
@@ -32,7 +34,6 @@
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.6.0",
     "@reach/router": "^1.2.1",
     "@svgr/webpack": "^4.3.2",
     "auto-changelog": "^1.16.1",
@@ -51,14 +52,12 @@
     "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
     "prettier": "^1.18.2",
     "prettier-stylelint": "^0.4.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-pose": "^4.0.8",
     "release-it": "^12.3.6",
-    "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "stylelint": "^10.1.0",
     "stylelint-config-css-modules": "^1.4.0",
@@ -67,7 +66,7 @@
     "webpack-cli": "^3.3.8",
     "webpack-dev-server": "^3.8.0"
   },
-  "browserslist": "electron >= 5.0",
+  "browserslist": "electron >= 6.0",
   "build": {
     "appId": "com.kremalicious.blowfish",
     "files": [

src/renderer/App.css

@@ -1,96 +0,0 @@
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    background: #fcfcfc !important;
-    overflow: hidden;
-}
-
-html.dark,
-.dark body {
-    background: #141414 !important;
-}
-
-html {
-    font-size: 13px;
-}
-
-html.fullscreen {
-    font-size: 24px;
-}
-
-#root {
-    height: 100%;
-    position: relative;
-    font-size: 1rem;
-    line-height: 1.3;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
-        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol';
-    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0,
-        'onum' 0, 'lnum' 0, 'dlig' 1;
-    color: #303030;
-    transform: translate3d(0, 0, 0);
-    -webkit-app-region: drag;
-    -webkit-user-select: none;
-}
-
-.dark #root {
-    color: #e2e2e2;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-    font-weight: 700;
-}
-
-a,
-button {
-    text-decoration: none;
-    cursor: default;
-}
-
-a h1 {
-    color: unset;
-}
-
-.app {
-    padding: 10% 7% 5% 7%;
-    cursor: default;
-    transition: .15s ease-out;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-}
-
-.darwin .app {
-    padding-top: calc(35px + 10%);
-}
-
-.fullscreen.darwin .app {
-    transform: translate3d(0, -36px, 0);
-}
-
-.box {
-    width: 100%;
-    padding: 5%;
-    background: #fff;
-    border-radius: 5px;
-    border: .1rem solid #e2e2e2;
-}
-
-.dark .box {
-    background: #222;
-    border-color: #303030;
-}

src/renderer/App.jsx

@@ -10,10 +10,10 @@ import {
 import { webFrame, ipcRenderer } from 'electron'
 import posed, { PoseGroup } from 'react-pose'
 import Titlebar from './components/Titlebar'
+import { defaultAnimation } from './components/Animations'
 import Home from './screens/Home'
 import Preferences from './screens/Preferences'
-import './App.css'
-import { defaultAnimation } from './components/Animations'
+import styles from './App.module.css'
 
 //
 // Disable zooming
@@ -55,7 +55,7 @@ export default class App extends PureComponent {
     return (
       <>
         {process.platform === 'darwin' && <Titlebar />}
-        <div className="app">
+        <div className={styles.app}>
           <PosedRouter>
             <Home path="/" default />
             <Preferences path="/preferences" />

src/renderer/App.module.css

@@ -0,0 +1,16 @@
+.app {
+  padding: 10% 7% 5% 7%;
+  cursor: default;
+  transition: 0.15s ease-out;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+:global(.darwin) .app {
+  padding-top: calc(35px + 10%);
+}
+
+:global(.fullscreen.darwin) .app {
+  transform: translate3d(0, -36px, 0);
+}

src/renderer/components/Account.jsx

@@ -1,33 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { openUrl } from '../../utils'
-import Balance from './Balance'
-
-export default class Account extends PureComponent {
-  static propTypes = {
-    account: PropTypes.shape({
-      address: PropTypes.string.isRequired,
-      balance: PropTypes.object.isRequired
-    })
-  }
-
-  render() {
-    const { account } = this.props
-    const { balance, address } = account
-
-    return (
-      <div className="number-unit">
-        <Balance balance={balance} />
-        <a
-          className="label"
-          onClick={() =>
-            openUrl(`https://etherscan.io/address/${address}#tokentxns`)
-          }
-          title="Click to view on Etherscan"
-        >
-          {address.substring(0, 12)}&hellip;
-        </a>
-      </div>
-    )
-  }
-}

src/renderer/components/Balance.jsx

@@ -1,30 +1,37 @@
-import React, { PureComponent } from 'react'
+import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import posed, { PoseGroup } from 'react-pose'
 import { AppContext } from '../store/createContext'
 import { cryptoFormatter } from '../../utils'
-import styles from './Balance.module.scss'
 import { fadeIn } from './Animations'
+import Label from './Label'
+import styles from './Balance.module.css'
 
 const Animation = posed.h1(fadeIn)
 
-export default class Balance extends PureComponent {
-  static contextType = AppContext
+const Balance = ({ balance, label, labelOnClick, large }) => {
+  const { currency } = useContext(AppContext)
 
-  static propTypes = {
-    balance: PropTypes.object.isRequired
-  }
-
-  render() {
-    const { currency } = this.context
-    const { balance } = this.props
-
-    return (
+  return (
+    <div className={styles.balance}>
       <PoseGroup animateOnMount>
-        <Animation key={currency} className={styles.number}>
+        <Animation
+          key={currency}
+          className={large ? styles.numberLarge : styles.number}
+        >
           {cryptoFormatter(balance[currency], currency)}
         </Animation>
       </PoseGroup>
-    )
-  }
+      {label && <Label labelOnClick={labelOnClick}>{label}</Label>}
+    </div>
+  )
 }
+
+Balance.propTypes = {
+  balance: PropTypes.object.isRequired,
+  label: PropTypes.string,
+  labelOnClick: PropTypes.func,
+  large: PropTypes.bool
+}
+
+export default Balance

src/renderer/components/Balance.module.css

@@ -0,0 +1,33 @@
+.balance {
+  text-align: center;
+  width: 100%;
+}
+
+.number {
+  margin: 0;
+  -webkit-app-region: no-drag;
+  -webkit-user-select: text;
+  font-size: 1rem;
+  display: inline-block;
+  padding: 0 0.3rem;
+  border-radius: 4px;
+}
+
+.numberLarge {
+  composes: number;
+  font-size: 2.5rem;
+}
+
+.updated {
+  animation: updated 0.5s ease-out;
+}
+
+@keyframes updated {
+  0% {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  100% {
+    background: rgba(255, 255, 255, 0);
+  }
+}

src/renderer/components/Balance.module.scss

@@ -1,27 +0,0 @@
-.number {
-    margin: 0;
-    -webkit-app-region: no-drag;
-    -webkit-user-select: text;
-    font-size: 1rem;
-    display: inline-block;
-    padding: 0 .3rem;
-    border-radius: 4px;
-
-    :global(.number-unit--main) & {
-        font-size: 2.5rem;
-    }
-}
-
-.updated {
-    animation: updated .5s ease-out;
-}
-
-@keyframes updated {
-    0% {
-        background: rgba(255, 255, 255, .2);
-    }
-
-    100% {
-        background: rgba(255, 255, 255, 0);
-    }
-}

src/renderer/components/Box.module.css

@@ -0,0 +1,12 @@
+.box {
+  width: 100%;
+  padding: 5%;
+  background: #fff;
+  border-radius: 5px;
+  border: 0.1rem solid #e2e2e2;
+}
+
+:global(.dark) .box {
+  background: #222;
+  border-color: #303030;
+}

src/renderer/components/Divider.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import styles from './Divider.module.css'
+
+const Divider = () => <hr className={styles.divider} />
+
+export default Divider

src/renderer/components/Divider.module.css

@@ -0,0 +1,11 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #e2e2e2;
+  margin-top: 5%;
+  border: 0;
+}
+
+:global(.dark) .divider {
+  background: #303030;
+}

src/renderer/components/Label.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Label.module.css'
+
+const Label = ({ children, labelOnClick, ...props }) => (
+  <span className={styles.label} onClick={labelOnClick} {...props}>
+    {children}
+  </span>
+)
+
+Label.propTypes = {
+  labelOnClick: PropTypes.func,
+  children: PropTypes.any.isRequired
+}
+
+export default Label

src/renderer/components/Label.module.css

@@ -0,0 +1,7 @@
+.label {
+  color: #8b98a9;
+  font-size: 0.85rem;
+  display: block;
+  white-space: nowrap;
+  margin-top: 0.5rem;
+}

src/renderer/components/Spinner.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './Spinner.module.scss'
+import styles from './Spinner.module.css'
 
 const Spinner = () => <div className={styles.spinner} />
 

src/renderer/components/Spinner.module.css

@@ -0,0 +1,28 @@
+.spinner {
+  position: relative;
+  text-align: center;
+  margin: auto;
+  width: 100%;
+}
+
+.spinner::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin-top: -20px;
+  margin-left: -10px;
+  border-radius: 50%;
+  border: 2px solid #7b1173;
+  border-top-color: #e000cf;
+  animation: spinner 0.6s linear infinite;
+}
+
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/renderer/components/Spinner.module.scss

@@ -1,28 +0,0 @@
-.spinner {
-    position: relative;
-    text-align: center;
-    margin: auto;
-    width: 100%;
-
-    &::before {
-        content: '';
-        box-sizing: border-box;
-        position: absolute;
-        top: 0;
-        left: 50%;
-        width: 20px;
-        height: 20px;
-        margin-top: -20px;
-        margin-left: -10px;
-        border-radius: 50%;
-        border: 2px solid #7b1173;
-        border-top-color: #e000cf;
-        animation: spinner .6s linear infinite;
-    }
-}
-
-@keyframes spinner {
-    to {
-        transform: rotate(360deg);
-    }
-}

src/renderer/components/Ticker.css

@@ -1,56 +0,0 @@
-.ticker {
-    margin-top: 3rem;
-    width: 100%;
-}
-
-.ticker .number-unit {
-    margin-top: 0;
-}
-
-.ticker button {
-    background: none;
-    border: 1px solid #e2e2e2;
-    box-shadow: none;
-    margin: 0 auto;
-    outline: 0;
-    font-size: .75rem;
-    border-radius: .3rem;
-    padding: .3rem .4rem;
-    display: block;
-    width: 100%;
-    max-width: 12rem;
-    transition: border .2s ease-out;
-    color: #41474e;
-}
-
-.ticker button:disabled {
-    pointer-events: none;
-}
-
-.dark .ticker button {
-    border-color: #303030;
-    color: #8b98a9;
-}
-
-.label--price {
-    font-size: .95rem;
-}
-
-.change {
-    font-size: .65rem;
-    display: inline-block;
-    margin-left: .25rem;
-}
-
-.change--positive {
-    color: forestgreen;
-}
-
-.change--negative {
-    color: crimson;
-}
-
-.active .change--positive,
-.active .change--negative {
-    color: #fff !important;
-}

src/renderer/components/Ticker.jsx

@@ -1,75 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import posed, { PoseGroup } from 'react-pose'
-import { AppContext } from '../store/createContext'
-import { cryptoFormatter } from '../../utils'
-import './Ticker.css'
-import { fadeIn } from './Animations'
-
-const Item = posed.div(fadeIn)
-
-const Change = ({ currency }) => (
-  <AppContext.Consumer>
-    {({ priceChanges }) => {
-      const isNegative = JSON.stringify(priceChanges[currency]).startsWith('-')
-      let classes = isNegative ? 'change--negative' : 'change--positive'
-
-      return (
-        <span className={`change ${classes}`} title="24hr change">
-          {!isNegative && '+'}
-          {Number(priceChanges[currency]).toFixed(1)}%
-        </span>
-      )
-    }}
-  </AppContext.Consumer>
-)
-
-Change.propTypes = {
-  currency: PropTypes.string.isRequired
-}
-
-export default class Ticker extends PureComponent {
-  static contextType = AppContext
-
-  items = () => {
-    const {
-      prices,
-      needsConfig,
-      currency,
-      toggleCurrencies,
-      accentColor
-    } = this.context
-
-    const activeStyle = {
-      backgroundColor: accentColor,
-      color: '#fff',
-      borderColor: accentColor
-    }
-
-    // convert Map to array first, cause for...of or forEach returns
-    // undefined, so it cannot be mapped to a collection of elements
-    return [...prices.entries()].map(([key, value]) => (
-      <Item key={key} className="number-unit">
-        <button
-          className={`label label--price ${key === currency && 'active'}`}
-          onClick={() => toggleCurrencies(key)}
-          disabled={needsConfig}
-          style={key === currency && !needsConfig ? activeStyle : {}}
-        >
-          {cryptoFormatter(value, key)}
-          {key !== 'ocean' && <Change currency={key} />}
-        </button>
-      </Item>
-    ))
-  }
-
-  render() {
-    return (
-      <footer className="ticker" {...this.props}>
-        <div className="number-unit-wrap">
-          <PoseGroup animateOnMount>{this.items()}</PoseGroup>
-        </div>
-      </footer>
-    )
-  }
-}

src/renderer/components/Titlebar.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import pkg from '../../../package.json'
-import styles from './Titlebar.module.scss'
+import styles from './Titlebar.module.css'
 
 const Titlebar = () => (
   <header className={styles.titlebar}>

src/renderer/components/Titlebar.module.css

@@ -0,0 +1,48 @@
+.titlebar {
+  position: fixed;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  user-select: none;
+  background: linear-gradient(to top, #ccc 0%, #d6d6d6 1px, #ebebeb 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  transition: opacity 0.15s ease-out;
+}
+
+:global(.dark) .titlebar {
+  background: linear-gradient(to top, #141416 0%, #38383c 1px, #3f3f44 100%);
+  box-shadow: none;
+}
+
+:global(.fullscreen) .titlebar {
+  opacity: 0;
+}
+
+:global(.blur) .titlebar {
+  background: #f6f6f6;
+}
+
+:global(.blur.dark) .titlebar {
+  background: linear-gradient(to top, #141416 0%, #2d2a32 1px, #2d2a32 100%);
+}
+
+.titlebarTitle {
+  line-height: 35px;
+  height: 35px;
+  font-weight: 400;
+  font-size: 13px;
+  color: #555;
+}
+
+:global(.dark) .titlebarTitle {
+  color: #b6b3ba;
+}
+
+:global(.blur) .titlebarTitle {
+  color: #b6b6b6;
+}
+
+:global(.blur.dark) .titlebarTitle {
+  color: #67666e;
+}

src/renderer/components/Titlebar.module.scss

@@ -1,58 +0,0 @@
-.titlebar {
-    position: fixed;
-    width: 100%;
-    height: 35px;
-    line-height: 35px;
-    text-align: center;
-    user-select: none;
-    background: linear-gradient(to top, #ccc 0%, #d6d6d6 1px, #ebebeb 100%);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
-    transition: opacity .15s ease-out;
-
-    :global(.dark) & {
-        background: linear-gradient(
-            to top,
-            #141416 0%,
-            #38383c 1px,
-            #3f3f44 100%
-        );
-        box-shadow: none;
-    }
-
-    :global(.fullscreen) & {
-        opacity: 0;
-    }
-
-    :global(.blur) & {
-        background: #f6f6f6;
-    }
-
-    :global(.blur.dark) & {
-        background: linear-gradient(
-            to top,
-            #141416 0%,
-            #2d2a32 1px,
-            #2d2a32 100%
-        );
-    }
-}
-
-.titlebarTitle {
-    line-height: 35px;
-    height: 35px;
-    font-weight: 400;
-    font-size: 13px;
-    color: #555;
-
-    :global(.dark) & {
-        color: #b6b3ba;
-    }
-
-    :global(.blur) & {
-        color: #b6b6b6;
-    }
-
-    :global(.blur.dark) & {
-        color: #67666e;
-    }
-}

src/renderer/components/Total.jsx

@@ -1,44 +0,0 @@
-import React, { PureComponent } from 'react'
-import { AppContext } from '../store/createContext'
-import Balance from './Balance'
-import { conversions } from '../../config'
-
-const calculateTotalBalance = (accounts, currency) => {
-  const balanceTotalArray = []
-
-  for (const account of accounts) {
-    balanceTotalArray.push(account.balance[currency])
-  }
-
-  // Convert array to numbers and add numbers together
-  const balanceTotal = balanceTotalArray.reduce(
-    (a, b) => Number(a) + Number(b),
-    0
-  )
-
-  return balanceTotal
-}
-
-export default class Total extends PureComponent {
-  static contextType = AppContext
-
-  render() {
-    const conversionsBalance = Object.assign(
-      ...conversions.map(key => ({
-        [key]: calculateTotalBalance(this.context.accounts, key)
-      }))
-    )
-
-    const balanceNew = {
-      ocean: calculateTotalBalance(this.context.accounts, 'ocean'),
-      ...conversionsBalance
-    }
-
-    return (
-      <div className="number-unit number-unit--main">
-        <Balance balance={balanceNew} />
-        <span className="label">Total Balance</span>
-      </div>
-    )
-  }
-}

src/renderer/components/Welcome.jsx

@@ -1,20 +1,20 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Link } from '@reach/router'
-import IconRocket from '../images/rocket.svg'
-import styles from './Welcome.module.scss'
 import { AppContext } from '../store/createContext'
+import IconRocket from '../images/rocket.svg'
+import styles from './Welcome.module.css'
 
-const Welcome = () => (
-  <div className={styles.welcome}>
-    <IconRocket />
-    <AppContext.Consumer>
-      {context => (
-        <Link style={{ color: context.accentColor }} to="preferences">
-          Add your first address to get started.
-        </Link>
-      )}
-    </AppContext.Consumer>
-  </div>
-)
+const Welcome = () => {
+  const { accentColor } = useContext(AppContext)
+
+  return (
+    <div className={styles.welcome}>
+      <IconRocket />
+      <Link style={{ color: accentColor }} to="preferences">
+        Add your first address to get started.
+      </Link>
+    </div>
+  )
+}
 
 export default Welcome

src/renderer/components/Welcome.module.css

@@ -0,0 +1,18 @@
+.welcome {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.welcome svg {
+  display: block;
+  width: 5rem;
+  height: 5rem;
+  margin: 0 auto 2rem auto;
+  fill: #e2e2e2;
+}
+
+:global(.dark) .welcome svg {
+  fill: #41474e;
+}

src/renderer/components/Welcome.module.scss

@@ -1,18 +0,0 @@
-.welcome {
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    margin-top: 2rem;
-
-    svg {
-        display: block;
-        width: 5rem;
-        height: 5rem;
-        margin: 0 auto 2rem auto;
-        fill: #e2e2e2;
-    }
-
-    :global(.dark) & svg {
-        fill: #41474e;
-    }
-}

src/renderer/index.css

@@ -0,0 +1,66 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: #fcfcfc !important;
+  overflow: hidden;
+}
+
+html.dark,
+.dark body {
+  background: #141414 !important;
+}
+
+html {
+  font-size: 13px;
+}
+
+html.fullscreen {
+  font-size: 24px;
+}
+
+#root {
+  height: 100%;
+  position: relative;
+  font-size: 1rem;
+  line-height: 1.3;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
+    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0,
+    'onum' 0, 'lnum' 0, 'dlig' 1;
+  color: #303030;
+  transform: translate3d(0, 0, 0);
+  -webkit-app-region: drag;
+  -webkit-user-select: none;
+}
+
+.dark #root {
+  color: #e2e2e2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: 700;
+}
+
+a,
+button {
+  text-decoration: none;
+  cursor: default;
+}
+
+a h1 {
+  color: unset;
+}

src/renderer/index.js

@@ -3,6 +3,7 @@ import { render } from 'react-dom'
 import AppProvider from './store/AppProvider'
 import App from './App'
 import pkg from '../../package.json'
+import './index.css'
 
 document.body.style.backgroundColor = '#141414'
 

src/renderer/screens/Home.css

@@ -1,60 +0,0 @@
-.main {
-    min-height: 222px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    position: relative;
-}
-
-.preferences-link {
-    position: absolute;
-    right: 5%;
-    top: 1.5rem;
-}
-
-.preferences-link svg {
-    fill: #8b98a9;
-    transition: .2s ease-out;
-    width: 1.25rem;
-    height: 1.25rem;
-}
-
-.dark .preferences-link svg {
-    fill: #8b98a9;
-    opacity: .5;
-}
-
-.number-unit-wrap {
-    display: grid;
-    grid-gap: .5rem;
-    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-    justify-items: start;
-    width: 100%;
-}
-
-.number-unit {
-    text-align: center;
-    width: 100%;
-}
-
-.label {
-    color: #8b98a9;
-    font-size: .85rem;
-    display: block;
-    white-space: nowrap;
-    margin-top: .5rem;
-}
-
-.number-unit-wrap--accounts {
-    min-height: 55px;
-    padding-top: 2rem;
-}
-
-.number-unit--main {
-    padding-bottom: 5%;
-    border-bottom: 1px solid #e2e2e2;
-}
-
-.dark .number-unit--main {
-    border-bottom-color: #303030;
-}

src/renderer/screens/Home.jsx

@@ -1,46 +0,0 @@
-import React, { PureComponent } from 'react'
-import { Link } from '@reach/router'
-import { AppContext } from '../store/createContext'
-import Welcome from '../components/Welcome'
-import Total from '../components/Total'
-import Account from '../components/Account'
-import Ticker from '../components/Ticker'
-import Spinner from '../components/Spinner'
-import IconCog from '../images/cog.svg'
-import './Home.css'
-
-export default class Home extends PureComponent {
-  static contextType = AppContext
-
-  render() {
-    const { isLoading, accounts, needsConfig } = this.context
-
-    return (
-      <>
-        <main className="main box">
-          <Link className="preferences-link" to="/preferences">
-            <IconCog />
-          </Link>
-
-          {needsConfig ? (
-            <Welcome />
-          ) : isLoading ? (
-            <Spinner />
-          ) : (
-            <>
-              <Total />
-
-              <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} />
-      </>
-    )
-  }
-}

src/renderer/screens/Home/Accounts.jsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import { openUrl } from '../../../utils'
+import Balance from '../../components/Balance'
+import { AppContext } from '../../store/createContext'
+import styles from './Accounts.module.css'
+
+const Accounts = () => {
+  const { accounts } = useContext(AppContext)
+
+  return (
+    <div className={styles.accounts}>
+      {accounts.map((account, i) => (
+        <Balance
+          key={i}
+          balance={account.balance}
+          label={`${account.address.substring(0, 12)}...`}
+          labelOnClick={() =>
+            openUrl(`https://etherscan.io/address/${account.address}#tokentxns`)
+          }
+        />
+      ))}
+    </div>
+  )
+}
+
+export default Accounts

src/renderer/screens/Home/Accounts.module.css

@@ -0,0 +1,5 @@
+.accounts {
+  composes: balanceWrap from './index.module.css';
+  min-height: 55px;
+  padding-top: 2rem;
+}

src/renderer/screens/Home/Ticker.jsx

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react'
+import PropTypes from 'prop-types'
+import posed, { PoseGroup } from 'react-pose'
+import { AppContext } from '../../store/createContext'
+import { cryptoFormatter } from '../../../utils'
+import stylesIndex from './index.module.css'
+import styles from './Ticker.module.css'
+import { fadeIn } from '../../components/Animations'
+
+const Item = posed.div(fadeIn)
+
+const Change = ({ currency }) => {
+  const { priceChanges } = useContext(AppContext)
+  const isNegative = JSON.stringify(priceChanges[currency]).startsWith('-')
+  let classes = isNegative ? styles.negative : styles.positive
+
+  return (
+    <span className={classes} title="24hr change">
+      {!isNegative && '+'}
+      {Number(priceChanges[currency]).toFixed(1)}%
+    </span>
+  )
+}
+
+Change.propTypes = {
+  currency: PropTypes.string.isRequired
+}
+
+const Items = () => {
+  const {
+    prices,
+    needsConfig,
+    currency,
+    toggleCurrencies,
+    accentColor
+  } = useContext(AppContext)
+
+  const activeStyle = {
+    backgroundColor: accentColor,
+    color: '#fff',
+    borderColor: accentColor
+  }
+
+  // convert Map to array first, cause for...of or forEach returns
+  // undefined, so it cannot be mapped to a collection of elements
+  return [...prices.entries()].map(([key, value]) => (
+    <Item key={key} className={styles.number}>
+      <button
+        className={key === currency ? styles.labelActive : styles.label}
+        onClick={() => toggleCurrencies(key)}
+        disabled={needsConfig}
+        style={key === currency && !needsConfig ? activeStyle : {}}
+      >
+        {cryptoFormatter(value, key)}
+        {key !== 'ocean' && <Change currency={key} />}
+      </button>
+    </Item>
+  ))
+}
+
+const Ticker = props => (
+  <footer className={styles.ticker} {...props}>
+    <div className={stylesIndex.balanceWrap}>
+      <PoseGroup animateOnMount>
+        <Items key="items" />
+      </PoseGroup>
+    </div>
+  </footer>
+)
+
+export default Ticker

src/renderer/screens/Home/Ticker.module.css

@@ -0,0 +1,76 @@
+.ticker {
+  margin-top: 3rem;
+  width: 100%;
+}
+
+.ticker button {
+  background: none;
+  border: 1px solid #e2e2e2;
+  box-shadow: none;
+  margin: 0 auto;
+  outline: 0;
+  font-size: 0.75rem;
+  border-radius: 0.3rem;
+  padding: 0.3rem 0.4rem;
+  display: block;
+  width: 100%;
+  max-width: 12rem;
+  transition: border 0.2s ease-out;
+  color: #41474e;
+}
+
+.ticker button:disabled {
+  pointer-events: none;
+}
+
+:global(.dark) .ticker button {
+  border-color: #303030;
+  color: #8b98a9;
+}
+
+.label--price {
+  font-size: 0.95rem;
+}
+
+.change {
+  font-size: 0.65rem;
+  display: inline-block;
+  margin-left: 0.25rem;
+}
+
+.positive {
+  composes: change;
+  color: forestgreen;
+}
+
+.negative {
+  composes: change;
+  color: crimson;
+}
+
+:global(.active) .positive,
+:global(.active) .negative {
+  color: #fff !important;
+}
+
+.number {
+  text-align: center;
+  width: 100%;
+}
+
+.label {
+  color: #8b98a9;
+  font-size: 0.85rem;
+  display: block;
+  white-space: nowrap;
+  margin-top: 0.5rem;
+}
+
+.labelActive {
+  composes: label;
+}
+
+.labelActive .positive,
+.labelActive .negative {
+  color: #fff !important;
+}

src/renderer/screens/Home/Total.jsx

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react'
+import { AppContext } from '../../store/createContext'
+import Balance from '../../components/Balance'
+import { conversions } from '../../../config'
+
+const calculateTotalBalance = (accounts, currency) => {
+  const balanceTotalArray = []
+
+  for (const account of accounts) {
+    balanceTotalArray.push(account.balance[currency])
+  }
+
+  // Convert array to numbers and add numbers together
+  const balanceTotal = balanceTotalArray.reduce(
+    (a, b) => Number(a) + Number(b),
+    0
+  )
+
+  return balanceTotal
+}
+
+const Total = () => {
+  const { accounts } = useContext(AppContext)
+
+  const conversionsBalance = Object.assign(
+    ...conversions.map(key => ({
+      [key]: calculateTotalBalance(accounts, key)
+    }))
+  )
+
+  const balanceNew = {
+    ocean: calculateTotalBalance(accounts, 'ocean'),
+    ...conversionsBalance
+  }
+
+  return <Balance balance={balanceNew} label="Total Balance" large />
+}
+
+export default Total

src/renderer/screens/Home/index.jsx

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react'
+import { Link } from '@reach/router'
+import { AppContext } from '../../store/createContext'
+import Welcome from '../../components/Welcome'
+import Spinner from '../../components/Spinner'
+import Divider from '../../components/Divider'
+import Total from './Total'
+import Ticker from './Ticker'
+import Accounts from './Accounts'
+import IconCog from '../../images/cog.svg'
+import styles from './index.module.css'
+
+const Home = () => {
+  const { isLoading, needsConfig } = useContext(AppContext)
+
+  return (
+    <>
+      <main className={styles.main}>
+        <Link className={styles.preferences} to="/preferences">
+          <IconCog />
+        </Link>
+
+        {needsConfig ? (
+          <Welcome />
+        ) : isLoading ? (
+          <Spinner />
+        ) : (
+          <>
+            <Total />
+            <Divider />
+            <Accounts />
+          </>
+        )}
+      </main>
+
+      <Ticker style={isLoading ? { opacity: 0 } : null} />
+    </>
+  )
+}
+
+export default Home

src/renderer/screens/Home/index.module.css

@@ -0,0 +1,34 @@
+.main {
+  composes: box from '../../components/Box.module.css';
+  min-height: 222px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.preferences {
+  position: absolute;
+  right: 5%;
+  top: 1.5rem;
+}
+
+.preferences svg {
+  fill: #8b98a9;
+  transition: 0.2s ease-out;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:global(.dark) .preferences svg {
+  fill: #8b98a9;
+  opacity: 0.5;
+}
+
+.balanceWrap {
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  justify-items: start;
+  width: 100%;
+}

src/renderer/screens/Preferences/Accounts/New.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './New.module.css'
+
+const New = ({ input, handleInputChange, handleSave, accentColor }) => (
+  <li>
+    <input
+      type="text"
+      placeholder="0xxxxxxxx"
+      value={input}
+      onChange={e => handleInputChange(e)}
+      className={styles.input}
+    />
+
+    <button
+      className={styles.button}
+      onClick={e => handleSave(e)}
+      style={{ color: accentColor }}
+    >
+      Add
+    </button>
+  </li>
+)
+
+New.propTypes = {
+  input: PropTypes.string.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  handleSave: PropTypes.func.isRequired,
+  accentColor: PropTypes.string.isRequired
+}
+
+export default New

src/renderer/screens/Preferences/Accounts/New.module.css

@@ -0,0 +1,18 @@
+.input {
+  font-size: 1rem;
+  outline: 0;
+  background: none;
+  border: 0;
+  width: 80%;
+  color: #303030;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+:global(.dark) .input {
+  color: #fff;
+}
+
+.button {
+  composes: button from './index.module.css';
+}

src/renderer/screens/Preferences/Accounts/Saved.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { toDataUrl } from 'ethereum-blockies'
+import posed, { PoseGroup } from 'react-pose'
+import { fadeIn } from '../../../components/Animations'
+import styles from './Saved.module.css'
+
+const Item = posed.li(fadeIn)
+
+const Saved = ({ accounts, handleDelete }) => (
+  <PoseGroup>
+    {accounts.map(account => {
+      const identicon = account && toDataUrl(account)
+
+      return (
+        <Item key={account}>
+          <div>
+            <img className={styles.identicon} src={identicon} alt="Blockies" />
+            {account}
+          </div>
+
+          <button
+            className={styles.delete}
+            onClick={e => handleDelete(e, account)}
+            title="Remove account"
+          >
+            &times;
+          </button>
+        </Item>
+      )
+    })}
+  </PoseGroup>
+)
+
+Saved.propTypes = {
+  accounts: PropTypes.array.isRequired,
+  handleDelete: PropTypes.func.isRequired
+}
+
+export default Saved

src/renderer/screens/Preferences/Accounts/Saved.module.css

@@ -0,0 +1,15 @@
+.identicon {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  border-radius: 50%;
+  margin-right: 0.75rem;
+}
+
+.delete {
+  composes: button from './index.module.css';
+  position: relative;
+  font-size: 2rem;
+  top: -0.2rem;
+  color: #41474e;
+  transition: color 0.5s ease-out;
+}

src/renderer/screens/Preferences/Accounts/index.jsx

@@ -1,70 +1,10 @@
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import { toDataUrl } from 'ethereum-blockies'
-import posed, { PoseGroup } from 'react-pose'
 import Store from 'electron-store'
 import ethereum_address from 'ethereum-address'
-import { AppContext } from '../../store/createContext'
-import { fadeIn } from '../../components/Animations'
-
-const Item = posed.li(fadeIn)
-
-const AccountsList = ({ accounts, handleDelete }) => (
-  <PoseGroup>
-    {accounts.map(account => {
-      const identicon = account && toDataUrl(account)
-
-      return (
-        <Item key={account}>
-          <div>
-            <img className="identicon" src={identicon} alt="Blockies" />
-            {account}
-          </div>
-
-          <button
-            className="delete"
-            onClick={e => handleDelete(e, account)}
-            title="Remove account"
-          >
-            &times;
-          </button>
-        </Item>
-      )
-    })}
-  </PoseGroup>
-)
-
-AccountsList.propTypes = {
-  accounts: PropTypes.array.isRequired,
-  handleDelete: PropTypes.func.isRequired
-}
-
-const AccountNew = ({ input, handleInputChange, handleSave, accentColor }) => (
-  <li>
-    <input
-      type="text"
-      placeholder="0xxxxxxxx"
-      value={input}
-      onChange={e => handleInputChange(e)}
-      className="preference__input"
-    />
-
-    <button
-      className="preference__input__add"
-      onClick={e => handleSave(e)}
-      style={{ color: accentColor }}
-    >
-      Add
-    </button>
-  </li>
-)
-
-AccountNew.propTypes = {
-  input: PropTypes.string.isRequired,
-  handleInputChange: PropTypes.func.isRequired,
-  handleSave: PropTypes.func.isRequired,
-  accentColor: PropTypes.string.isRequired
-}
+import { AppContext } from '../../../store/createContext'
+import Saved from './Saved'
+import New from './New'
+import styles from './index.module.css'
 
 export default class Accounts extends PureComponent {
   static contextType = AppContext
@@ -99,7 +39,9 @@ export default class Accounts extends PureComponent {
       this.setState({ error: 'Address already added. Try another one.' })
       return
     } else if (!isAddress) {
-      this.setState({ error: 'Not an Ethereum address. Try another one.' })
+      this.setState({
+        error: 'Not an Ethereum address. Try another one.'
+      })
       return
     } else {
       const joined = [...accounts, input]
@@ -131,22 +73,22 @@ export default class Accounts extends PureComponent {
     const { accounts, input, error } = this.state
 
     return (
-      <div className="preference box">
-        <h2 className="preference__title">Accounts</h2>
-        <p className="preference__help">
+      <div className={styles.preference}>
+        <h2 className={styles.title}>Accounts</h2>
+        <p className={styles.help}>
           Add Ethereum account addresses holding Ocean Tokens.
         </p>
-        <ul className="preference__list">
-          <AccountsList accounts={accounts} handleDelete={this.handleDelete} />
+        <ul className={styles.list}>
+          <Saved accounts={accounts} handleDelete={this.handleDelete} />
 
-          <AccountNew
+          <New
             input={input}
             handleInputChange={this.handleInputChange}
             accentColor={accentColor}
             handleSave={this.handleSave}
           />
         </ul>
-        {error !== '' && <div className="preference__error">{error}</div>}
+        {error !== '' && <div className={styles.error}>{error}</div>}
       </div>
     )
   }

src/renderer/screens/Preferences/Accounts/index.module.css

@@ -0,0 +1,62 @@
+.preference {
+  composes: box from '../../../components/Box.module.css';
+  -webkit-app-region: none;
+  -webkit-user-select: text;
+}
+
+.title,
+.help {
+  display: inline-block;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.title {
+  font-size: 1.2rem;
+}
+
+.help {
+  color: #8b98a9;
+  margin-left: 0.5rem;
+}
+
+.error {
+  font-size: 0.9rem;
+}
+
+.list {
+  padding: 0;
+  border-top: 1px solid #e2e2e2;
+}
+
+:global(.dark) .list {
+  border-top-color: #303030;
+}
+
+.list li,
+.list li > div {
+  display: flex;
+  align-items: center;
+}
+
+.list li {
+  list-style: none;
+  justify-content: space-between;
+  border-bottom: 1px solid #e2e2e2;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+:global(.dark) .list li {
+  border-bottom-color: #303030;
+}
+
+.button {
+  background: none;
+  border: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  font-size: 1rem;
+}

src/renderer/screens/Preferences/index.css

@@ -1,114 +0,0 @@
-.preferences {
-    text-align: left;
-    width: 100%;
-    position: relative;
-    padding-bottom: 4rem;
-}
-
-.preferences__title {
-    width: 100%;
-    font-size: 2.2rem;
-    margin-top: -1rem;
-    margin-bottom: 2rem;
-}
-
-.preferences__close {
-    text-decoration: none;
-    font-size: 2rem;
-    position: absolute;
-    top: 0;
-    right: 0;
-    color: #8b98a9;
-}
-
-.preference__list {
-    padding: 0;
-    border-top: 1px solid #e2e2e2;
-}
-
-.dark .preference__list {
-    border-top-color: #303030;
-}
-
-.preference__list li,
-.preference__list li > div {
-    display: flex;
-    align-items: center;
-}
-
-.preference__list li {
-    list-style: none;
-    justify-content: space-between;
-    border-bottom: 1px solid #e2e2e2;
-    padding-top: .25rem;
-    padding-bottom: .25rem;
-}
-
-.dark .preference__list li {
-    border-bottom-color: #303030;
-}
-
-.preferences button {
-    background: none;
-    border: 0;
-    box-shadow: none;
-    margin: 0;
-    padding: 0;
-    outline: 0;
-    font-size: 1rem;
-}
-
-button.delete {
-    position: relative;
-    font-size: 2rem;
-    top: -.2rem;
-    color: #41474e;
-    transition: color .5s ease-out;
-}
-
-.preference {
-    -webkit-app-region: none;
-    -webkit-user-select: text;
-}
-
-.preference__title,
-.preference__help {
-    display: inline-block;
-    margin-top: 0;
-    margin-bottom: .5rem;
-}
-
-.preference__title {
-    font-size: 1.2rem;
-}
-
-.preference__help {
-    color: #8b98a9;
-    margin-left: .5rem;
-}
-
-.preference .identicon {
-    width: 1.5rem !important;
-    height: 1.5rem !important;
-    border-radius: 50%;
-    margin-right: .75rem;
-}
-
-.preference__input {
-    font-size: 1rem;
-    outline: 0;
-    background: none;
-    border: 0;
-    width: 80%;
-    color: #303030;
-    margin-top: .75rem;
-    margin-bottom: .75rem;
-}
-
-.dark .preference__input {
-    color: #fff;
-}
-
-.preference__error {
-    font-size: .9rem;
-}

src/renderer/screens/Preferences/index.jsx

@@ -1,20 +1,16 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { Link } from '@reach/router'
-
-import './index.css'
-
 import Accounts from './Accounts'
+import styles from './index.module.css'
 
-export default class Preferences extends PureComponent {
-  render() {
-    return (
-      <div className="preferences">
-        <h1 className="preferences__title">Preferences</h1>{' '}
-        <Link className="preferences__close" title="Close Preferences" to="/">
-          &times;
-        </Link>
-        <Accounts />
-      </div>
-    )
-  }
-}
+const Preferences = () => (
+  <div className={styles.preferences}>
+    <h1 className={styles.title}>Preferences</h1>{' '}
+    <Link className={styles.close} title="Close Preferences" to="/">
+      &times;
+    </Link>
+    <Accounts />
+  </div>
+)
+
+export default Preferences

src/renderer/screens/Preferences/index.module.css

@@ -0,0 +1,21 @@
+.preferences {
+  text-align: left;
+  width: 100%;
+  position: relative;
+}
+
+.title {
+  width: 100%;
+  font-size: 2.2rem;
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+}
+
+.close {
+  text-decoration: none;
+  font-size: 2rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #8b98a9;
+}

webpack.common.config.js

@@ -24,11 +24,12 @@ module.exports = {
       },
       {
         test: /\.css$/,
+        exclude: /\.module\.css$/,
         use: ['style-loader', 'css-loader'],
         include: defaultInclude
       },
       {
-        test: /\.module\.(scss|sass)$/,
+        test: /\.module\.css$/,
         include: defaultInclude,
         loader: [
           isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
@@ -41,26 +42,6 @@ module.exports = {
               localsConvention: 'camelCase',
               sourceMap: isDevelopment
             }
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: isDevelopment
-            }
-          }
-        ]
-      },
-      {
-        test: /\.(scss|sass)$/,
-        exclude: /\.module.(scss|sass)$/,
-        loader: [
-          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              sourceMap: isDevelopment
-            }
           }
         ]
       },
@@ -77,7 +58,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: ['*', '.js', '.jsx', '.scss']
+    extensions: ['*', '.js', '.jsx', '.css']
   },
   target: 'electron-renderer',
   plugins: [