feat: fix labels

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/explorer/src/app/app.tsx

@@ -1,3 +1,4 @@
+import '../i18n';
 import {
   NetworkLoader,
   NodeFailure,
@@ -28,20 +29,24 @@ function App() {
   );
   return (
     <TendermintWebsocketProvider>
-      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
-        <NodeGuard
-          skeleton={<div>{t('Loading')}</div>}
-          failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
-        >
-          <Suspense fallback={splashLoading}>
-            <RouterProvider router={router} fallbackElement={splashLoading} />
-          </Suspense>
-        </NodeGuard>
-        <NodeSwitcherDialog
-          open={nodeSwitcherOpen}
-          setOpen={setNodeSwitcherOpen}
-        />
-      </NetworkLoader>
+      <Suspense fallback={splashLoading}>
+        <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
+          <NodeGuard
+            skeleton={<div>{t('Loading')}</div>}
+            failure={
+              <NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />
+            }
+          >
+            <Suspense fallback={splashLoading}>
+              <RouterProvider router={router} fallbackElement={splashLoading} />
+            </Suspense>
+          </NodeGuard>
+          <NodeSwitcherDialog
+            open={nodeSwitcherOpen}
+            setOpen={setNodeSwitcherOpen}
+          />
+        </NetworkLoader>
+      </Suspense>
     </TendermintWebsocketProvider>
   );
 }

apps/explorer/src/app/setup-tests.ts

@@ -3,6 +3,9 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { locales } from '@vegaprotocol/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 
 Object.defineProperty(window, 'ResizeObserver', {
   writable: false,
@@ -13,3 +16,14 @@ Object.defineProperty(window, 'ResizeObserver', {
     disconnect: jest.fn(),
   })),
 });
+
+// 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',
+  nsSeparator: false,
+  ns: ['explorer'],
+  defaultNS: 'explorer',
+});

apps/explorer/src/assets/locales

@@ -0,0 +1 @@
+../../../../libs/i18n/src/locales

apps/explorer/src/i18n/index.ts

@@ -0,0 +1,45 @@
+import type { Module } from 'i18next';
+import i18n from 'i18next';
+import HttpBackend from 'i18next-http-backend';
+import LocizeBackend from 'i18next-locize-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+const isInDev = process.env.NODE_ENV === 'development';
+const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
+
+const backend = useLocize
+  ? {
+      projectId: '96ac1231-4bdd-455a-b9d7-f5322a2e7430',
+      apiKey: process.env.NX_LOCIZE_API_KEY,
+      referenceLng: 'en',
+    }
+  : {
+      loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
+    };
+
+const Backend: Module = useLocize ? LocizeBackend : HttpBackend;
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    lng: 'en',
+    fallbackLng: 'en',
+    supportedLngs: ['en'],
+    load: 'languageOnly',
+    debug: isInDev,
+    // have a common namespace used around the full app
+    ns: ['explorer'],
+    defaultNS: 'explorer',
+    keySeparator: false, // we use content as keys
+    nsSeparator: false,
+    backend,
+    saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

apps/governance/src/routes/proposals/components/propose/proposal-form-transaction-dialog.tsx

@@ -1,7 +1,7 @@
 import {
   getProposalDialogIcon,
   getProposalDialogIntent,
-  getProposalDialogTitle,
+  useGetProposalDialogTitle,
 } from '@vegaprotocol/proposals';
 import type { ProposalEventFieldsFragment } from '@vegaprotocol/proposals';
 import type { DialogProps } from '@vegaprotocol/proposals';
