Restore transactions count i18n

oasisprotocol · May 2, 2023 · 7bb1b6b · 7bb1b6b
1 parent 7796707
commit 7bb1b6b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
@@ -110,7 +110,7 @@ export const Account: FC<AccountProps> = ({ account, isLoading, roseFiatValue, s
           <dt>{t('common.transactions')}</dt>
           <dd>
             <Link component={RouterLink} to={transactionsAnchor!}>
-              {formatNumber(account.stats.num_txns)}
+              {formatNumber(account.stats.num_txns, { countKey: 'common.transactionsNumber' })}
             </Link>
           </dd>
 

diff --git a/src/app/hooks/useNumberFormatter.ts b/src/app/hooks/useNumberFormatter.ts
@@ -1,4 +1,5 @@
 import { BigNumber } from 'bignumber.js'
+import { useTranslation } from 'react-i18next'
 
 export type NumberFormattingParameters = Partial<BigNumber.Format> & {
   // Additional features which are not natively supported by BigNumber
@@ -7,16 +8,20 @@ export type NumberFormattingParameters = Partial<BigNumber.Format> & {
   maximumFractionDigits?: number
   roundingMode?: BigNumber.RoundingMode
   unit?: string
+  countKey?: string
 }
 
-export const useFormatNumber =
-  () =>
-  (
+export const useFormatNumber = () => {
+  const { t } = useTranslation()
+  return (
     inputNumber: number | string | BigNumber.Instance | undefined,
     format: NumberFormattingParameters = {},
   ): string | undefined => {
     if (inputNumber === undefined) return
-    const { decimalPlaces, maximumFractionDigits, roundingMode, unit, ...formatting } = format
+    const { decimalPlaces, maximumFractionDigits, roundingMode, unit, countKey, ...formatting } = format
+    if (!!unit && !!countKey) {
+      throw new Error("Please don't try to use unit and countKey together! They are incompatible.")
+    }
     let number =
       typeof inputNumber === 'number'
         ? BigNumber(inputNumber.toString(2), 2) // This is required to keep all precision
@@ -40,7 +45,14 @@ export const useFormatNumber =
         .formatToParts(number.toNumber())
         .find(p => p.type === 'unit')!.value
       return `${numberString} ${formattedUnit}`
+    } else if (countKey) {
+      if (number.toNumber() === 1) {
+        return t(countKey as any, { count: 1 })
+      } else {
+        return t(countKey as any, { count: 2 }).replace('2', numberString)
+      }
     } else {
       return numberString
     }
   }
+}
diff --git a/src/app/pages/BlockDetailPage/index.tsx b/src/app/pages/BlockDetailPage/index.tsx
@@ -109,7 +109,9 @@ export const BlockDetailView: FC<{
 
       <dt>{t('common.transactions')}</dt>
       <dd>
-        <Link href={transactionsAnchor}>{formatNumber(block.num_transactions)}</Link>
+        <Link href={transactionsAnchor}>
+          {formatNumber(block.num_transactions, { countKey: 'common.transactionsNumber' })}
+        </Link>
       </dd>
 
       <dt>{t('common.gasUsed')}</dt>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -68,6 +68,8 @@
     "to": "To",
     "totalSent": "Total Sent",
     "transactions": "Transactions",
+    "transactionsNumber_one": "1 transaction",
+    "transactionsNumber_other": "{{ count }} transactions",
     "txnFee": "Txn Fee",
     "type": "Type",
     "value": "Value",