From 086631d108f85e47f651f0ae791604c82062ef3b Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 5 Aug 2020 14:11:02 +0200
Subject: [PATCH] handle currency value display

* closes #42
---
 package-lock.json                           | 5 +++++
 package.json                                | 1 +
 src/components/atoms/Price/Conversion.tsx   | 3 ++-
 src/components/atoms/Price/index.tsx        | 3 ++-
 src/components/molecules/Wallet/Details.tsx | 4 +++-
 5 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d79c992b..1d9491d19 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ef8231a02..d9c3cb905 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/atoms/Price/Conversion.tsx b/src/components/atoms/Price/Conversion.tsx
index 2c85b5580..499e897b0 100644
--- a/src/components/atoms/Price/Conversion.tsx
+++ b/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(() => {
diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx
index e12263084..a25eeb7e3 100644
--- a/src/components/atoms/Price/index.tsx
+++ b/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} />
     </>
   )
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index e3b2c5010..65c03b30c 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/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>
         ))}