hack @coingecko/cryptoformat into what we want

* closes #70
* closes #53

src/components/atoms/Price/Conversion.tsx

@@ -40,7 +40,7 @@ export default function Conversion({
     const fiatValue = values[currency.toLowerCase()]
     const converted = fiatValue * Number(price)
     const convertedFormatted = Number(
-      formatCurrency(converted, currency, undefined, true)
+      formatCurrency(converted, currency, 'en', true)
     ).toFixed(2)
 
     setPriceConverted(`${convertedFormatted}`)

src/components/atoms/Price/PriceUnit.tsx

@@ -27,11 +27,14 @@ export default function PriceUnit({
 
   return (
     <div className={styleClasses}>
-      {Number.isInteger(Number(price))
-        ? price
-        : Number.isNaN(Number(price))
+      {Number.isNaN(Number(price))
         ? '-'
-        : formatCurrency(Number(price), '', undefined, false, true)}{' '}
+        : formatCurrency(Number(price), '', 'en', false, {
+            // Not exactly clear what `significant figures` are for this library,
+            // but setting this seems to give us the formatting we want.
+            // See https://github.com/oceanprotocol/market/issues/70
+            significantFigures: 4
+          })}{' '}
       <span>{symbol || 'OCEAN'}</span>
       {conversion && <Conversion price={price} />}
     </div>

src/components/molecules/Wallet/Details.tsx

@@ -17,7 +17,9 @@ export default function Details(): ReactElement {
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
             <span>{key.toUpperCase()}</span>{' '}
-            {formatCurrency(value, '', undefined, true, true)}
+            {formatCurrency(Number(value), '', 'en', false, {
+              significantFigures: 4
+            })}
             {key === 'ocean' && <Conversion price={value} />}
           </li>
         ))}