feat(trading): upgrade i18n, fix plurals (#5331)

apps/trading/client-pages/referrals/apply-code-form.tsx

@@ -276,10 +276,12 @@ export const ApplyCodeForm = () => {
       {/* TODO: Re-check plural forms once i18n is updated */}
       {previewData && previewData.isEligible ? (
         <div className="mt-10">
-          <h2 className="text-2xl mb-5">
+          <h2 className="mb-5 text-2xl">
-            {t('referralApplyPreviewMessage', {
+            {t(
-              count: nextBenefitTierEpochsValue,
+              'youAreJoiningTheGroup',
-            })}
+              'You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.',
+              { count: nextBenefitTierEpochsValue }
+            )}
           </h2>
           <Statistics data={previewData} program={program} as="referee" />
         </div>

apps/trading/client-pages/referrals/referral-statistics.tsx

@@ -261,7 +261,7 @@ export const Statistics = ({
 
   const referrerVolumeTile = (
     <StatTile
-      title={t('My volume (last {{count}} epochs)', {
+      title={t('myVolume', 'My volume (last {{count}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
     >
@@ -274,7 +274,7 @@ export const Statistics = ({
     .reduce((all, r) => all.plus(r), new BigNumber(0));
   const totalCommissionTile = (
     <StatTile
-      title={t('Total commission (last {{count}}} epochs)', {
+      title={t('totalCommission', 'Total commission (last {{count}}} epochs)', {
         count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
       })}
       description={<QUSDTooltip />}
@@ -317,9 +317,13 @@ export const Statistics = ({
   );
   const runningVolumeTile = (
     <StatTile
-      title={t('Combined volume (last {{count}} epochs)', {
+      title={t(
-        count: details?.windowLength,
+        'runningNotionalOverEpochs',
-      })}
+        'Combined volume (last {{count}} epochs)',
+        {
+          count: details?.windowLength,
+        }
+      )}
     >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
@@ -439,15 +443,19 @@ export const RefereesTable = ({
                 { name: 'joined', displayName: t('Date Joined') },
                 {
                   name: 'volume',
-                  displayName: t('Volume (last {{count}} epochs)', {
+                  displayName: t(
-                    count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+                    'volumeLastEpochs',
-                  }),
+                    'Volume (last {{count}} epochs)',
+                    {
+                      count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+                    }
+                  ),
                 },
                 {
                   name: 'commission',
                   displayName: (
                     <Trans
-                      i18nKey="referral-statistics-commission"
+                      i18nKey="referralStatisticsCommission"
                       defaults="Commission earned in <0>qUSD</0> (last {{count}} epochs)"
                       values={{
                         count:

apps/trading/client-pages/referrals/tiers.tsx

@@ -208,9 +208,13 @@ const TiersTable = ({
         { name: 'discount', displayName: t('Referrer trading discount') },
         {
           name: 'volume',
-          displayName: t('Min. trading volume (last {{count}} epochs)', {
+          displayName: t(
-            count: windowLength,
+            'minTradingVolume',
-          }),
+            'Min. trading volume (last {{count}} epochs)',
+            {
+              count: windowLength,
+            }
+          ),
         },
         { name: 'epochs', displayName: t('Min. epochs') },
       ]}

apps/trading/components/fees-container/fees-container.tsx

@@ -317,7 +317,7 @@ export const CurrentVolume = ({
     <div className="flex flex-col gap-3 pt-4">
       <CardStat
         value={formatNumberRounded(new BigNumber(windowLengthVolume))}
-        text={t('Past {{count}} epochs', { count: windowLength })}
+        text={t('pastEpochs', 'Past {{count}} epochs', { count: windowLength })}
       />
       {requiredForNextTier > 0 && (
         <CardStat
@@ -344,9 +344,13 @@ const ReferralBenefits = ({
       <CardStat
         // all sets volume (not just current party)
         value={formatNumber(setRunningNotionalTakerVolume)}
-        text={t('Combined running notional over the {{count}} epochs', {
+        text={t(
-          count: epochs,
+          'runningNotionalOverEpochs',
-        })}
+          'Combined running notional over the {{count}} epochs',
+          {
+            count: epochs,
+          }
+        )}
       />
       <CardStat value={epochsInSet} text={t('epochs in referral set')} />
     </div>
@@ -453,7 +457,9 @@ const VolumeTiers = ({
             <Th>{t('Discount')}</Th>
             <Th>{t('Min. trading volume')}</Th>
             <Th>
-              {t('My volume (last {{count}} epochs)', { count: windowLength })}
+              {t('myVolume', 'My volume (last {{count}} epochs)', {
+                count: windowLength,
+              })}
             </Th>
             <Th />
           </tr>

libs/datagrid/__mocks__/react-i18next.ts

@@ -1,15 +0,0 @@
-export const useTranslation = () => ({
-  t: (label: string, replacements?: Record<string, string>) => {
-    const replace =
-      replacements?.['replace'] && typeof replacements === 'object'
-        ? replacements?.['replace']
-        : replacements;
-    let translatedLabel = replacements?.['defaultValue'] || label;
-    if (typeof replace === 'object' && replace !== null) {
-      Object.keys(replace).forEach((key) => {
-        translatedLabel = translatedLabel.replace(`{{${key}}}`, replace[key]);
-      });
-    }
-    return translatedLabel;
-  },
-});

libs/datagrid/src/lib/pagination.spec.tsx

@@ -25,7 +25,7 @@ describe('Pagination', () => {
     const mockOnLoad = jest.fn();
     const count = 10;
     render(<Pagination {...props} count={count} onLoad={mockOnLoad} />);
-    expect(screen.getByText(`${count} rows loaded`)).toBeInTheDocument();
+    expect(screen.getByText('10 rows loaded')).toBeInTheDocument();
     await userEvent.click(screen.getByRole('button', { name: 'Load more' }));
     expect(mockOnLoad).toHaveBeenCalled();
   });

libs/datagrid/src/lib/pagination.tsx

@@ -18,19 +18,15 @@ export const Pagination = ({
   let rowMessage = '';
 
   if (count && !pageInfo?.hasNextPage) {
-    rowMessage = t('paginationAllLoaded', {
+    rowMessage = t('paginationAllLoaded', 'all {{count}} rows loaded', {
-      replace: { count },
+      count,
-      defaultValue: 'All {{count}} rows loaded',
     });
   } else {
-    rowMessage = t('paginationLoaded', {
+    rowMessage = t('paginationLoaded', '{{count}} rows loaded', { count });
-      replace: { count },
-      defaultValue: '{{count}} rows loaded',
-    });
   }
 
   return (
-    <div className="flex items-center justify-between p-1 border-t border-default">
+    <div className="border-default flex items-center justify-between border-t p-1">
       <div className="text-xs">
         {false}
         {showRetentionMessage &&
@@ -47,7 +43,7 @@ export const Pagination = ({
         ) : null}
       </div>
       {count && hasDisplayedRows === false ? (
-        <div className="absolute text-xs top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-xs">
           {t('No rows matching selected filters')}
         </div>
       ) : null}

libs/datagrid/src/setup-tests.ts

@@ -1,4 +1,18 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
 
+import { locales } from '@vegaprotocol/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Set up i18n instance so that components have the correct default
+// en translations
+i18n.use(initReactI18next).init({
+  // we init with resources
+  resources: locales,
+  fallbackLng: 'en',
+  ns: ['datagrid'],
+  defaultNS: 'datagrid',
+});
+
 global.ResizeObserver = ResizeObserver;

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -59,9 +59,7 @@ export const TimeInForceSelector = ({
             components={[
               <Tooltip
                 description={
-                  <SimpleGrid
+                  <SimpleGrid grid={compileGridData(t, market, marketData)} />
-                    grid={compileGridData(t, market, marketData, t)}
-                  />
                 }
               >
                 sufficient liquidity
@@ -83,9 +81,7 @@ export const TimeInForceSelector = ({
             components={[
               <Tooltip
                 description={
-                  <SimpleGrid
+                  <SimpleGrid grid={compileGridData(t, market, marketData)} />
-                    grid={compileGridData(t, market, marketData, t)}
-                  />
                 }
               >
                 high price volatility

libs/deposits/src/lib/approve-notification.tsx

@@ -216,12 +216,10 @@ const ApprovalTxFeedback = ({
               <p>
                 {t(
                   'You approved deposits of up to {{assetSymbol}} {{approvedAllowanceValue}}.',
-                  [
+                  {
-                    {
+                    assetSymbol: selectedAsset?.symbol,
-                      assetSymbol: selectedAsset?.symbol,
+                    approvedAllowanceValue,
-                      approvedAllowanceValue,
+                  }
-                    },
-                  ]
                 )}
               </p>
               {txLink && <p>{txLink}</p>}

libs/environment/__mocks__/react-i18next.ts

@@ -1,15 +0,0 @@
-export const useTranslation = () => ({
-  t: (label: string, replacements?: Record<string, string>) => {
-    const replace =
-      replacements?.replace && typeof replacements === 'object'
-        ? replacements?.replace
-        : replacements;
-    let translatedLabel = replacements?.defaultValue || label;
-    if (typeof replace === 'object' && replace !== null) {
-      Object.keys(replace).forEach((key) => {
-        translatedLabel = translatedLabel.replace(`{{${key}}}`, replace[key]);
-      });
-    }
-    return translatedLabel;
-  },
-});

libs/environment/src/hooks/use-node-health.ts

@@ -70,10 +70,7 @@ export const useNodeHealth = () => {
       );
       intent = Intent.Danger;
     } else if (blockDiff >= BLOCK_THRESHOLD) {
-      text = t('blocksBehind', {
+      text = t('blocksBehind', '{{count}} Blocks behind', { count: blockDiff });
-        defaultValue: '{{count}} Blocks behind',
-        replace: { count: blockDiff },
-      });
       intent = Intent.Warning;
     } else if (blockUpdateMsLatency > WARNING_LATENCY) {
       text = t(

libs/environment/src/setup-tests.ts

@@ -5,6 +5,20 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
 
+import { locales } from '@vegaprotocol/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Set up i18n instance so that components have the correct default
+// en translations
+i18n.use(initReactI18next).init({
+  // we init with resources
+  resources: locales,
+  fallbackLng: 'en',
+  ns: ['environment'],
+  defaultNS: 'environment',
+});
+
 global.ResizeObserver = ResizeObserver;
 
 // Required by radix-ui/react-dropdown-menu

libs/i18n/src/locales/en/environment.json

@@ -2,6 +2,7 @@
   "A release candidate for the staging environment": "A release candidate for the staging environment",
   "Advanced": "Advanced",
   "Block": "Block",
+  "blocksBehind": "{{count}} Blocks behind",
   "blocksBehind_one": "{{count}} Block behind",
   "blocksBehind_other": "{{count}} Blocks behind",
   "Change node": "Change node",

libs/i18n/src/locales/en/markets.json

@@ -32,6 +32,7 @@
   "Insurance pool": "Insurance pool",
   "Internal conditions": "Internal conditions",
   "Invalid data source": "Invalid data source",
+  "involvedInMarkets": "Involved in {{count}} markets",
   "involvedInMarkets_other": "Involved in {{count}} markets",
   "involvedInMarkets_one": "Involved in {{count}} market",
   "Key": "Key",
@@ -53,6 +54,7 @@
   "Maximum fraction of an LP's accrued fees that an LP would lose to liquidity providers that achieved a higher SLA performance than them. This is a market parameter.": "Maximum fraction of an LP's accrued fees that an LP would lose to liquidity providers that achieved a higher SLA performance than them. This is a market parameter.",
   "Maximum value that a proposed fee amount can be, which is submitted as part of the LP commitment transaction. Note that a value of 0.05 = 5%. This is a network parameter.": "Maximum value that a proposed fee amount can be, which is submitted as part of the LP commitment transaction. Note that a value of 0.05 = 5%. This is a network parameter.",
   "Metadata": "Metadata",
+  "moreProofs": "And {{count}} more proofs",
   "moreProofs_one": "And {{count}} more proof",
   "moreProofs_other": "And {{count}} more proofs",
   "Multiplier used to translate an LP's commitment amount to their liquidity obligation. This is a network parameter.": "Multiplier used to translate an LP's commitment amount to their liquidity obligation. This is a network parameter.",
@@ -67,12 +69,14 @@
   "Oracle repository": "Oracle repository",
   "Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>": "Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>",
   "Oracle status: {{status}}. {{description}}": "Oracle status: {{status}}. {{description}}",
+  "oracleInMarkets": "Oracle in {{count}} markets",
   "oracleInMarkets_one": "Oracle in {{count}} market",
   "oracleInMarkets_other": "Oracle in {{count}} markets",
   "Price monitoring bounds {{index}}": "Price monitoring bounds {{index}}",
   "Probability level for price projection, e.g. value of 0.95 will result in a price range such that over the specified projection horizon, the prices observed in the market should be in that range 95% of the time.": "Probability level for price projection, e.g. value of 0.95 will result in a price range such that over the specified projection horizon, the prices observed in the market should be in that range 95% of the time.",
   "Probability level used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short": "Probability level used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short",
   "Projection horizon measured as a year fraction used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short": "Projection horizon measured as a year fraction used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short",
+  "proofsOfOwnership": "{{count}} proofs of ownership",
   "proofsOfOwnership_one": "{{count}} proof of ownership",
   "proofsOfOwnership_other": "{{count}} proofs of ownership",
   "Proposal": "Proposal",
@@ -131,6 +135,7 @@
   "Updated": "Updated",
   "Used to calculate the penalty to liquidity providers when they cannot support their open position with the assets in their margin and general accounts. This is a network parameter.": "Used to calculate the penalty to liquidity providers when they cannot support their open position with the assets in their margin and general accounts. This is a network parameter.",
   "Verified since {{lastVerified}}": "Verified since {{lastVerified}}",
+  "verifyProofs": "Verify {{count}} proofs of ownership",
   "verifyProofs_one": "Verify {{count}} proof of ownership",
   "verifyProofs_other": "Verify {{count}} proofs of ownership",
   "View governance proposal": "View governance proposal",

libs/i18n/src/locales/en/proposals.json

@@ -1,7 +1,6 @@
 {
   "[This is {{network}} transaction only]": "[This is {{network}} transaction only]",
   "{{proposalChange}} proposal {{proposalState}}": "{{proposalChange}} proposal {{proposalState}}",
-  "<0>{{count}}</0> blocks": "<0>{{count}}</0> blocks",
   "Awaiting network confirmation": "Awaiting network confirmation",
   "blocks": "blocks",
   "Changes have been proposed for this asset.": "Changes have been proposed for this asset.",
@@ -15,6 +14,9 @@
   "Market": "Market",
   "Network upgrade in {{countdown}}": "Network upgrade in {{countdown}}",
   "No proposed markets": "No proposed markets",
+  "numberOfBlocks": "<0>{{count}}</0> blocks",
+  "numberOfBlocks_one": "<0>{{count}}</0> block",
+  "numberOfBlocks_other": "<0>{{count}}</0> blocks",
   "Parent market": "Parent market",
   "Please open your wallet application and confirm or reject the transaction": "Please open your wallet application and confirm or reject the transaction",
   "Please wait for your transaction to be confirmed": "Please wait for your transaction to be confirmed",

libs/i18n/src/locales/en/trading.json

@@ -38,8 +38,6 @@
   "Code must be 64 characters in length": "Code must be 64 characters in length",
   "Code must be be valid hex": "Code must be be valid hex",
   "Collateral": "Collateral",
-  "Combined running notional over the {{count}} epochs": "Combined running notional over the {{count}} epochs",
-  "Combined volume (last {{count}} epochs)": "Combined volume (last {{count}} epochs)",
   "Conduct your own due diligence and consult your financial advisor before making any investment decisions.": "Conduct your own due diligence and consult your financial advisor before making any investment decisions.",
   "Confirm in wallet...": "Confirm in wallet...",
   "Connect": "Connect",
@@ -55,6 +53,9 @@
   "Countdown": "Countdown",
   "Create a referral code": "Create a referral code",
   "Current tier": "Current tier",
+  "combinedVolume": "Combined volume (last {{count}} epochs)",
+  "combinedVolume_one": "Combined volume (last {{count}} epoch)",
+  "combinedVolume_other": "Combined volume (last {{count}} epochs)",
   "Dark mode": "Dark mode",
   "Date Joined": "Date Joined",
   "Deposit": "Deposit",
@@ -143,11 +144,15 @@
   "Menu": "Menu",
   "Min. epochs": "Min. epochs",
   "Min. trading volume": "Min. trading volume",
-  "Min. trading volume (last {{count}} epochs)": "Min. trading volume (last {{count}} epochs)",
   "My current volume": "My current volume",
   "My liquidity provision": "My liquidity provision",
   "My trading fees": "My trading fees",
-  "My volume (last {{count}} epochs)": "My volume (last {{count}} epochs)",
+  "minTradingVolume": "Min. trading volume (last {{count}} epochs)",
+  "minTradingVolume_one": "Min. trading volume (last {{count}} epoch)",
+  "minTradingVolume_other": "Min. trading volume (last {{count}} epochs)",
+  "myVolume": "My volume (last {{count}} epochs)",
+  "myVolume_one": "My volume (last {{count}} epoch)",
+  "myVolume_other": "My volume (last {{count}} epochs)",
   "Name": "Name",
   "No closed orders": "No closed orders",
   "No data": "No data",
@@ -183,7 +188,6 @@
   "Orders": "Orders",
   "Page not found": "Page not found",
   "Parent of a market": "Parent of a market",
-  "Past {{count}} epochs": "Past {{count}} epochs",
   "Perpetuals": "Perpetuals",
   "Please choose another market from the <0>market list</0>": "Please choose another market from the <0>market list</0>",
   "Please connect Vega wallet": "Please connect Vega wallet",
@@ -197,17 +201,17 @@
   "Proposed markets": "Proposed markets",
   "Providing liquidity": "Providing liquidity",
   "Purpose built proof of stake blockchain": "Purpose built proof of stake blockchain",
+  "pastEpochs": "Past {{count}} epochs",
+  "pastEpochs_one": "Past {{count}} epoch",
+  "pastEpochs_other": "Past {{count}} epochs",
   "qUSD": "qUSD",
   "qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset": "qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset",
   "Read the terms": "Read the terms",
   "Ready to trade": "Ready to trade",
   "Ready to trade with real funds? <0>Switch to Mainnet</0>": "Ready to trade with real funds? <0>Switch to Mainnet</0>",
   "Redeem rewards": "Redeem rewards",
-  "referralApplyPreviewMessage": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epoch.",
-  "referralApplyPreviewMessage_plural": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
   "Referral benefits": "Referral benefits",
   "Referral discount": "Referral discount",
-  "referral-statistics-commission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
   "Referrals": "Referrals",
   "Referrer commission": "Referrer commission",
   "Referrer trading discount": "Referrer trading discount",
@@ -220,6 +224,12 @@
   "Rewards": "Rewards",
   "Rewards history": "Rewards history",
   "Rewards multipliers": "Rewards multipliers",
+  "referralStatisticsCommission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
+  "referralStatisticsCommission_one": "Commission earned in <0>qUSD</0> (last {{count}} epoch)",
+  "referralStatisticsCommission_other": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
+  "runningNotionalOverEpochs": "Combined running notional over the {{count}} epochs",
+  "runningNotionalOverEpochs_one": "Combined running notional over the {{count}} epoch",
+  "runningNotionalOverEpochs_other": "Combined running notional over the {{count}} epochs",
   "SCCR": "SCCR",
   "Search": "Search",
   "See all markets": "See all markets",
@@ -269,7 +279,6 @@
   "This timestamp is user curated metadata and does not drive any on-chain functionality.": "This timestamp is user curated metadata and does not drive any on-chain functionality.",
   "Tier": "Tier",
   "Toast location": "Toast location",
-  "Total commission (last {{count}}} epochs)": "Total commission (last {{count}}} epochs)",
   "Total discount": "Total discount",
   "Total distributed": "Total distributed",
   "Total fee after discount": "Total fee after discount",
@@ -283,6 +292,9 @@
   "Trading on Market {{name}} may stop. There are open proposals to close this market": "Trading on Market {{name}} may stop. There are open proposals to close this market",
   "Trading on Market {{name}} will stop on {{date}}": "Trading on Market {{name}} will stop on {{date}}",
   "Transfer": "Transfer",
+  "totalCommission": "Total commission (last {{count}}} epochs)",
+  "totalCommission_one": "Total commission (last {{count}}} epoch)",
+  "totalCommission_other": "Total commission (last {{count}}} epochs)",
   "Unknown": "Unknown",
   "Unknown settlement date": "Unknown settlement date",
   "Vega Reward pot": "Vega Reward pot",
@@ -299,14 +311,15 @@
   "View successor market": "View successor market",
   "Volume": "Volume",
   "Volume (24h)": "Volume (24h)",
-  "Volume (last {{count}} epochs)": "Volume (last {{count}} epochs)",
   "Volume discount": "Volume discount",
   "Volume to next tier": "Volume to next tier",
+  "volumeLastEpochs": "Volume (last {{count}} epochs)",
+  "volumeLastEpochs_one": "Volume (last {{count}} epoch)",
+  "volumeLastEpochs_other": "Volume (last {{count}} epochs)",
   "Wallet": "Wallet",
   "We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.": "We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.",
   "Welcome to Vega trading!": "Welcome to Vega trading!",
   "Withdraw": "Withdraw",
-  "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
   "You can opt out any time via settings": "You can opt out any time via settings",
   "You may encounter bugs, loss of functionality or loss of assets.": "You may encounter bugs, loss of functionality or loss of assets.",
   "You must be connected to the Vega wallet.": "You must be connected to the Vega wallet.",
@@ -316,5 +329,8 @@
   "Your code has been rejected": "Your code has been rejected",
   "Your identity is always anonymous on Vega": "Your identity is always anonymous on Vega",
   "Your referral code": "Your referral code",
-  "Your tier": "Your tier"
+  "Your tier": "Your tier",
+  "youAreJoiningTheGroup": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
+  "youAreJoiningTheGroup_one": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epoch.",
+  "youAreJoiningTheGroup_other": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs."
 }

libs/i18n/src/locales/en/web3.json

@@ -6,7 +6,7 @@
   "Approved": "Approved",
   "Await Ethereum transaction": "Await Ethereum transaction",
   "Awaiting confirmation": "Awaiting confirmation",
-  "Awaiting confirmations {{confirmations}}/{[requiredConfirmations}}": "Awaiting confirmations {{confirmations}}/{[requiredConfirmations}}",
+  "Awaiting confirmations {{confirmations}}/{{requiredConfirmations}}": "Awaiting confirmations {{confirmations}}/{{requiredConfirmations}}",
   "Awaiting Ethereum transaction {{confirmations}}/{{requiredConfirmations}} confirmations...": "Awaiting Ethereum transaction {{confirmations}}/{{requiredConfirmations}} confirmations...",
   "Batch market instruction": "Batch market instruction",
   "Cancel all orders": "Cancel all orders",

libs/i18n/src/locales/en/withdraws.json

@@ -5,7 +5,9 @@
   "Available to withdraw in {{availableTimestamp}}": "Available to withdraw in {{availableTimestamp}}",
   "Balance available": "Balance available",
   "Complete the withdrawal to release your funds": "Complete the withdrawal to release your funds",
-  "Complete these {{count}} withdrawals to release your funds": "Complete these {{count}} withdrawals to release your funds",
+  "completeWithdrawals": "Complete these {{count}} withdrawals to release your funds",
+  "completeWithdrawals_one": "Complete these {{count}} withdrawal to release your funds",
+  "completeWithdrawals_other": "Complete these {{count}} withdrawals to release your funds",
   "Complete withdrawal": "Complete withdrawal",
   "Completed": "Completed",
   "Connect Ethereum wallet to complete": "Connect Ethereum wallet to complete",

libs/positions/src/lib/positions-table.tsx

@@ -220,10 +220,7 @@ export const PositionsTable = ({
                       <p className="mb-2">{secondaryTooltip}</p>
                       <p className="mb-2">
                         {t('Status: {{status}}', {
-                          nsSeparator: '*',
+                          status: PositionStatusMapping[args.data.status],
-                          replace: {
-                            status: PositionStatusMapping[args.data.status],
-                          },
                         })}
                       </p>
                       {POSITION_RESOLUTION_LINK && (
@@ -390,18 +387,14 @@ export const PositionsTable = ({
                     <>
                       <p className="mb-2">
                         {t('Realised PNL: {{value}}', {
-                          nsSeparator: '*',
+                          value: args.value,
-                          replace: { value: args.value },
                         })}
                       </p>
                       <p className="mb-2">
                         {t(
                           'Lifetime loss socialisation deductions: {{losses}}',
                           {
-                            nsSeparator: '*',
+                            losses: lossesFormatted,
-                            replace: {
-                              losses: lossesFormatted,
-                            },
                           }
                         )}
                       </p>

libs/proposals/src/components/protocol-upgrade-countdown.tsx

@@ -48,6 +48,7 @@ export const ProtocolUpgradeCountdown = ({
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
         <Trans
+          i18nKey="numberOfBlocks"
           defaults="<0>{{count}}</0> blocks"
           components={[<span className={emphasis}>count</span>]}
           values={{

libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx

@@ -43,6 +43,7 @@ export const ProtocolUpgradeProposalNotification = ({
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
         <Trans
+          i18nKey="numberOfBlocks"
           defaults="<0>{{count}}</0> blocks"
           components={[<span className="text-vega-orange-500">count</span>]}
           values={{

libs/web3/src/lib/ethereum-transaction-dialog/ethereum-transaction-dialog.tsx

@@ -110,8 +110,7 @@ export const TransactionContent = ({
     return (
       <p className="break-all">
         {t('Error: {{errorMessage}}', {
-          nsSeparator: '*',
+          errorMessage,
-          replace: { errorMessage },
         })}
       </p>
     );

libs/web3/src/lib/use-ethereum-transaction-toasts.tsx

@@ -66,8 +66,11 @@ const EthTransactionDetails = ({ tx }: { tx: EthStoredTxState }) => {
           <>
             <p className="mt-[2px]">
               {t(
-                'Awaiting confirmations {{confirmations}}/{[requiredConfirmations}}',
+                'Awaiting confirmations {{confirmations}}/{{requiredConfirmations}}',
-                tx
+                {
+                  confirmations: tx.confirmations,
+                  requiredConfirmations: tx.requiredConfirmations,
+                }
               )}
             </p>
             <ProgressBar

libs/web3/src/lib/use-ethereum-withdraw-approvals-manager.tsx

@@ -51,10 +51,7 @@ export const useEthWithdrawApprovalsManager = () => {
       update(transaction.id, {
         status: ApprovalStatus.Error,
         message: t(`Invalid asset source: {{source}}`, {
-          nsSeparator: '*',
+          source: withdrawal.asset.source.__typename,
-          replace: {
-            source: withdrawal.asset.source.__typename,
-          },
         }),
         failureReason: WithdrawalFailure.InvalidAsset,
       });

libs/web3/src/lib/use-vega-transaction-toasts.spec.tsx

@@ -21,6 +21,7 @@ import type {
 } from './__generated__/Orders';
 import type { VegaStoredTxState } from './use-vega-transaction-store';
 import { VegaTxStatus } from './types';
+import { type TFunction } from 'i18next';
 
 jest.mock('@vegaprotocol/assets', () => {
   const A1 = {
@@ -418,7 +419,7 @@ describe('getVegaTransactionContentIntent', () => {
   });
 });
 describe('getOrderToastTitle', () => {
-  const t = (v: string) => v;
+  const t = ((v: string) => v) as TFunction<'web3', undefined>;
   it('should return the correct title', () => {
     expect(getOrderToastTitle(Types.OrderStatus.STATUS_ACTIVE, t)).toBe(
       'Order submitted'
@@ -495,7 +496,7 @@ describe('getRejectionReason', () => {
           marketId: '',
           remaining: '',
         },
-        (v) => v
+        ((v) => v) as TFunction<'web3', undefined>
       )
     ).toBe('Insufficient asset balance');
   });
@@ -515,7 +516,7 @@ describe('getRejectionReason', () => {
           marketId: '',
           remaining: '',
         },
-        (v) => v
+        ((v) => v) as TFunction<'web3', undefined>
       )
     ).toBe('Your {{timeInForce}} order was not filled and it has been stopped');
   });

libs/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -779,16 +779,10 @@ const VegaTxCompleteToastsContent = ({ tx }: VegaTxToastContentProps) => {
           <p>
             {tx.order.status === Schema.OrderStatus.STATUS_STOPPED
               ? t('Your order has been stopped because: {{rejectionReason}}', {
-                  nsSeparator: '*',
+                  rejectionReason,
-                  replace: {
-                    rejectionReason,
-                  },
                 })
               : t('Your order has been rejected because: {{rejectionReason}}', {
-                  nsSeparator: '*',
+                  rejectionReason,
-                  replace: {
-                    rejectionReason,
-                  },
                 })}
           </p>
         ) : (

package.json

@@ -67,8 +67,8 @@
     "graphql": "^15.7.2",
     "graphql-request": "^5.0.0",
     "graphql-ws": "^5.6.3",
-    "i18next": "^20.3.5",
+    "i18next": "23.7.6",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next-browser-languagedetector": "7.2.0",
     "i18next-http-backend": "^2.3.1",
     "i18next-locize-backend": "^6.4.1",
     "immer": "^9.0.12",
@@ -82,7 +82,7 @@
     "react-copy-to-clipboard": "5.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.27.0",
-    "react-i18next": "^11.11.4",
+    "react-i18next": "13.5.0",
     "react-intersection-observer": "^9.2.2",
     "react-markdown": "^8.0.6",
     "react-router-dom": "6.11.2",

yarn.lock

@@ -1460,13 +1460,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.17.8", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.22.5":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e"
+  integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -14193,17 +14200,17 @@ husky@^7.0.4:
   resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
   integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
 
-i18next-browser-languagedetector@^6.1.2:
+i18next-browser-languagedetector@7.2.0:
-  version "6.1.8"
+  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.8.tgz#8e9c61b32a4dfe9b959b38bc9d2a8b95f799b27c"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz#de0321cba6881be37d82e20e4d6f05aa75f6e37f"
-  integrity sha512-Svm+MduCElO0Meqpj1kJAriTC6OhI41VhlT/A0UPjGoPZBhAHIaGE5EfsHlTpgdH09UVX7rcc72pSDDBeKSQQA==
+  integrity sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==
   dependencies:
-    "@babel/runtime" "^7.19.0"
+    "@babel/runtime" "^7.23.2"
 
 i18next-http-backend@^2.3.1:
-  version "2.3.1"
+  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.3.1.tgz#9ea06cd96772527f5bf171f4948af5f34be5fe05"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.4.2.tgz#bd53cacaed671e9f38bdcfd46ac9d1763a898186"
-  integrity sha512-jnagFs5cnq4ryb+g92Hex4tB5kj3tWmiRWx8gHMCcE/PEgV1fjH5rC7xyJmPSgyb9r2xgcP8rvZxPKgsmvMqTw==
+  integrity sha512-wKrgGcaFQ4EPjfzBTjzMU0rbFTYpa0S5gv9N/d8WBmWS64+IgJb7cHddMvV+tUkse7vUfco3eVs2lB+nJhPo3w==
   dependencies:
     cross-fetch "4.0.0"
 
@@ -14214,12 +14221,12 @@ i18next-locize-backend@^6.4.1:
   dependencies:
     cross-fetch "4.0.0"
 
-i18next@^20.3.5:
+i18next@23.7.6:
-  version "20.6.1"
+  version "23.7.6"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.6.1.tgz#535e5f6e5baeb685c7d25df70db63bf3cc0aa345"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.6.tgz#7328e76c899052d5d33d930164612dd21e575f74"
-  integrity sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==
+  integrity sha512-O66BhXBw0fH4bEJMA0/klQKPEbcwAp5wjXEL803pdAynNbg2f4qhLIYlNHJyE7icrL6XmSZKPYaaXwy11kJ6YQ==
   dependencies:
-    "@babel/runtime" "^7.12.0"
+    "@babel/runtime" "^7.23.2"
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
@@ -19035,12 +19042,12 @@ react-hook-form@^7.27.0:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.48.2.tgz#01150354d2be61412ff56a030b62a119283b9935"
   integrity sha512-H0T2InFQb1hX7qKtDIZmvpU1Xfn/bdahWBN1fH19gSe4bBEqTfmlr7H3XWTaVtiK4/tpPaI1F3355GPMZYge+A==
 
-react-i18next@^11.11.4:
+react-i18next@13.5.0:
-  version "11.18.6"
+  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.6.tgz#e159c2960c718c1314f1e8fcaa282d1c8b167887"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.5.0.tgz#44198f747628267a115c565f0c736a50a76b1ab0"
-  integrity sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==
+  integrity sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==
   dependencies:
-    "@babel/runtime" "^7.14.5"
+    "@babel/runtime" "^7.22.5"
     html-parse-stringify "^3.0.1"
 
 react-inspector@^6.0.0: