Merge pull request #770 from oasisprotocol/lw/accurate-fiat

Make fiat conversions accurate

.changelog/770.bugfix.md

@@ -0,0 +1 @@
+Make fiat conversions accurate

.github/workflows/ci-build.yml

@@ -19,10 +19,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - name: Set up Node.js 18
+      - name: Set up Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: yarn
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/ci-lint.yml

@@ -28,10 +28,10 @@ jobs:
         uses: actions/[email protected]
         with:
           python-version: '3.x'
-      - name: Set up Node.js 18
+      - name: Set up Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: yarn
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/ci-test.yml

@@ -19,10 +19,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - name: Set up Node.js 18
+      - name: Set up Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: yarn
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/cloudflare-pages.yml

@@ -44,10 +44,10 @@ jobs:
         # Checkout pull request HEAD commit instead of merge commit.
         with:
           ref: ${{ github.event.pull_request.head.sha }}
-      - name: Set up Node.js 18
+      - name: Set up Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: yarn
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/generate-openapi.yml

@@ -18,10 +18,11 @@ jobs:
         working-directory: src/oasis-nexus
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v3
         with:
-          node-version: 18
-          cache: 'yarn'
+          node-version: '20.x'
+          cache: yarn
           cache-dependency-path: src/oasis-nexus/yarn.lock
       - run: yarn install --frozen-lockfile
       - run: yarn generate

.github/workflows/release.yml

@@ -21,10 +21,10 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      - name: Set up Node.js 18
+      - name: Set up Node.js 20
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20.x'
           cache: yarn
       - name: Install dependencies
         run: yarn install --frozen-lockfile

package.json

@@ -43,6 +43,9 @@
       "last 1 safari version"
     ]
   },
+  "engines": {
+    "node": ">=19"
+  },
   "resolutions": {
     "**/@emotion/styled": "11.11.0",
     "@typescript-eslint/eslint-plugin": "6.2.0",

src/app/components/Account/index.tsx

@@ -22,6 +22,7 @@ import { TokenPriceInfo } from '../../../coin-gecko/api'
 import { ContractCreatorInfo } from './ContractCreatorInfo'
 import { ContractVerificationIcon } from '../ContractVerificationIcon'
 import { TokenLink } from '../Tokens/TokenLink'
+import BigNumber from 'bignumber.js'
 
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
   '&&': {
@@ -154,7 +155,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
               <dd>
                 <FiatMoneyAmountBox>
                   {t('common.fiatValueInUSD', {
-                    value: parseFloat(balance) * tokenFiatValue,
+                    value: new BigNumber(balance).multipliedBy(tokenFiatValue).toFixed(),
                     formatParams: {
                       value: {
                         currency: 'USD',

src/app/pages/TransactionDetailPage/CurrentFiatValue.tsx

@@ -6,9 +6,10 @@ import Tooltip from '@mui/material/Tooltip'
 import { CoinGeckoReferral } from '../../components/CoinGeckoReferral'
 import HelpIcon from '@mui/icons-material/Help'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
+import BigNumber from 'bignumber.js'
 
 type CurrentFiatValueProps = Pick<TokenPriceInfo, 'price' | 'hasUsedCoinGecko'> & {
-  amount: number
+  amount: string
 }
 
 export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({ amount, price, hasUsedCoinGecko }) => {
@@ -17,7 +18,7 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({ amount, price, has
     <FiatMoneyAmountBox>
       <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
         {t('common.fiatValueInUSD', {
-          value: amount * price,
+          value: new BigNumber(amount).multipliedBy(price).toFixed(),
           formatParams: {
             value: {
               currency: 'USD',

src/app/pages/TransactionDetailPage/__tests__/CurrentFiatValue.test.tsx

@@ -0,0 +1,16 @@
+import { screen, render } from '@testing-library/react'
+import { CurrentFiatValue } from '../CurrentFiatValue'
+
+describe('CurrentFiatValue', () => {
+  it('should display formatted values', () => {
+    render(
+      <CurrentFiatValue
+        hasUsedCoinGecko={true}
+        amount="1000000000100000000010000000001000000000.10000000001"
+        price={0.55555}
+      />,
+    )
+    expect(screen.getByText('$555,550,000,055,555,000,005,555,500,000,555,550,000.06')).toBeInTheDocument()
+    expect(screen.getByText('CoinGecko')).toBeInTheDocument()
+  })
+})

src/app/pages/TransactionDetailPage/index.tsx

@@ -308,7 +308,7 @@ export const TransactionDetailView: FC<{
               <>
                 <dt>{t('currentFiatValue.title')}</dt>
                 <dd>
-                  <CurrentFiatValue amount={parseFloat(transaction.amount)} {...tokenPriceInfo} />
+                  <CurrentFiatValue amount={transaction.amount} {...tokenPriceInfo} />
                 </dd>
               </>
             )}

src/locales/__tests__/i18n-formatting.test.ts

@@ -29,7 +29,7 @@ test('formatting fiat currency with i18n', () => {
   const { result } = renderHook(() => {
     const { t } = useTranslation()
     return t('does_not_exist.use_default', '{{value, currency}}', {
-      value: 123.456789,
+      value: '111222333444555666777888999.111222333444555666',
       formatParams: {
         value: {
           currency: 'USD',
@@ -38,7 +38,7 @@ test('formatting fiat currency with i18n', () => {
     }) as string
   })
 
-  expect(result.current).toBe('$123.46')
+  expect(result.current).toBe('$111,222,333,444,555,666,777,888,999.11')
 })
 
 test('formatting block sizes with i18n', () => {