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 }) => (
+
+
+ {({ currency }) => {
+ const isFiat = currency === 'usd' || currency === 'eur'
+ const symbol =
+ currency === 'ocean' ? 'Ọ' : symbols[currency.toUpperCase()]
- return (
-
-
- {({ currency }) =>
- currency === 'ocean' ? (
- Ọ {numberFormatter(ocean) || 0}
- ) : currency === 'btc' ? (
- ₿ {numberFormatter(btc) || 0}
- ) : currency === 'eth' ? (
- Ξ {numberFormatter(eth) || 0}
- ) : currency === 'eur' ? (
- {fiatFormatter('EUR', eur)}
- ) : currency === 'usd' ? (
- {fiatFormatter('USD', usd)}
- ) : (
- {numberFormatter(currency)}
- )
- }
-
-
- )
-}
+ return isFiat ? (
+ fiatFormatter(currency.toUpperCase(), balance[currency])
+ ) : (
+ <>
+ {symbol} {numberFormatter(balance[currency]) || 0}
+ >
+ )
+ }}
+
+
+)
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
}}
- Total balance
+ Total Balance
)