more reusable balance component

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@oceanprotocol/typographies": "^0.1.0",
+    "crypto-symbols": "^1.0.0",
     "ms": "^2.1.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

src/components/Balance.jsx

@@ -2,32 +2,27 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Consumer } from '../store/createContext'
 import { numberFormatter, fiatFormatter } from '../util/moneyFormatter'
+import symbols from 'crypto-symbols'
 
-const Balance = ({ balance }) => {
-  const { ocean, btc, eth, eur, usd } = balance
+const Balance = ({ balance }) => (
+  <h1 className="number">
+    <Consumer>
+      {({ currency }) => {
+        const isFiat = currency === 'usd' || currency === 'eur'
+        const symbol =
+          currency === 'ocean' ? 'Ọ' : symbols[currency.toUpperCase()]
 
-  return (
-    <h1 className="number">
-      <Consumer>
-        {({ currency }) =>
-          currency === 'ocean' ? (
-            <span className="balance">Ọ {numberFormatter(ocean) || 0}</span>
-          ) : currency === 'btc' ? (
-            <span className="balance">₿ {numberFormatter(btc) || 0}</span>
-          ) : currency === 'eth' ? (
-            <span className="balance">Ξ {numberFormatter(eth) || 0}</span>
-          ) : currency === 'eur' ? (
-            <span className="balance">{fiatFormatter('EUR', eur)}</span>
-          ) : currency === 'usd' ? (
-            <span className="balance">{fiatFormatter('USD', usd)}</span>
-          ) : (
-            <span className="balance">{numberFormatter(currency)}</span>
-          )
-        }
-      </Consumer>
-    </h1>
-  )
-}
+        return isFiat ? (
+          fiatFormatter(currency.toUpperCase(), balance[currency])
+        ) : (
+          <>
+            {symbol} {numberFormatter(balance[currency]) || 0}
+          </>
+        )
+      }}
+    </Consumer>
+  </h1>
+)
 
 Balance.propTypes = {
   balance: PropTypes.object.isRequired

src/components/Total.jsx

@@ -37,7 +37,7 @@ const Total = () => (
         return <Balance balance={balanceNew} />
       }}
     </Consumer>
-    <span className="label">Total balance</span>
+    <span className="label">Total Balance</span>
   </div>
 )