diff --git a/.gitignore b/.gitignore
index 6b34d3516..b6b970499 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,12 +48,12 @@ cypress.env.json
 # Next.js
 .next
 
-#cypress
+# cypress
 /apps/**/cypress/reports/
 /apps/**/cypress/downloads/
 /apps/**/fixtures/wallet/node**
 
-#console-test
+# apps/trading/e2e
 __pycache__/
 apps/trading/e2e/logs/
 apps/trading/e2e/.pytest_cache/
diff --git a/.prettierignore b/.prettierignore
index 2b04963a2..296f30097 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +1,7 @@
 # Add files here to ignore them from prettier formatting
 
 /dist
+/dist-result
 /coverage
 __generated__
 __generated___
@@ -13,3 +14,10 @@ apps/static/src/assets/testnet-tranches.json
 /apps/**/cypress/downloads/
 
 /.nx/cache
+
+# apps/trading/e2e
+__pycache__/
+apps/trading/e2e/logs/
+apps/trading/e2e/.pytest_cache/
+apps/trading/e2e/traces/
+.pytest_cache/
diff --git a/apps/governance/src/i18n/index.ts b/apps/governance/src/i18n/index.ts
index 0f2c9b12e..6837b559e 100644
--- a/apps/governance/src/i18n/index.ts
+++ b/apps/governance/src/i18n/index.ts
@@ -34,6 +34,7 @@ i18n
     ns: ['governance'],
     defaultNS: 'governance',
     keySeparator: false, // we use content as keys
