handle currency value display

* closes #42

package-lock.json

@@ -1246,6 +1246,11 @@
         "minimist": "^1.2.0"
       }
     },
+    "@coingecko/cryptoformat": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.3.8.tgz",
+      "integrity": "sha512-nmHLzakZyFCo49qH8q19PbJIt16j2GQdPvjPZ5+roqj/y8KTDsFG9BrYvm7fpHN1xukN79XPhNMqBQN2RdZNQw=="
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",

package.json

@@ -19,6 +19,7 @@
     "storybook:build": "build-storybook -c .storybook -o public/storybook"
   },
   "dependencies": {
+    "@coingecko/cryptoformat": "^0.3.8",
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/react": "^0.0.31",

src/components/atoms/Price/Conversion.tsx

@@ -3,6 +3,7 @@ import useSWR from 'swr'
 import { fetchData, isBrowser } from '../../../utils'
 import styles from './Conversion.module.css'
 import classNames from 'classnames/bind'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 const cx = classNames.bind(styles)
 
@@ -34,7 +35,7 @@ export default function Conversion({
 
     const { eur } = data['ocean-protocol']
     const converted = eur * Number(price)
-    setPriceEur(`${converted.toFixed(2)}`)
+    setPriceEur(`${formatCurrency(converted, 'EUR', 'en', true)}`)
   }
 
   useEffect(() => {

src/components/atoms/Price/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react'
 import classNames from 'classnames/bind'
 import PriceConversion from './Conversion'
 import styles from './index.module.css'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 const cx = classNames.bind(styles)
 
@@ -26,7 +27,7 @@ export default function Price({
     'Free'
   ) : (
     <>
-      <span>OCEAN</span> {price}
+      <span>OCEAN</span> {formatCurrency(Number(price), '', 'en', false, true)}
       <PriceConversion price={price} />
     </>
   )

src/components/molecules/Wallet/Details.tsx

@@ -6,6 +6,7 @@ import Web3Feedback from './Feedback'
 import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
   const { balance, connect, logout, chainId } = useOcean()
@@ -15,7 +16,8 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
       <ul>
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
-            <span>{key.toUpperCase()}</span> {value}
+            <span>{key.toUpperCase()}</span>{' '}
+            {formatCurrency(value, '', 'en', true, true)}
             {key === 'ocean' && <Conversion price={value} />}
           </li>
         ))}