fix: only use 2 decimals for fiat (#3935)

* fix: only use 2 decimals for fiat * fix: test * fix: don't format tokens as currency
5afe · Jun 8, 2022 · 1d040c1 · 1d040c1
1 parent a38298f
commit 1d040c1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -143,32 +143,32 @@ 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')
 
     // 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')
 
     // 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
@@ -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
@@ -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),