+    nsSeparator: false,
     backend,
     saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
     interpolation: {
diff --git a/apps/trading/__mocks__/react-i18next.ts b/apps/trading/__mocks__/react-i18next.ts
deleted file mode 100644
index 7c2343f52..000000000
--- a/apps/trading/__mocks__/react-i18next.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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;
-  },
-});
diff --git a/apps/trading/client-pages/assets/assets.tsx b/apps/trading/client-pages/assets/assets.tsx
index b60b89e04..467e7b642 100644
--- a/apps/trading/client-pages/assets/assets.tsx
+++ b/apps/trading/client-pages/assets/assets.tsx
@@ -1,9 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 import { Links } from '../../lib/links';
 import classNames from 'classnames';
 import { NavLink, Outlet } from 'react-router-dom';
 
 export const Assets = () => {
+  const t = useT();
   const linkClasses = ({ isActive }: { isActive: boolean }) => {
     return classNames('border-b-2 border-transparent', {
       'border-vega-yellow': isActive,
diff --git a/apps/trading/client-pages/deposit/deposit-get-started.tsx b/apps/trading/client-pages/deposit/deposit-get-started.tsx
index 86983e8b5..832b91551 100644
--- a/apps/trading/client-pages/deposit/deposit-get-started.tsx
+++ b/apps/trading/client-pages/deposit/deposit-get-started.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { GetStartedCheckList } from '../../components/welcome-dialog';
 import {
@@ -8,8 +7,10 @@ import {
 } from '../../components/welcome-dialog/use-get-onboarding-step';
 import { Links } from '../../lib/links';
 import classNames from 'classnames';
+import { useT } from '../../lib/use-t';
 
 export const DepositGetStarted = () => {
+  const t = useT();
   const onboardingDismissed = useOnboardingStore((store) => store.dismissed);
   const dismiss = useOnboardingStore((store) => store.dismiss);
   const step = useGetOnboardingStep();
diff --git a/apps/trading/client-pages/disclaimer/disclaimer.tsx b/apps/trading/client-pages/disclaimer/disclaimer.tsx
index 9a7195ba3..afde79048 100644
--- a/apps/trading/client-pages/disclaimer/disclaimer.tsx
+++ b/apps/trading/client-pages/disclaimer/disclaimer.tsx
@@ -1,6 +1,7 @@
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export const Disclaimer = () => {
+  const t = useT();
   return (
     <>
       <h1 className="text-4xl uppercase xl:text-5xl font-alpha calt">
@@ -8,37 +9,44 @@ export const Disclaimer = () => {
       </h1>
       <p className="mt-10 mb-6">
         {t(
-          'Vega is a decentralised peer-to-peer protocol that can be used to trade derivatives with cryptoassets. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software.  Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are supplied to the Vega Protocol and losses due to the fluctuation of prices of assets.'
+          'DISCLAIMER_P1',
+          'Vega is a decentralised peer-to-peer protocol that can be used to trade derivatives with cryptoassets. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software. Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are supplied to the Vega Protocol and losses due to the fluctuation of prices of assets.'
         )}
       </p>
       <p className="mb-6">
         {t(
-          'Before using the Vega Protocol, review the relevant documentation at docs.vega.xyz to make sure that you understand how it works.  Conduct your own due diligence and consult your financial advisor before making any investment decisions.'
+          'DISCLAIMER_P2',
+          'Before using the Vega Protocol, review the relevant documentation at docs.vega.xyz to make sure that you understand how it works. Conduct your own due diligence and consult your financial advisor before making any investment decisions.'
         )}
       </p>
       <p className="mb-6">
         {t(
-          'As described in the Vega Protocol core license, the Vega Protocol is provided “as is”, at your own risk, and without warranties of any kind.  Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain.  Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.'
+          'DISCLAIMER_P3',
+          'As described in the Vega Protocol core license, the Vega Protocol is provided “as is”, at your own risk, and without warranties of any kind. Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain. Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.'
         )}
       </p>
       <p className="mb-8">
         {t(
+          'DISCLAIMER_P4',
           'No developer or entity involved in creating the Vega Protocol will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the Vega Protocol, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or legal costs, or loss of profits, cryptoassets, tokens or anything else of value.'
         )}
       </p>
       <p className="mb-8">
         {t(
-          'This website is hosted on a decentralised network, the Interplanetary File System (“IPFS”).  The IPFS decentralised web is made up of all the computers (nodes) connected to it.  Data is therefore stored on many different computers.'
+          'DISCLAIMER_P5',
+          'This website is hosted on a decentralised network, the Interplanetary File System (“IPFS”). The IPFS decentralised web is made up of all the computers (nodes) connected to it. Data is therefore stored on many different computers.'
         )}
       </p>
       <p className="mb-8">
         {t(
-          "The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website's content as such.  No party recommends that any cryptoasset should be bought, sold, or held by you via this website. No party ensures the accuracy of information listed on this website or holds any responsibility for any missing or wrong information. You understand that you are using any and all information available here at your own risk."
+          'DISCLAIMER_P6',
+          "The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website's content as such. No party recommends that any cryptoasset should be bought, sold, or held by you via this website. No party ensures the accuracy of information listed on this website or holds any responsibility for any missing or wrong information. You understand that you are using any and all information available here at your own risk."
         )}
       </p>
       <p className="mb-8">
         {t(
-          'Additionally, just as you can access email protocols such as SMTP through multiple email clients, you can potentially access the Vega Protocol through many web or mobile interfaces.  You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.'
+          'DISCLAIMER_P7',
+          'Additionally, just as you can access email protocols such as SMTP through multiple email clients, you can potentially access the Vega Protocol through many web or mobile interfaces. You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.'
         )}
       </p>
     </>
diff --git a/apps/trading/client-pages/fees/fees.tsx b/apps/trading/client-pages/fees/fees.tsx
index 7ab99ae68..84322714e 100644
--- a/apps/trading/client-pages/fees/fees.tsx
+++ b/apps/trading/client-pages/fees/fees.tsx
@@ -1,7 +1,8 @@
-import { t } from '@vegaprotocol/i18n';
 import { FeesContainer } from '../../components/fees-container';
+import { useT } from '../../lib/use-t';
 
 export const Fees = () => {
+  const t = useT();
   return (
     <div className="container p-4 mx-auto">
       <h1 className="px-4 pb-4 text-2xl">{t('Fees')}</h1>
diff --git a/apps/trading/client-pages/liquidity/liquidity-sidebar.tsx b/apps/trading/client-pages/liquidity/liquidity-sidebar.tsx
index 39fee0587..6e44be274 100644
--- a/apps/trading/client-pages/liquidity/liquidity-sidebar.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity-sidebar.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import {
   SidebarButton,
@@ -6,8 +5,10 @@ import {
   ViewType,
 } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const LiquiditySidebar = () => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
 
   return (
diff --git a/apps/trading/client-pages/liquidity/liquidity.tsx b/apps/trading/client-pages/liquidity/liquidity.tsx
index 80f5f5869..2e4f98a7b 100644
--- a/apps/trading/client-pages/liquidity/liquidity.tsx
+++ b/apps/trading/client-pages/liquidity/liquidity.tsx
@@ -1,11 +1,11 @@
 import { matchFilter, lpAggregatedDataProvider } from '@vegaprotocol/liquidity';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { Tab, Tabs } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { LiquidityContainer } from '../../components/liquidity-container';
+import { useT } from '../../lib/use-t';
 
 const enum LiquidityTabs {
   Active = 'active',
@@ -24,6 +24,7 @@ export const LiquidityViewContainer = ({
 }: {
   marketId: string | undefined;
 }) => {
+  const t = useT();
   const [tab, setTab] = useState<string | undefined>(undefined);
   const { pubKey } = useVegaWallet();
 
diff --git a/apps/trading/client-pages/market/constants.ts b/apps/trading/client-pages/market/constants.ts
deleted file mode 100644
index 13cb2d9d6..000000000
--- a/apps/trading/client-pages/market/constants.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-
-export const NO_MARKET = t('No market');
diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx
index 7906f6801..2b6c05f24 100644
--- a/apps/trading/client-pages/market/market-header-stats.tsx
+++ b/apps/trading/client-pages/market/market-header-stats.tsx
@@ -9,7 +9,6 @@ import {
   getExpiryDate,
   getMarketExpiryDate,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   Last24hPriceChange,
   Last24hVolume,
@@ -31,12 +30,14 @@ import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
 import { useEffect, useState } from 'react';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { PriceCell } from '@vegaprotocol/datagrid';
+import { useT } from '../../lib/use-t';
 
 interface MarketHeaderStatsProps {
   market: Market;
 }
 
 export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
+  const t = useT();
   const { VEGA_EXPLORER_URL } = useEnvironment();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
 
@@ -234,6 +235,7 @@ const useFormatCountdown = (
   startTime?: number,
   every?: number
 ) => {
+  const t = useT();
   if (startTime && every) {
     const diff = every - ((now - startTime) % every);
     const hours = (diff / 3.6e6) | 0;
@@ -276,6 +278,7 @@ const ExpiryTooltipContent = ({
   market,
   explorerUrl,
 }: ExpiryTooltipContentProps) => {
+  const t = useT();
   if (market.marketTimestamps.close === null) {
     const oracleId =
       market.tradableInstrument.instrument.product.__typename === 'Future'
diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx
index fe92fcd21..209401cc1 100644
--- a/apps/trading/client-pages/market/market.tsx
+++ b/apps/trading/client-pages/market/market.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
 import { ExternalLink, Loader, Splash } from '@vegaprotocol/ui-toolkit';
@@ -12,6 +11,8 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { Links } from '../../lib/links';
 import { ViewType, useSidebar } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
   return markPrice && decimalPlaces
@@ -57,6 +58,7 @@ const TitleUpdater = ({
 };
 
 export const MarketPage = () => {
+  const t = useT();
   const { marketId } = useParams();
   const navigate = useNavigate();
   const currentRouteId = useGetCurrentRouteId();
@@ -111,10 +113,18 @@ export const MarketPage = () => {
             {t('This market URL is not available any more.')}
           </p>
           <p className="justify-center text-sm">
-            {t(`Please choose another market from the`)}{' '}
-            <ExternalLink onClick={() => navigate(Links.MARKETS())}>
-              {t('market list')}
-            </ExternalLink>
+            <Trans
+              defaults="Please choose another market from the <0>market list<0>"
+              ns={ns}
+              components={[
+                <ExternalLink
+                  onClick={() => navigate(Links.MARKETS())}
+                  key="link"
+                >
+                  market list
+                </ExternalLink>,
+              ]}
+            />
           </p>
         </span>
       </Splash>
diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 44138d14e..91840752d 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -4,10 +4,8 @@ import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
-import { t } from '@vegaprotocol/i18n';
 import { OracleBanner, useMarket } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
-import { Filter } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import {
   ResizableGrid,
@@ -21,6 +19,7 @@ import {
   MarketTerminationBanner,
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
 
 interface TradeGridProps {
   market: Market | null;
@@ -35,6 +34,7 @@ const MainGrid = memo(
     marketId: string;
     pinnedAsset?: PinnedAsset;
   }) => {
+    const t = useT();
     const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
@@ -125,13 +125,13 @@ const MainGrid = memo(
                 name={t('Open')}
                 menu={<TradingViews.activeOrders.menu />}
               >
-                <TradingViews.orders.component filter={Filter.Open} />
+                <TradingViews.activeOrders.component />
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component filter={Filter.Closed} />
+                <TradingViews.closedOrders.component />
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component filter={Filter.Rejected} />
+                <TradingViews.rejectedOrders.component />
               </Tab>
               <Tab
                 id="orders"
diff --git a/apps/trading/client-pages/market/trade-panels.tsx b/apps/trading/client-pages/market/trade-panels.tsx
index bebaa30d3..6e9849a8e 100644
--- a/apps/trading/client-pages/market/trade-panels.tsx
+++ b/apps/trading/client-pages/market/trade-panels.tsx
@@ -4,8 +4,6 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import type { TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
 import { useState } from 'react';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
 import {
@@ -14,6 +12,8 @@ import {
   MarketTerminationBanner,
 } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 
 interface TradePanelsProps {
   market: Market | null;
@@ -30,8 +30,10 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
       throw new Error(`No component for view: ${view}`);
     }
 
-    if (!market) return <Splash>{NO_MARKET}</Splash>;
+    if (!market) return <NoMarketSplash />;
 
+    // Watch out here, we don't know what component is being rendered
+    // so watch out for clashes in props
     return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
   };
 
@@ -74,33 +76,89 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
         </AutoSizer>
       </div>
       <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
-        {Object.keys(TradingViews).map((key) => {
-          const isActive = view === key;
-          const className = classNames(
-            'py-2 px-4 min-w-[100px] capitalize text-sm',
-            {
-              'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
+        {Object.keys(TradingViews)
+          // filter to control available views for the current market
+          // eg only perps should get the funding views
+          .filter((_key) => {
+            const key = _key as TradingView;
+            const perpOnlyViews = ['funding', 'fundingPayments'];
+
+            if (
+              market?.tradableInstrument.instrument.product.__typename ===
+              'Perpetual'
+            ) {
+              return true;
             }
-          );
-          if (
-            market?.tradableInstrument.instrument.product.__typename !==
-              'Perpetual' &&
-            (key === 'funding' || key === 'fundingPayments')
-          ) {
-            return null;
-          }
-          return (
-            <button
-              data-testid={key}
-              onClick={() => setView(key as TradingView)}
-              className={className}
-              key={key}
-            >
-              {TradingViews[key as keyof typeof TradingViews].label}
-            </button>
-          );
-        })}
+
+            if (perpOnlyViews.includes(key)) {
+              return false;
+            }
+
+            return true;
+          })
+          .map((_key) => {
+            const key = _key as TradingView;
+            const isActive = view === key;
+            return (
+              <ViewButton
+                key={key}
+                view={key}
+                isActive={isActive}
+                onClick={() => setView(key)}
+              />
+            );
+          })}
       </div>
     </div>
   );
 };
+
+export const NoMarketSplash = () => {
+  const t = useT();
+  return <Splash>{t('No market')}</Splash>;
+};
+
+const ViewButton = ({
+  view,
+  isActive,
+  onClick,
+}: {
+  view: TradingView;
+  isActive: boolean;
+  onClick: () => void;
+}) => {
+  const label = useViewLabel(view);
+  const className = classNames('py-2 px-4 min-w-[100px] capitalize text-sm', {
+    'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
+  });
+
+  return (
+    <button data-testid={view} onClick={onClick} className={className}>
+      {label}
+    </button>
+  );
+};
+
+const useViewLabel = (view: TradingView) => {
+  const t = useT();
+
+  const labels = {
+    candles: t('Candles'),
+    depth: t('Depth'),
+    liquidity: t('Liquidity'),
+    funding: t('Funding'),
+    fundingPayments: t('Funding Payments'),
+    orderbook: t('Orderbook'),
+    trades: t('Trades'),
+    positions: t('Positions'),
+    activeOrders: t('Active'),
+    closedOrders: t('Closed'),
+    rejectedOrders: t('Rejected'),
+    orders: t('All'),
+    stopOrders: t('Stop'),
+    collateral: t('Collateral'),
+    fills: t('Fills'),
+  };
+
+  return labels[view];
+};
diff --git a/apps/trading/client-pages/market/trade-views.tsx b/apps/trading/client-pages/market/trade-views.tsx
index 98069dc0b..959e2797f 100644
--- a/apps/trading/client-pages/market/trade-views.tsx
+++ b/apps/trading/client-pages/market/trade-views.tsx
@@ -1,12 +1,9 @@
-import type { ComponentProps } from 'react';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import {
   CandlesChartContainer,
   CandlesMenu,
 } from '@vegaprotocol/candles-chart';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
-import { NO_MARKET } from './constants';
 import { TradesContainer } from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
@@ -15,96 +12,60 @@ import { AccountsContainer } from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { FundingContainer } from '../../components/funding-container';
 import { FundingPaymentsContainer } from '../../components/funding-payments-container';
-import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { PositionsMenu } from '../../components/positions-menu';
 
-type MarketDependantView =
-  | typeof CandlesChartContainer
-  | typeof DepthChartContainer
-  | typeof OrderbookContainer
-  | typeof TradesContainer;
-
-type MarketDependantViewProps = ComponentProps<MarketDependantView>;
-
-const requiresMarket = (View: MarketDependantView) => {
-  const WrappedComponent = (props: MarketDependantViewProps) =>
-    props.marketId ? <View {...props} /> : <Splash>{NO_MARKET}</Splash>;
-  WrappedComponent.displayName = `RequiresMarket(${View.name})`;
-  return WrappedComponent;
-};
-
 export type TradingView = keyof typeof TradingViews;
 
 export const TradingViews = {
   candles: {
-    label: 'Candles',
-    component: requiresMarket(CandlesChartContainer),
+    component: CandlesChartContainer,
     menu: CandlesMenu,
   },
   depth: {
-    label: 'Depth',
-    component: requiresMarket(DepthChartContainer),
+    component: DepthChartContainer,
   },
   liquidity: {
-    label: 'Liquidity',
-    component: requiresMarket(LiquidityContainer),
+    component: LiquidityContainer,
   },
   funding: {
-    label: 'Funding',
-    component: requiresMarket(FundingContainer),
+    component: FundingContainer,
   },
   fundingPayments: {
-    label: 'Funding Payments',
     component: FundingPaymentsContainer,
   },
   orderbook: {
-    label: 'Orderbook',
-    component: requiresMarket(OrderbookContainer),
+    component: OrderbookContainer,
   },
   trades: {
-    label: 'Trades',
-    component: requiresMarket(TradesContainer),
+    component: TradesContainer,
   },
   positions: {
-    label: 'Positions',
     component: PositionsContainer,
     menu: PositionsMenu,
   },
   activeOrders: {
-    label: 'Active',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Open} />
-    ),
+    component: () => <OrdersContainer filter={Filter.Open} />,
     menu: OpenOrdersMenu,
   },
   closedOrders: {
-    label: 'Closed',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Closed} />
-    ),
+    component: () => <OrdersContainer filter={Filter.Closed} />,
   },
   rejectedOrders: {
-    label: 'Rejected',
-    component: (props: OrderContainerProps) => (
-      <OrdersContainer {...props} filter={Filter.Rejected} />
-    ),
+    component: () => <OrdersContainer filter={Filter.Rejected} />,
   },
   orders: {
-    label: 'All',
     component: OrdersContainer,
     menu: OpenOrdersMenu,
   },
   stopOrders: {
-    label: 'Stop',
     component: StopOrdersContainer,
   },
   collateral: {
-    label: 'Collateral',
     component: AccountsContainer,
     menu: AccountsMenu,
   },
-  fills: { label: 'Fills', component: FillsContainer },
-};
+  fills: { component: FillsContainer },
+} as const;
diff --git a/apps/trading/client-pages/markets/closed.tsx b/apps/trading/client-pages/markets/closed.tsx
index 4529fbbd3..c2082dc1a 100644
--- a/apps/trading/client-pages/markets/closed.tsx
+++ b/apps/trading/client-pages/markets/closed.tsx
@@ -8,7 +8,6 @@ import type {
 import { AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useMemo } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import type { Asset } from '@vegaprotocol/types';
 import type { ProductType } from '@vegaprotocol/types';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
@@ -24,6 +23,7 @@ import { SettlementDateCell } from './settlement-date-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
 import { MarketCodeCell } from './market-code-cell';
 import { MarketActionsDropdown } from './market-table-actions';
+import { useT } from '../../lib/use-t';
 
 type SettlementAsset = Pick<
   Asset,
@@ -127,6 +127,7 @@ const ClosedMarketsDataGrid = ({
   rowData: Row[];
   error: Error | undefined;
 }) => {
+  const t = useT();
   const handleOnSelect = useMarketClickHandler();
   const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
 
@@ -274,7 +275,7 @@ const ClosedMarketsDataGrid = ({
         },
       },
     ];
-  }, [openAssetDialog]);
+  }, [openAssetDialog, t]);
 
   return (
     <AgGrid
diff --git a/apps/trading/client-pages/markets/market-code-cell.tsx b/apps/trading/client-pages/markets/market-code-cell.tsx
index 68c68e988..39da45fd0 100644
--- a/apps/trading/client-pages/markets/market-code-cell.tsx
+++ b/apps/trading/client-pages/markets/market-code-cell.tsx
@@ -2,7 +2,7 @@ import compact from 'lodash/compact';
 import type { ProductType } from '@vegaprotocol/types';
 import { ProductTypeMapping, ProductTypeShortName } from '@vegaprotocol/types';
 import { StackedCell } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export interface MarketCodeCellProps {
   value: string | undefined; // market code
@@ -14,6 +14,7 @@ export interface MarketCodeCellProps {
 }
 
 export const MarketCodeCell = ({ value, data }: MarketCodeCellProps) => {
+  const t = useT();
   if (!value || !data || !data.productType) return null;
 
   const infoSpanClasses =
diff --git a/apps/trading/client-pages/markets/market-table-actions.tsx b/apps/trading/client-pages/markets/market-table-actions.tsx
index e239ff7f8..b368de202 100644
--- a/apps/trading/client-pages/markets/market-table-actions.tsx
+++ b/apps/trading/client-pages/markets/market-table-actions.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   TradingDropdownItem,
   TradingDropdownCopyItem,
@@ -11,6 +10,7 @@ import { DApp, EXPLORER_MARKET, useLinks } from '@vegaprotocol/environment';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { useNavigate } from 'react-router-dom';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
 
 export const MarketActionsDropdown = ({
   marketId,
@@ -23,6 +23,7 @@ export const MarketActionsDropdown = ({
   successorMarketID: string | null | undefined;
   parentMarketID: string | null | undefined;
 }) => {
+  const t = useT();
   const navigate = useNavigate();
   const open = useAssetDetailsDialogStore((store) => store.open);
   const linkCreator = useLinks(DApp.Explorer);
diff --git a/apps/trading/client-pages/markets/markets-page.tsx b/apps/trading/client-pages/markets/markets-page.tsx
index 666e63d81..f38924556 100644
--- a/apps/trading/client-pages/markets/markets-page.tsx
+++ b/apps/trading/client-pages/markets/markets-page.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   LocalStoragePersistTabs as Tabs,
   Tab,
@@ -15,8 +14,10 @@ import {
   TOKEN_NEW_MARKET_PROPOSAL,
   useLinks,
 } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
 
 export const MarketsPage = () => {
+  const t = useT();
   const { updateTitle } = usePageTitleStore((store) => ({
     updateTitle: store.updateTitle,
   }));
@@ -25,8 +26,8 @@ export const MarketsPage = () => {
   const externalLink = governanceLink(TOKEN_NEW_MARKET_PROPOSAL);
 
   useEffect(() => {
-    updateTitle(titlefy(['Markets']));
-  }, [updateTitle]);
+    updateTitle(titlefy([t('Markets')]));
+  }, [updateTitle, t]);
 
   return (
     <div className="h-full pt-0.5 pb-3 px-1.5">
diff --git a/apps/trading/client-pages/markets/markets-sidebar.tsx b/apps/trading/client-pages/markets/markets-sidebar.tsx
index 7f010c47f..92785a469 100644
--- a/apps/trading/client-pages/markets/markets-sidebar.tsx
+++ b/apps/trading/client-pages/markets/markets-sidebar.tsx
@@ -1,6 +1,5 @@
 import { Route, Routes, useParams } from 'react-router-dom';
 import { MarketState } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
 import { useMarket } from '@vegaprotocol/markets';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import {
@@ -9,8 +8,10 @@ import {
   ViewType,
 } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const MarketsSidebar = () => {
+  const t = useT();
   const { marketId } = useParams();
   const currentRouteId = useGetCurrentRouteId();
   const { data } = useMarket(marketId);
diff --git a/apps/trading/client-pages/markets/open-markets.tsx b/apps/trading/client-pages/markets/open-markets.tsx
index ee8a20473..cf25923ba 100644
--- a/apps/trading/client-pages/markets/open-markets.tsx
+++ b/apps/trading/client-pages/markets/open-markets.tsx
@@ -2,16 +2,17 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { MarketMaybeWithData } from '@vegaprotocol/markets';
 import { marketListProvider } from '@vegaprotocol/markets';
 import { useEffect } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import type { CellClickedEvent } from 'ag-grid-community';
 import MarketListTable from './market-list-table';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { Interval } from '@vegaprotocol/types';
 import { useYesterday } from '@vegaprotocol/react-helpers';
+import { useT } from '../../lib/use-t';
 
 const POLLING_TIME = 2000;
 
 export const OpenMarkets = () => {
+  const t = useT();
   const handleOnSelect = useMarketClickHandler();
   const yesterday = useYesterday();
   const { data, error, reload } = useDataProvider({
diff --git a/apps/trading/client-pages/markets/settlement-date-cell.tsx b/apps/trading/client-pages/markets/settlement-date-cell.tsx
index 80fb9cf5c..7d9efa264 100644
--- a/apps/trading/client-pages/markets/settlement-date-cell.tsx
+++ b/apps/trading/client-pages/markets/settlement-date-cell.tsx
@@ -1,8 +1,8 @@
 import { DApp, EXPLORER_ORACLE, useLinks } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { MarketState } from '@vegaprotocol/types';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { useT } from '../../lib/use-t';
 import { formatDistanceToNowStrict, isAfter } from 'date-fns';
 
 export interface SettlementDataCellProps {
@@ -18,6 +18,7 @@ export const SettlementDateCell = ({
   closeTimestamp,
   marketState,
 }: SettlementDataCellProps) => {
+  const t = useT();
   const linkCreator = useLinks(DApp.Explorer);
   const date = closeTimestamp ? new Date(closeTimestamp) : metaDate;
 
@@ -31,12 +32,12 @@ export const SettlementDateCell = ({
 
     if (expiryHasPassed) {
       if (marketState !== MarketState.STATE_SETTLED) {
-        text = t('Expected %s ago', distance);
+        text = t('Expected {{distance}} ago', { distance });
       } else {
-        text = t('%s ago', distance);
+        text = t('{{distance}} ago', { distance });
       }
     } else {
-      text = t('Expected in %s', distance);
+      text = t('Expected in {{distance}}', { distance });
     }
   }
 
diff --git a/apps/trading/client-pages/markets/settlement-price-cell.tsx b/apps/trading/client-pages/markets/settlement-price-cell.tsx
index 47fb280b3..4593ba7ed 100644
--- a/apps/trading/client-pages/markets/settlement-price-cell.tsx
+++ b/apps/trading/client-pages/markets/settlement-price-cell.tsx
@@ -1,10 +1,10 @@
 import { DApp, EXPLORER_ORACLE, useLinks } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import type { DataSourceFilterFragment } from '@vegaprotocol/markets';
 import { useOracleSpecBindingData } from '@vegaprotocol/markets';
 import { PropertyKeyType } from '@vegaprotocol/types';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { useT } from '../../lib/use-t';
 
 export interface SettlementPriceCellProps {
   oracleSpecId: string | undefined;
@@ -17,6 +17,7 @@ export const SettlementPriceCell = ({
   settlementDataSpecBinding,
   filter,
 }: SettlementPriceCellProps) => {
+  const t = useT();
   const linkCreator = useLinks(DApp.Explorer);
   const { property, loading } = useOracleSpecBindingData(
     oracleSpecId,
diff --git a/apps/trading/client-pages/markets/use-column-defs.tsx b/apps/trading/client-pages/markets/use-column-defs.tsx
index e2b506348..96dbb8569 100644
--- a/apps/trading/client-pages/markets/use-column-defs.tsx
+++ b/apps/trading/client-pages/markets/use-column-defs.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
-import { t } from '@vegaprotocol/i18n';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
@@ -18,10 +17,12 @@ import type {
 import { MarketActionsDropdown } from './market-table-actions';
 import { calcCandleVolume, getAsset } from '@vegaprotocol/markets';
 import { MarketCodeCell } from './market-code-cell';
+import { useT } from '../../lib/use-t';
 
 const { MarketTradingMode, AuctionTrigger } = Schema;
 
 export const useColumnDefs = () => {
+  const t = useT();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   return useMemo<ColDef[]>(
     () => [
@@ -216,6 +217,6 @@ export const useColumnDefs = () => {
         },
       },
     ],
-    [openAssetDetailsDialog]
+    [openAssetDetailsDialog, t]
   );
 };
diff --git a/apps/trading/client-pages/portfolio/portfolio-sidebar.tsx b/apps/trading/client-pages/portfolio/portfolio-sidebar.tsx
index a1d40a439..dc390c6eb 100644
--- a/apps/trading/client-pages/portfolio/portfolio-sidebar.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio-sidebar.tsx
@@ -1,9 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { SidebarButton, ViewType } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const PortfolioSidebar = () => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
 
   return (
diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx
index 854981fc8..ad17b1cf5 100644
--- a/apps/trading/client-pages/portfolio/portfolio.tsx
+++ b/apps/trading/client-pages/portfolio/portfolio.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { LayoutPriority } from 'allotment';
 import { titlefy } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
@@ -25,6 +24,7 @@ import { AccountsMenu } from '../../components/accounts-menu';
 import { DepositsMenu } from '../../components/deposits-menu';
 import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -39,6 +39,7 @@ const WithdrawalsIndicator = () => {
 };
 
 export const Portfolio = () => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
   const { getView, setViews } = useSidebar();
   const view = getView(currentRouteId);
@@ -49,7 +50,7 @@ export const Portfolio = () => {
 
   useEffect(() => {
     updateTitle(titlefy([t('Portfolio')]));
-  }, [updateTitle]);
+  }, [updateTitle, t]);
 
   // Make transfer sidebar open by default
   useEffect(() => {
diff --git a/apps/trading/client-pages/referrals/apply-code-form.tsx b/apps/trading/client-pages/referrals/apply-code-form.tsx
index d1dea5637..3395ea239 100644
--- a/apps/trading/client-pages/referrals/apply-code-form.tsx
+++ b/apps/trading/client-pages/referrals/apply-code-form.tsx
@@ -16,13 +16,13 @@ import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { useReferral } from './hooks/use-referral';
 import { Routes } from '../../lib/links';
 import { useTransactionEventSubscription } from '@vegaprotocol/web3';
-import { t } from '@vegaprotocol/i18n';
 import { Statistics, useStats } from './referral-statistics';
 import { useReferralProgram } from './hooks/use-referral-program';
+import { useT } from '../../lib/use-t';
 
 const RELOAD_DELAY = 3000;
 
-const validateCode = (value: string) => {
+const validateCode = (value: string, t: ReturnType<typeof useT>) => {
   const number = +`0x${value}`;
   if (!value || value.length !== 64) {
     return t('Code must be 64 characters in length');
@@ -33,6 +33,7 @@ const validateCode = (value: string) => {
 };
 
 export const ApplyCodeForm = () => {
+  const t = useT();
   const program = useReferralProgram();
   const navigate = useNavigate();
   const openWalletDialog = useVegaWalletDialogStore(
@@ -59,7 +60,7 @@ export const ApplyCodeForm = () => {
 
   const codeField = watch('code');
   const { data: previewData, loading: previewLoading } = useReferral({
-    code: validateCode(codeField) ? codeField : undefined,
+    code: validateCode(codeField, t) ? codeField : undefined,
   });
 
   useEffect(() => {
@@ -223,7 +224,7 @@ export const ApplyCodeForm = () => {
               hasError={Boolean(errors.code)}
               {...register('code', {
                 required: t('You have to provide a code to apply it.'),
-                validate: validateCode,
+                validate: (value) => validateCode(value, t),
               })}
               placeholder="Enter a code"
               className="mb-2 bg-vega-clight-900 dark:bg-vega-cdark-700"
diff --git a/apps/trading/client-pages/referrals/create-code-form.tsx b/apps/trading/client-pages/referrals/create-code-form.tsx
index fa189f36d..73123e3be 100644
--- a/apps/trading/client-pages/referrals/create-code-form.tsx
+++ b/apps/trading/client-pages/referrals/create-code-form.tsx
@@ -24,13 +24,14 @@ import {
   DISCLAIMER_REFERRAL_DOCS_LINK,
 } from './constants';
 import { useReferral } from './hooks/use-referral';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export const CreateCodeContainer = () => {
   return <CreateCodeForm />;
 };
 
 export const CreateCodeForm = () => {
+  const t = useT();
   const [dialogOpen, setDialogOpen] = useState(false);
   const openWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
@@ -81,6 +82,7 @@ const CreateCodeDialog = ({
 }: {
   setDialogOpen: (open: boolean) => void;
 }) => {
+  const t = useT();
   const createLink = useLinks(DApp.Governance);
   const { isReadOnly, pubKey, sendTx } = useVegaWallet();
   const { refetch } = useReferral({ pubKey, role: 'referrer' });
@@ -170,10 +172,14 @@ const CreateCodeDialog = ({
     return (
       <div className="flex flex-col gap-4">
         <p>
-          {t('You need at least')}{' '}
-          {addDecimalsFormatNumber(requiredStake.toString(), 18)}{' '}
           {t(
-            'VEGA staked to generate a referral code and participate in the referral program.'
+            'You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.',
+            {
+              requiredStake: addDecimalsFormatNumber(
+                requiredStake.toString(),
+                18
+              ),
+            }
           )}
         </p>
         <TradingAnchorButton
diff --git a/apps/trading/client-pages/referrals/error-boundary.tsx b/apps/trading/client-pages/referrals/error-boundary.tsx
index b9c8ddf6e..2e42ca240 100644
--- a/apps/trading/client-pages/referrals/error-boundary.tsx
+++ b/apps/trading/client-pages/referrals/error-boundary.tsx
@@ -3,21 +3,22 @@ import { RainbowButton } from './buttons';
 import { AnimatedDudeWithWire } from './graphics/dude';
 import { LayoutWithSky } from './layout';
 import { Routes } from '../../lib/links';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export const ErrorBoundary = () => {
+  const t = useT();
   const error = useRouteError();
   const navigate = useNavigate();
 
   const title = isRouteErrorResponse(error)
     ? `${error.status} ${error.statusText}`
-    : 'Something went wrong';
+    : t('Something went wrong');
 
   const code = isRouteErrorResponse(error) ? error.status : 0;
 
   const messages: Record<number, string> = {
-    0: 'An unknown error occurred.',
-    404: "The page you're looking for doesn't exists.",
+    0: t('An unknown error occurred.'),
+    404: t("The page you're looking for doesn't exists."),
   };
 
   return (
@@ -48,6 +49,7 @@ export const ErrorBoundary = () => {
 };
 
 export const NotFound = () => {
+  const t = useT();
   const navigate = useNavigate();
 
   return (
diff --git a/apps/trading/client-pages/referrals/how-it-works-table.tsx b/apps/trading/client-pages/referrals/how-it-works-table.tsx
index 9fdc3acd6..965cf9395 100644
--- a/apps/trading/client-pages/referrals/how-it-works-table.tsx
+++ b/apps/trading/client-pages/referrals/how-it-works-table.tsx
@@ -1,63 +1,66 @@
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 import { Table } from './table';
 
-export const HowItWorksTable = () => (
-  <Table
-    className="bg-none bg-vega-clight-800 dark:bg-vega-cdark-800"
-    noHeader
-    noCollapse
-    columns={[{ name: 'number', className: 'pr-0' }, { name: 'step' }]}
-    data={[
-      {
-        number: (
-          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
-            1
-          </span>
-        ),
-        step: t(
-          'Referrers generate a code assigned to their key via an on chain transaction'
-        ),
-      },
-      {
-        number: (
-          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
-            2
-          </span>
-        ),
-        step: t(
-          'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction'
-        ),
-      },
-      {
-        number: (
-          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
-            3
-          </span>
-        ),
-        step: t(
-          'Discounts are applied automatically during trading based on the key(s) used'
-        ),
-      },
-      {
-        number: (
-          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
-            4
-          </span>
-        ),
-        step: t(
-          'Referrers earn commission based on a percentage of the taker fees their referees pay'
-        ),
-      },
-      {
-        number: (
-          <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
-            5
-          </span>
-        ),
-        step: t(
-          'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee'
-        ),
-      },
-    ]}
-  ></Table>
-);
+export const HowItWorksTable = () => {
+  const t = useT();
+  return (
+    <Table
+      className="bg-none bg-vega-clight-800 dark:bg-vega-cdark-800"
+      noHeader
+      noCollapse
+      columns={[{ name: 'number', className: 'pr-0' }, { name: 'step' }]}
+      data={[
+        {
+          number: (
+            <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+              1
+            </span>
+          ),
+          step: t(
+            'Referrers generate a code assigned to their key via an on chain transaction'
+          ),
+        },
+        {
+          number: (
+            <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+              2
+            </span>
+          ),
+          step: t(
+            'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction'
+          ),
+        },
+        {
+          number: (
+            <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+              3
+            </span>
+          ),
+          step: t(
+            'Discounts are applied automatically during trading based on the key(s) used'
+          ),
+        },
+        {
+          number: (
+            <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+              4
+            </span>
+          ),
+          step: t(
+            'Referrers earn commission based on a percentage of the taker fees their referees pay'
+          ),
+        },
+        {
+          number: (
+            <span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
+              5
+            </span>
+          ),
+          step: t(
+            'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee'
+          ),
+        },
+      ]}
+    ></Table>
+  );
+};
diff --git a/apps/trading/client-pages/referrals/landing-banner.tsx b/apps/trading/client-pages/referrals/landing-banner.tsx
index 9dbb5f65f..f9e3d6e98 100644
--- a/apps/trading/client-pages/referrals/landing-banner.tsx
+++ b/apps/trading/client-pages/referrals/landing-banner.tsx
@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import { AnimatedDudeWithWire } from './graphics/dude';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export const LandingBanner = () => {
+  const t = useT();
   return (
     <div className={classNames('relative mb-20')}>
       <div className="">
diff --git a/apps/trading/client-pages/referrals/referral-statistics.tsx b/apps/trading/client-pages/referrals/referral-statistics.tsx
index b97f481eb..5830812e2 100644
--- a/apps/trading/client-pages/referrals/referral-statistics.tsx
+++ b/apps/trading/client-pages/referrals/referral-statistics.tsx
@@ -28,9 +28,10 @@ import sortBy from 'lodash/sortBy';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
 import BigNumber from 'bignumber.js';
-import { t } from '@vegaprotocol/i18n';
 import maxBy from 'lodash/maxBy';
 import { DocsLinks } from '@vegaprotocol/environment';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 export const ReferralStatistics = () => {
   const { pubKey } = useVegaWallet();
@@ -152,6 +153,7 @@ export const Statistics = ({
   program: ReturnType<typeof useReferralProgram>;
   as: 'referrer' | 'referee';
 }) => {
+  const t = useT();
   const {
     baseCommissionValue,
     runningVolumeValue,
@@ -185,10 +187,15 @@ export const Statistics = ({
   const baseCommissionTile = (
     <StatTile
       title={t('Base commission rate')}
-      description={t('(Combined set volume %s over last %s epochs)', [
-        compactNumFormat.format(runningVolumeValue),
-        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString(),
-      ])}
+      description={t(
+        '(Combined set volume {{runningVolume}} over last {{epochs}} epochs)',
+        {
+          runningVolume: compactNumFormat.format(runningVolumeValue),
+          epochs: (
+            details?.windowLength || DEFAULT_AGGREGATION_DAYS
+          ).toString(),
+        }
+      )}
     >
       {baseCommissionValue * 100}%
     </StatTile>
@@ -196,10 +203,9 @@ export const Statistics = ({
   const stakingMultiplierTile = (
     <StatTile
       title={t('Staking multiplier')}
-      description={`(${addDecimalsFormatNumber(
-        stakeAvailable?.toString() || 0,
-        18
-      )} $VEGA staked)`}
+      description={t('{{amount}} $VEGA staked', {
+        amount: addDecimalsFormatNumber(stakeAvailable?.toString() || 0, 18),
+      })}
     >
       {multiplier || t('None')}
     </StatTile>
@@ -232,10 +238,9 @@ export const Statistics = ({
 
   const referrerVolumeTile = (
     <StatTile
-      title={t(
-        'My volume (last %s epochs)',
-        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString()
-      )}
+      title={t('My volume (last {{count}} epochs)', {
+        count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+      })}
     >
       {compactNumFormat.format(referrerVolumeValue)}
     </StatTile>
@@ -246,10 +251,9 @@ export const Statistics = ({
     .reduce((all, r) => all.plus(r), new BigNumber(0));
   const totalCommissionTile = (
     <StatTile
-      title={t(
-        'Total commission (last %s epochs)',
-        (details?.windowLength || DEFAULT_AGGREGATION_DAYS).toString()
-      )}
+      title={t('Total commission (last {{count}}} epochs)', {
+        count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+      })}
       description={<QUSDTooltip />}
     >
       {getNumberFormat(0).format(Number(totalCommissionValue))}
@@ -290,10 +294,9 @@ export const Statistics = ({
   );
   const runningVolumeTile = (
     <StatTile
-      title={t(
-        'Combined volume (last %s epochs)',
-        details?.windowLength.toString()
-      )}
+      title={t('Combined volume (last {{count}} epochs)', {
+        count: details?.windowLength,
+      })}
     >
       {compactNumFormat.format(runningVolumeValue)}
     </StatTile>
@@ -381,25 +384,22 @@ export const Statistics = ({
                 { name: 'joined', displayName: t('Date Joined') },
                 {
                   name: 'volume',
-                  displayName: t(
-                    'Volume (last %s epochs)',
-                    (
-                      details?.windowLength || DEFAULT_AGGREGATION_DAYS
-                    ).toString()
-                  ),
+                  displayName: t('Volume (last {{count}} epochs)', {
+                    count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+                  }),
                 },
                 {
                   name: 'commission',
                   displayName: (
-                    <>
-                      {t('Commission earned in')} <QUSDTooltip />{' '}
-                      {t(
-                        '(last %s epochs)',
-                        (
-                          details?.windowLength || DEFAULT_AGGREGATION_DAYS
-                        ).toString()
-                      )}
-                    </>
+                    <Trans
+                      i18nKey="referral-statistics-commission"
+                      defaults="Commission earned in <0>qUSD</0> (last {{count}} epochs)"
+                      values={{
+                        count:
+                          details?.windowLength || DEFAULT_AGGREGATION_DAYS,
+                      }}
+                      ns={ns}
+                    />
                   ),
                 },
               ]}
@@ -430,24 +430,27 @@ export const Statistics = ({
   );
 };
 
-export const QUSDTooltip = () => (
-  <Tooltip
-    description={
-      <>
-        <p className="mb-1">
-          {t(
-            'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
+export const QUSDTooltip = () => {
+  const t = useT();
+  return (
+    <Tooltip
+      description={
+        <>
+          <p className="mb-1">
+            {t(
+              'qUSD provides a rough USD equivalent of balances across all assets using the value of "Quantum" for that asset'
+            )}
+          </p>
+          {DocsLinks && (
+            <ExternalLink href={DocsLinks.QUANTUM}>
+              {t('Find out more')}
+            </ExternalLink>
           )}
-        </p>
-        {DocsLinks && (
-          <ExternalLink href={DocsLinks.QUANTUM}>
-            {t('Find out more')}
-          </ExternalLink>
-        )}
-      </>
-    }
-    underline={true}
-  >
-    <span>{t('qUSD')}</span>
-  </Tooltip>
-);
+        </>
+      }
+      underline={true}
+    >
+      <span>{t('qUSD')}</span>
+    </Tooltip>
+  );
+};
diff --git a/apps/trading/client-pages/referrals/referrals.tsx b/apps/trading/client-pages/referrals/referrals.tsx
index ad4448512..ac06f7257 100644
--- a/apps/trading/client-pages/referrals/referrals.tsx
+++ b/apps/trading/client-pages/referrals/referrals.tsx
@@ -17,18 +17,22 @@ import classNames from 'classnames';
 import { usePageTitleStore } from '../../stores';
 import { useEffect } from 'react';
 import { titlefy } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
-const Nav = () => (
-  <div className="flex justify-center border-b border-vega-cdark-500">
-    <TabLink end to={Routes.REFERRALS}>
-      {t('I want a code')}
-    </TabLink>
-    <TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
-  </div>
-);
+const Nav = () => {
+  const t = useT();
+  return (
+    <div className="flex justify-center border-b border-vega-cdark-500">
+      <TabLink end to={Routes.REFERRALS}>
+        {t('I want a code')}
+      </TabLink>
+      <TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
+    </div>
+  );
+};
 
 export const Referrals = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
 
   const {
@@ -58,7 +62,7 @@ export const Referrals = () => {
 
   useEffect(() => {
     updateTitle(titlefy([t('Referrals')]));
-  }, [updateTitle]);
+  }, [updateTitle, t]);
 
   return (
     <>
diff --git a/apps/trading/client-pages/referrals/tiers.tsx b/apps/trading/client-pages/referrals/tiers.tsx
index 41cd7c814..cd604cd68 100644
--- a/apps/trading/client-pages/referrals/tiers.tsx
+++ b/apps/trading/client-pages/referrals/tiers.tsx
@@ -7,7 +7,8 @@ import { Tag } from './tag';
 import type { ComponentProps, ReactNode } from 'react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { DApp, TOKEN_PROPOSALS, useLinks } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
   <div
@@ -31,6 +32,7 @@ const StakingTier = ({
   referralRewardMultiplier: string;
   minimumStakedTokens: string;
 }) => {
+  const t = useT();
   const color: Record<number, ComponentProps<typeof Tag>['color']> = {
     1: 'green',
     2: 'blue',
@@ -62,7 +64,9 @@ const StakingTier = ({
         <Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
         <h3 className="mt-1 mb-1 text-base">{label}</h3>
         <p className="text-sm text-vega-clight-100 dark:text-vega-cdark-100">
-          {t('Stake a minimum of')} {minimumStakedTokens} {t('$VEGA tokens')}
+          {t('Stake a minimum of {{minimumStakedTokens}} $VEGA tokens', {
+            minimumStakedTokens,
+          })}
         </p>
       </div>
     </div>
@@ -70,6 +74,7 @@ const StakingTier = ({
 };
 
 export const TiersContainer = () => {
+  const t = useT();
   const { benefitTiers, stakingTiers, details, loading, error } =
     useReferralProgram();
 
@@ -82,13 +87,15 @@ export const TiersContainer = () => {
   if ((!loading && !details) || error) {
     return (
       <div className="text-base px-5 py-10 text-center">
-        {t(
-          "We're sorry but we don't have an active referral programme currently running. You can propose a new programme"
-        )}{' '}
-        <ExternalLink href={governanceLink(TOKEN_PROPOSALS)}>
-          {t('here')}
-        </ExternalLink>
-        .
+        <Trans
+          defaults="We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>."
+          components={[
+            <ExternalLink href={governanceLink(TOKEN_PROPOSALS)} key="link">
+              {t('here')}
+            </ExternalLink>,
+          ]}
+          ns={ns}
+        />
       </div>
     );
   }
@@ -174,6 +181,7 @@ const TiersTable = ({
   }>;
   windowLength?: number;
 }) => {
+  const t = useT();
   return (
     <Table
       columns={[
@@ -186,12 +194,9 @@ const TiersTable = ({
         { name: 'discount', displayName: t('Referrer trading discount') },
         {
           name: 'volume',
-          displayName: t(
-            'Min. trading volume %s',
-            windowLength
-              ? t('(last %s epochs)', windowLength.toString())
-              : undefined
-          ),
+          displayName: t('Min. trading volume (last {{count}} epochs)', {
+            count: windowLength,
+          }),
         },
         { name: 'epochs', displayName: t('Min. epochs') },
       ]}
diff --git a/apps/trading/client-pages/referrals/tile.tsx b/apps/trading/client-pages/referrals/tile.tsx
index fc2a9966e..39a9139eb 100644
--- a/apps/trading/client-pages/referrals/tile.tsx
+++ b/apps/trading/client-pages/referrals/tile.tsx
@@ -7,7 +7,7 @@ import {
 import classNames from 'classnames';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { Button } from './buttons';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 export const Tile = ({
   className,
@@ -62,10 +62,13 @@ export const CodeTile = ({
   createdAt?: string;
   className?: string;
 }) => {
+  const t = useT();
   return (
     <StatTile
       title={t('Your referral code')}
-      description={createdAt ? t('(Created at: %s)', createdAt) : undefined}
+      description={
+        createdAt ? t('(Created at: {{createdAt}})', { createdAt }) : undefined
+      }
     >
       <div className="flex items-center justify-between gap-2">
         <Tooltip
diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx
index 9574fa9f1..2241ae99a 100644
--- a/apps/trading/components/accounts-container/accounts-container.tsx
+++ b/apps/trading/components/accounts-container/accounts-container.tsx
@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -13,12 +12,14 @@ import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { ViewType, useSidebar } from '../sidebar';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const AccountsContainer = ({
   pinnedAsset,
 }: {
   pinnedAsset?: PinnedAsset;
 }) => {
+  const t = useT();
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
diff --git a/apps/trading/components/accounts-menu/accounts-menu.tsx b/apps/trading/components/accounts-menu/accounts-menu.tsx
index 8bfed5d76..6c29122cc 100644
--- a/apps/trading/components/accounts-menu/accounts-menu.tsx
+++ b/apps/trading/components/accounts-menu/accounts-menu.tsx
@@ -1,9 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const AccountsMenu = () => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
 
diff --git a/apps/trading/components/bootstrapper/bootstrapper.tsx b/apps/trading/components/bootstrapper/bootstrapper.tsx
index 4545cff9e..d25436d05 100644
--- a/apps/trading/components/bootstrapper/bootstrapper.tsx
+++ b/apps/trading/components/bootstrapper/bootstrapper.tsx
@@ -8,12 +8,13 @@ import {
   NodeGuard,
   useEnvironment,
 } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
-import { Suspense, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Web3Provider } from './web3-provider';
+import { useT } from '../../lib/use-t';
 
 export const Bootstrapper = ({ children }: { children: ReactNode }) => {
+  const t = useT();
   const {
     error,
     VEGA_URL,
@@ -36,43 +37,45 @@ export const Bootstrapper = ({ children }: { children: ReactNode }) => {
   }
 
   return (
-    <Suspense fallback={<AppLoader />}>
-      <NetworkLoader
-        cache={cacheConfig}
+    <NetworkLoader
+      cache={cacheConfig}
+      skeleton={<AppLoader />}
+      failure={
+        <AppFailure title={t('Could not initialize app')} error={error} />
+      }
+    >
+      <NodeGuard
         skeleton={<AppLoader />}
         failure={
-          <AppFailure title={t('Could not initialize app')} error={error} />
+          <NodeFailure
+            title={t('Node: {{VEGA_URL}} is unsuitable', { VEGA_URL })}
+          />
         }
       >
-        <NodeGuard
+        <Web3Provider
           skeleton={<AppLoader />}
-          failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
+          failure={
+            <AppFailure title={t('Could not configure web3 provider')} />
+          }
         >
-          <Web3Provider
-            skeleton={<AppLoader />}
-            failure={
-              <AppFailure title={t(`Could not configure web3 provider`)} />
-            }
+          <VegaWalletProvider
+            config={{
+              network: VEGA_ENV,
+              vegaUrl: VEGA_URL,
+              vegaWalletServiceUrl: VEGA_WALLET_URL,
+              links: {
+                explorer: VEGA_EXPLORER_URL,
+                concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
+                chromeExtensionUrl: CHROME_EXTENSION_URL,
+                mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
+              },
+            }}
           >
-            <VegaWalletProvider
-              config={{
-                network: VEGA_ENV,
-                vegaUrl: VEGA_URL,
-                vegaWalletServiceUrl: VEGA_WALLET_URL,
-                links: {
-                  explorer: VEGA_EXPLORER_URL,
-                  concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
-                  chromeExtensionUrl: CHROME_EXTENSION_URL,
-                  mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
-                },
-              }}
-            >
-              {children}
-            </VegaWalletProvider>
-          </Web3Provider>
-        </NodeGuard>
-      </NetworkLoader>
-    </Suspense>
+            {children}
+          </VegaWalletProvider>
+        </Web3Provider>
+      </NodeGuard>
+    </NetworkLoader>
   );
 };
 
diff --git a/apps/trading/components/deposits-container/deposits-container.tsx b/apps/trading/components/deposits-container/deposits-container.tsx
index f888ce958..c4c707e73 100644
--- a/apps/trading/components/deposits-container/deposits-container.tsx
+++ b/apps/trading/components/deposits-container/deposits-container.tsx
@@ -1,11 +1,12 @@
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useT } from '../../lib/use-t';
 
 export const DepositsContainer = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const { data, error } = useDataProvider({
     dataProvider: depositsProvider,
diff --git a/apps/trading/components/deposits-menu/deposits-menu.tsx b/apps/trading/components/deposits-menu/deposits-menu.tsx
index d67225692..afade3b73 100644
--- a/apps/trading/components/deposits-menu/deposits-menu.tsx
+++ b/apps/trading/components/deposits-menu/deposits-menu.tsx
@@ -1,9 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const DepositsMenu = () => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
 
diff --git a/apps/trading/components/fees-container/fees-container.tsx b/apps/trading/components/fees-container/fees-container.tsx
index 4c4d6b7d1..0347afc21 100644
--- a/apps/trading/components/fees-container/fees-container.tsx
+++ b/apps/trading/components/fees-container/fees-container.tsx
@@ -1,6 +1,5 @@
 import maxBy from 'lodash/maxBy';
 import minBy from 'lodash/minBy';
-import { t } from '@vegaprotocol/i18n';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
   useNetworkParams,
@@ -24,8 +23,10 @@ import {
   VegaIconNames,
   truncateMiddle,
 } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
 
 export const FeesContainer = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const { params, loading: paramsLoading } = useNetworkParams([
     NetworkParams.market_fee_factors_makerFee,
@@ -202,6 +203,7 @@ export const TradingFees = ({
   referralDiscount: number;
   volumeDiscount: number;
 }) => {
+  const t = useT();
   const referralDiscountBigNum = new BigNumber(referralDiscount);
   const volumeDiscountBigNum = new BigNumber(volumeDiscount);
 
@@ -305,6 +307,7 @@ export const CurrentVolume = ({
   windowLengthVolume: number;
   windowLength: number;
 }) => {
+  const t = useT();
   const nextTier = tiers[tierIndex + 1];
   const requiredForNextTier = nextTier
     ? Number(nextTier.minimumRunningNotionalTakerVolume) - windowLengthVolume
@@ -314,7 +317,7 @@ export const CurrentVolume = ({
     <div className="flex flex-col gap-3 pt-4">
       <CardStat
         value={formatNumberRounded(new BigNumber(windowLengthVolume))}
-        text={t('Past %s epochs', windowLength.toString())}
+        text={t('Past {{count}} epochs', { count: windowLength })}
       />
       {requiredForNextTier > 0 && (
         <CardStat
@@ -335,15 +338,15 @@ const ReferralBenefits = ({
   setRunningNotionalTakerVolume: number;
   epochs: number;
 }) => {
+  const t = useT();
   return (
     <div className="flex flex-col gap-3 pt-4">
       <CardStat
         // all sets volume (not just current party)
         value={formatNumber(setRunningNotionalTakerVolume)}
-        text={t(
-          'Combined running notional over the %s epochs',
-          epochs.toString()
-        )}
+        text={t('Combined running notional over the {{count}} epochs', {
+          count: epochs,
+        })}
       />
       <CardStat value={epochsInSet} text={t('epochs in referral set')} />
     </div>
@@ -361,6 +364,7 @@ const TotalDiscount = ({
   isReferralProgramRunning: boolean;
   isVolumeDiscountProgramRunning: boolean;
 }) => {
+  const t = useT();
   const totalDiscount = 1 - (1 - volumeDiscount) * (1 - referralDiscount);
   const totalDiscountDescription = t(
     'The total discount is calculated according to the following formula: '
@@ -431,6 +435,7 @@ const VolumeTiers = ({
   lastEpochVolume: number;
   windowLength: number;
 }) => {
+  const t = useT();
   if (!tiers.length) {
     return (
       <p className="text-muted text-sm">
@@ -447,7 +452,9 @@ const VolumeTiers = ({
             <Th>{t('Tier')}</Th>
             <Th>{t('Discount')}</Th>
             <Th>{t('Min. trading volume')}</Th>
-            <Th>{t('My volume (last %s epochs)', windowLength.toString())}</Th>
+            <Th>
+              {t('My volume (last {{count}} epochs)', { count: windowLength })}
+            </Th>
             <Th />
           </tr>
         </THead>
@@ -492,6 +499,8 @@ const ReferralTiers = ({
   epochsInSet: number;
   referralVolumeInWindow: number;
 }) => {
+  const t = useT();
+
   if (!tiers.length) {
     return (
       <p className="text-muted text-sm">{t('No referral program active')}</p>
@@ -549,6 +558,8 @@ const ReferralTiers = ({
 };
 
 const YourTier = () => {
+  const t = useT();
+
   return (
     <span className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white">
       {t('Your tier')}
@@ -556,30 +567,34 @@ const YourTier = () => {
   );
 };
 
-const ReferrerInfo = ({ code }: { code?: string }) => (
-  <div className="text-vega-clight-200 dark:vega-cdark-200 pt-3 text-sm">
-    <p className="mb-1">
-      {t('Connected key is owner of the referral set')}
-      {code && (
-        <>
-          {' '}
-          <span className="bg-rainbow bg-clip-text text-transparent">
-            {truncateMiddle(code)}
-          </span>
-        </>
-      )}
-      {'. '}
-      {t('As owner, it is eligible for commission not fee discounts.')}
-    </p>
-    <p>
-      {t('See')}{' '}
-      <Link
-        className="text-black underline dark:text-white"
-        to={Links.REFERRALS()}
-      >
-        {t('Referrals')}
-      </Link>{' '}
-      {t('for more information.')}
-    </p>
-  </div>
-);
+const ReferrerInfo = ({ code }: { code?: string }) => {
+  const t = useT();
+
+  return (
+    <div className="text-vega-clight-200 dark:vega-cdark-200 pt-3 text-sm">
+      <p className="mb-1">
+        {t('Connected key is owner of the referral set')}
+        {code && (
+          <>
+            {' '}
+            <span className="bg-rainbow bg-clip-text text-transparent">
+              {truncateMiddle(code)}
+            </span>
+          </>
+        )}
+        {'. '}
+        {t('As owner, it is eligible for commission not fee discounts.')}
+      </p>
+      <p>
+        {t('See')}{' '}
+        <Link
+          className="text-black underline dark:text-white"
+          to={Links.REFERRALS()}
+        >
+          {t('Referrals')}
+        </Link>{' '}
+        {t('for more information.')}
+      </p>
+    </div>
+  );
+};
diff --git a/apps/trading/components/fees-container/market-fees.tsx b/apps/trading/components/fees-container/market-fees.tsx
index daba27956..47d307300 100644
--- a/apps/trading/components/fees-container/market-fees.tsx
+++ b/apps/trading/components/fees-container/market-fees.tsx
@@ -1,38 +1,45 @@
 import compact from 'lodash/compact';
 import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import { formatPercentage, getAdjustedFee } from './utils';
 import { MarketCodeCell } from '../../client-pages/markets/market-code-cell';
 import BigNumber from 'bignumber.js';
 import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
+import { useMemo } from 'react';
 
-const feesTableColumnDefs = [
-  { field: 'code', cellRenderer: 'MarketCodeCell' },
-  {
-    field: 'feeAfterDiscount',
-    headerName: t('Total fee after discount'),
-    valueFormatter: ({ value }: { value: number }) => value + '%',
-  },
-  {
-    field: 'infraFee',
-    valueFormatter: ({ value }: { value: number }) => value + '%',
-  },
-  {
-    field: 'makerFee',
-    valueFormatter: ({ value }: { value: number }) => value + '%',
-  },
-  {
-    field: 'liquidityFee',
-    valueFormatter: ({ value }: { value: number }) => value + '%',
-  },
-  {
-    field: 'totalFee',
-    headerName: t('Total fee before discount'),
-    valueFormatter: ({ value }: { value: number }) => value + '%',
-  },
-];
+const useFeesTableColumnDefs = () => {
+  const t = useT();
+  return useMemo(
+    () => [
+      { field: 'code', cellRenderer: 'MarketCodeCell' },
+      {
+        field: 'feeAfterDiscount',
+        headerName: t('Total fee after discount'),
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'infraFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'makerFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'liquidityFee',
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+      {
+        field: 'totalFee',
+        headerName: t('Total fee before discount'),
+        valueFormatter: ({ value }: { value: number }) => value + '%',
+      },
+    ],
+    [t]
+  );
+};
 
 const feesTableDefaultColDef = {
   flex: 1,
@@ -83,7 +90,7 @@ export const MarketFees = ({
   return (
     <div className="border rounded-sm border-default">
       <AgGrid
-        columnDefs={feesTableColumnDefs}
+        columnDefs={useFeesTableColumnDefs()}
         rowData={rows}
         getRowId={({ data }) => data.id}
         defaultColDef={feesTableDefaultColDef}
diff --git a/apps/trading/components/fills-container/fills-container.tsx b/apps/trading/components/fills-container/fills-container.tsx
index 32e0de34f..da26c8f9f 100644
--- a/apps/trading/components/fills-container/fills-container.tsx
+++ b/apps/trading/components/fills-container/fills-container.tsx
@@ -3,13 +3,14 @@ import { FillsManager } from '@vegaprotocol/fills';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { useT } from '../../lib/use-t';
 
 export const FillsContainer = () => {
+  const t = useT();
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey } = useVegaWallet();
 
diff --git a/apps/trading/components/funding-container/funding-container.tsx b/apps/trading/components/funding-container/funding-container.tsx
index d689f245a..41eaa69d5 100644
--- a/apps/trading/components/funding-container/funding-container.tsx
+++ b/apps/trading/components/funding-container/funding-container.tsx
@@ -6,9 +6,9 @@ import 'pennant/dist/style.css';
 import { useFundingPeriodsQuery } from '@vegaprotocol/markets';
 import { LineChart } from 'pennant';
 import { useMemo } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
 
 const calculateStartDate = (range: string): string | undefined => {
   const now = new Date();
@@ -41,6 +41,7 @@ const DateRange = {
 };
 
 export const FundingContainer = ({ marketId }: { marketId: string }) => {
+  const t = useT();
   const { theme } = useThemeSwitcher();
   const variables = useMemo(
     () => ({
@@ -73,7 +74,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => {
         cols: ['Date', t('Funding rate')],
         rows: sortBy(rows, 'endTime').map((d) => [d.endTime, d.fundingRate]),
       };
-    }, [data?.fundingPeriods.edges]);
+    }, [data?.fundingPeriods.edges, t]);
   if (!data || !values?.rows.length) {
     return <Splash> {t('No funding history data')}</Splash>;
   }
diff --git a/apps/trading/components/funding-payments-container/funding-payments-container.tsx b/apps/trading/components/funding-payments-container/funding-payments-container.tsx
index bd4a8ca68..a053c6c21 100644
--- a/apps/trading/components/funding-payments-container/funding-payments-container.tsx
+++ b/apps/trading/components/funding-payments-container/funding-payments-container.tsx
@@ -3,17 +3,18 @@ import { FundingPaymentsManager } from '@vegaprotocol/funding-payments';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { useT } from '../../lib/use-t';
 
 export const FundingPaymentsContainer = ({
   marketId,
 }: {
   marketId?: string;
 }) => {
+  const t = useT();
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey } = useVegaWallet();
 
diff --git a/apps/trading/components/ledger-container/ledger-container.tsx b/apps/trading/components/ledger-container/ledger-container.tsx
index 36bddc043..8c98ed8cb 100644
--- a/apps/trading/components/ledger-container/ledger-container.tsx
+++ b/apps/trading/components/ledger-container/ledger-container.tsx
@@ -1,12 +1,13 @@
-import { t } from '@vegaprotocol/i18n';
 import { LedgerExportForm } from '@vegaprotocol/ledger';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useEnvironment } from '@vegaprotocol/environment';
 import type { PartyAssetFieldsFragment } from '@vegaprotocol/assets';
 import { usePartyAssetsQuery } from '@vegaprotocol/assets';
+import { useT } from '../../lib/use-t';
 
 export const LedgerContainer = () => {
+  const t = useT();
   const VEGA_URL = useEnvironment((store) => store.VEGA_URL);
   const { pubKey } = useVegaWallet();
   const { data, loading } = usePartyAssetsQuery({
diff --git a/apps/trading/components/liquidity-container/liquidity-container.tsx b/apps/trading/components/liquidity-container/liquidity-container.tsx
index 8d1589b81..7ddea435b 100644
--- a/apps/trading/components/liquidity-container/liquidity-container.tsx
+++ b/apps/trading/components/liquidity-container/liquidity-container.tsx
@@ -1,6 +1,5 @@
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import {
   lpAggregatedDataProvider,
   type Filter,
@@ -17,6 +16,7 @@ import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { useEffect } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { useT } from '../../lib/use-t';
 
 export const LiquidityContainer = ({
   marketId,
@@ -25,6 +25,7 @@ export const LiquidityContainer = ({
   marketId: string | undefined;
   filter?: Filter;
 }) => {
+  const t = useT();
   const gridStore = useLiquidityStore((store) => store.gridStore);
   const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
 
diff --git a/apps/trading/components/liquidity-header/liquidity-header.tsx b/apps/trading/components/liquidity-header/liquidity-header.tsx
index 2e8fe08cf..9b71989a9 100644
--- a/apps/trading/components/liquidity-header/liquidity-header.tsx
+++ b/apps/trading/components/liquidity-header/liquidity-header.tsx
@@ -9,7 +9,6 @@ import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   CopyWithTooltip,
   ExternalLink,
@@ -24,8 +23,10 @@ import {
   usePaidFeesQuery,
 } from '@vegaprotocol/liquidity';
 import { useParams } from 'react-router-dom';
+import { useT } from '../../lib/use-t';
 
 export const LiquidityHeader = () => {
+  const t = useT();
   const { marketId } = useParams();
   const { data: market } = useMarket(marketId);
   const { data: marketData } = useStaticMarketData(marketId);
@@ -60,10 +61,9 @@ export const LiquidityHeader = () => {
         marketId && (
           <HeaderTitle>
             {market.tradableInstrument.instrument.code &&
-              t(
-                '%s liquidity provision',
-                market.tradableInstrument.instrument.code
-              )}
+              t('{{instrumentCode}} liquidity provision', {
+                instrumentCode: market.tradableInstrument.instrument.code,
+              })}
           </HeaderTitle>
         )
       }
@@ -102,8 +102,8 @@ export const LiquidityHeader = () => {
       <HeaderStat
         heading={t('Fees paid')}
         description={t(
-          'The amount of fees paid to liquidity providers across the whole market during the last epoch %s.',
-          feesObject?.node.epoch.toString() || '-'
+          'The amount of fees paid to liquidity providers across the whole market during the last epoch {{epoch}}.',
+          { epoch: feesObject?.node.epoch.toString() || '-' }
         )}
         testId="fees-paid"
       >
diff --git a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
index 59f62c588..07a50a6fa 100644
--- a/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
+++ b/apps/trading/components/liquidity-supplied/liquidity-supplied.tsx
@@ -21,10 +21,10 @@ import {
   addDecimalsFormatNumberQuantum,
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { Link } from 'react-router-dom';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
 
 interface Props {
   marketId?: string;
@@ -39,6 +39,7 @@ export const MarketLiquiditySupplied = ({
   noUpdate = false,
   quantum,
 }: Props) => {
+  const t = useT();
   const [market, setMarket] = useState<MarketData>();
   const { params } = useNetworkParams([
     NetworkParams.market_liquidity_stakeToCcyVolume,
diff --git a/apps/trading/components/market-banner/market-successor-banner.spec.tsx b/apps/trading/components/market-banner/market-successor-banner.spec.tsx
index 139944247..390d0f1d1 100644
--- a/apps/trading/components/market-banner/market-successor-banner.spec.tsx
+++ b/apps/trading/components/market-banner/market-successor-banner.spec.tsx
@@ -132,7 +132,9 @@ describe('MarketSuccessorBanner', () => {
         wrapper: MockedProvider,
       });
       expect(
-        screen.getByText('has a 24h trading volume of 101.367')
+        screen.getByText('has a 24h trading volume of 101.367', {
+          exact: false,
+        })
       ).toBeInTheDocument();
     });
 
diff --git a/apps/trading/components/market-banner/market-successor-banner.tsx b/apps/trading/components/market-banner/market-successor-banner.tsx
index d890e586b..57d14b394 100644
--- a/apps/trading/components/market-banner/market-successor-banner.tsx
+++ b/apps/trading/components/market-banner/market-successor-banner.tsx
@@ -17,8 +17,9 @@ import {
   getMarketExpiryDate,
   isNumeric,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
+import { useT, ns } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 const getExpiryDate = (tags: string[], close?: string): Date | null => {
   const expiryDate = getMarketExpiryDate(tags);
@@ -30,6 +31,7 @@ export const MarketSuccessorBanner = ({
 }: {
   market: Market | null;
 }) => {
+  const t = useT();
   const { data: marketState } = useMarketState(market?.id);
   const isSettled = marketState === Types.MarketState.STATE_SETTLED;
   const { data: successorData, loading } = useSuccessorMarket(market?.id);
@@ -81,8 +83,8 @@ export const MarketSuccessorBanner = ({
           <div className="mt-1">
             {duration && (
               <span>
-                {t('This market expires in %s.', [
-                  formatDuration(duration, {
+                {t('This market expires in {{duration}}.', {
+                  duration: formatDuration(duration, {
                     format: [
                       'years',
                       'months',
@@ -92,22 +94,46 @@ export const MarketSuccessorBanner = ({
                       'minutes',
                     ],
                   }),
-                ])}
+                })}
               </span>
             )}
             {successorData && (
               <>
                 {' '}
-                {t('The successor market')}
-                {!successorVolume ? ' is ' : ' '}
-                <ExternalLink href={`/#/markets/${successorData?.id}`}>
-                  {successorData?.tradableInstrument.instrument.name}
-                </ExternalLink>
-                {successorVolume && (
-                  <span>
-                    {' '}
-                    {t('has a 24h trading volume of %s', [successorVolume])}
-                  </span>
+                {successorVolume ? (
+                  <Trans
+                    defaults="The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}"
+                    values={{
+                      successorVolume,
+                      instrumentName:
+                        successorData?.tradableInstrument.instrument.name,
+                    }}
+                    components={[
+                      <ExternalLink
+                        href={`/#/markets/${successorData?.id}`}
+                        key="link"
+                      >
+                        successor market name
+                      </ExternalLink>,
+                    ]}
+                  />
+                ) : (
+                  <Trans
+                    defaults="The successor market is <0>{{instrumentName}}</0>"
+                    values={{
+                      instrumentName:
+                        successorData?.tradableInstrument.instrument.name,
+                    }}
+                    components={[
+                      <ExternalLink
+                        href={`/#/markets/${successorData?.id}`}
+                        key="link"
+                      >
+                        successor market name
+                      </ExternalLink>,
+                    ]}
+                    ns={ns}
+                  />
                 )}
               </>
             )}
diff --git a/apps/trading/components/market-banner/market-successor-proposal-banner.tsx b/apps/trading/components/market-banner/market-successor-proposal-banner.tsx
index f2d140770..2acb35435 100644
--- a/apps/trading/components/market-banner/market-successor-proposal-banner.tsx
+++ b/apps/trading/components/market-banner/market-successor-proposal-banner.tsx
@@ -9,16 +9,17 @@ import {
   Intent,
   NotificationBanner,
 } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import * as Types from '@vegaprotocol/types';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useT } from '../../lib/use-t';
 
 export const MarketSuccessorProposalBanner = ({
   marketId,
 }: {
   marketId?: string;
 }) => {
+  const t = useT();
   const { data: proposals } = useDataProvider({
     dataProvider: marketViewProposalsDataProvider,
     skip: !marketId,
@@ -57,9 +58,13 @@ export const MarketSuccessorProposalBanner = ({
             : t('Successors to this market have been proposed')}
         </div>
         <div>
-          {successors.length === 1
-            ? t('Check out the terms of the proposal and vote:')
-            : t('Check out the terms of the proposals and vote:')}{' '}
+          {t(
+            'checkOutProposalsAndVote',
+            'Check out the terms of the proposals and vote:',
+            {
+              count: successors.length,
+            }
+          )}{' '}
           {successors.map((item, i) => {
             const externalLink = tokenLink(
               TOKEN_PROPOSAL.replace(':id', item.id || '')
diff --git a/apps/trading/components/market-banner/market-termination-banner.tsx b/apps/trading/components/market-banner/market-termination-banner.tsx
index 7f08bd2de..241bb2f50 100644
--- a/apps/trading/components/market-banner/market-termination-banner.tsx
+++ b/apps/trading/components/market-banner/market-termination-banner.tsx
@@ -8,7 +8,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import type { MarketViewProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { marketViewProposalsDataProvider } from '@vegaprotocol/proposals';
-import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
 import type { Market } from '@vegaprotocol/markets';
 import { getQuoteName } from '@vegaprotocol/markets';
@@ -21,6 +20,7 @@ import {
   useLinks,
 } from '@vegaprotocol/environment';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useT } from '../../lib/use-t';
 
 const filterProposals = (
   data: MarketViewProposalFieldsFragment[] | null,
@@ -68,6 +68,7 @@ export const MarketTerminationBanner = ({
 }: {
   market: Market | null;
 }) => {
+  const t = useT();
   const [visible, setVisible] = useState(true);
   const skip = !market || !visible;
   const { data: passedProposalsData } = useDataProvider({
@@ -113,19 +114,22 @@ export const MarketTerminationBanner = ({
     content = (
       <>
         <div className="uppercase mb-1">
-          {t('Trading on Market %s will stop on %s', [name, date])}
+          {t('Trading on Market {{name}} will stop on {{date}}', {
+            name,
+            date,
+          })}
         </div>
         <div>
           {t(
-            'You will no longer be able to hold a position on this market when it closes in %s.',
-            [duration]
+            'You will no longer be able to hold a position on this market when it closes in {{duration}}.',
+            { duration }
           )}{' '}
           {price &&
             assetSymbol &&
-            t('The final price will be %s %s.', [
-              addDecimalsFormatNumber(price, market.decimalPlaces),
+            t('The final price will be {{price}} {{assetSymbol}}.', {
+              price: addDecimalsFormatNumber(price, market.decimalPlaces),
               assetSymbol,
-            ])}
+            })}
         </div>
       </>
     );
@@ -134,8 +138,8 @@ export const MarketTerminationBanner = ({
       <>
         <div className="uppercase mb-1">
           {t(
-            'Trading on Market %s may stop. There are open proposals to close this market',
-            [name]
+            'Trading on Market {{name}} may stop. There are open proposals to close this market',
+            { name }
           )}
         </div>
         <div>
@@ -151,17 +155,17 @@ export const MarketTerminationBanner = ({
       <>
         <div className="uppercase mb-1">
           {t(
-            'Trading on Market %s may stop on %s. There is open proposal to close this market.',
-            [name, date]
+            'Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.',
+            { name, date }
           )}
         </div>
         <div>
           {price &&
             assetSymbol &&
-            t('Proposed final price is %s %s.', [
-              addDecimalsFormatNumber(price, market.decimalPlaces),
+            t('Proposed final price is {{price}} {{assetSymbol}}.', {
+              price: addDecimalsFormatNumber(price, market.decimalPlaces),
               assetSymbol,
-            ])}
+            })}
         </div>
         <div>
           <ExternalLink href={proposalLink}>{t('View proposal')}</ExternalLink>
diff --git a/apps/trading/components/market-selector/asset-dropdown.tsx b/apps/trading/components/market-selector/asset-dropdown.tsx
index 16aebc6bd..6a1375698 100644
--- a/apps/trading/components/market-selector/asset-dropdown.tsx
+++ b/apps/trading/components/market-selector/asset-dropdown.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   TradingDropdown,
   TradingDropdownCheckboxItem,
@@ -7,6 +6,7 @@ import {
   TradingDropdownTrigger,
 } from '@vegaprotocol/ui-toolkit';
 import { MarketSelectorButton } from './market-selector-button';
+import { useT } from '../../lib/use-t';
 
 type Assets = Array<{ id: string; symbol: string }>;
 
@@ -19,6 +19,7 @@ export const AssetDropdown = ({
   checkedAssets: string[];
   onSelect: (id: string, checked: boolean) => void;
 }) => {
+  const t = useT();
   if (!assets?.length) {
     return null;
   }
@@ -29,7 +30,7 @@ export const AssetDropdown = ({
         trigger={
           <TradingDropdownTrigger data-testid="asset-trigger">
             <MarketSelectorButton>
-              {triggerText({ assets, checkedAssets })}
+              {triggerText({ assets, checkedAssets }, t)}
             </MarketSelectorButton>
           </TradingDropdownTrigger>
         }
@@ -58,13 +59,16 @@ export const AssetDropdown = ({
   );
 };
 
-const triggerText = ({
-  assets,
-  checkedAssets,
-}: {
-  assets: Assets;
-  checkedAssets: string[];
-}) => {
+const triggerText = (
+  {
+    assets,
+    checkedAssets,
+  }: {
+    assets: Assets;
+    checkedAssets: string[];
+  },
+  t: ReturnType<typeof useT>
+) => {
   let text = t('Assets');
 
   if (checkedAssets.length === 1) {
@@ -72,7 +76,9 @@ const triggerText = ({
     const asset = assets.find((a) => a.id === assetId);
     text = asset ? asset.symbol : t('Asset (1)');
   } else if (checkedAssets.length > 1) {
-    text = t(`${checkedAssets.length} Assets`);
+    text = t('{{checkedAssets}} Assets', {
+      checkedAssets: checkedAssets.length,
+    });
   }
 
   return text;
diff --git a/apps/trading/components/market-selector/market-selector-item.tsx b/apps/trading/components/market-selector/market-selector-item.tsx
index 6c68def54..bd4e31041 100644
--- a/apps/trading/components/market-selector/market-selector-item.tsx
+++ b/apps/trading/components/market-selector/market-selector-item.tsx
@@ -11,8 +11,8 @@ import {
   MarketTradingMode,
   MarketTradingModeMapping,
 } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
 import { MarketProductPill } from '@vegaprotocol/datagrid';
+import { useT } from '../../lib/use-t';
 
 export const MarketSelectorItem = ({
   market,
@@ -52,6 +52,7 @@ const MarketData = ({
   market: MarketMaybeWithDataAndCandles;
   allProducts: boolean;
 }) => {
+  const t = useT();
   const { data } = useMarketDataUpdateSubscription({
     variables: {
       marketId: market.id,
diff --git a/apps/trading/components/market-selector/market-selector.tsx b/apps/trading/components/market-selector/market-selector.tsx
index 266ae6d82..2f5ffdb08 100644
--- a/apps/trading/components/market-selector/market-selector.tsx
+++ b/apps/trading/components/market-selector/market-selector.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import uniqBy from 'lodash/uniqBy';
 import {
   getAsset,
@@ -21,6 +20,7 @@ import type { SortType } from './sort-dropdown';
 import { Sort, SortDropdown } from './sort-dropdown';
 import { MarketSelectorItem } from './market-selector-item';
 import classNames from 'classnames';
+import { useT } from '../../lib/use-t';
 
 export type Filter = {
   searchTerm: string;
@@ -40,6 +40,7 @@ export const MarketSelector = ({
   currentMarketId?: string;
   onSelect: (marketId: string) => void;
 }) => {
+  const t = useT();
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
     product: Product.All,
@@ -158,6 +159,7 @@ const MarketList = ({
   noItems: string;
   allProducts: boolean;
 }) => {
+  const t = useT();
   const itemSize = 45;
   const listRef = useRef<HTMLDivElement | null>(null);
   const rect = listRef.current?.getBoundingClientRect();
diff --git a/apps/trading/components/market-selector/product-selector.tsx b/apps/trading/components/market-selector/product-selector.tsx
index b80361d37..67ee4adb6 100644
--- a/apps/trading/components/market-selector/product-selector.tsx
+++ b/apps/trading/components/market-selector/product-selector.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
-import { t } from '@vegaprotocol/i18n';
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
 
 // Make sure these match the available __typename properties on product
 export const Product = {
@@ -14,15 +14,6 @@ export const Product = {
 
 export type ProductType = keyof typeof Product;
 
-const ProductTypeMapping: {
-  [key in ProductType]: string;
-} = {
-  [Product.All]: 'All',
-  [Product.Future]: 'Futures',
-  [Product.Spot]: 'Spot',
-  [Product.Perpetual]: 'Perpetuals',
-};
-
 export const ProductSelector = ({
   product,
   onSelect,
@@ -30,6 +21,15 @@ export const ProductSelector = ({
   product: ProductType;
   onSelect: (product: ProductType) => void;
 }) => {
+  const t = useT();
+  const ProductTypeMapping: {
+    [key in ProductType]: string;
+  } = {
+    [Product.All]: t('All'),
+    [Product.Future]: t('Futures'),
+    [Product.Spot]: t('Spot'),
+    [Product.Perpetual]: t('Perpetuals'),
+  };
   return (
     <div className="flex mb-2">
       {Object.keys(Product).map((t) => {
diff --git a/apps/trading/components/market-state/market-state.tsx b/apps/trading/components/market-state/market-state.tsx
index d5dbb10e8..515c041be 100644
--- a/apps/trading/components/market-state/market-state.tsx
+++ b/apps/trading/components/market-state/market-state.tsx
@@ -1,7 +1,6 @@
 import throttle from 'lodash/throttle';
 import type { MarketData, Market } from '@vegaprotocol/markets';
 import { marketDataProvider } from '@vegaprotocol/markets';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import * as Schema from '@vegaprotocol/types';
 import { HeaderStat } from '../header';
@@ -9,8 +8,10 @@ import { useCallback, useRef, useState } from 'react';
 import * as constants from '../constants';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { useT } from '../../lib/use-t';
 
 export const MarketState = ({ market }: { market: Market | null }) => {
+  const t = useT();
   const [marketState, setMarketState] = useState<Schema.MarketState | null>(
     null
   );
@@ -41,7 +42,7 @@ export const MarketState = ({ market }: { market: Market | null }) => {
   return (
     <HeaderStat
       heading={t('Status')}
-      description={getMarketStateTooltip(marketState)}
+      description={useGetMarketStateTooltip(marketState)}
       testId="market-state"
     >
       {marketState ? Schema.MarketStateMapping[marketState] : '-'}
@@ -49,7 +50,8 @@ export const MarketState = ({ market }: { market: Market | null }) => {
   );
 };
 
-const getMarketStateTooltip = (state: Schema.MarketState | null) => {
+const useGetMarketStateTooltip = (state: Schema.MarketState | null) => {
+  const t = useT();
   if (state === Schema.MarketState.STATE_ACTIVE) {
     return t('Enactment date reached and usual auction exit checks pass');
   }
@@ -96,7 +98,7 @@ const getMarketStateTooltip = (state: Schema.MarketState | null) => {
     return (
       <p>
         {t(
-          `This market has been suspended via a governance vote and can be resumed or terminated by further votes.`
+          'This market has been suspended via a governance vote and can be resumed or terminated by further votes.'
         )}
         {DocsLinks && (
           <ExternalLink href={DocsLinks.MARKET_LIFECYCLE} className="ml-1">
diff --git a/apps/trading/components/market-trading-mode/market-trading-mode.tsx b/apps/trading/components/market-trading-mode/market-trading-mode.tsx
index 86350f60a..2bc2f73da 100644
--- a/apps/trading/components/market-trading-mode/market-trading-mode.tsx
+++ b/apps/trading/components/market-trading-mode/market-trading-mode.tsx
@@ -1,11 +1,11 @@
 import type { RefObject } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { TradingModeTooltip } from '@vegaprotocol/deal-ticket';
 import { useInView } from 'react-intersection-observer';
 import * as Schema from '@vegaprotocol/types';
 import { HeaderStat } from '../header';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useStaticMarketData } from '@vegaprotocol/markets';
+import { useT } from '../../lib/use-t';
 
 const getTradingModeLabel = (
   marketTradingMode?: Schema.MarketTradingMode,
@@ -36,6 +36,7 @@ export const HeaderStatMarketTradingMode = ({
   initialTradingMode,
   initialTrigger,
 }: HeaderStatMarketTradingModeProps) => {
+  const t = useT();
   const { data } = useStaticMarketData(marketId);
   const marketTradingMode = data?.marketTradingMode ?? initialTradingMode;
   const trigger = data?.trigger ?? initialTrigger;
diff --git a/apps/trading/components/market-volume/market-volume.tsx b/apps/trading/components/market-volume/market-volume.tsx
index 624e6afe1..a764451a7 100644
--- a/apps/trading/components/market-volume/market-volume.tsx
+++ b/apps/trading/components/market-volume/market-volume.tsx
@@ -1,14 +1,15 @@
 import { useCallback, useRef, useState } from 'react';
 import throttle from 'lodash/throttle';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { MarketData } from '@vegaprotocol/markets';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/markets';
 import { HeaderStat } from '../header';
 import * as constants from '../constants';
+import { useT } from '../../lib/use-t';
 
 export const MarketVolume = ({ marketId }: { marketId: string }) => {
+  const t = useT();
   const [marketVolume, setMarketVolume] = useState<string>('-');
   const variables = { marketId };
   const { data } = useDataProvider({
diff --git a/apps/trading/components/navbar/nav-header.tsx b/apps/trading/components/navbar/nav-header.tsx
index da12b118a..8d274ee6c 100644
--- a/apps/trading/components/navbar/nav-header.tsx
+++ b/apps/trading/components/navbar/nav-header.tsx
@@ -1,15 +1,16 @@
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { MarketSelector } from '../market-selector';
 import { useMarket, useMarketList } from '@vegaprotocol/markets';
-import { t } from '@vegaprotocol/i18n';
 import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useState } from 'react';
+import { useT } from '../../lib/use-t';
 
 /**
  * This is only rendered for the mobile navigation
  */
 export const NavHeader = () => {
+  const t = useT();
   const { marketId } = useParams();
   const { data } = useMarket(marketId);
   const [open, setOpen] = useState(false);
diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx
index 232254c44..bcc5d0b36 100644
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@@ -7,8 +7,8 @@ import {
   DApp,
   useLinks,
   FLAGS,
+  useEnvNameMapping,
 } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import { VegaIconNames, VegaIcon, VLogo } from '@vegaprotocol/ui-toolkit';
@@ -22,6 +22,7 @@ import { VegaWalletMenu } from '../vega-wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { WalletIcon } from '../icons/wallet';
 import { ProtocolUpgradeCountdown } from '@vegaprotocol/proposals';
+import { useT } from '../../lib/use-t';
 
 type MenuState = 'wallet' | 'nav' | null;
 type Theme = 'system' | 'yellow';
@@ -33,6 +34,7 @@ export const Navbar = ({
   children?: ReactNode;
   theme?: Theme;
 }) => {
+  const t = useT();
   // menu state for small screens
   const [menu, setMenu] = useState<MenuState>(null);
 
@@ -138,6 +140,8 @@ export const Navbar = ({
  * of the navigation
  */
 const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
+  const t = useT();
+  const envNameMapping = useEnvNameMapping();
   const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
   const marketId = useGlobalStore((store) => store.marketId);
 
@@ -412,16 +416,6 @@ const NavbarMobileButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
   );
 };
 
-const envNameMapping: Record<Networks, string> = {
-  [Networks.VALIDATOR_TESTNET]: t('VALIDATOR_TESTNET'),
-  [Networks.CUSTOM]: t('Custom'),
-  [Networks.DEVNET]: t('Devnet'),
-  [Networks.STAGNET1]: t('Stagnet'),
-  [Networks.TESTNET]: t('Fairground testnet'),
-  [Networks.MAINNET_MIRROR]: t('Mirror'),
-  [Networks.MAINNET]: t('Mainnet'),
-};
-
 // https://github.com/radix-ui/primitives/issues/1630
 // eslint-disable-next-line
 const preventHover = (e: any) => {
diff --git a/apps/trading/components/node-health/node-health.tsx b/apps/trading/components/node-health/node-health.tsx
index 16f5fc3ee..22705629c 100644
--- a/apps/trading/components/node-health/node-health.tsx
+++ b/apps/trading/components/node-health/node-health.tsx
@@ -3,11 +3,12 @@ import {
   useNodeHealth,
   useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { Indicator, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { Tooltip } from '../../components/tooltip';
+import { useT } from '../../lib/use-t';
 
 export const NodeHealthContainer = () => {
+  const t = useT();
   const { VEGA_URL, VEGA_INCIDENT_URL } = useEnvironment();
   const setNodeSwitcher = useNodeSwitcherStore((store) => store.setDialogOpen);
   const { text, intent, datanodeBlockHeight } = useNodeHealth();
@@ -57,6 +58,7 @@ interface NodeUrlProps {
 }
 
 export const NodeUrl = ({ url }: NodeUrlProps) => {
+  const t = useT();
   const urlObj = new URL(url);
   const nodeUrl = urlObj.hostname;
   return <span title={t('Connected node')}>{nodeUrl}</span>;
diff --git a/apps/trading/components/orders-container/orders-container.tsx b/apps/trading/components/orders-container/orders-container.tsx
index 0865b791d..4c4eb8c7e 100644
--- a/apps/trading/components/orders-container/orders-container.tsx
+++ b/apps/trading/components/orders-container/orders-container.tsx
@@ -1,6 +1,5 @@
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { Filter, OrderListManager } from '@vegaprotocol/orders';
-import { t } from '@vegaprotocol/i18n';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useNavigateWithMeta } from '../../lib/hooks/use-market-click-handler';
@@ -9,8 +8,12 @@ import { persist } from 'zustand/middleware';
 import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { OrderStatus } from '@vegaprotocol/types';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
 
-const resolveNoRowsMessage = (filter?: Filter) => {
+const resolveNoRowsMessage = (
+  filter: Filter | undefined,
+  t: ReturnType<typeof useT>
+) => {
   switch (filter) {
     case Filter.Open:
       return t('No open orders');
@@ -42,6 +45,7 @@ export interface OrderContainerProps {
 const AUTO_SIZE_COLUMNS = ['instrument-code'];
 
 export const OrdersContainer = ({ filter }: OrderContainerProps) => {
+  const t = useT();
   const { pubKey, isReadOnly } = useVegaWallet();
   const navigate = useNavigateWithMeta();
   const { gridState, updateGridState } = useOrderListGridState(filter);
@@ -56,7 +60,7 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
   if (!pubKey) {
     return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
-  const noRowsMessage = resolveNoRowsMessage(filter);
+  const noRowsMessage = resolveNoRowsMessage(filter, t);
 
   return (
     <OrderListManager
diff --git a/apps/trading/components/positions-container/positions-container.tsx b/apps/trading/components/positions-container/positions-container.tsx
index 295fb9463..cb303c162 100644
--- a/apps/trading/components/positions-container/positions-container.tsx
+++ b/apps/trading/components/positions-container/positions-container.tsx
@@ -1,5 +1,4 @@
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import { PositionsManager } from '@vegaprotocol/positions';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -9,10 +8,12 @@ import type { StateCreator } from 'zustand';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { useT } from '../../lib/use-t';
 
 const AUTO_SIZE_COLUMNS = ['marketCode'];
 
 export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
+  const t = useT();
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
diff --git a/apps/trading/components/positions-menu/positions-menu.tsx b/apps/trading/components/positions-menu/positions-menu.tsx
index 428bb82d7..c90e8e9bb 100644
--- a/apps/trading/components/positions-menu/positions-menu.tsx
+++ b/apps/trading/components/positions-menu/positions-menu.tsx
@@ -1,8 +1,9 @@
-import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { usePositionsStore } from '../positions-container';
+import { useT } from '../../lib/use-t';
 
 export const PositionsMenu = () => {
+  const t = useT();
   const showClosed = usePositionsStore((store) => store.showClosedMarkets);
   const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
   return (
diff --git a/apps/trading/components/settings/settings.tsx b/apps/trading/components/settings/settings.tsx
index 978480ee4..5688eb575 100644
--- a/apps/trading/components/settings/settings.tsx
+++ b/apps/trading/components/settings/settings.tsx
@@ -1,11 +1,12 @@
-import { t } from '@vegaprotocol/i18n';
 import { Switch, ToastPositionSetter } from '@vegaprotocol/ui-toolkit';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 import type { ReactNode } from 'react';
 import classNames from 'classnames';
+import { useT } from '../../lib/use-t';
 
 export const Settings = () => {
+  const t = useT();
   const { theme, setTheme } = useThemeSwitcher();
   const [isApproved, setIsApproved] = useTelemetryApproval();
   return (
diff --git a/apps/trading/components/sidebar/sidebar.tsx b/apps/trading/components/sidebar/sidebar.tsx
index 303e5b429..8827e131b 100644
--- a/apps/trading/components/sidebar/sidebar.tsx
+++ b/apps/trading/components/sidebar/sidebar.tsx
@@ -6,7 +6,6 @@ import { create } from 'zustand';
 import { TransferContainer } from '@vegaprotocol/accounts';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { DepositContainer } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/i18n';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
 import { TinyScroll, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { NodeHealthContainer } from '../node-health';
@@ -16,6 +15,7 @@ import { WithdrawContainer } from '../withdraw-container';
 import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export enum ViewType {
   Order = 'Order',
@@ -51,6 +51,7 @@ type SidebarView =
     };
 
 export const Sidebar = ({ options }: { options?: ReactNode }) => {
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
@@ -150,6 +151,7 @@ export const SidebarDivider = () => {
 };
 
 export const SidebarContent = () => {
+  const t = useT();
   const params = useParams();
   const currentRouteId = useGetCurrentRouteId();
 
diff --git a/apps/trading/components/stop-orders-container/stop-orders-container.tsx b/apps/trading/components/stop-orders-container/stop-orders-container.tsx
index b2e45b93d..c8b8dd964 100644
--- a/apps/trading/components/stop-orders-container/stop-orders-container.tsx
+++ b/apps/trading/components/stop-orders-container/stop-orders-container.tsx
@@ -1,5 +1,4 @@
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import { StopOrdersManager } from '@vegaprotocol/orders';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
@@ -8,8 +7,10 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { useT } from '../../lib/use-t';
 
 export const StopOrdersContainer = () => {
+  const t = useT();
   const { pubKey, isReadOnly } = useVegaWallet();
   const onMarketClick = useMarketClickHandler(true);
 
diff --git a/apps/trading/components/telemetry/telemetry-approval.tsx b/apps/trading/components/telemetry/telemetry-approval.tsx
index 0c21a4cd3..852b3ec4f 100644
--- a/apps/trading/components/telemetry/telemetry-approval.tsx
+++ b/apps/trading/components/telemetry/telemetry-approval.tsx
@@ -4,7 +4,7 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
+import { useT } from '../../lib/use-t';
 
 interface Props {
   telemetryValue: string;
@@ -15,6 +15,7 @@ export const TelemetryApproval = ({
   telemetryValue,
   setTelemetryValue,
 }: Props) => {
+  const t = useT();
   return (
     <div className="flex flex-col">
       <div className="mr-4" role="form">
diff --git a/apps/trading/components/telemetry/telemetry.tsx b/apps/trading/components/telemetry/telemetry.tsx
index ebe9dc103..8c556f0a5 100644
--- a/apps/trading/components/telemetry/telemetry.tsx
+++ b/apps/trading/components/telemetry/telemetry.tsx
@@ -3,12 +3,13 @@ import { Intent, useToasts } from '@vegaprotocol/ui-toolkit';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 import { useCallback, useEffect } from 'react';
 import { TelemetryApproval } from './telemetry-approval';
-import { t } from '@vegaprotocol/i18n';
 import { useOnboardingStore } from '../welcome-dialog/use-get-onboarding-step';
+import { useT } from '../../lib/use-t';
 
 const TELEMETRY_APPROVAL_TOAST_ID = 'telemetry_toast_id';
 
 export const Telemetry = () => {
+  const t = useT();
   const onboardingDissmissed = useOnboardingStore((store) => store.dismissed);
   const [telemetryValue, setTelemetryValue, isTelemetryNeeded, closeTelemetry] =
     useTelemetryApproval();
@@ -63,6 +64,7 @@ export const Telemetry = () => {
     hasToast,
     onApprovalClose,
     setTelemetryApprovalAndClose,
+    t,
   ]);
 
   return null;
diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
index 1d47dc692..b905aaf56 100644
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
 import { truncateByChars } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   VegaIcon,
   VegaIconNames,
@@ -23,8 +22,10 @@ import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import { ViewType, useSidebar } from '../sidebar';
 import classNames from 'classnames';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const VegaWalletConnectButton = () => {
+  const t = useT();
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
@@ -129,6 +130,7 @@ export const VegaWalletConnectButton = () => {
 };
 
 const KeypairItem = ({ pk, active }: { pk: PubKey; active: boolean }) => {
+  const t = useT();
   const [copied, setCopied] = useCopyTimeout();
 
   return (
diff --git a/apps/trading/components/vega-wallet/vega-wallet-menu.tsx b/apps/trading/components/vega-wallet/vega-wallet-menu.tsx
index 089082e88..0adbdf0bc 100644
--- a/apps/trading/components/vega-wallet/vega-wallet-menu.tsx
+++ b/apps/trading/components/vega-wallet/vega-wallet-menu.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import {
   TradingButton as Button,
@@ -11,12 +10,14 @@ import { useCallback, useMemo } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const VegaWalletMenu = ({
   setMenu,
 }: {
   setMenu: (open: 'nav' | 'wallet' | null) => void;
 }) => {
+  const t = useT();
   const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet();
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
@@ -76,6 +77,7 @@ const KeypairListItem = ({
   isActive: boolean;
   onSelectItem: (pk: string) => void;
 }) => {
+  const t = useT();
   const [copied, setCopied] = useCopyTimeout();
 
   return (
diff --git a/apps/trading/components/welcome-dialog/get-started.tsx b/apps/trading/components/welcome-dialog/get-started.tsx
index 5e28d2cf0..fd0c64e84 100644
--- a/apps/trading/components/welcome-dialog/get-started.tsx
+++ b/apps/trading/components/welcome-dialog/get-started.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   Intent,
@@ -18,12 +17,15 @@ import {
 import { Links, Routes } from '../../lib/links';
 import { useGlobalStore } from '../../stores';
 import { useSidebar, ViewType } from '../sidebar';
+import { useT } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
 
 interface Props {
   lead?: string;
 }
 
 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
+  const t = useT();
   const dismiss = useOnboardingStore((store) => store.dismiss);
   const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
   const marketId = useGlobalStore((store) => store.marketId);
@@ -78,6 +80,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
 };
 
 export const GetStartedCheckList = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const currentStep = useGetOnboardingStep();
   return (
@@ -104,6 +107,7 @@ export const GetStartedCheckList = () => {
 };
 
 export const GetStarted = ({ lead }: Props) => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const openVegaWalletDialog = useVegaWalletDialogStore(
@@ -132,18 +136,26 @@ export const GetStarted = ({ lead }: Props) => {
         </div>
         {VEGA_ENV === Networks.MAINNET && (
           <p className="text-sm">
-            {t('Experiment for free with virtual assets on')}{' '}
-            <ExternalLink href={VEGA_NETWORKS.TESTNET}>
-              {t('Fairground Testnet')}
-            </ExternalLink>
+            <Trans
+              defaults="Experiment for free with virtual assets on <0>Fairground Testnet</0>"
+              components={[
+                <ExternalLink href={VEGA_NETWORKS.TESTNET} key="link">
+                  Fairground Testnet
+                </ExternalLink>,
+              ]}
+            />
           </p>
         )}
         {VEGA_ENV === Networks.TESTNET && (
           <p className="text-sm">
-            {t('Ready to trade with real funds?')}{' '}
-            <ExternalLink href={VEGA_NETWORKS.MAINNET}>
-              {t('Switch to Mainnet')}
-            </ExternalLink>
+            <Trans
+              defaults="Ready to trade with real funds? <0>Switch to Mainnet</0>"
+              components={[
+                <ExternalLink href={VEGA_NETWORKS.MAINNET} key="link">
+                  Switch to Mainnet
+                </ExternalLink>,
+              ]}
+            />
           </p>
         )}
       </div>
@@ -154,11 +166,14 @@ export const GetStarted = ({ lead }: Props) => {
     return (
       <div className={wrapperClasses}>
         <p className="mb-1 text-sm">
-          You need a{' '}
-          <ExternalLink href="https://vega.xyz/wallet">
-            Vega wallet
-          </ExternalLink>{' '}
-          to start trading in this market.
+          <Trans
+            defaults="You need a <0>Vega wallet</0> to start trading in this market."
+            components={[
+              <ExternalLink href="https://vega.xyz/wallet" key="link">
+                Vega wallet
+              </ExternalLink>,
+            ]}
+          />
         </p>
         <TradingButton
           onClick={openVegaWalletDialog}
diff --git a/apps/trading/components/welcome-dialog/proposed-markets.tsx b/apps/trading/components/welcome-dialog/proposed-markets.tsx
index b7d658c74..389d85b85 100644
--- a/apps/trading/components/welcome-dialog/proposed-markets.tsx
+++ b/apps/trading/components/welcome-dialog/proposed-markets.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { proposalsDataProvider } from '@vegaprotocol/proposals';
 import take from 'lodash/take';
@@ -12,8 +11,10 @@ import {
   TOKEN_PROPOSALS,
   useLinks,
 } from '@vegaprotocol/environment';
+import { useT } from '../../lib/use-t';
 
 export const ProposedMarkets = () => {
+  const t = useT();
   const variables = useMemo(() => {
     return {
       proposalType: Types.ProposalType.TYPE_NEW_MARKET,
@@ -75,6 +76,6 @@ export const ProposedMarkets = () => {
         )}
       </div>
     ),
-    [newMarkets, tokenLink]
+    [newMarkets, tokenLink, t]
   );
 };
diff --git a/apps/trading/components/welcome-dialog/risk-message.tsx b/apps/trading/components/welcome-dialog/risk-message.tsx
index 29ed85ead..a2cf2860a 100644
--- a/apps/trading/components/welcome-dialog/risk-message.tsx
+++ b/apps/trading/components/welcome-dialog/risk-message.tsx
@@ -1,9 +1,20 @@
-import { t } from '@vegaprotocol/i18n';
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 import { Links } from '../../lib/links';
+import { useT } from '../../lib/use-t';
+import { Trans } from 'react-i18next';
+
+const DisclaimerLink = ({ children }: { children?: string[] }) => (
+  <Link className="underline" to={Links.DISCLAIMER()} target="_blank">
+    <span className="flex items-center gap-1">
+      <span>{children}</span>
+      <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+    </span>
+  </Link>
+);
 
 export const RiskMessage = () => {
+  const t = useT();
   return (
     <>
       <div className="p-6 mb-6 bg-vega-light-100 dark:bg-vega-dark-100">
@@ -24,15 +35,10 @@ export const RiskMessage = () => {
         </ul>
       </div>
       <p className="mb-8">
-        {t(
-          'By using the Vega Console, you acknowledge that you have read and understood the'
-        )}{' '}
-        <Link className="underline" to={Links.DISCLAIMER()} target="_blank">
-          <span className="flex items-center gap-1">
-            <span>{t('Vega Console Disclaimer')}</span>
-            <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
-          </span>
-        </Link>
+        <Trans
+          defaults="By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>"
+          components={[<DisclaimerLink key="link" />]}
+        />
       </p>
     </>
   );
diff --git a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
index b47147812..353fb0a30 100644
--- a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
+++ b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx
@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { GetStarted } from './get-started';
 import { TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { Links } from '../../lib/links';
@@ -6,8 +5,10 @@ import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
 import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets';
 import { useOnboardingStore } from './use-get-onboarding-step';
+import { useT } from '../../lib/use-t';
 
 export const WelcomeDialogContent = () => {
+  const t = useT();
   const { VEGA_ENV } = useEnvironment();
   const setOnboardingDialog = useOnboardingStore(
     (store) => store.setDialogOpen
diff --git a/apps/trading/components/welcome-dialog/welcome-dialog.tsx b/apps/trading/components/welcome-dialog/welcome-dialog.tsx
index 340bd0e7f..cb1d26c6e 100644
--- a/apps/trading/components/welcome-dialog/welcome-dialog.tsx
+++ b/apps/trading/components/welcome-dialog/welcome-dialog.tsx
@@ -1,13 +1,14 @@
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { WelcomeDialogContent } from './welcome-dialog-content';
 import { useOnboardingStore } from './use-get-onboarding-step';
 import { VegaConnectDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../../lib/vega-connectors';
 import { RiskMessage } from './risk-message';
+import { useT } from '../../lib/use-t';
 
 export const WelcomeDialog = () => {
+  const t = useT();
   const { VEGA_ENV } = useEnvironment();
   const dismissed = useOnboardingStore((store) => store.dismissed);
   const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
diff --git a/apps/trading/components/withdrawals-container/withdrawals-container.tsx b/apps/trading/components/withdrawals-container/withdrawals-container.tsx
index 517a3b277..434b757df 100644
--- a/apps/trading/components/withdrawals-container/withdrawals-container.tsx
+++ b/apps/trading/components/withdrawals-container/withdrawals-container.tsx
@@ -5,10 +5,11 @@ import {
   useIncompleteWithdrawals,
 } from '@vegaprotocol/withdraws';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useT } from '../../lib/use-t';
 
 export const WithdrawalsContainer = () => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const { data, error } = useDataProvider({
     dataProvider: withdrawalProvider,
diff --git a/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx b/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
index 060cc4c5f..246da4551 100644
--- a/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
+++ b/apps/trading/components/withdrawals-menu/withdrawals-menu.tsx
@@ -1,9 +1,10 @@
-import { t } from '@vegaprotocol/i18n';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { ViewType, useSidebar } from '../sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
+import { useT } from '../../lib/use-t';
 
 export const WithdrawalsMenu = () => {
+  const t = useT();
   const setViews = useSidebar((store) => store.setViews);
   const currentRouteId = useGetCurrentRouteId();
   return (
diff --git a/apps/trading/lib/i18n/index.ts b/apps/trading/lib/i18n/index.ts
index 63669e319..cf7d361eb 100644
--- a/apps/trading/lib/i18n/index.ts
+++ b/apps/trading/lib/i18n/index.ts
@@ -69,6 +69,7 @@ i18n
       'trading',
     ],
     defaultNS: 'trading',
+    nsSeparator: false,
     keySeparator: false, // we use content as keys
     backend,
     debug: isInDev,
diff --git a/apps/trading/lib/use-t.ts b/apps/trading/lib/use-t.ts
new file mode 100644
index 000000000..4e9ef8ea0
--- /dev/null
+++ b/apps/trading/lib/use-t.ts
@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'trading';
+export const useT = () => useTranslation('trading').t;
diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx
index d0241415c..054670549 100644
--- a/apps/trading/pages/_app.page.tsx
+++ b/apps/trading/pages/_app.page.tsx
@@ -1,7 +1,6 @@
-import { useMemo } from 'react';
+import { useMemo, Suspense } from 'react';
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
-import { t } from '@vegaprotocol/i18n';
 import {
   useEnvTriggerMapping,
   Networks,
@@ -9,6 +8,7 @@ import {
   useEnvironment,
   useInitializeEnv,
   useNodeSwitcherStore,
+  AppLoader,
 } from '@vegaprotocol/environment';
 import './styles.css';
 import { usePageTitleStore } from '../stores';
@@ -33,10 +33,11 @@ import { PartyActiveOrdersHandler } from './party-active-orders-handler';
 import { MaybeConnectEagerly } from './maybe-connect-eagerly';
 import { TransactionHandlers } from './transaction-handlers';
 import '../lib/i18n';
-
-const DEFAULT_TITLE = t('Welcome to Vega trading!');
+import { useT } from '../lib/use-t';
 
 const Title = () => {
+  const t = useT();
+  const DEFAULT_TITLE = t('Welcome to Vega trading!');
   const { pageTitle } = usePageTitleStore((store) => ({
     pageTitle: store.pageTitle,
   }));
@@ -48,7 +49,7 @@ const Title = () => {
     if (!pageTitle) return DEFAULT_TITLE;
     if (networkName) return `${pageTitle} [${networkName}]`;
     return pageTitle;
-  }, [pageTitle, networkName]);
+  }, [pageTitle, networkName, DEFAULT_TITLE]);
 
   return (
     <Head>
@@ -124,12 +125,14 @@ function VegaTradingApp(props: AppProps) {
   }
 
   return (
-    <HashRouter>
-      <Bootstrapper>
-        <AppBody {...props} />
-      </Bootstrapper>
-      <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
-    </HashRouter>
+    <Suspense fallback={<AppLoader />}>
+      <HashRouter>
+        <Bootstrapper>
+          <AppBody {...props} />
+        </Bootstrapper>
+        <NodeSwitcherDialog open={nodeSwitcherOpen} setOpen={setNodeSwitcher} />
+      </HashRouter>
+    </Suspense>
   );
 }
 
diff --git a/apps/trading/pages/client-router.tsx b/apps/trading/pages/client-router.tsx
index c3505274f..1c75e4659 100644
--- a/apps/trading/pages/client-router.tsx
+++ b/apps/trading/pages/client-router.tsx
@@ -1,7 +1,6 @@
 import type { RouteObject } from 'react-router-dom';
 import { Navigate, useRoutes } from 'react-router-dom';
 import { lazy, Suspense } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { LayoutWithSidebar } from '../components/layouts';
 import { LayoutCentered } from '../components/layouts/layout-centered';
@@ -29,17 +28,21 @@ import { MarketHeader } from '../components/market-header';
 import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
 import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
 import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
+import { useT } from '../lib/use-t';
 
 // These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
 
-const NotFound = () => (
-  <Splash>
-    <p>{t('Page not found')}</p>
-  </Splash>
-);
+const NotFound = () => {
+  const t = useT();
+  return (
+    <Splash>
+      <p>{t('Page not found')}</p>
+    </Splash>
+  );
+};
 
 export const routerConfig: RouteObject[] = compact([
   {
diff --git a/apps/trading/setup-tests.ts b/apps/trading/setup-tests.ts
index ebaab45f9..fd44664c8 100644
--- a/apps/trading/setup-tests.ts
+++ b/apps/trading/setup-tests.ts
@@ -2,6 +2,19 @@ import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
 import ResizeObserver from 'resize-observer-polyfill';
 import { defaultFallbackInView } from 'react-intersection-observer';
+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: ['trading'],
+  defaultNS: 'trading',
+});
 
 defaultFallbackInView(true);
 global.ResizeObserver = ResizeObserver;
diff --git a/libs/candles-chart/src/lib/candles-menu.tsx b/libs/candles-chart/src/lib/candles-menu.tsx
index 2d90c2792..b00c4298d 100644
--- a/libs/candles-chart/src/lib/candles-menu.tsx
+++ b/libs/candles-chart/src/lib/candles-menu.tsx
@@ -55,8 +55,7 @@ export const CandlesMenu = () => {
           <TradingDropdownTrigger className={triggerClasses}>
             <TradingButton {...triggerButtonProps}>
               {t('Interval: {{interval}}', {
-                replace: { interval: intervalLabels[interval] },
-                nsSeparator: '|',
+                interval: intervalLabels[interval],
               })}
             </TradingButton>
           </TradingDropdownTrigger>
diff --git a/libs/environment/src/hooks/use-node-health.ts b/libs/environment/src/hooks/use-node-health.ts
index b4e5d5c59..6a528c442 100644
--- a/libs/environment/src/hooks/use-node-health.ts
+++ b/libs/environment/src/hooks/use-node-health.ts
@@ -64,11 +64,8 @@ export const useNodeHealth = () => {
       text = t(
         'Erroneous latency ( >{{errorLatency}} sec): {{blockUpdateLatency}} sec',
         {
-          nsSeparator: '|',
-          replace: {
-            errorLatency: (ERROR_LATENCY / 1000).toString(),
-            blockUpdateLatency: (blockUpdateMsLatency / 1000).toFixed(2),
-          },
+          errorLatency: (ERROR_LATENCY / 1000).toString(),
+          blockUpdateLatency: (blockUpdateMsLatency / 1000).toFixed(2),
         }
       );
       intent = Intent.Danger;
@@ -82,11 +79,8 @@ export const useNodeHealth = () => {
       text = t(
         'Warning delay ( >{{warningLatency}} sec): {{blockUpdateLatency}} sec',
         {
-          nsSeparator: '|',
-          replace: {
-            warningLatency: (WARNING_LATENCY / 1000).toString(),
-            blockUpdateLatency: (blockUpdateMsLatency / 1000).toFixed(2),
-          },
+          warningLatency: (WARNING_LATENCY / 1000).toString(),
+          blockUpdateLatency: (blockUpdateMsLatency / 1000).toFixed(2),
         }
       );
       intent = Intent.Warning;
diff --git a/libs/i18n/src/index.ts b/libs/i18n/src/index.ts
index a87c49c8d..3ae717eb0 100644
--- a/libs/i18n/src/index.ts
+++ b/libs/i18n/src/index.ts
@@ -1,9 +1,28 @@
 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';
+import en_datagrid from './locales/en/datagrid.json';
+import en_deal_ticket from './locales/en/deal-ticket.json';
+import en_deposits from './locales/en/deposits.json';
+import en_environment from './locales/en/environment.json';
+import en_fills from './locales/en/fills.json';
+import en_funding_payments from './locales/en/funding-payments.json';
 import en_governance from './locales/en/governance.json';
+import en_trading from './locales/en/trading.json';
+
 export const locales = {
   en: {
     accounts: en_accounts,
+    assets: en_assets,
+    'candles-chart': en_candles_chart,
+    datagrid: en_datagrid,
+    'deal-ticket': en_deal_ticket,
+    deposits: en_deposits,
+    environment: en_environment,
+    fills: en_fills,
+    'funding-payments': en_funding_payments,
     governance: en_governance,
+    trading: en_trading,
   },
 };
diff --git a/libs/i18n/src/locales/en/trading.json b/libs/i18n/src/locales/en/trading.json
index 25ac898de..821882ffe 100644
--- a/libs/i18n/src/locales/en/trading.json
+++ b/libs/i18n/src/locales/en/trading.json
@@ -1,3 +1,297 @@
 {
-  "k": " "
+  "(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",
+  "{{checkedAssets}} Assets": "{{checkedAssets}} Assets",
+  "{{distance}} ago": "{{distance}} ago",
+  "{{instrumentCode}} liquidity provision": "{{instrumentCode}} liquidity provision",
+  "24h vol": "24h vol",
+  "24h volume": "24h volume",
+  "A percentage of commission earned by the referrer": "A percentage of commission earned by the referrer",
+  "A successors to this market has been proposed": "A successors to this market has been proposed",
+  "About the referral program": "About the referral program",
+  "Active": "Active",
+  "All": "All",
+  "An unknown error occurred.": "An unknown error occurred.",
+  "Anonymous": "Anonymous",
+  "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",
+  "Base commission rate": "Base commission rate",
+  "Best bid": "Best bid",
+  "Best offer": "Best offer",
+  "Browse": "Browse",
+  "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>": "By using the Vega Console, you acknowledge that you have read and understood the <0>Vega Console Disclaimer</0>",
+  "Candles": "Candles",
+  "Change (24h)": "Change (24h)",
+  "Chart": "Chart",
+  "checkOutProposalsAndVote": "Check out the terms of the proposals and vote:",
+  "checkOutProposalsAndVote_one": "Check out the terms of the proposal and vote:",
+  "checkOutProposalsAndVote_other": "Check out the terms of the proposals and vote:",
+  "Close": "Close",
+  "Close menu": "Close menu",
+  "Closed": "Closed",
+  "Closed markets": "Closed markets",
+  "Code must be 64 characters in length": "Code must be 64 characters in length",
+  "Code must be be valid hex": "Code must be be valid hex",
+  "Collateral": "Collateral",
+  "Combined running notional over the {{count}} epochs": "Combined running notional over the {{count}} epochs",
+  "Combined volume (last {{count}} epochs)": "Combined volume (last {{count}} epochs)",
+  "Conduct your own due diligence and consult your financial advisor before making any investment decisions.": "Conduct your own due diligence and consult your financial advisor before making any investment decisions.",
+  "Confirm in wallet...": "Confirm in wallet...",
+  "Connect": "Connect",
+  "Connect wallet": "Connect wallet",
+  "Connected node": "Connected node",
+  "Console": "Console",
+  "Continue sharing data": "Continue sharing data",
+  "Copied": "Copied",
+  "Copy": "Copy",
+  "Copy Market ID": "Copy Market ID",
+  "Could not configure web3 provider": "Could not configure web3 provider",
+  "Could not initialize app": "Could not initialize app",
+  "Countdown": "Countdown",
+  "Create a referral code": "Create a referral code",
+  "Current tier": "Current tier",
+  "Dark mode": "Dark mode",
+  "Date Joined": "Date Joined",
+  "Deposit": "Deposit",
+  "Deposit funds": "Deposit funds",
+  "Depth": "Depth",
+  "Description": "Description",
+  "Disclaimer": "Disclaimer",
+  "DISCLAIMER_P1": "Vega is a decentralised peer-to-peer protocol that can be used to trade derivatives with cryptoassets. The Vega Protocol is an implementation layer (layer one) protocol made of free, public, open-source or source-available software. Use of the Vega Protocol involves various risks, including but not limited to, losses while digital assets are supplied to the Vega Protocol and losses due to the fluctuation of prices of assets.",
+  "DISCLAIMER_P2": "Before using the Vega Protocol, review the relevant documentation at docs.vega.xyz to make sure that you understand how it works. Conduct your own due diligence and consult your financial advisor before making any investment decisions.",
+  "DISCLAIMER_P3": "As described in the Vega Protocol core license, the Vega Protocol is provided “as is”, at your own risk, and without warranties of any kind. Although Gobalsky Labs Limited developed much of the initial code for the Vega Protocol, it does not provide or control the Vega Protocol, which is run by third parties deploying it on a bespoke blockchain. Upgrades and modifications to the Vega Protocol are managed in a community-driven way by holders of the VEGA governance token.",
+  "DISCLAIMER_P4": "No developer or entity involved in creating the Vega Protocol will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the Vega Protocol, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or legal costs, or loss of profits, cryptoassets, tokens or anything else of value.",
+  "DISCLAIMER_P5": "This website is hosted on a decentralised network, the Interplanetary File System (“IPFS”). The IPFS decentralised web is made up of all the computers (nodes) connected to it. Data is therefore stored on many different computers.",
+  "DISCLAIMER_P6": "The information provided on this website does not constitute investment advice, financial advice, trading advice, or any other sort of advice and you should not treat any of the website's content as such. No party recommends that any cryptoasset should be bought, sold, or held by you via this website. No party ensures the accuracy of information listed on this website or holds any responsibility for any missing or wrong information. You understand that you are using any and all information available here at your own risk.",
+  "DISCLAIMER_P7": "Additionally, just as you can access email protocols such as SMTP through multiple email clients, you can potentially access the Vega Protocol through many web or mobile interfaces. You are responsible for doing your own diligence on those interfaces to understand the associated risks and any fees.",
+  "Disconnect": "Disconnect",
+  "Discount": "Discount",
+  "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",
+  "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",
+  "Epochs in set": "Epochs in set",
+  "Epochs to next tier": "Epochs to next tier",
+  "Expected {{distance}} ago": "Expected {{distance}} ago",
+  "Expected in {{distance}}": "Expected in {{distance}}",
+  "Experiment for free with virtual assets on <0>Fairground Testnet</0>": "Experiment for free with virtual assets on <0>Fairground Testnet</0>",
+  "Expiry": "Expiry",
+  "Explore": "Explore",
+  "Fees": "Fees",
+  "Fees paid": "Fees paid",
+  "Fees work like a CEX with no per-transaction gas for orders": "Fees work like a CEX with no per-transaction gas for orders",
+  "Fills": "Fills",
+  "Final commission rate": "Final commission rate",
+  "Find out more": "Find out more",
+  "Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.": "Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.",
+  "Fully decentralised high performance peer-to-network trading.": "Fully decentralised high performance peer-to-network trading.",
+  "Funding": "Funding",
+  "Funding history": "Funding history",
+  "Funding payments": "Funding payments",
+  "Funding Payments": "Funding Payments",
+  "Funding Rate": "Funding Rate",
+  "Funding rate": "Funding rate",
+  "Futures": "Futures",
+  "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",
+  "Give Feedback": "Give Feedback",
+  "Go back and try again": "Go back and try again",
+  "Governance": "Governance",
+  "Governance vote for this market has been rejected": "Governance vote for this market has been rejected",
+  "Governance vote for this market is valid and has been accepted": "Governance vote for this market is valid and has been accepted",
+  "Governance vote has passed and market is awaiting opening auction exit": "Governance vote has passed and market is awaiting opening auction exit",
+  "Governance vote passed to close the market": "Governance vote passed to close the market",
+  "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",
+  "How it works": "How it works",
+  "I want a code": "I want a code",
+  "Improve vega console": "Improve vega console",
+  "Inactive": "Inactive",
+  "Index Price": "Index Price",
+  "Infrastructure": "Infrastructure",
+  "Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.": "Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.",
+  "Learn about providing liquidity": "Learn about providing liquidity",
+  "Learn more": "Learn more",
+  "Ledger entries": "Ledger entries",
+  "Liquidity": "Liquidity",
+  "Liquidity fees": "Liquidity fees",
+  "Liquidity supplied": "Liquidity supplied",
+  "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",
+  "Maker": "Maker",
+  "Mark Price": "Mark Price",
+  "Mark price": "Mark price",
+  "Market": "Market",
+  "Market ID": "Market ID",
+  "Market specification": "Market specification",
+  "Market triggers cancellation or governance vote has passed to cancel": "Market triggers cancellation or governance vote has passed to cancel",
+  "Markets": "Markets",
+  "Menu": "Menu",
+  "Min. epochs": "Min. epochs",
+  "Min. trading volume": "Min. trading volume",
+  "Min. trading volume (last {{count}} epochs)": "Min. trading volume (last {{count}} epochs)",
+  "My current volume": "My current volume",
+  "My liquidity provision": "My liquidity provision",
+  "My trading fees": "My trading fees",
+  "My volume (last {{count}} epochs)": "My volume (last {{count}} epochs)",
+  "Name": "Name",
+  "No closed orders": "No closed orders",
+  "No data": "No data",
+  "No deposits": "No deposits",
+  "No funding history data": "No funding history data",
+  "No future markets.": "No future markets.",
+  "No ledger entries to export": "No ledger entries to export",
+  "No market": "No market",
+  "No markets": "No markets",
+  "No markets.": "No markets.",
+  "No open orders": "No open orders",
+  "No orders": "No orders",
+  "No party accepts any liability for any losses whatsoever.": "No party accepts any liability for any losses whatsoever.",
+  "No perpetual markets.": "No perpetual markets.",
+  "No referral program active": "No referral program active",
+  "No rejected orders": "No rejected orders",
+  "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",
+  "No withdrawals": "No withdrawals",
+  "Node: {{VEGA_URL}} is unsuitable": "Node: {{VEGA_URL}} is unsuitable",
+  "Non-custodial and pseudonymous": "Non-custodial and pseudonymous",
+  "None": "None",
+  "Number of traders": "Number of traders",
+  "Open": "Open",
+  "Open a position": "Open a position",
+  "Open markets": "Open markets",
+  "Optional": "Optional",
+  "Order": "Order",
+  "Orderbook": "Orderbook",
+  "Orders": "Orders",
+  "Page not found": "Page not found",
+  "Parent of a market": "Parent of a market",
+  "Past {{count}} epochs": "Past {{count}} epochs",
+  "Perpetuals": "Perpetuals",
+  "Please choose another market from the <0>market list<0>": "Please choose another market from the <0>market list<0>",
+  "Please connect Vega wallet": "Please connect Vega wallet",
+  "Portfolio": "Portfolio",
+  "Positions": "Positions",
+  "Price": "Price",
+  "PRNT": "PRNT",
+  "Program ends:": "Program ends:",
+  "Propose a new market": "Propose a new market",
+  "Proposed final price is {{price}} {{assetSymbol}}.": "Proposed final price is {{price}} {{assetSymbol}}.",
+  "Proposed markets": "Proposed markets",
+  "Providing liquidity": "Providing liquidity",
+  "Purpose built proof of stake blockchain": "Purpose built proof of stake blockchain",
+  "qUSD": "qUSD",
+  "qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset": "qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset",
+  "Read the terms": "Read the terms",
+  "Ready to trade": "Ready to trade",
+  "Ready to trade with real funds? <0>Switch to Mainnet</0>": "Ready to trade with real funds? <0>Switch to Mainnet</0>",
+  "Referral benefits": "Referral benefits",
+  "Referral discount": "Referral discount",
+  "referral-statistics-commission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
+  "Referrals": "Referrals",
+  "Referrer commission": "Referrer commission",
+  "Referrer trading discount": "Referrer trading discount",
+  "Referrers earn commission based on a percentage of the taker fees their referees pay": "Referrers earn commission based on a percentage of the taker fees their referees pay",
+  "Referrers generate a code assigned to their key via an on chain transaction": "Referrers generate a code assigned to their key via an on chain transaction",
+  "Rejected": "Rejected",
+  "Required epochs": "Required epochs",
+  "Required for next tier": "Required for next tier",
+  "Resources": "Resources",
+  "SCCR": "SCCR",
+  "Search": "Search",
+  "See all markets": "See all markets",
+  "Select market": "Select market",
+  "Settings": "Settings",
+  "Settlement asset": "Settlement asset",
+  "Settlement date": "Settlement date",
+  "Settlement defined by product has been triggered and completed": "Settlement defined by product has been triggered and completed",
+  "Settlement price": "Settlement price",
+  "Share data": "Share data",
+  "Share usage data": "Share usage data",
+  "Show closed markets": "Show closed markets",
+  "Something went wrong": "Something went wrong",
+  "Spot": "Spot",
+  "Spot markets coming soon.": "Spot markets coming soon.",
+  "Spread": "Spread",
+  "Stake a minimum of {{minimumStakedTokens}} $VEGA tokens": "Stake a minimum of {{minimumStakedTokens}} $VEGA tokens",
+  "Stake some $VEGA now": "Stake some $VEGA now",
+  "Staking multiplier": "Staking multiplier",
+  "Start trading": "Start trading",
+  "Start trading on the worlds most advanced decentralised exchange.": "Start trading on the worlds most advanced decentralised exchange.",
+  "Status": "Status",
+  "Stop": "Stop",
+  "Stop orders": "Stop orders",
+  "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",
+  "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",
+  "The external time weighted average price (TWAP) received from the data source defined in the data sourcing specification.": "The external time weighted average price (TWAP) received from the data source defined in the data sourcing specification.",
+  "The final price will be {{price}} {{assetSymbol}}.": "The final price will be {{price}} {{assetSymbol}}.",
+  "The market has sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.": "The market has sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.",
+  "The page you're looking for doesn't exists.": "The page you're looking for doesn't exists.",
+  "The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}": "The successor market <0>{{instrumentName}}</0> has a 24h trading volume of {{successorVolume}}",
+  "The successor market is <0>{{instrumentName}}</0>": "The successor market is <0>{{instrumentName}}</0>",
+  "The transaction could not be sent": "The transaction could not be sent",
+  "This market expires in {{duration}}.": "This market expires in {{duration}}.",
+  "This market expires when triggered by its oracle, not on a set date.": "This market expires when triggered by its oracle, not on a set date.",
+  "This market has been settled": "This market has been settled",
+  "This market has been succeeded": "This market has been succeeded",
+  "This market has been suspended via a governance vote and can be resumed or terminated by further votes.": "This market has been suspended via a governance vote and can be resumed or terminated by further votes.",
+  "This market URL is not available any more.": "This market URL is not available any more.",
+  "This timestamp is user curated metadata and does not drive any on-chain functionality.": "This timestamp is user curated metadata and does not drive any on-chain functionality.",
+  "Tier": "Tier",
+  "Toast location": "Toast location",
+  "Total commission (last {{count}}} epochs)": "Total commission (last {{count}}} epochs)",
+  "Total discount": "Total discount",
+  "Total fee after discount": "Total fee after discount",
+  "Total fee before discount": "Total fee before discount",
+  "Trader": "Trader",
+  "Trades": "Trades",
+  "Trading": "Trading",
+  "Trading has been terminated as a result of the product definition": "Trading has been terminated as a result of the product definition",
+  "Trading mode": "Trading mode",
+  "Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.": "Trading on Market {{name}} may stop on {{date}}. There is open proposal to close this market.",
+  "Trading on Market {{name}} may stop. There are open proposals to close this market": "Trading on Market {{name}} may stop. There are open proposals to close this market",
+  "Trading on Market {{name}} will stop on {{date}}": "Trading on Market {{name}} will stop on {{date}}",
+  "Transfer": "Transfer",
+  "Unknown": "Unknown",
+  "Unknown settlement date": "Unknown settlement date",
+  "View as party": "View as party",
+  "View liquidity provision table": "View liquidity provision table",
+  "View on Explorer": "View on Explorer",
+  "View oracle specification": "View oracle specification",
+  "View parent market": "View parent market",
+  "View proposals": "View proposals",
+  "View settlement asset details": "View settlement asset details",
+  "View successor market": "View successor market",
+  "Volume": "Volume",
+  "Volume (24h)": "Volume (24h)",
+  "Volume (last {{count}} epochs)": "Volume (last {{count}} epochs)",
+  "Volume discount": "Volume discount",
+  "Volume to next tier": "Volume to next tier",
+  "Wallet": "Wallet",
+  "We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.": "We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.",
+  "Welcome to Vega trading!": "Welcome to Vega trading!",
+  "Withdraw": "Withdraw",
+  "You 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.",
+  "You need a <0>Vega wallet</0> to start trading in this market.": "You need a <0>Vega wallet</0> to start trading in this market.",
+  "You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.": "You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.",
+  "You will no longer be able to hold a position on this market when it closes in {{duration}}.": "You will no longer be able to hold a position on this market when it closes in {{duration}}.",
+  "Your code has been rejected": "Your code has been rejected",
+  "Your identity is always anonymous on Vega": "Your identity is always anonymous on Vega",
+  "Your referral code": "Your referral code",
+  "Your tier": "Your tier"
 }