@@ -15,6 +15,7 @@ export const ProposalFormTransactionDialog = ({
   finalizedProposal,
   TransactionDialog,
 }: ProposalFormTransactionDialogProps) => {
+  const title = useGetProposalDialogTitle(finalizedProposal?.state);
   // Render a custom complete UI if the proposal was rejected otherwise
   // pass undefined so that the default vega transaction dialog UI gets used
   const completeContent = finalizedProposal?.rejectionReason ? (
@@ -24,7 +25,7 @@ export const ProposalFormTransactionDialog = ({
   return (
     <div data-testid="proposal-transaction-dialog">
       <TransactionDialog
-        title={getProposalDialogTitle(finalizedProposal?.state)}
+        title={title}
         intent={getProposalDialogIntent(finalizedProposal?.state)}
         icon={getProposalDialogIcon(finalizedProposal?.state)}
         content={{

apps/trading/client-pages/market/market.tsx

@@ -114,7 +114,7 @@ export const MarketPage = () => {
           </p>
           <p className="justify-center text-sm">
             <Trans
-              defaults="Please choose another market from the <0>market list<0>"
+              defaults="Please choose another market from the <0>market list</0>"
               ns={ns}
               components={[
                 <ExternalLink

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

@@ -152,8 +152,8 @@ export const ApplyCodeForm = () => {
   // show "code applied" message when successfully applied
   if (status === 'successful') {
     return (
-      <div className="w-1/2 mx-auto">
-        <h3 className="mb-5 text-xl text-center uppercase calt flex flex-row gap-2 justify-center items-center">
+      <div className="mx-auto w-1/2">
+        <h3 className="calt mb-5 flex flex-row items-center justify-center gap-2 text-center text-xl uppercase">
           <span className="text-vega-green-500">
             <VegaIcon name={VegaIconNames.TICK} size={20} />
           </span>{' '}
@@ -205,15 +205,15 @@ export const ApplyCodeForm = () => {
 
   return (
     <>
-      <div className="w-2/3 max-w-md mx-auto bg-vega-clight-800 dark:bg-vega-cdark-800 p-8 rounded-lg">
-        <h3 className="mb-4 text-2xl text-center calt">
+      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 mx-auto w-2/3 max-w-md rounded-lg p-8">
+        <h3 className="calt mb-4 text-center text-2xl">
           {t('Apply a referral code')}
         </h3>
         <p className="mb-4 text-center text-base">
           {t('Enter a referral code to get trading discounts.')}
         </p>
         <form
-          className={classNames('w-full flex flex-col gap-4', {
+          className={classNames('flex w-full flex-col gap-4', {
             'animate-shake': Boolean(errors.code),
           })}
           onSubmit={handleSubmit(onSubmit)}
@@ -227,13 +227,13 @@ export const ApplyCodeForm = () => {
                 validate: (value) => validateCode(value, t),
               })}
               placeholder="Enter a code"
-              className="mb-2 bg-vega-clight-900 dark:bg-vega-cdark-700"
+              className="bg-vega-clight-900 dark:bg-vega-cdark-700 mb-2"
             />
           </label>
           <RainbowButton variant="border" {...getButtonProps()} />
         </form>
         {errors.code && (
-          <InputError className="break-words overflow-auto">
+          <InputError className="overflow-auto break-words">
             {errors.code.message?.toString()}
           </InputError>
         )}
@@ -245,10 +245,10 @@ export const ApplyCodeForm = () => {
       ) : null}
       {previewData ? (
         <div className="mt-10">
-          <h2 className="text-2xl mb-5">
+          <h2 className="mb-5 text-2xl">
             {t(
-              'You are joining the group shown, but will not have access to benefits until you have completed at least %s epochs.',
-              [nextBenefitTierEpochsValue.toString()]
+              '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" />

apps/trading/client-pages/rewards/rewards.tsx

@@ -1,7 +1,8 @@
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
 
 export const Rewards = () => {
+  const t = useT();
   return (
     <div className="container mx-auto p-4">
       <h1 className="px-4 pb-4 text-2xl">{t('Rewards')}</h1>

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

@@ -1,7 +1,6 @@
 import groupBy from 'lodash/groupBy';
 import type { Account } from '@vegaprotocol/accounts';
 import { useAccounts } from '@vegaprotocol/accounts';
-import { t } from '@vegaprotocol/i18n';
 import {
   NetworkParams,
   useNetworkParams,
@@ -31,8 +30,10 @@ import { addDecimalsFormatNumberQuantum } from '@vegaprotocol/utils';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { RewardsHistoryContainer } from './rewards-history';
+import { useT } from '../../lib/use-t';
 
 export const RewardsContainer = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const { params, loading: paramsLoading } = useNetworkParams([
     NetworkParams.reward_asset,
@@ -121,7 +122,9 @@ export const RewardsContainer = () => {
         return (
           <Card
             key={assetId}
-            title={t('%s Reward pot', asset.symbol)}
+            title={t('{{assetSymbol}} Reward pot', {
+              assetSymbol: asset.symbol,
+            })}
             className="lg:col-span-3 xl:col-span-2"
             loading={loading}
           >
@@ -167,6 +170,7 @@ export const RewardPot = ({
   assetId,
   vestingBalancesSummary,
 }: RewardPotProps) => {
+  const t = useT();
   // TODO: Opening the sidebar for the first time works, but then clicking on redeem
   // for a different asset does not update the form
   const currentRouteId = useGetCurrentRouteId();
@@ -242,7 +246,9 @@ export const RewardPot = ({
             <CardTable>
               <tr>
                 <CardTableTH className="flex items-center gap-1">
-                  {t(`Locked ${rewardAsset.symbol}`)}
+                  {t('Locked {{assetSymbol}}', {
+                    assetSymbol: rewardAsset.symbol,
+                  })}
                   <VegaIcon name={VegaIconNames.LOCK} size={12} />
                 </CardTableTH>
                 <CardTableTD>
@@ -254,7 +260,11 @@ export const RewardPot = ({
                 </CardTableTD>
               </tr>
               <tr>
-                <CardTableTH>{t(`Vesting ${rewardAsset.symbol}`)}</CardTableTH>
+                <CardTableTH>
+                  {t('Vesting {{assetSymbol}}', {
+                    assetSymbol: rewardAsset.symbol,
+                  })}
+                </CardTableTH>
                 <CardTableTD>
                   {addDecimalsFormatNumberQuantum(
                     totalVesting.toString(),
@@ -309,6 +319,7 @@ export const Vesting = ({
   baseRate: string;
   multiplier?: string;
 }) => {
+  const t = useT();
   const rate = new BigNumber(baseRate).times(multiplier);
   const rateFormatted = formatPercentage(Number(rate));
   const baseRateFormatted = formatPercentage(Number(baseRate));
@@ -341,6 +352,7 @@ export const Multipliers = ({
   streakMultiplier?: string;
   hoarderMultiplier?: string;
 }) => {
+  const t = useT();
   const combinedMultiplier = new BigNumber(streakMultiplier).times(
     hoarderMultiplier
   );

apps/trading/components/rewards-container/rewards-history.tsx

@@ -16,12 +16,12 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import {
   useRewardsHistoryQuery,
   type RewardsHistoryQuery,
 } from './__generated__/Rewards';
 import { useRewardsRowData } from './use-reward-row-data';
+import { useT } from '../../lib/use-t';
 
 export const RewardsHistoryContainer = ({
   epoch,
@@ -140,6 +140,7 @@ export const RewardHistoryTable = ({
   onEpochChange: (epochVariables: { from: number; to: number }) => void;
   loading: boolean;
 }) => {
+  const t = useT();
   const [isParty, setIsParty] = useState(false);
 
   const rowData = useRewardsRowData({

apps/trading/e2e/tests/iceberg_orders/test_iceberg_orders.py

@@ -52,7 +52,7 @@ class TestIcebergOrdersValidations:
         vega.wait_fn(1)
         vega.wait_for_total_catchup()
         expect(page.get_by_test_id("toast-content")).to_have_text(
-            "Order filledYour transaction has been confirmed View in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
+            "Order filledYour transaction has been confirmedView in block explorerSubmit order - filledBTC:DAI_2023+3 @ 107.00 tDAI"
         )
         page.get_by_test_id("All").click()
         expect(

apps/trading/e2e/tests/market/test_markets_proposed.py

@@ -54,7 +54,6 @@ def test_can_see_table_headers(proposed_market, page: Page):
         "Settlement asset",
         "State",
         "Parent market",
-        "Voting",
         "Closing date",
         "Enactment date",
         "",
@@ -83,10 +82,6 @@ def test_renders_markets_correctly(proposed_market, page: Page):
         row.locator('[col-id="terms.change.successorConfiguration.parentMarketId"]')
     ).to_have_text("-")
 
-    # 6001-MARK-054
-    # 6001-MARK-055
-    expect(row.get_by_test_id("vote-progress-bar-against")).to_be_visible()
-
     # 6001-MARK-056
     expect(row.locator('[col-id="closing-date"]')).not_to_be_empty()
 
@@ -124,8 +119,8 @@ def test_can_drag_and_drop_columns(proposed_market, page: Page):
     page.goto("/#/markets/all")
     page.click('[data-testid="Proposed markets"]')
     col_market = page.locator('[col-id="market"]').first
-    col_vote = page.locator('[col-id="voting"]').first
-    col_market.drag_to(col_vote)
+    col_state = page.locator('[col-id="state"]').first
+    col_market.drag_to(col_state)
 
     # Check the attribute of the dragged element
     attribute_value = col_market.get_attribute("aria-colindex")

apps/trading/e2e/tests/settings/test_settings.py

@@ -32,12 +32,12 @@ def test_share_usage_data(page: Page):
 
 # Define a mapping of icon selectors to toast selectors
 ICON_TO_TOAST = {
-    'aria-label="arrow-top-left icon"': 'class="group absolute z-20 top-0 left-0 max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
-    'aria-label="arrow-up icon"': 'class="group absolute z-20 top-0 left-[50%] translate-x-[-50%] max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
-    'aria-label="arrow-top-right icon"': 'class="group absolute z-20 top-0 right-0 max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
-    'aria-label="arrow-bottom-left icon"': 'class="group absolute z-20 bottom-0 left-0 max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
-    'aria-label="arrow-down icon"': 'class="group absolute z-20 bottom-0 left-[50%] translate-x-[-50%] max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
-    'aria-label="arrow-bottom-right icon"': 'class="group absolute z-20 bottom-0 right-0 max-w-full max-h-full overflow-x-hidden overflow-y-auto p-4"',
+    'aria-label="arrow-top-left icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
+    'aria-label="arrow-up icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
+    'aria-label="arrow-top-right icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
+    'aria-label="arrow-bottom-left icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
+    'aria-label="arrow-down icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
+    'aria-label="arrow-bottom-right icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
 }
 
 

apps/trading/e2e/tests/transfer/test_transfer_key_to_key.py

@@ -42,7 +42,7 @@ def test_transfer_submit(continuous_market, vega: VegaService, page: Page):
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}1\.00 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView in block explorerTransferTo .{6}….{6}1\.00 tDAI")
     actual_confirmation_text = page.get_by_test_id('toast-content').text_content()
     assert expected_confirmation_text.search(actual_confirmation_text), f"Expected pattern not found in {actual_confirmation_text}"
     
@@ -129,6 +129,6 @@ def test_transfer_vesting_below_minimum(continuous_market, vega: VegaService, pa
     vega.forward("10s")
     vega.wait_fn(1)
     vega.wait_for_total_catchup()
-    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmed View in block explorerTransferTo .{6}….{6}0\.00001 tDAI")
+    expected_confirmation_text = re.compile(r"Transfer completeYour transaction has been confirmedView in block explorerTransferTo .{6}….{6}0\.00001 tDAI")
     actual_confirmation_text = page.get_by_test_id('toast-content').text_content()
     assert expected_confirmation_text.search(actual_confirmation_text), f"Expected pattern not found in {actual_confirmation_text}"

apps/trading/lib/i18n/index.ts

@@ -66,7 +66,18 @@ i18n
       'environment',
       'fills',
       'funding-payments',
+      'ledger',
+      'liquidity',
+      'market-depth',
+      'markets',
+      'orders',
+      'positions',
+      'trades',
       'trading',
+      'ui-toolkit',
+      'utils',
+      'wallet',
+      'web3',
     ],
     defaultNS: 'trading',
     nsSeparator: false,

libs/i18n/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/i18n';
+
 import en_accounts from './locales/en/accounts.json';
 import en_assets from './locales/en/assets.json';
 import en_candles_chart from './locales/en/candles-chart.json';
@@ -12,8 +13,11 @@ import en_governance from './locales/en/governance.json';
 import en_trading from './locales/en/trading.json';
 import en_markets from './locales/en/markets.json';
 import en_web3 from './locales/en/web3.json';
-
+import en_proposals from './locales/en/proposals.json';
 import en_positions from './locales/en/positions.json';
+import en_trades from './locales/en/trading.json';
+import en_ui_toolkit from './locales/en/ui-toolkit.json';
+
 export const locales = {
   en: {
     accounts: en_accounts,
@@ -30,5 +34,8 @@ export const locales = {
     markets: en_markets,
     web3: en_web3,
     positions: en_positions,
+    proposals: en_proposals,
+    trades: en_trades,
+    'ui-toolkit': en_ui_toolkit,
   },
 };

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

@@ -0,0 +1 @@
+{}

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

@@ -139,5 +139,5 @@
   "View settlement data specification": "View settlement data specification",
   "View settlement schedule specification": "View settlement schedule specification",
   "View termination specification": "View termination specification",
-  "Within %s seconds": "Within %s seconds"
+  "Within {{horizonSecs}} seconds": "Within {{horizonSecs}} seconds"
 }

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

@@ -0,0 +1,46 @@
+{
+  "[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.",
+  "Changes have been proposed for this market.": "Changes have been proposed for this market.",
+  "Closing date": "Closing date",
+  "Confirm transaction in wallet": "Confirm transaction in wallet",
+  "Enactment date: {{date}}": "Enactment date: {{date}}",
+  "Enactment date": "Enactment date",
+  "estimated time to protocol upgrade": "estimated time to protocol upgrade",
+  "estimating...": "estimating...",
+  "Market": "Market",
+  "Network upgrade in {{countdown}}": "Network upgrade in {{countdown}}",
+  "No proposed markets": "No proposed markets",
+  "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",
+  "Proposal declined": "Proposal declined",
+  "Proposal enacted": "Proposal enacted",
+  "Proposal failed": "Proposal failed",
+  "Proposal passed": "Proposal passed",
+  "Proposal rejected": "Proposal rejected",
+  "Proposal submitted": "Proposal submitted",
+  "Proposal waiting for node vote": "Proposal waiting for node vote",
+  "Rejection reason: {{reason}}": "Rejection reason: {{reason}}",
+  "Settlement asset": "Settlement asset",
+  "State": "State",
+  "Submission failed": "Submission failed",
+  "The network is being upgraded to {{vegaReleaseTag}}": "The network is being upgraded to {{vegaReleaseTag}}",
+  "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}": "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}",
+  "Trading activity will be interrupted, manage your risk appropriately.": "Trading activity will be interrupted, manage your risk appropriately.",
+  "Trading and other network activity has stopped until the upgrade is complete.": "Trading and other network activity has stopped until the upgrade is complete.",
+  "Transaction complete": "Transaction complete",
+  "Transaction failed": "Transaction failed",
+  "Unknown proposal {{proposalState}}": "Unknown proposal {{proposalState}}",
+  "Update <0>{{key}}</0> to {{value}}": "Update <0>{{key}}</0> to {{value}}",
+  "View details": "View details",
+  "View in block explorer": "View in block explorer",
+  "View proposal details": "View proposal details",
+  "View proposal": "View proposal",
+  "Voting": "Voting",
+  "Your transaction has been confirmed": "Your transaction has been confirmed"
+}

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

@@ -0,0 +1,6 @@
+{
+  "Created at": "Created at",
+  "No trades": "No trades",
+  "Price": "Price",
+  "Size": "Size"
+}

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

@@ -2,6 +2,7 @@
   "(Combined set volume {{runningVolume}} over last {{epochs}} epochs)": "(Combined set volume {{runningVolume}} over last {{epochs}} epochs)",
   "(Created at: {{createdAt}})": "(Created at: {{createdAt}})",
   "{{amount}} $VEGA staked": "{{amount}} $VEGA staked",
+  "{{assetSymbol}} Reward pot": "{{assetSymbol}} Reward pot",
   "{{checkedAssets}} Assets": "{{checkedAssets}} Assets",
   "{{distance}} ago": "{{distance}} ago",
   "{{instrumentCode}} liquidity provision": "{{instrumentCode}} liquidity provision",
@@ -17,7 +18,9 @@
   "Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction": "Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction",
   "Asset (1)": "Asset (1)",
   "Assets": "Assets",
+  "Available to withdraw this epoch": "Available to withdraw this epoch",
   "Base commission rate": "Base commission rate",
+  "Base rate": "Base rate",
   "Best bid": "Best bid",
   "Best offer": "Best offer",
   "Browse": "Browse",
@@ -71,6 +74,7 @@
   "Discounts are applied automatically during trading based on the key(s) used": "Discounts are applied automatically during trading based on the key(s) used",
   "Docs": "Docs",
   "Earn commission & stake rewards": "Earn commission & stake rewards",
+  "Earned by me": "Earned by me",
   "Enactment date reached and usual auction exit checks pass": "Enactment date reached and usual auction exit checks pass",
   "Environment not configured": "Environment not configured",
   "epochs in referral set": "epochs in referral set",
@@ -96,6 +100,7 @@
   "Funding Rate": "Funding Rate",
   "Funding rate": "Funding rate",
   "Futures": "Futures",
+  "From epoch": "From epoch",
   "Generate a referral code to share with your friends and start earning commission.": "Generate a referral code to share with your friends and start earning commission.",
   "Generate code": "Generate code",
   "Get started": "Get started",
@@ -109,6 +114,7 @@
   "Help identify bugs and improve the service by sharing anonymous usage data.": "Help identify bugs and improve the service by sharing anonymous usage data.",
   "Help us identify bugs and improve Vega Governance by sharing anonymous usage data.": "Help us identify bugs and improve Vega Governance by sharing anonymous usage data.",
   "Hide closed markets": "Hide closed markets",
+  "Hoarder reward multiplier": "Hoarder reward multiplier",
   "How it works": "How it works",
   "I want a code": "I want a code",
   "Improve vega console": "Improve vega console",
@@ -122,6 +128,7 @@
   "Liquidity": "Liquidity",
   "Liquidity fees": "Liquidity fees",
   "Liquidity supplied": "Liquidity supplied",
+  "Locked {{assetSymbol}}": "Locked {{assetSymbol}}",
   "Low fees and no cost to place orders": "Low fees and no cost to place orders",
   "Mainnet status & incidents": "Mainnet status & incidents",
   "Make withdrawal": "Make withdrawal",
@@ -157,6 +164,7 @@
   "No perpetual markets.": "No perpetual markets.",
   "No referral program active": "No referral program active",
   "No rejected orders": "No rejected orders",
+  "No rewards": "No rewards",
   "No thanks": "No thanks",
   "No third party has access to your funds.": "No third party has access to your funds.",
   "No volume discount program active": "No volume discount program active",
@@ -165,6 +173,7 @@
   "Non-custodial and pseudonymous": "Non-custodial and pseudonymous",
   "None": "None",
   "Number of traders": "Number of traders",
+  "Not connected": "Not connected",
   "Open": "Open",
   "Open a position": "Open a position",
   "Open markets": "Open markets",
@@ -176,7 +185,7 @@
   "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 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",
   "Portfolio": "Portfolio",
   "Positions": "Positions",
@@ -193,6 +202,7 @@
   "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",
   "Referral benefits": "Referral benefits",
   "Referral discount": "Referral discount",
   "referral-statistics-commission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
@@ -205,6 +215,9 @@
   "Required epochs": "Required epochs",
   "Required for next tier": "Required for next tier",
   "Resources": "Resources",
+  "Rewards": "Rewards",
+  "Rewards history": "Rewards history",
+  "Rewards multipliers": "Rewards multipliers",
   "SCCR": "SCCR",
   "Search": "Search",
   "See all markets": "See all markets",
@@ -229,10 +242,12 @@
   "Status": "Status",
   "Stop": "Stop",
   "Stop orders": "Stop orders",
+  "Streak reward multiplier": "Streak reward multiplier",
   "Successor of a market": "Successor of a market",
   "Successors to this market have been proposed": "Successors to this market have been proposed",
   "Supplied stake": "Supplied stake",
   "Suspended due to price or liquidity monitoring trigger": "Suspended due to price or liquidity monitoring trigger",
+  "to": "to",
   "Target stake": "Target stake",
   "The amount of fees paid to liquidity providers across the whole market during the last epoch {{epoch}}.": "The amount of fees paid to liquidity providers across the whole market during the last epoch {{epoch}}.",
   "The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee": "The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee",
@@ -254,6 +269,7 @@
   "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",
   "Total fee before discount": "Total fee before discount",
   "Trader": "Trader",
@@ -267,6 +283,10 @@
   "Transfer": "Transfer",
   "Unknown": "Unknown",
   "Unknown settlement date": "Unknown settlement date",
+  "Vega Reward pot": "Vega Reward pot",
+  "Vesting": "Vesting",
+  "Vesting {{assetSymbol}}": "Vesting {{assetSymbol}}",
+  "Vesting multiplier": "Vesting multiplier",
   "View as party": "View as party",
   "View liquidity provision table": "View liquidity provision table",
   "View on Explorer": "View on Explorer",
@@ -284,6 +304,7 @@
   "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.",

libs/i18n/src/locales/en/ui-toolkit.json

@@ -0,0 +1,21 @@
+{
+  "{{fee}} Fee": "{{fee}} Fee",
+  "Auction Trigger stake {{trigger}}": "Auction Trigger stake {{trigger}}",
+  "Collapse": "Collapse",
+  "Copied": "Copied",
+  "Dark mode": "Dark mode",
+  "Dismiss all toasts": "Dismiss all toasts",
+  "Dismiss all": "Dismiss all",
+  "Exit view as": "Exit view as",
+  "Expand": "Expand",
+  "Light mode": "Light mode",
+  "Loading...": "Loading...",
+  "No data": "No data",
+  "Providers greater than 2x target stake not shown": "Providers greater than 2x target stake not shown",
+  "Show more": "Show more",
+  "Something went wrong: {{errorMessage}}": "Something went wrong: {{errorMessage}}",
+  "Target stake {{target}}": "Target stake {{target}}",
+  "This is an example of a toast notification": "This is an example of a toast notification",
+  "Try again": "Try again",
+  "Viewing as Vega user: {{pubKey}}": "Viewing as Vega user: {{pubKey}}"
+}

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -723,7 +723,7 @@ export const PriceMonitoringBoundsInfoPanel = ({
           })}
         </p>
         <p className="col-span-1 text-right">
-          {t('Within %s seconds', {
+          {t('Within {{horizonSecs}} seconds', {
             horizonSecs: formatNumber(trigger.horizonSecs),
           })}
         </p>

libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx

@@ -189,7 +189,7 @@ export const OracleFullProfile = ({
                         'verifyProofs',
                         'Verify {{count}} proofs of ownership',
                         {
-                          proofs: signedMessageProofs,
+                          count: signedMessageProofs.length,
                         }
                       )}{' '}
                       <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={13} />

libs/markets/src/lib/use-t.jsx

@@ -1,3 +1,3 @@
 import { useTranslation } from 'react-i18next';
 
-export const useT = () => useTranslation('funding-payments').t;
+export const useT = () => useTranslation('markets').t;

libs/proposals/src/components/asset-proposal-notification.tsx

@@ -1,8 +1,8 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { useUpdateProposal } from '../lib';
+import { useT } from '../use-t';
 
 type AssetProposalNotificationProps = {
   assetId?: string;
@@ -10,6 +10,7 @@ type AssetProposalNotificationProps = {
 export const AssetProposalNotification = ({
   assetId,
 }: AssetProposalNotificationProps) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: assetId,

libs/proposals/src/components/market-proposal-notification.tsx

@@ -1,8 +1,8 @@
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { useUpdateProposal } from '../lib';
+import { useT } from '../use-t';
 
 type MarketProposalNotificationProps = {
   marketId?: string;
@@ -10,6 +10,7 @@ type MarketProposalNotificationProps = {
 export const MarketProposalNotification = ({
   marketId,
 }: MarketProposalNotificationProps) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: marketId,
@@ -29,7 +30,7 @@ export const MarketProposalNotification = ({
       </div>
     );
     return (
-      <div className="border-l border-default pl-1 pr-1 pb-1 min-w-min whitespace-nowrap">
+      <div className="border-default min-w-min whitespace-nowrap border-l pb-1 pl-1 pr-1">
         <Notification
           intent={Intent.Warning}
           message={message}

libs/proposals/src/components/proposal-actions-dropdown.tsx

@@ -5,10 +5,11 @@ import {
   Link,
   ActionsDropdown,
 } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { useT } from '../use-t';
 
 export const ProposalActionsDropdown = ({ id }: { id: string }) => {
+  const t = useT();
   const linkCreator = useLinks(DApp.Governance);
 
   return (

libs/proposals/src/components/proposals-list/proposals-list.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useProposalsListQuery } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useColumnDefs } from './use-column-defs';
+import { useT } from '../../use-t';
 
 export const getNewMarketProposals = (data: ProposalListFieldsFragment[]) =>
   data.filter((proposal) =>
@@ -30,6 +30,7 @@ interface ProposalListProps {
 }
 
 export const ProposalsList = ({ cellRenderers }: ProposalListProps) => {
+  const t = useT();
   const { data } = useProposalsListQuery({
     variables: {
       proposalType: Types.ProposalType.TYPE_NEW_MARKET,

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -8,7 +8,6 @@ import {
 } from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
@@ -19,8 +18,11 @@ import {
 } from '@vegaprotocol/types';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { ProposalActionsDropdown } from '../proposal-actions-dropdown';
+import { useT } from '../../use-t';
 
 export const useColumnDefs = () => {
+  const t = useT();
+
   const columnDefs: ColDef[] = useMemo(() => {
     return compact([
       {
@@ -124,7 +126,7 @@ export const useColumnDefs = () => {
         },
       },
     ]);
-  }, []);
+  }, [t]);
 
   return columnDefs;
 };

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

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import classNames from 'classnames';
@@ -9,6 +8,8 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { useContext } from 'react';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 export enum ProtocolUpgradeCountdownMode {
   IN_BLOCKS,
@@ -21,6 +22,7 @@ type ProtocolUpgradeCountdownProps = {
 export const ProtocolUpgradeCountdown = ({
   mode = ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING,
 }: ProtocolUpgradeCountdownProps) => {
+  const t = useT();
   const { theme } = useContext(NavigationContext);
   const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
 
@@ -45,12 +47,13 @@ export const ProtocolUpgradeCountdown = ({
   switch (mode) {
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
-        <>
-          <span className={emphasis}>
-            {Number(data.upgradeBlockHeight) - Number(lastBlockHeight)}
-          </span>{' '}
-          {t('blocks')}
-        </>
+        <Trans
+          defaults="<0>{{count}}</0> blocks"
+          components={[<span className={emphasis}>count</span>]}
+          values={{
+            count: Number(data.upgradeBlockHeight) - Number(lastBlockHeight),
+          }}
+        />
       );
       break;
     case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
@@ -61,7 +64,7 @@ export const ProtocolUpgradeCountdown = ({
           </span>
         ) : (
           <span
-            className={classNames('italic lowercase text-vega-orange-600', {
+            className={classNames('text-vega-orange-600 lowercase italic', {
               '!text-black': theme === 'yellow',
             })}
           >
@@ -80,20 +83,19 @@ export const ProtocolUpgradeCountdown = ({
       <div
         data-testid="protocol-upgrade-counter"
         className={classNames(
-          'flex flex-nowrap gap-1 items-center text-xs py-1 px-2 lg:px-4 h-8',
-          'border rounded',
+          'flex h-8 flex-nowrap items-center gap-1 px-2 py-1 text-xs lg:px-4',
+          'rounded border',
           'border-vega-orange-500 dark:border-vega-orange-500',
           'bg-vega-orange-300 dark:bg-vega-orange-700',
           'text-default',
           {
-            '!bg-transparent !border-black': theme === 'yellow',
+            '!border-black !bg-transparent': theme === 'yellow',
           }
         )}
       >
         <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />{' '}
-        <span className="flex gap-1 flex-nowrap whitespace-nowrap">
-          <span>{t('Network upgrade in')} </span>
-          {countdown}
+        <span className="flex flex-nowrap gap-1 whitespace-nowrap">
+          <span>{t('Network upgrade in {{countdown}}', { countdown })} </span>
         </span>
       </div>
     </a>

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -1,6 +1,5 @@
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 
-import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   Intent,
@@ -14,6 +13,7 @@ import {
 } from '../lib';
 import { useLocalStorageSnapshot } from '@vegaprotocol/react-helpers';
 import { useBlockRising } from '../lib/protocol-upgrade-proposals/use-block-rising';
+import { useT } from '../use-t';
 
 /**
  * A flag determining whether to get the upgrade proposal data from local
@@ -22,6 +22,7 @@ import { useBlockRising } from '../lib/protocol-upgrade-proposals/use-block-risi
 const ALLOW_STORED_PROPOSAL_DATA = true;
 
 export const ProtocolUpgradeInProgressNotification = () => {
+  const t = useT();
   const { data, error } = useNextProtocolUpgradeProposal(undefined, true);
   const [nextUpgrade] = useLocalStorageSnapshot(
     NEXT_PROTOCOL_UPGRADE_PROPOSAL_SNAPSHOT
@@ -71,7 +72,9 @@ export const ProtocolUpgradeInProgressNotification = () => {
   return (
     <NotificationBanner intent={Intent.Danger} className={SHORT}>
       <div className="uppercase">
-        {t('The network is being upgraded to %s', vegaReleaseTag)}
+        {t('The network is being upgraded to {{vegaReleaseTag}}', {
+          vegaReleaseTag,
+        })}
       </div>
       <div>
         {t(

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

@@ -4,11 +4,12 @@ import {
   NotificationBanner,
 } from '@vegaprotocol/ui-toolkit';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
-import { t } from '@vegaprotocol/i18n';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { ProtocolUpgradeCountdownMode } from './protocol-upgrade-countdown';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import { useState } from 'react';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 type ProtocolUpgradeProposalNotificationProps = {
   mode?: ProtocolUpgradeCountdownMode;
@@ -16,6 +17,7 @@ type ProtocolUpgradeProposalNotificationProps = {
 export const ProtocolUpgradeProposalNotification = ({
   mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
 }: ProtocolUpgradeProposalNotificationProps) => {
+  const t = useT();
   const [visible, setVisible] = useState(true);
   const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
   const detailsLink = useProtocolUpgradeProposalLink();
@@ -40,10 +42,13 @@ export const ProtocolUpgradeProposalNotification = ({
   switch (mode) {
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
-        <>
-          <span className="text-vega-orange-500">{blocksLeft}</span>{' '}
-          {t('blocks')}
-        </>
+        <Trans
+          defaults="<0>{{count}}</0> blocks"
+          components={[<span className="text-vega-orange-500">count</span>]}
+          values={{
+            count: blocksLeft,
+          }}
+        />
       );
       break;
     case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
@@ -72,10 +77,13 @@ export const ProtocolUpgradeProposalNotification = ({
       }}
     >
       <div className="uppercase ">
-        {t('The network will upgrade to %s in ', [data.vegaReleaseTag])}
-        {countdown}
+        {t('The network will upgrade to {{vegaReleaseTag}} in {{countdown}}', {
+          vegaReleaseTag: data.vegaReleaseTag,
+          countdown,
+        })}
       </div>
       <div>
+        <Trans />
         {t(
           'Trading activity will be interrupted, manage your risk appropriately.'
         )}{' '}

libs/proposals/src/components/vega-transaction-dialog/vega-transaction-dialog.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Dialog, Icon, Intent, Loader } from '@vegaprotocol/ui-toolkit';
 import { WalletClientError } from '@vegaprotocol/wallet-client';
 import type { VegaTxState } from '../../lib/proposals-hooks/use-vega-transaction';
 import { VegaTxStatus } from '../../lib/proposals-hooks/use-vega-transaction';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useT } from '../../use-t';
 
 export type VegaTransactionContentMap = {
   [C in VegaTxStatus]?: JSX.Element;
@@ -28,8 +28,9 @@ export const VegaTransactionDialog = ({
   icon,
   content,
 }: VegaTransactionDialogProps) => {
+  const t = useT();
   const computedIntent = intent ? intent : getIntent(transaction);
-  const computedTitle = title ? title : getTitle(transaction);
+  const computedTitle = title ? title : getTitle(transaction, t);
   const computedIcon = icon ? icon : getIcon(transaction);
 
   return (
@@ -86,6 +87,7 @@ interface VegaDialogProps {
  * Default dialog content
  */
 export const VegaDialog = ({ transaction }: VegaDialogProps) => {
+  const t = useT();
   const { links, network } = useVegaWallet();
 
   let content = null;
@@ -99,7 +101,7 @@ export const VegaDialog = ({ transaction }: VegaDialogProps) => {
         </p>
         {network !== 'MAINNET' && (
           <p data-testid="testnet-transaction-info">
-            {t('[This is %s transaction only]').replace('%s', network)}
+            {t('[This is {{network}} transaction only]', { network })}
           </p>
         )}
       </>
@@ -176,7 +178,7 @@ const getIntent = (transaction: VegaTxState) => {
   }
 };
 
-const getTitle = (transaction: VegaTxState) => {
+const getTitle = (transaction: VegaTxState, t: ReturnType<typeof useT>) => {
   switch (transaction.status) {
     case VegaTxStatus.Requested:
       return t('Confirm transaction in wallet');

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.tsx

@@ -1,6 +1,5 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   ProposalChangeMapping,
   ProposalRejectionReasonMapping,
@@ -16,6 +15,8 @@ import {
   useOnProposalSubscription,
   type OnProposalFragmentFragment,
 } from './__generated__/Proposal';
+import { Trans } from 'react-i18next';
+import { useT } from '../../use-t';
 
 export const PROPOSAL_STATES_TO_TOAST = [
   ProposalState.STATE_DECLINED,
@@ -27,6 +28,7 @@ const CLOSE_AFTER = 0;
 type Proposal = OnProposalFragmentFragment;
 
 const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
+  const t = useT();
   const change = proposal.terms.change;
   switch (change.__typename) {
     case 'UpdateNetworkParameter':
@@ -43,8 +45,10 @@ const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
           {proposal.state === ProposalState.STATE_REJECTED &&
           proposal.rejectionReason ? (
             <p data-testid="proposal-toast-rejection-reason">
-              {t('Rejection reason:')}{' '}
-              {ProposalRejectionReasonMapping[proposal.rejectionReason]}
+              {t('Rejection reason: {{reason}}', {
+                reason:
+                  ProposalRejectionReasonMapping[proposal.rejectionReason],
+              })}
             </p>
           ) : null}
         </>
@@ -61,24 +65,30 @@ const UpdateNetworkParameterDetails = ({
   if (change.__typename !== 'UpdateNetworkParameter') return null;
   return (
     <p data-testid="proposal-toast-network-param" className="italic">
-      '{t('Update ')}
-      <span className="break-all">{change.networkParameter.key}</span>
-      {t(' to ')}
-      <span>{change.networkParameter.value}</span>'
+      <Trans
+        defaults="Update <0>{{key}}</0> to {{value}}"
+        values={change.networkParameter}
+        components={[<span className="break-all">key</span>]}
+      />
     </p>
   );
 };
 
 export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const change = proposal.terms.change;
 
   // Generates toast's title,
   // e.g. Update market proposal enacted, New transfer proposal open, ...
-  const title = t('%s proposal %s', [
-    change.__typename ? ProposalChangeMapping[change.__typename] : 'Unknown',
-    ProposalStateMapping[proposal.state].toLowerCase(),
-  ]);
+  const title = change.__typename
+    ? t('{{proposalChange}} proposal {{proposalState}}', {
+        proposalChange: ProposalChangeMapping[change.__typename],
+        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
+      })
+    : t('Unknown proposal {{proposalState}}', {
+        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
+      });
 
   const enactment = Date.parse(proposal.terms.enactmentDatetime);
 
@@ -88,7 +98,9 @@ export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
       <ProposalDetails proposal={proposal} />
       {!isNaN(enactment) && (
         <p>
-          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
+          {t('Enactment date: {{date}}', {
+            date: getDateTimeFormat().format(enactment),
+          })}
         </p>
       )}
       <p>

libs/proposals/src/setup-tests.ts

@@ -1,4 +1,17 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
+import '@testing-library/jest-dom';
+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: ['proposals'],
+  defaultNS: 'proposals',
+});
 global.ResizeObserver = ResizeObserver;

libs/proposals/src/use-t.ts

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'proposals';
+export const useT = () => useTranslation(ns).t;

libs/proposals/src/utils/proposal-dialog-helpers.tsx

@@ -1,11 +1,12 @@
 import { ProposalState } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
 import { Icon, Intent } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
+import { useT } from '../use-t';
 
-export const getProposalDialogTitle = (
+export const useGetProposalDialogTitle = (
   status?: ProposalState
 ): string | undefined => {
+  const t = useT();
   if (!status) {
     return;
   }

libs/trades/__mocks__/react-i18next.ts

@@ -0,0 +1,3 @@
+export const useTranslation = () => ({
+  t: (label: string) => label,
+});

libs/trades/src/lib/trades-manager.tsx

@@ -2,8 +2,8 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
 import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
-import { t } from '@vegaprotocol/i18n';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { useT } from './use-t';
 
 interface TradesContainerProps {
   marketId: string;
@@ -14,6 +14,7 @@ export const TradesManager = ({
   marketId,
   gridProps,
 }: TradesContainerProps) => {
+  const t = useT();
   const update = useDealTicketFormValues((state) => state.updateAll);
 
   const { data, error } = useDataProvider({

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

@@ -10,7 +10,6 @@ import {
   addDecimalsFormatNumber,
   getTimeFormat,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   type ColDef,
   type CellClassParams,
@@ -20,6 +19,7 @@ import {
 import { type AgGridReactProps } from 'ag-grid-react';
 import { type Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
+import { useT } from './use-t';
 
 export const BUY_CLASS = 'text-market-green-600 dark:text-market-green';
 export const SELL_CLASS = 'text-market-red dark:text-market-red';
@@ -51,6 +51,7 @@ interface Props extends AgGridReactProps {
 }
 
 export const TradesTable = ({ onClick, ...props }: Props) => {
+  const t = useT();
   const columnDefs = useMemo<ColDef[]>(
     () => [
       {
@@ -118,7 +119,7 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
         },
       },
     ],
-    [onClick]
+    [onClick, t]
   );
   return (
     <AgGrid

libs/trades/src/lib/use-t.ts

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'trades';
+export const useT = () => useTranslation(ns).t;

libs/ui-toolkit/__mocks__/react-i18next.ts

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

libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx

@@ -1,7 +1,7 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Button } from '../button';
+import { useT } from '../../use-t';
 
 interface AsyncRendererProps<T> {
   loading: boolean;
@@ -28,15 +28,18 @@ export function AsyncRenderer<T = object>({
   render,
   reload,
 }: AsyncRendererProps<T>) {
+  const t = useT();
   if (error) {
     if (!data || (Array.isArray(data) && !data.length)) {
       return (
-        <div className="h-full flex items-center justify-center">
-          <div className="h-12 flex flex-col  items-center">
+        <div className="flex h-full items-center justify-center">
+          <div className="flex h-12 flex-col  items-center">
             <Splash>
               {errorMessage
                 ? errorMessage
-                : t(`Something went wrong: ${error.message}`)}
+                : t('Something went wrong: {{errorMessage}}', {
+                    errorMessage: error.message,
+                  })}
             </Splash>
             {reload && error.message === 'Timeout exceeded' && (
               <Button
@@ -77,6 +80,7 @@ export function AsyncRendererInline<T>({
   render,
   reload,
 }: AsyncRendererProps<T>) {
+  const t = useT();
   const wrapperClasses = 'text-sm';
   if (error) {
     if (!data) {
@@ -85,7 +89,9 @@ export function AsyncRendererInline<T>({
           <p>
             {errorMessage
               ? errorMessage
-              : t(`Something went wrong: ${error.message}`)}
+              : t('Something went wrong: {{errorMessage}}', {
+                  errorMessage: error.message,
+                })}
           </p>
           {reload && error.message === 'Timeout exceeded' && (
             <Button

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { VegaIcon, VegaIconNames } from '../icon';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../use-t';
 
 const itemClass = classNames(
   'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@@ -214,6 +214,7 @@ export const DropdownMenuCopyItem = ({
   value: string;
   text: string;
 }) => {
+  const t = useT();
   const [copied, setCopied] = useCopyTimeout();
 
   return (

libs/ui-toolkit/src/components/healthbar/healthbar.tsx

@@ -3,14 +3,14 @@ import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { BigNumber } from 'bignumber.js';
 import { getIntentBackground, Intent } from '../../utils/intent';
 import { Indicator } from '../indicator';
 import { Tooltip } from '../tooltip';
+import { useT } from '../../use-t';
 
 const Remainder = () => (
-  <div className="bg-greys-light-200 h-[inherit] relative flex-1" />
+  <div className="bg-greys-light-200 relative h-[inherit] flex-1" />
 );
 
 const Target = ({
@@ -22,6 +22,7 @@ const Target = ({
   target: string;
   decimals: number;
 }) => {
+  const t = useT();
   return (
     <Tooltip
       description={
@@ -30,20 +31,22 @@ const Target = ({
             <Indicator variant={Intent.None} />
           </div>
           <span>
-            {t('Target stake')} {addDecimalsFormatNumber(target, decimals)}
+            {t('Target stake {{target}}', {
+              target: addDecimalsFormatNumber(target, decimals),
+            })}{' '}
           </span>
         </div>
       }
     >
       <div
         className={classNames(
-          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
+          'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
         )}
         style={{ left: '50%' }}
       >
         <div
           className={classNames(
-            'health-target w-0.5 bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-x-150 group-hover:scale-y-108',
+            'health-target bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-y-108 w-0.5 group-hover:scale-x-150',
             {
               'h-6': !isLarge,
               'h-12': isLarge,
@@ -66,6 +69,7 @@ const AuctionTarget = ({
   rangeLimit: number;
   decimals: number;
 }) => {
+  const t = useT();
   const leftPosition = new BigNumber(trigger).div(rangeLimit).multipliedBy(100);
   return (
     <Tooltip
@@ -75,15 +79,16 @@ const AuctionTarget = ({
             <Indicator variant={Intent.None} />
           </div>
           <span>
-            {t('Auction Trigger stake')}{' '}
-            {addDecimalsFormatNumber(trigger, decimals)}
+            {t('Auction Trigger stake {{trigger}}', {
+              trigger: addDecimalsFormatNumber(trigger, decimals),
+            })}
           </span>
         </div>
       }
     >
       <div
         className={classNames(
-          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
+          'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
         )}
         style={{
           left: `${leftPosition}%`,
@@ -91,7 +96,7 @@ const AuctionTarget = ({
       >
         <div
           className={classNames(
-            'health-target w-0.5 group-hover:scale-x-150 group-hover:scale-y-108 dashed-background',
+            'health-target group-hover:scale-y-108 dashed-background w-0.5 group-hover:scale-x-150',
             {
               'h-6': !isLarge,
               'h-12': isLarge,
@@ -120,6 +125,7 @@ const Level = ({
   decimals: number;
   intent: Intent;
 }) => {
+  const t = useT();
   const width = new BigNumber(commitmentAmount)
     .div(rangeLimit)
     .multipliedBy(100)
@@ -134,9 +140,7 @@ const Level = ({
       <div className="mt-1.5 inline-flex">
         <Indicator variant={intent} />
       </div>
-      <span>
-        {formattedFee} {t('Fee')}
-      </span>
+      <span>{t('{{fee}} Fee', { fee: formattedFee })}</span>
       <div className="flex  flex-col">
         <span>
           {prevLevel ? addDecimalsFormatNumber(prevLevel, decimals) : '0'} -{' '}
@@ -149,14 +153,14 @@ const Level = ({
   return (
     <Tooltip description={tooltipContent}>
       <div
-        className={classNames(`relative h-[inherit] w-full group min-w-[1px]`)}
+        className="group relative h-[inherit] w-full min-w-[1px]"
         style={{
           width: `${width}%`,
         }}
       >
         <div
           className={classNames(
-            'relative w-full h-[inherit] group-hover:scale-y-150',
+            'relative h-[inherit] w-full group-hover:scale-y-150',
             getIntentBackground(intent)
           )}
           style={{ opacity }}
@@ -167,7 +171,7 @@ const Level = ({
 };
 
 const Full = () => (
-  <div className="bg-transparent w-full h-[inherit] absolute bottom-0 left-0" />
+  <div className="absolute bottom-0 left-0 h-[inherit] w-full bg-transparent" />
 );
 
 interface Levels {
@@ -190,6 +194,7 @@ export const HealthBar = ({
   intent: Intent;
   triggerRatio?: string;
 }) => {
+  const t = useT();
   const targetNumber = parseInt(target, 10);
   const rangeLimit = targetNumber * 2;
 
@@ -220,7 +225,7 @@ export const HealthBar = ({
         })}
       >
         <div
-          className={classNames('health-inner relative w-full flex', {
+          className={classNames('health-inner relative flex w-full', {
             'h-4': !isLarge,
             'h-8': isLarge,
           })}
@@ -228,8 +233,8 @@ export const HealthBar = ({
           <Full />
 
           <div
-            className="health-bars h-[inherit] flex w-full
-              gap-0.5 outline outline-vega-light-200 dark:outline-vega-dark-200"
+            className="health-bars outline-vega-light-200 dark:outline-vega-dark-200 flex
+              h-[inherit] w-full gap-0.5 outline"
           >
             {levels.map((p, index) => {
               const { commitmentAmount, fee } = p;
@@ -253,11 +258,11 @@ export const HealthBar = ({
               <Tooltip
                 description={
                   <div className="text-vega-dark-100 dark:text-vega-light-200">
-                    t( 'Providers greater than 2x target stake not shown' )
+                    {t('Providers greater than 2x target stake not shown')}
                   </div>
                 }
               >
-                <div className="h-[inherit] relative flex-1 leading-4">...</div>
+                <div className="relative h-[inherit] flex-1 leading-4">...</div>
               </Tooltip>
             )}
           </div>

libs/ui-toolkit/src/components/show-more/show-more.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { useRef, useState, useEffect } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Button } from '../button';
 import type { ReactNode } from 'react';
+import { useT } from '../../use-t';
 
 type ShowMoreProps = {
   children: ReactNode;
@@ -15,6 +15,7 @@ export const ShowMore = ({
   closedMaxHeightPx = 125,
   overlayColourOverrides,
 }: ShowMoreProps) => {
+  const t = useT();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [expanded, setExpanded] = useState(false);
 

libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx

@@ -1,7 +1,7 @@
-import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { SunIcon, MoonIcon } from './icons';
 import { Toggle } from '../toggle';
+import { useT } from '../../use-t';
 
 export const ThemeSwitcher = ({
   className,
@@ -10,6 +10,7 @@ export const ThemeSwitcher = ({
   className?: string;
   withMobile?: boolean;
 }) => {
+  const t = useT();
   const { theme, setTheme } = useThemeSwitcher();
   const button = (
     <button
@@ -35,7 +36,7 @@ export const ThemeSwitcher = ({
   ];
   return withMobile ? (
     <>
-      <div className="flex grow gap-6 md:hidden whitespace-nowrap justify-between">
+      <div className="flex grow justify-between gap-6 whitespace-nowrap md:hidden">
         {button}{' '}
         <Toggle
           name="theme-switch"

libs/ui-toolkit/src/components/toast/toast-position-setter.tsx

@@ -1,28 +1,27 @@
 import classNames from 'classnames';
-import { t } from '@vegaprotocol/i18n';
 import { IconNames } from '@blueprintjs/icons';
 import { Icon } from '../icon';
 import { ToastPosition, useToastsConfiguration, useToasts } from './use-toasts';
 import { useCallback } from 'react';
 import { Intent } from '../../utils/intent';
-
-const TEST_TOAST = {
-  id: 'test-toast',
-  intent: Intent.Primary,
-  content: <>{t('This is an example of a toast notification')}</>,
-  onClose: () => useToasts.getState().remove('test-toast'),
-};
+import { useT } from '../../use-t';
 
 export const ToastPositionSetter = () => {
+  const t = useT();
   const setPostion = useToastsConfiguration((store) => store.setPosition);
   const position = useToastsConfiguration((store) => store.position);
   const setToast = useToasts((store) => store.setToast);
   const handleChange = useCallback(
     (position: ToastPosition) => {
       setPostion(position);
-      setToast(TEST_TOAST);
+      setToast({
+        id: 'test-toast',
+        intent: Intent.Primary,
+        content: <>{t('This is an example of a toast notification')}</>,
+        onClose: () => useToasts.getState().remove('test-toast'),
+      });
     },
-    [setToast, setPostion]
+    [setToast, setPostion, t]
   );
   const buttonCssClasses =
     'flex items-center px-1 py-1 relative rounded bg-vega-clight-400 dark:bg-vega-cdark-400';

libs/ui-toolkit/src/components/toast/toast.tsx

@@ -17,7 +17,7 @@ import {
 import { Intent } from '../../utils/intent';
 import { Icon, VegaIcon, VegaIconNames } from '../icon';
 import { Loader } from '../loader';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../use-t';
 
 export type ToastContent = JSX.Element | undefined;
 
@@ -83,6 +83,7 @@ export const CollapsiblePanel = forwardRef<
   HTMLDivElement,
   CollapsiblePanelProps & HTMLAttributes<HTMLDivElement>
 >(({ children, className, actions, ...props }, ref) => {
+  const t = useT();
   const [collapsed, setCollapsed] = useState(true);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions

libs/ui-toolkit/src/components/toast/toasts-container.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { usePrevious } from '@vegaprotocol/react-helpers';
 import classNames from 'classnames';
 import type { Ref } from 'react';
@@ -9,6 +8,7 @@ import type { Toasts } from './use-toasts';
 import { ToastPosition, useToasts, useToastsConfiguration } from './use-toasts';
 
 import { Portal } from '@radix-ui/react-portal';
+import { useT } from '../../use-t';
 
 type ToastsContainerProps = {
   toasts: Toasts;
@@ -21,6 +21,7 @@ export const ToastsContainer = ({
   order = 'asc',
   showHidden = false,
 }: ToastsContainerProps) => {
+  const t = useT();
   const ref = useRef<HTMLDivElement>();
   const closeAll = useToasts((store) => store.closeAll);
   const position = useToastsConfiguration((store) => store.position);
@@ -55,17 +56,17 @@ export const ToastsContainer = ({
         'absolute z-20',
         { 'bottom-0 right-0': position === ToastPosition.BottomRight },
         { 'bottom-0 left-0': position === ToastPosition.BottomLeft },
-        { 'top-0 left-0': position === ToastPosition.TopLeft },
-        { 'top-0 right-0': position === ToastPosition.TopRight },
+        { 'left-0 top-0': position === ToastPosition.TopLeft },
+        { 'right-0 top-0': position === ToastPosition.TopRight },
         {
-          'top-0 left-[50%] translate-x-[-50%]':
+          'left-[50%] top-0 translate-x-[-50%]':
             position === ToastPosition.TopCenter,
         },
         {
           'bottom-0 left-[50%] translate-x-[-50%]':
             position === ToastPosition.BottomCenter,
         },
-        'max-w-full max-h-full overflow-x-hidden overflow-y-auto',
+        'max-h-full max-w-full overflow-y-auto overflow-x-hidden',
         {
           'p-4': validToasts.length > 0, // only apply padding when toasts showing, otherwise a small section of the screen is covered
           hidden: validToasts.length === 0,
@@ -89,9 +90,9 @@ export const ToastsContainer = ({
             })}
         <div
           className={classNames(
-            'absolute w-full top-[-38px] right-0 z-20',
+            'absolute right-0 top-[-38px] z-20 w-full',
             'transition-opacity',
-            'opacity-0 group-hover:opacity-50 hover:!opacity-100',
+            'opacity-0 hover:!opacity-100 group-hover:opacity-50',
             {
               hidden: validToasts.length === 0,
             }

libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx

@@ -4,7 +4,7 @@ import { forwardRef, type ComponentProps, type ReactNode } from 'react';
 import { VegaIcon, VegaIconNames } from '../icon';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../use-t';
 
 const itemClass = classNames(
   'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@@ -188,6 +188,7 @@ export const TradingDropdownCopyItem = ({
   value: string;
   text: string;
 }) => {
+  const t = useT();
   const [copied, setCopied] = useCopyTimeout();
 
   return (

libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx

@@ -1,12 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
-
 type VegaLogoProps = {
   className?: string;
 };
 export const VegaLogo = ({ className }: VegaLogoProps) => {
   return (
     <svg
-      aria-label={t('Vega logo')}
+      aria-label="Vega"
       className={className || 'h-6'}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -23,7 +21,7 @@ export const VegaLogo = ({ className }: VegaLogoProps) => {
 export const VLogo = ({ className }: { className?: string }) => {
   return (
     <svg
-      aria-label={t('Vega logo')}
+      aria-label="Vega"
       width="29"
       height="34"
       fill="currentColor"

libs/ui-toolkit/src/components/viewing-as-user/index.tsx

@@ -1,7 +1,7 @@
-import { t } from '@vegaprotocol/i18n';
 import { NotificationBanner, SHORT } from '../notification-banner';
 import { Intent } from '../../utils/intent';
 import { TradingButton } from '../trading-button';
+import { useT } from '../../use-t';
 
 export function truncateMiddle(address: string, start = 6, end = 4) {
   if (address.length < 11) return address;
@@ -21,15 +21,14 @@ export const ViewingAsBanner = ({
   pubKey,
   disconnect,
 }: ViewingAsBannerProps) => {
+  const t = useT();
   return (
-    <NotificationBanner
-      data-testid="view-banner"
-      intent={Intent.None}
-      className={SHORT}
-    >
-      <div className="flex justify-between items-baseline">
-        <span>
-          {t('Viewing as Vega user:')} {pubKey && truncateMiddle(pubKey)}{' '}
+    <NotificationBanner intent={Intent.None} className={SHORT}>
+      <div className="flex items-baseline justify-between">
+        <span data-testid="view-banner">
+          {t('Viewing as Vega user: {{pubKey}}', {
+            pubKey: pubKey && truncateMiddle(pubKey),
+          })}
         </span>
         <TradingButton
           intent={Intent.None}

libs/ui-toolkit/src/use-t.ts

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'ui-toolkit';
+export const useT = () => useTranslation(ns).t;

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

@@ -677,10 +677,8 @@ const VegaTxRequestedToastContent = ({ tx }: VegaTxToastContentProps) => {
   );
 };
 
-const VegaTxPendingToastContentProps = (
-  { tx }: VegaTxToastContentProps,
-  t: ReturnType<typeof useT>
-) => {
+const VegaTxPendingToastContent = ({ tx }: VegaTxToastContentProps) => {
+  const t = useT();
   const explorerLink = useLinks(DApp.Explorer);
   return (
     <>
@@ -750,7 +748,7 @@ const VegaTxCompleteToastsContent = ({ tx }: VegaTxToastContentProps) => {
               // eslint-disable-next-line jsx-a11y/anchor-is-valid
               <a
                 href="#"
-                className="inline underline underline-offset-4 cursor-pointer text-inherit break-words"
+                className="inline cursor-pointer break-words text-inherit underline underline-offset-4"
                 data-testid="toast-withdrawal-details"
                 onClick={(e) => {
                   e.preventDefault();
@@ -993,7 +991,7 @@ export const getVegaTransactionContentIntent = (tx: VegaStoredTxState) => {
     content = <VegaTxRequestedToastContent tx={tx} />;
   }
   if (tx.status === VegaTxStatus.Pending) {
-    content = <VegaTxPendingToastContentProps tx={tx} />;
+    content = <VegaTxPendingToastContent tx={tx} />;
   }
   if (tx.status === VegaTxStatus.Complete) {
     content = <VegaTxCompleteToastsContent tx={tx} />;