From 1d040c1369f3f7fb7a78a333c02aeb83af7b08d2 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron.cook@gnosis.pm>
Date: Wed, 8 Jun 2022 09:35:09 +0200
Subject: [PATCH] fix: only use 2 decimals for fiat (#3935)

* fix: only use 2 decimals for fiat

* fix: test

* fix: don't format tokens as currency
---
 src/logic/safe/utils/mocks/getChainsConfigMock.ts    |  2 +-
 .../tokens/utils/__tests__/formatAmount.test.ts      | 12 ++++++------
 src/logic/tokens/utils/formatAmount.ts               |  3 ++-
 src/routes/safe/components/Balances/dataFetcher.ts   |  4 ++--
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/logic/safe/utils/mocks/getChainsConfigMock.ts b/src/logic/safe/utils/mocks/getChainsConfigMock.ts
index fbb2ba5136..d2d8ebed02 100644
--- a/src/logic/safe/utils/mocks/getChainsConfigMock.ts
+++ b/src/logic/safe/utils/mocks/getChainsConfigMock.ts
@@ -1,4 +1,4 @@
 import { ChainListResponse } from '@gnosis.pm/safe-react-gateway-sdk'
 import mockData from './remoteConfig.json'
 
-export const mockGetChainsConfigResponse = mockData as ChainListResponse
+export const mockGetChainsConfigResponse = mockData as unknown as ChainListResponse
diff --git a/src/logic/tokens/utils/__tests__/formatAmount.test.ts b/src/logic/tokens/utils/__tests__/formatAmount.test.ts
index 0e76a8249a..7ee3969554 100644
--- a/src/logic/tokens/utils/__tests__/formatAmount.test.ts
+++ b/src/logic/tokens/utils/__tests__/formatAmount.test.ts
@@ -143,10 +143,10 @@ describe('formatCurrency', () => {
     // then
     expect(result).toBe(expectedResult)
   })
-  it('Given a number in format XXXXX.XXX returns a number of format XX,XXX.XXX', () => {
+  it('Given a number in format XXXXX.XXX returns a number of format XX,XXX.XX', () => {
     // given
     const input = 19797.899
-    const expectedResult = '19,797.899 EUR'
+    const expectedResult = '19,797.90 EUR'
 
     // when
     const result = formatCurrency(input.toString(), 'EUR')
@@ -154,10 +154,10 @@ describe('formatCurrency', () => {
     // then
     expect(result).toBe(expectedResult)
   })
-  it('Given a number in format XXXXXXXX.XXX returns a number of format XX,XXX,XXX.XXX', () => {
+  it('Given a number in format XXXXXXXX.XXX returns a number of format XX,XXX,XXX.XX', () => {
     // given
     const input = 19797899.479
-    const expectedResult = '19,797,899.479 EUR'
+    const expectedResult = '19,797,899.48 EUR'
 
     // when
     const result = formatCurrency(input.toString(), 'EUR')
@@ -165,10 +165,10 @@ describe('formatCurrency', () => {
     // then
     expect(result).toBe(expectedResult)
   })
-  it('Given a number in format XXXXXXXXXXX.XXX returns a number of format XX,XXX,XXX,XXX.XXX', () => {
+  it('Given a number in format XXXXXXXXXXX.XXX returns a number of format XX,XXX,XXX,XXX.XX', () => {
     // given
     const input = 19797899479.999
-    const expectedResult = '19,797,899,479.999 EUR'
+    const expectedResult = '19,797,899,480.00 EUR'
 
     // when
     const result = formatCurrency(input.toString(), 'EUR')
diff --git a/src/logic/tokens/utils/formatAmount.ts b/src/logic/tokens/utils/formatAmount.ts
index a63871be66..7a74c10853 100644
--- a/src/logic/tokens/utils/formatAmount.ts
+++ b/src/logic/tokens/utils/formatAmount.ts
@@ -44,9 +44,10 @@ export const formatAmount = (number: string): string => {
   return numberFloat
 }
 
+// Note: we can't use Intl.NumberFormat's 'currency' style as it doesn't support all fiats
 const currencyFormatter = new Intl.NumberFormat(LOCALE, {
   minimumFractionDigits: 2,
-  maximumFractionDigits: 8,
+  maximumFractionDigits: 2,
 })
 
 export const formatCurrency = (amount: string, currencySelected: string): string => {
diff --git a/src/routes/safe/components/Balances/dataFetcher.ts b/src/routes/safe/components/Balances/dataFetcher.ts
index ee36be08a0..b4d4b10710 100644
--- a/src/routes/safe/components/Balances/dataFetcher.ts
+++ b/src/routes/safe/components/Balances/dataFetcher.ts
@@ -1,5 +1,5 @@
 import { List } from 'immutable'
-import { formatCurrency } from 'src/logic/tokens/utils/formatAmount'
+import { formatAmount, formatCurrency } from 'src/logic/tokens/utils/formatAmount'
 import { TableColumn } from 'src/components/Table/types.d'
 import { Token } from 'src/logic/tokens/store/model/token'
 export const BALANCE_TABLE_ASSET_ID = 'asset'
@@ -26,7 +26,7 @@ export const getBalanceData = (safeTokens: List<Token>, currencySelected: string
         symbol: token.symbol,
       },
       assetOrder: token.name,
-      [BALANCE_TABLE_BALANCE_ID]: formatCurrency(tokenBalance?.toString() || '0', token.symbol),
+      [BALANCE_TABLE_BALANCE_ID]: `${formatAmount(tokenBalance?.toString() || '0')} ${token.symbol}`,
       balanceOrder: Number(tokenBalance),
       [BALANCE_TABLE_VALUE_ID]: formatCurrency(fiatBalance?.toString() || '0', currencySelected),
       valueOrder: Number(tokenBalance),