fix: replacement object and formatting

Co-authored-by: bwallacee <ben@vega.xyz>

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

@@ -17,6 +17,7 @@ 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';
+import en_wallet from './locales/en/wallet.json';
 
 export const locales = {
   en: {
@@ -37,5 +38,6 @@ export const locales = {
     proposals: en_proposals,
     trades: en_trades,
     'ui-toolkit': en_ui_toolkit,
+    wallet: en_wallet,
   },
 };

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/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/wallet.json

@@ -0,0 +1,63 @@
+{
+  "About the Vega wallet": "About the Vega wallet",
+  "Supported browsers": "Supported browsers",
+  "Connect Vega wallet": "Connect Vega wallet",
+  "Get a Vega wallet": "Get a Vega wallet",
+  "Connect securely, deposit funds and approve or reject transactions with the Vega wallet": "Connect securely, deposit funds and approve or reject transactions with the Vega wallet",
+  "Connect": "Connect",
+  "Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
+  "your browser": "your browser",
+  "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
+  "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
+  "Metamask Snap <0>quick start</0>": "Metamask Snap <0>quick start</0>",
+  "Connect directly via Metamask with the Vega Snap for single key support without advanced features.": "Connect directly via Metamask with the Vega Snap for single key support without advanced features.",
+  "Connect via Vega MetaMask Snap": "Connect via Vega MetaMask Snap",
+  "Install Metamask with the Vega Snap for single key support without advanced features.": "Install Metamask with the Vega Snap for single key support without advanced features.",
+  "Install Vega MetaMask Snap": "Install Vega MetaMask Snap",
+  "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>",
+  "Advanced / Other options...": "Advanced / Other options...",
+  "View as party": "View as party",
+  "Get the Vega Wallet": "Get the Vega Wallet",
+  "Custom wallet location": "Custom wallet location",
+  "Go back": "Go back",
+  "Connect the App/CLI": "Connect the App/CLI",
+  "Use the Desktop App/CLI": "Use the Desktop App/CLI",
+  "Enter a custom wallet location": "Enter a custom wallet location",
+  "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>": "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>",
+  "Verifying chain": "Verifying chain",
+  "Successfully connected": "Successfully connected",
+  "Connecting...": "Connecting...",
+  "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.": "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.",
+  "Understand the risk": "Understand the risk",
+  "Cancel": "Cancel",
+  "I agree": "I agree",
+  "Something went wrong": "Something went wrong",
+  "An unknown error occurred": "An unknown error occurred",
+  "Try again": "Try again",
+  "User rejected": "User rejected",
+  "The user rejected the wallet connection": "The user rejected the wallet connection",
+  "Wrong network": "Wrong network",
+  "No wallet detected": "No wallet detected",
+  "Vega browser extension not installed": "Vega browser extension not installed",
+  "Snap failed": "Snap failed",
+  "Could not connect to Vega MetaMask Snap": "Could not connect to Vega MetaMask Snap",
+  "No wallet application running at {{connectorUrl}}": "No wallet application running at {{connectorUrl}}",
+  "No Vega Wallet application running": "No Vega Wallet application running",
+  "Read the docs to troubleshoot": "Read the docs to troubleshoot",
+  "Connection in progress": "Connection in progress",
+  "Approve the connection from your Vega wallet app.": "Approve the connection from your Vega wallet app.",
+  "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".": "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".",
+  "SELECT A VEGA KEY": "SELECT A VEGA KEY",
+  "Select": "Select",
+  "Copy": "Copy",
+  "Disconnect all keys": "Disconnect all keys",
+  "Pubkey must be 64 characters in length": "Pubkey must be 64 characters in length",
+  "Pubkey must be be valid hex": "Pubkey must be be valid hex",
+  "VIEW AS VEGA USER": "VIEW AS VEGA USER",
+  "Browse from the perspective of another Vega user in read-only mode.": "Browse from the perspective of another Vega user in read-only mode.",
+  "Required": "Required",
+  "Browse network": "Browse network",
+  "Checking wallet version": "Checking wallet version",
+  "Checking your wallet is compatible with this app": "Checking your wallet is compatible with this app",
+  "Wrong Network": "Wrong Network"
+}

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/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   VegaIcon,
@@ -9,10 +8,11 @@ import type { ReactNode } from 'react';
 import { MozillaIcon } from './mozilla-icon';
 import { ChromeIcon } from './chrome-icon';
 import { useVegaWallet } from '../use-vega-wallet';
+import { useT } from '../use-t';
 
 export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
-    <h1 data-testid="wallet-dialog-title" className="mb-6 text-2xl font-alpha">
+    <h1 data-testid="wallet-dialog-title" className="font-alpha mb-6 text-2xl">
       {children}
     </h1>
   );
