Accounts refactor

package.json

@@ -40,7 +40,6 @@
     "auto-changelog": "^1.16.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
-    "classnames": "^2.2.6",
     "copy-webpack-plugin": "^5.0.4",
     "cross-env": "^5.2.1",
     "css-loader": "^3.2.0",

src/renderer/components/Balance.jsx

@@ -9,7 +9,7 @@ import styles from './Balance.module.css'
 
 const Animation = posed.h1(fadeIn)
 
-const Balance = ({ balance, label, large }) => {
+const Balance = ({ balance, label, labelOnClick, large }) => {
   const { currency } = useContext(AppContext)
 
   return (
@@ -22,7 +22,7 @@ const Balance = ({ balance, label, large }) => {
           {cryptoFormatter(balance[currency], currency)}
         </Animation>
       </PoseGroup>
-      {label && <Label>{label}</Label>}
+      {label && <Label labelOnClick={labelOnClick}>{label}</Label>}
     </div>
   )
 }
@@ -30,6 +30,7 @@ const Balance = ({ balance, label, large }) => {
 Balance.propTypes = {
   balance: PropTypes.object.isRequired,
   label: PropTypes.string,
+  labelOnClick: PropTypes.func,
   large: PropTypes.bool
 }
 

src/renderer/components/Label.jsx

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

src/renderer/screens/Home/Account.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { openUrl } from '../../../utils'
-import Balance from '../../components/Balance'
-
-const Account = ({ account }) => {
-  const { balance, address } = account
-
-  return (
-    <Balance
-      balance={balance}
-      label={`${address.substring(0, 12)}...`}
-      labelOnClick={() =>
-        openUrl(`https://etherscan.io/address/${address}#tokentxns`)
-      }
-    />
-  )
-}
-
-Account.propTypes = {
-  account: PropTypes.shape({
-    address: PropTypes.string.isRequired,
-    balance: PropTypes.object.isRequired
-  })
-}
-
-export default Account

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/index.jsx

@@ -1,35 +1,21 @@
 import React, { useContext } from 'react'
 import { Link } from '@reach/router'
-import classnames from 'classnames'
 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 Account from './Account'
 import Ticker from './Ticker'
+import Accounts from './Accounts'
 import IconCog from '../../images/cog.svg'
-import stylesBox from '../../components/Box.module.css'
 import styles from './index.module.css'
 
-const Accounts = () => {
-  const { accounts } = useContext(AppContext)
-
-  return (
-    <div className={styles.balanceWrapAccounts}>
-      {accounts.map((account, i) => (
-        <Account key={i} account={account} />
-      ))}
-    </div>
-  )
-}
-
 const Home = () => {
   const { isLoading, needsConfig } = useContext(AppContext)
 
   return (
     <>
-      <main className={classnames(styles.main, stylesBox.box)}>
+      <main className={styles.main}>
         <Link className={styles.preferences} to="/preferences">
           <IconCog />
         </Link>

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

@@ -1,4 +1,5 @@
 .main {
+  composes: box from '../../components/Box.module.css';
   min-height: 222px;
   display: flex;
   align-items: center;
@@ -31,9 +32,3 @@
   justify-items: start;
   width: 100%;
 }
-
-.balanceWrapAccounts {
-  composes: balanceWrap;
-  min-height: 55px;
-  padding-top: 2rem;
-}