use browser locale for number formatting

src/components/atoms/Price/Conversion.tsx

@@ -20,7 +20,7 @@ export default function Conversion({
   const tokenId = 'ocean-protocol'
   const currencies = appConfig.currencies.join(',') // comma-separated list
   const url = `https://api.coingecko.com/api/v3/simple/price?ids=${tokenId}&vs_currencies=${currencies}&include_24hr_change=true`
-  const { currency } = useUserPreferences()
+  const { currency, locale } = useUserPreferences()
 
   const [priceConverted, setPriceConverted] = useState('0.00')
 
@@ -39,11 +39,14 @@ export default function Conversion({
     const values = data[tokenId]
     const fiatValue = values[currency.toLowerCase()]
     const converted = fiatValue * Number(price)
-    const convertedFormatted = Number(
-      formatCurrency(converted, currency, 'en', true)
-    ).toFixed(2)
-
-    setPriceConverted(`${convertedFormatted}`)
+    const convertedFormatted = formatCurrency(
+      converted,
+      currency,
+      locale,
+      true,
+      { decimalPlaces: 2 }
+    )
+    setPriceConverted(convertedFormatted)
   }
 
   useEffect(() => {

src/components/atoms/Price/PriceUnit.tsx

@@ -3,6 +3,7 @@ import { formatCurrency } from '@coingecko/cryptoformat'
 import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
+import { useUserPreferences } from '../../../providers/UserPreferences'
 
 const cx = classNames.bind(styles)
 
@@ -19,6 +20,8 @@ export default function PriceUnit({
   conversion?: boolean
   symbol?: string
 }): ReactElement {
+  const { locale } = useUserPreferences()
+
   const styleClasses = cx({
     price: true,
     small: small,
@@ -29,7 +32,7 @@ export default function PriceUnit({
     <div className={styleClasses}>
       {Number.isNaN(Number(price))
         ? '-'
-        : formatCurrency(Number(price), '', 'en', false, {
+        : formatCurrency(Number(price), '', locale, 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

src/components/molecules/Wallet/Details.tsx

@@ -7,9 +7,11 @@ import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
 import { formatCurrency } from '@coingecko/cryptoformat'
+import { useUserPreferences } from '../../../providers/UserPreferences'
 
 export default function Details(): ReactElement {
   const { balance, connect, logout, chainId } = useOcean()
+  const { locale } = useUserPreferences()
 
   return (
     <div className={styles.details}>
@@ -17,7 +19,7 @@ export default function Details(): ReactElement {
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
             <span>{key.toUpperCase()}</span>{' '}
-            {formatCurrency(Number(value), '', 'en', false, {
+            {formatCurrency(Number(value), '', locale, false, {
               significantFigures: 4
             })}
             {key === 'ocean' && <Conversion price={value} />}

src/providers/UserPreferences.tsx

@@ -12,22 +12,23 @@ import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
 interface UserPreferencesValue {
   debug: boolean
   currency: string
-  setDebug?: (value: boolean) => void
-  setCurrency?: (value: string) => void
+  locale: string
+  setDebug: (value: boolean) => void
+  setCurrency: (value: string) => void
 }
 
 const UserPreferencesContext = createContext(null)
 
 const localStorageKey = 'ocean-user-preferences'
 
-function getLocalStorage() {
+function getLocalStorage(): UserPreferencesValue {
   const storageParsed =
     typeof window !== 'undefined' &&
     JSON.parse(window.localStorage.getItem(localStorageKey))
   return storageParsed
 }
 
-function setLocalStorage(values: UserPreferencesValue) {
+function setLocalStorage(values: Partial<UserPreferencesValue>) {
   return (
     typeof window !== 'undefined' &&
     window.localStorage.setItem(localStorageKey, JSON.stringify(values))
@@ -46,22 +47,37 @@ function UserPreferencesProvider({
   const [currency, setCurrency] = useState<string>(
     localStorage?.currency || 'EUR'
   )
+  const [locale, setLocale] = useState<string>()
 
   // Write values to localStorage on change
   useEffect(() => {
     setLocalStorage({ debug, currency })
   }, [debug, currency])
 
-  // Set ocen-lib-js log levels, default: Error
+  // Set ocean-lib-js log levels, default: Error
   useEffect(() => {
     debug === true
       ? Logger.setLevel(LogLevel.Verbose)
       : Logger.setLevel(LogLevel.Error)
   }, [debug])
 
+  // Get locale always from user's browser
+  useEffect(() => {
+    if (!window) return
+    setLocale(window.navigator.language)
+  }, [])
+
   return (
     <UserPreferencesContext.Provider
-      value={{ debug, currency, setDebug, setCurrency } as UserPreferencesValue}
+      value={
+        {
+          debug,
+          currency,
+          locale,
+          setDebug,
+          setCurrency
+        } as UserPreferencesValue
+      }
     >
       {children}
     </UserPreferencesContext.Provider>