feat(trading): fix markets i18n namespace, add missing label, preload all namespaces (#5312)

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">
+      <div className="mx-auto w-1/2">
-        <h3 className="mb-5 text-xl text-center uppercase calt flex flex-row gap-2 justify-center items-center">
+        <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">
+      <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="mb-4 text-2xl text-center calt">
+        <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.',
+              'You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.',
-              [nextBenefitTierEpochsValue.toString()]
+              { 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_state = page.locator('[col-id="state"]').first
-    col_market.drag_to(col_vote)
+    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-top-left icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
-    '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-up icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
-    '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-top-right icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
-    '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-bottom-left icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
-    '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-down icon"': 'class="relative flex-1 overflow-auto p-4 pr-[40px] [&>p]:mb-[2.5px]"',
-    '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-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/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/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/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -677,10 +677,8 @@ const VegaTxRequestedToastContent = ({ tx }: VegaTxToastContentProps) => {
   );
 };
 
-const VegaTxPendingToastContentProps = (
+const VegaTxPendingToastContent = ({ tx }: VegaTxToastContentProps) => {
-  { tx }: VegaTxToastContentProps,
+  const t = useT();
-  t: ReturnType<typeof 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} />;