From 532e8ce7cbca1d5e5025dd22cedda882dfea82b4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 6 May 2019 20:07:04 +0200
Subject: [PATCH] more reusable balance component

---
 package.json               |  1 +
 src/components/Balance.jsx | 43 +++++++++++++++++---------------------
 src/components/Total.jsx   |  2 +-
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index bec12fd..b8e8c9e 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/Balance.jsx b/src/components/Balance.jsx
index 223b384..04f60e8 100644
--- a/src/components/Balance.jsx
+++ b/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
diff --git a/src/components/Total.jsx b/src/components/Total.jsx
index 9433d43..c4e4b91 100644
--- a/src/components/Total.jsx
+++ b/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>
 )