@@ -23,6 +23,7 @@ export const ConnectDialogContent = ({ children }: { children: ReactNode }) => {
 };
 
 export const ConnectDialogFooter = () => {
+  const t = useT();
   const { links } = useVegaWallet();
   const wrapperClasses = classNames(
     'flex justify-center gap-4 mt-4',
@@ -56,7 +57,7 @@ export const BrowserIcon = ({
   const isItMozilla =
     window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   return (
-    <div className="absolute top-0 flex items-center h-8 right-1">
+    <div className="absolute right-1 top-0 flex h-8 items-center">
       {!isItChrome && !isItMozilla ? (
         <>
           <a href={mozillaExtensionUrl} target="_blank" rel="noreferrer">

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -12,7 +12,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useCallback, useState, type ReactNode } from 'react';
 import { type WalletClientError } from '@vegaprotocol/wallet-client';
-import { t } from '@vegaprotocol/i18n';
 import { type Connectors, type VegaConnector } from '../connectors';
 import { DEFAULT_SNAP_VERSION } from '../connectors';
 import {
@@ -46,6 +45,8 @@ import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
 import { SnapStatus, useSnapStatus } from '../use-snap-status';
 import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
 import { useChainId } from './use-chain-id';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 export const CLOSE_DELAY = 1700;
 
@@ -225,6 +226,7 @@ const ConnectorList = ({
   isDesktopWalletRunning: boolean | null;
   snapStatus: SnapStatus;
 }) => {
+  const t = useT();
   const { pubKey, links } = useVegaWallet();
   const title = isBrowserWalletInstalled()
     ? t('Connect Vega wallet')
@@ -248,7 +250,7 @@ const ConnectorList = ({
     ? 'Chrome'
     : isItMozilla
     ? 'Firefox'
-    : 'your browser';
+    : t('your browser');
 
   return (
     <>
@@ -265,34 +267,28 @@ const ConnectorList = ({
             text={extendedText}
             onClick={() => onSelect('injected')}
             title={
-              <>
-                <span>{t('Vega Wallet')}</span>
-                {'  '}
-                <span className="text-xs">{t('full featured')}</span>
-              </>
+              <Trans
+                defaults="Vega Wallet <0>full featured<0>"
+                components={[<span className="text-xs">full featured</span>]}
+              />
             }
             description={t(
-              `Connect with Vega Wallet extension
-              for %s to access all features including key
-              management and detailed transaction views from your
-              browser.`,
-              [browserName]
+              'Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.',
+              { browserName }
             )}
           />
         ) : (
           <div>
             <h1 className="mb-1 text-lg">
-              <span>{t('Vega Wallet')}</span>
-              {'  '}
-              <span className="text-xs"> {t('full featured')}</span>
+              <Trans
+                defaults="Vega Wallet <0>full featured<0>"
+                components={[<span className="text-xs">full featured</span>]}
+              />
             </h1>
             <p className="mb-2 text-sm">
               {t(
-                `Install Vega Wallet extension
-              for %s to access all features including key
-              management and detailed transaction views from your
-              browser.`,
-                [browserName]
+                'Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.',
+                { browserName }
               )}
             </p>
             <GetWalletButton
@@ -307,11 +303,10 @@ const ConnectorList = ({
               <ConnectionOptionWithDescription
                 type="snap"
                 title={
-                  <>
-                    <span>{t('Metamask Snap')}</span>
-                    {'  '}
-                    <span className="text-xs"> {t('quick start')}</span>
-                  </>
+                  <Trans
+                    defaults="Metamask Snap <0>quick start</0>"
+                    components={[<span className="text-xs">quick start</span>]}
+                  />
                 }
                 description={t(
                   `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
@@ -336,11 +331,12 @@ const ConnectorList = ({
                   type="snap"
                   disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
                   title={
-                    <>
-                      <span>{t('Metamask Snap')}</span>
-                      {'  '}
-                      <span className="text-xs"> {t('quick start')}</span>
-                    </>
+                    <Trans
+                      defaults="Metamask Snap <0>quick start</0>"
+                      components={[
+                        <span className="text-xs">quick start</span>,
+                      ]}
+                    />
                   }
                   description={t(
                     `Install Metamask with the Vega Snap for single key support without advanced features.`
@@ -363,11 +359,14 @@ const ConnectorList = ({
                 />
                 {snapStatus === SnapStatus.NOT_SUPPORTED ? (
                   <p className="text-muted pt-1 text-xs leading-tight">
-                    {t('No MetaMask version that supports snaps detected.')}{' '}
-                    {t('Learn more about')}{' '}
-                    <ExternalLink href="https://metamask.io/snaps/">
-                      MetaMask Snaps
-                    </ExternalLink>
+                    <Trans
+                      defaults="No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>"
+                      components={[
+                        <ExternalLink href="https://metamask.io/snaps/">
+                          MetaMask Snaps
+                        </ExternalLink>,
+                      ]}
+                    />
                   </p>
                 ) : null}
               </>
@@ -469,6 +468,7 @@ export const GetWalletButton = ({
   mozillaExtensionUrl?: string;
   className?: string;
 }) => {
+  const t = useT();
   const isItChrome = window.navigator.userAgent.includes('Chrome');
   const isItMozilla =
     window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -599,6 +599,7 @@ const CustomUrlInput = ({
   isDesktopWalletRunning: boolean | null;
   onSelect: (type: WalletType) => void;
 }) => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const [urlInputExpanded, setUrlInputExpanded] = useState(false);
   return urlInputExpanded ? (
@@ -654,18 +655,22 @@ const CustomUrlInput = ({
             </button>
           ) : (
             <p className="text-muted leading-tight">
-              <span className="text-xs">
-                {t(
-                  'No running Desktop App/CLI detected. Open your app now to connect or enter a'
-                )}
-              </span>{' '}
-              <button
-                className="text-xs underline"
-                onClick={() => setUrlInputExpanded(true)}
-                disabled={Boolean(pubKey)}
-              >
-                {t('custom wallet location')}
-              </button>
+              <Trans
+                defaults="<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>"
+                components={[
+                  <span className="text-xs">
+                    No running Desktop App/CLI detected. Open your app now to
+                    connect or enter a
+                  </span>,
+                  <button
+                    className="text-xs underline"
+                    onClick={() => setUrlInputExpanded(true)}
+                    disabled={Boolean(pubKey)}
+                  >
+                    custom wallet location
+                  </button>,
+                ]}
+              />
             </p>
           )}
         </div>

libs/wallet/src/connect-dialog/injected-connector-form.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { Status } from '../use-injected-connector';
 import { ConnectDialogTitle } from './connect-dialog-elements';
 import type { ReactNode } from 'react';
@@ -12,6 +11,7 @@ import {
 import { setAcknowledged } from '../storage';
 import { useVegaWallet } from '../use-vega-wallet';
 import { InjectedConnectorErrors, SnapConnectorErrors } from '../connectors';
+import { useT } from '../use-t';
 
 export const InjectedConnectorForm = ({
   status,
@@ -28,6 +28,7 @@ export const InjectedConnectorForm = ({
   reset: () => void;
   riskMessage?: React.ReactNode;
 }) => {
+  const t = useT();
   const { disconnect } = useVegaWallet();
 
   if (status === Status.Idle) {
@@ -109,7 +110,7 @@ export const InjectedConnectorForm = ({
 
 const Center = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex items-center justify-center my-6">{children}</div>
+    <div className="my-6 flex items-center justify-center">{children}</div>
   );
 };
 
@@ -122,6 +123,7 @@ const Error = ({
   appChainId: string;
   onTryAgain: () => void;
 }) => {
+  const t = useT();
   let title = t('Something went wrong');
   let text: ReactNode | undefined = t('An unknown error occurred');
   const tryAgain: ReactNode | null = (
@@ -139,8 +141,8 @@ const Error = ({
     ) {
       title = t('Wrong network');
       text = t(
-        'To complete your wallet connection, set your wallet network in your app to "%s".',
-        appChainId
+        'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
+        { appChainId }
       );
     } else if (
       error.message === InjectedConnectorErrors.VEGA_UNDEFINED.message

libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx

@@ -1,5 +1,4 @@
 import capitalize from 'lodash/capitalize';
-import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   ButtonLink,
@@ -16,6 +15,7 @@ import { ConnectDialogTitle } from './connect-dialog-elements';
 import { Status } from '../use-json-rpc-connect';
 import { useVegaWallet } from '../use-vega-wallet';
 import { setAcknowledged } from '../storage';
+import { useT } from '../use-t';
 
 export const ServiceErrors = {
   NO_HEALTHY_NODE: 1000,
@@ -39,6 +39,7 @@ export const JsonRpcConnectorForm = ({
   reset: () => void;
   riskMessage?: React.ReactNode;
 }) => {
+  const t = useT();
   const { disconnect } = useVegaWallet();
   if (status === Status.Idle) {
     return null;
@@ -140,7 +141,7 @@ export const JsonRpcConnectorForm = ({
 
 const Center = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex justify-center items-center my-6">{children}</div>
+    <div className="my-6 flex items-center justify-center">{children}</div>
   );
 };
 
@@ -155,6 +156,7 @@ const Error = ({
   appChainId: string;
   onTryAgain: () => void;
 }) => {
+  const t = useT();
   const { links } = useVegaWallet();
   let title = t('Something went wrong');
   let text: ReactNode | undefined = t('An unknown error occurred');
@@ -168,13 +170,15 @@ const Error = ({
     if (error.code === ClientErrors.NO_SERVICE.code) {
       title = t('No wallet detected');
       text = connectorUrl
-        ? t('No wallet application running at %s', connectorUrl)
+        ? t('No wallet application running at {{connectorUrl}}', {
+            connectorUrl,
+          })
         : t('No Vega Wallet application running');
     } else if (error.code === ClientErrors.WRONG_NETWORK.code) {
       title = t('Wrong network');
       text = t(
-        'To complete your wallet connection, set your wallet network in your app to "%s".',
-        appChainId
+        'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
+        { appChainId }
       );
     } else if (error.code === ServiceErrors.NO_HEALTHY_NODE) {
       title = error.title;
@@ -196,9 +200,8 @@ const Error = ({
       text = (
         <>
           {t(
-            `To complete your wallet connection, set your wallet network in your
-            app to %s.`,
-            appChainId
+            'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
+            { appChainId }
           )}
         </>
       );
@@ -213,15 +216,15 @@ const Error = ({
         </span>
       );
     } else {
-      title = t(error.title);
-      text = t(error.message);
+      title = error.title;
+      text = error.message;
     }
   }
 
   return (
     <>
       <ConnectDialogTitle>{title}</ConnectDialogTitle>
-      <p className="text-center mb-2 first-letter:uppercase">{text}</p>
+      <p className="mb-2 text-center first-letter:uppercase">{text}</p>
       {tryAgain}
     </>
   );

libs/wallet/src/connect-dialog/view-connector-form.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   TradingFormGroup,
   TradingInput,
@@ -12,6 +11,7 @@ import { useForm } from 'react-hook-form';
 import type { ViewConnector } from '../connectors';
 import { useVegaWallet } from '../use-vega-wallet';
 import { ConnectDialogTitle } from './connect-dialog-elements';
+import { useT } from '../use-t';
 
 interface FormFields {
   address: string;
@@ -28,6 +28,7 @@ export function ViewConnectorForm({
   onConnect,
   reset,
 }: ViewConnectorFormProps) {
+  const t = useT();
   const { connect } = useVegaWallet();
   const {
     register,

libs/wallet/src/connectors/json-rpc-connector.ts

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { WalletClient, WalletClientError } from '@vegaprotocol/wallet-client';
 import { clearConfig, getConfig, setConfig } from '../storage';
 import type { Transaction, VegaConnector } from './vega-connector';
@@ -7,19 +6,19 @@ import { WalletError } from './vega-connector';
 const VERSION = 'v2';
 
 export const ClientErrors = {
-  NO_SERVICE: new WalletError(t('No service'), 100),
-  INVALID_WALLET: new WalletError(t('Wallet version invalid'), 103),
+  NO_SERVICE: new WalletError('No service', 100),
+  INVALID_WALLET: new WalletError('Wallet version invalid', 103),
   WRONG_NETWORK: new WalletError(
-    t('Wrong network'),
+    'Wrong network',
     104,
-    t('App is configured to work with a different chain')
+    'App is configured to work with a different chain'
   ),
   UNKNOWN: new WalletError(
-    t('Something went wrong'),
+    'Something went wrong',
     105,
-    t('Unknown error occurred')
+    'Unknown error occurred'
   ),
-  NO_CLIENT: new WalletError(t('No client found.'), 106),
+  NO_CLIENT: new WalletError('No client found.', 106),
 } as const;
 
 export class JsonRpcConnector implements VegaConnector {
@@ -156,16 +155,10 @@ export class JsonRpcConnector implements VegaConnector {
     try {
       const result = await fetch(`${this._url}/api/${this.version}/methods`);
       if (!result.ok) {
-        const sent1 = t(
-          'The version of the wallet service running at %s is not supported.',
-          this._url as string
-        );
-        const sent2 = t(
-          'Update the wallet software to a version that expose the API %s.',
-          this.version
-        );
+        const sent1 = `The version of the wallet service running at ${this._url} is not supported.`;
+        const sent2 = `Update the wallet software to a version that expose the API ${this.version}.`;
         const data = `${sent1}\n ${sent2}`;
-        const title = t('Wallet version invalid');
+        const title = 'Wallet version invalid';
         throw new WalletError(title, ClientErrors.INVALID_WALLET.code, data);
       }
       return true;

libs/wallet/src/manage-dialog/manage-dialog.tsx

@@ -1,5 +1,4 @@
 import { truncateByChars } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   Dialog,
@@ -8,6 +7,7 @@ import {
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '../use-vega-wallet';
+import { useT } from '../use-t';
 
 export interface VegaManageDialogProps {
   dialogOpen: boolean;
@@ -18,6 +18,7 @@ export const VegaManageDialog = ({
   dialogOpen,
   setDialogOpen,
 }: VegaManageDialogProps) => {
+  const t = useT();
   const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet();
   return (
     <Dialog
@@ -38,13 +39,13 @@ export const VegaManageDialog = ({
                 className="mb-2 last:mb-0"
               >
                 <div
-                  className="flex justify-between text-sm gap-4"
+                  className="flex justify-between gap-4 text-sm"
                   data-testid={isSelected ? 'selected-key' : ''}
                 >
                   <p data-testid="vega-public-key-full">
                     {truncateByChars(pk.publicKey)}
                   </p>
-                  <div className="flex ml-auto gap-4">
+                  <div className="ml-auto flex gap-4">
                     {!isSelected && (
                       <button
                         onClick={() => {

libs/wallet/src/setup-tests.ts

@@ -1,4 +1,17 @@
 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: ['wallet'],
+  defaultNS: 'wallet',
+});
 
 global.ResizeObserver = ResizeObserver;

libs/wallet/src/use-t.ts

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'wallet';
+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} />;