chore: fix i18n

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

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

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

apps/explorer/netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

apps/explorer/project.json

@@ -74,15 +74,6 @@
         ]
       }
     },
-    "build-netlify": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "cp apps/explorer/netlify.toml netlify.toml",
-          "nx build explorer"
-        ]
-      }
-    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/explorer/src/app/app.tsx

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

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

@@ -3,6 +3,9 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import { locales } from '@vegaprotocol/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 
 Object.defineProperty(window, 'ResizeObserver', {
   writable: false,
@@ -13,3 +16,14 @@ Object.defineProperty(window, 'ResizeObserver', {
     disconnect: jest.fn(),
   })),
 });
+
+// Set up i18n instance so that components have the correct default
+// en translations
+i18n.use(initReactI18next).init({
+  // we init with resources
+  resources: locales,
+  fallbackLng: 'en',
+  nsSeparator: false,
+  ns: ['explorer'],
+  defaultNS: 'explorer',
+});

apps/explorer/src/assets/locales

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

apps/explorer/src/i18n/index.ts

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

apps/governance-e2e/src/fixtures/mocks/proposals.ts

@@ -133,7 +133,7 @@ export const proposalsData = {
               instrument: {
                 name: 'UNIDAI Monthly (Dec 2022)',
                 code: 'UNIDAI.MF21',
-                futureProduct: {
+                product: {
                   settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },
@@ -240,7 +240,7 @@ export const proposalsData = {
               instrument: {
                 name: 'ETHBTC Quarterly (Feb 2023)',
                 code: 'ETHBTC.QM21',
-                futureProduct: {
+                product: {
                   settlementAsset: { symbol: 'tBTC', __typename: 'Asset' },
                   __typename: 'FutureProduct',
                 },

apps/governance-e2e/src/integration/view/wallet-vega.cy.ts

@@ -302,14 +302,17 @@ context(
 
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
-                .parent()
-                .siblings(txTimeout)
-                .should((elementAmount) => {
-                  const displayedAmount = parseFloat(elementAmount.text());
-                  // @ts-ignore clash between jest and cypress
-                  expect(displayedAmount).be.gte(expectedAmount);
+                .parent() // back to currency-title
+                .parent() // back to container
+                .within(() => {
+                  cy.get(
+                    '[data-account-type="account_type_general"] [data-value]'
+                  ).should((elementAmount) => {
+                    const displayedAmount = parseFloat(elementAmount.text());
+                    // @ts-ignore clash between jest and cypress
+                    expect(displayedAmount).be.gte(expectedAmount);
+                  });
                 });
-
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
                 .parent()

apps/governance-e2e/src/support/staking.functions.ts

@@ -256,10 +256,7 @@ export function validateWalletCurrency(
     .parent()
     .parent()
     .within(() => {
-      cy.getByTestId('currency-value', txTimeout).should(
-        'have.text',
-        expectedAmount
-      );
+      cy.get('[data-value]', txTimeout).should('have.text', expectedAmount);
     });
 }
 

apps/governance/.env

@@ -35,6 +35,5 @@ NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=false
 NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
+NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=false
-NX_VOLUME_DISCOUNTS=false

apps/governance/.env.capsule

@@ -31,9 +31,8 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.devnet

@@ -28,4 +28,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.mainnet

@@ -22,9 +22,8 @@ NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.mainnet-mirror

@@ -21,9 +21,8 @@ NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/.env.stagnet1

@@ -25,4 +25,3 @@ NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
 NX_GOVERNANCE_TRANSFERS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.testnet

@@ -29,4 +29,3 @@ NX_METAMASK_SNAPS=true
 NX_PRODUCT_PERPETUALS=true
 NX_UPDATE_MARKET_STATE=true
 NX_REFERRALS=true
-NX_VOLUME_DISCOUNTS=true

apps/governance/.env.validators-testnet

@@ -20,9 +20,8 @@ NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=true
 NX_METAMASK_SNAPS=false
-NX_PRODUCT_PERPETUALS=false
-NX_UPDATE_MARKET_STATE=false
-NX_REFERRALS=false
-NX_VOLUME_DISCOUNTS=false
+NX_PRODUCT_PERPETUALS=true
+NX_UPDATE_MARKET_STATE=true
+NX_REFERRALS=true

apps/governance/README.md

@@ -49,10 +49,6 @@ There are a few different configuration options offered for this app:
 | `NX_ETH_WALLET_MNEMONIC` (optional) | The mnemonic to be used to sign transactions with in browser                                                                                         |
 | `NX_LOCAL_PROVIDER_URL` (optional)  | The local node to use to send transaction to when signing in browser                                                                                 |
 
-## Example configs:
-
-For example configurations, check out our [netlify.toml](./netlify.toml).
-
 ## Testing
 
 To run the minimal set of unit tests, run the following:

apps/governance/netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

apps/governance/project.json

@@ -69,15 +69,6 @@
         "jestConfig": "apps/governance/jest.config.ts"
       }
     },
-    "build-netlify": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "cp apps/governance/netlify.toml netlify.toml",
-          "nx build token"
-        ]
-      }
-    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/governance/src/components/vega-wallet/hooks.ts

@@ -114,6 +114,16 @@ export const usePollForDelegations = () => {
                     isAssetTypeERC20(a.asset) &&
                     a.asset.source.contractAddress === vegaToken.address;
 
+                  const isVesting =
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
+                    a.type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS;
+
+                  let icon = noIcon;
+                  if (isVega) {
+                    if (isVesting) icon = vegaVesting;
+                    else icon = vegaBlack;
+                  }
+
                   return {
                     isVega,
                     name: a.asset.name,
@@ -124,14 +134,7 @@ export const usePollForDelegations = () => {
                     balance: new BigNumber(
                       addDecimal(a.balance, a.asset.decimals)
                     ),
-                    image: isVega
-                      ? vegaBlack
-                      : a.type ===
-                          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS ||
-                        a.type ===
-                          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS
-                      ? vegaVesting
-                      : noIcon,
+                    image: icon,
                     border: isVega,
                     address: isAssetTypeERC20(a.asset)
                       ? a.asset.source.contractAddress

apps/governance/src/components/vega-wallet/vega-wallet.tsx

@@ -11,7 +11,10 @@ import { BigNumber } from '../../lib/bignumber';
 import { truncateMiddle } from '../../lib/truncate-middle';
 import Routes from '../../routes/routes';
 import { BulletHeader } from '../bullet-header';
-import type { WalletCardAssetProps } from '../wallet-card';
+import type {
+  WalletCardAssetProps,
+  WalletCardAssetWithMultipleBalancesProps,
+} from '../wallet-card';
 import {
   WalletCard,
   WalletCardActions,
@@ -27,6 +30,7 @@ import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { toBigNum } from '@vegaprotocol/utils';
 import { usePendingBalancesStore } from '../../hooks/use-pending-balances-manager';
 import { StakingEventType } from '../../hooks/use-get-association-breakdown';
+import omit from 'lodash/omit';
 
 export const VegaWallet = () => {
   const { t } = useTranslation();
@@ -99,12 +103,29 @@ const VegaWalletAssetList = ({ accounts }: VegaWalletAssetsListProps) => {
   if (!accounts.length) {
     return null;
   }
+
+  const groupedByAsset = accounts.reduce((all, a) => {
+    const foundIndex = all.findIndex((acc) => acc.assetId === a.assetId);
+    if (foundIndex > -1) {
+      const found = all[foundIndex];
+      all[foundIndex] = {
+        ...found,
+        balances: [...found.balances, { balance: a.balance, type: a.type }],
+      };
+      return all;
+    }
+    const acc = {
+      ...omit(a, 'balance', 'type'),
+      balances: [{ balance: a.balance, type: a.type }],
+    };
+    return [...all, acc];
+  }, [] as WalletCardAssetWithMultipleBalancesProps[]);
   return (
     <>
       <WalletCardHeader>
         <BulletHeader tag="h2">{t('assets')}</BulletHeader>
       </WalletCardHeader>
-      {accounts.map((a, i) => (
+      {groupedByAsset.map((a, i) => (
         <WalletCardAsset key={i} {...a} />
       ))}
     </>
@@ -182,6 +203,7 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
         subheading={t('Associated')}
         symbol="VEGA"
         balance={currentStakeAvailable}
+        allowZeroBalance={true}
       />
       {totalPending.eq(0) ? null : (
         <>
@@ -192,6 +214,7 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
             subheading={t('Pending association')}
             symbol="VEGA"
             balance={totalPending}
+            allowZeroBalance={true}
           />
           <WalletCardAsset
             image={vegaWhite}
@@ -200,6 +223,7 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
             subheading={t('Total associated after pending')}
             symbol="VEGA"
             balance={pendingStakeAmount}
+            allowZeroBalance={true}
           />
         </>
       )}

apps/governance/src/components/wallet-card/wallet-card.tsx

@@ -103,7 +103,7 @@ export const WalletCardActions = ({
   return <div className="flex justify-end gap-2 mb-4">{children}</div>;
 };
 
-export interface WalletCardAssetProps {
+export type WalletCardAssetProps = {
   image: string;
   name: string;
   symbol: string;
@@ -113,42 +113,61 @@ export interface WalletCardAssetProps {
   border?: boolean;
   subheading?: string;
   type?: Schema.AccountType;
-}
+  allowZeroBalance?: boolean;
+};
+
+export type WalletCardAssetWithMultipleBalancesProps = Omit<
+  WalletCardAssetProps,
+  'balance' | 'type'
+> & {
+  balances: { balance: BigNumber; type?: Schema.AccountType }[];
+};
 
 export const WalletCardAsset = ({
   image,
   name,
   symbol,
-  balance,
   decimals,
   assetId,
   border,
   subheading,
-  type,
-}: WalletCardAssetProps) => {
-  const [integers, decimalsPlaces, separator] = useNumberParts(
-    balance,
-    decimals
-  );
-  const { t } = useTranslation();
-  const consoleLink = useLinks(DApp.Console);
-  const transferAssetLink = (assetId: string) =>
-    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
-  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
+  allowZeroBalance = false,
+  ...props
+}: WalletCardAssetProps | WalletCardAssetWithMultipleBalancesProps) => {
+  const balance = 'balance' in props ? props.balance : undefined;
+  const type = 'type' in props ? props.type : undefined;
+  const balances =
+    'balances' in props
+      ? props.balances
+      : balance
+      ? [{ balance, type }]
+      : undefined;
 
-  const isRedeemable =
-    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
+  const values =
+    balances &&
+    balances.length > 0 &&
+    balances
+      .filter((b) => allowZeroBalance || !b.balance.isZero())
+      .sort((a, b) => {
+        const order = [
+          Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS,
+          Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS,
+          Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+          undefined,
+        ];
+        return order.indexOf(a.type) - order.indexOf(b.type);
+      })
+      .map(({ balance, type }, i) => (
+        <CurrencyValue
+          key={i}
+          balance={balance}
+          decimals={decimals}
+          type={type}
+          assetId={assetId}
+        />
+      ));
 
-  const accountTypeTooltip = useMemo(() => {
-    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
-      return t('VestedRewardsTooltip');
-    }
-    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
-      return t('VestingRewardsTooltip', { baseRate });
-    }
-
-    return null;
-  }, [baseRate, t, type]);
+  if (!values || values.length === 0) return;
 
   return (
     <div className="flex flex-nowrap gap-2 mt-2 mb-4">
@@ -169,35 +188,92 @@ export const WalletCardAsset = ({
             {subheading || symbol}
           </div>
         </div>
-        {type ? (
-          <div className="mb-[2px] flex gap-2 items-baseline">
-            <Tooltip description={accountTypeTooltip}>
-              <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
-                {Schema.AccountTypeMapping[type]}
-              </span>
-            </Tooltip>
-            {isRedeemable ? (
-              <Tooltip description={t('RedeemRewardsTooltip')}>
-                <AnchorButton
-                  variant="primary"
-                  size="xs"
-                  href={transferAssetLink(assetId)}
-                  target="_blank"
-                  className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
-                >
-                  {t('Redeem')}
-                </AnchorButton>
-              </Tooltip>
-            ) : null}
-          </div>
-        ) : null}
-        <div className="basis-full font-mono" data-testid="currency-value">
-          <span>
-            {integers}
-            {separator}
-          </span>
-          <span className="text-neutral-400">{decimalsPlaces}</span>
+        {values}
+      </div>
+    </div>
+  );
+};
+
+const useAccountTypeTooltip = (type?: Schema.AccountType) => {
+  const { t } = useTranslation();
+  const { param: baseRate } = useNetworkParam('rewards_vesting_baseRate');
+  const accountTypeTooltip = useMemo(() => {
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS) {
+      return t('VestedRewardsTooltip');
+    }
+    if (type === Schema.AccountType.ACCOUNT_TYPE_VESTING_REWARDS && baseRate) {
+      return t('VestingRewardsTooltip', { baseRate });
+    }
+
+    return null;
+  }, [baseRate, t, type]);
+
+  return accountTypeTooltip;
+};
+
+const CurrencyValue = ({
+  balance,
+  decimals,
+  type,
+  assetId,
+}: {
+  balance: BigNumber;
+  decimals: number;
+  type?: Schema.AccountType;
+  assetId?: string;
+}) => {
+  const { t } = useTranslation();
+  const consoleLink = useLinks(DApp.Console);
+  const transferAssetLink = (assetId: string) =>
+    consoleLink(CONSOLE_TRANSFER_ASSET.replace(':assetId', assetId));
+
+  const [integers, decimalsPlaces, separator] = useNumberParts(
+    balance,
+    decimals
+  );
+  const accountTypeTooltip = useAccountTypeTooltip(type);
+
+  const accountType = type && (
+    <Tooltip description={accountTypeTooltip}>
+      <span className="px-2 py-1 leading-none text-xs bg-vega-cdark-700 rounded">
+        {Schema.AccountTypeMapping[type]}
+      </span>
+    </Tooltip>
+  );
+  const isRedeemable =
+    type === Schema.AccountType.ACCOUNT_TYPE_VESTED_REWARDS && assetId;
+  const redeemBtn = isRedeemable ? (
+    <Tooltip description={t('RedeemRewardsTooltip')}>
+      <AnchorButton
+        variant="primary"
+        size="xs"
+        href={transferAssetLink(assetId)}
+        target="_blank"
+        className="px-2 py-1 leading-none text-xs bg-vega-yellow text-black rounded"
+      >
+        {t('Redeem')}
+      </AnchorButton>
+    </Tooltip>
+  ) : null;
+
+  return (
+    <div
+      className="basis-full font-mono mb-1"
+      data-account-type={type?.toLowerCase() || 'unspecified'}
+      data-testid="currency-value"
+    >
+      {type && (
+        <div data-type className="flex gap-1">
+          {accountType}
+          {redeemBtn}
         </div>
+      )}
+      <div data-value>
+        <span>
+          {integers}
+          {separator}
+        </span>
+        <span className="text-neutral-400">{decimalsPlaces}</span>
       </div>
     </div>
   );

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: {

apps/governance/src/routes/home/index.tsx

@@ -189,7 +189,6 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -77,7 +77,7 @@ describe('Proposal header', () => {
               __typename: 'InstrumentConfiguration',
               name: 'Some market',
               code: 'FX:BTCUSD/DEC99',
-              futureProduct: {
+              product: {
                 __typename: 'FutureProduct',
                 settlementAsset: {
                   __typename: 'Asset',

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -39,6 +39,18 @@ export const ProposalHeader = ({
 
   const titleContent = shorten(title ?? '', 100);
 
+  const getAsset = (proposal: ProposalQuery['proposal']) => {
+    const terms = proposal?.terms;
+    if (
+      terms?.change.__typename === 'NewMarket' &&
+      (terms.change.instrument.product?.__typename === 'FutureProduct' ||
+        terms.change.instrument.product?.__typename === 'PerpetualProduct')
+    ) {
+      return terms.change.instrument.product.settlementAsset;
+    }
+    return undefined;
+  };
+
   switch (change?.__typename) {
     case 'NewMarket': {
       proposalType =
@@ -54,10 +66,10 @@ export const ProposalHeader = ({
           <span>
             {t('Code')}: {change.instrument.code}.
           </span>{' '}
-          {change.instrument.futureProduct?.settlementAsset.symbol ? (
+          {proposal?.terms && getAsset(proposal)?.symbol ? (
             <>
               <span className="font-semibold">
-                {change.instrument.futureProduct.settlementAsset.symbol}
+                {getAsset(proposal)?.symbol}
               </span>{' '}
               {t('settled future')}.
             </>

apps/governance/src/routes/proposals/components/proposal-volume-discount-program-details/proposal-volume-discount-program-details.tsx

@@ -78,7 +78,7 @@ export const ProposalVolumeDiscountProgramDetails = ({
               {t('BenefitTiers')}
             </h3>
             <KeyValueTable>
-              {benefitTiers
+              {[...benefitTiers]
                 .sort(
                   (a, b) =>
                     Number(a.minimumRunningNotionalTakerVolume) -

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

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

apps/governance/src/routes/proposals/proposal/Proposal.graphql

@@ -84,7 +84,6 @@ query Proposal(
   $includeNewMarketProductField: Boolean!
   $includeUpdateMarketState: Boolean!
   $includeUpdateReferralProgram: Boolean!
-  $includeUpdateVolumeDiscountProgram: Boolean!
 ) {
   proposal(id: $proposalId) {
     id
@@ -104,7 +103,6 @@ query Proposal(
     ...UpdateMarketState @include(if: $includeUpdateMarketState)
     ...UpdateReferralProgram @include(if: $includeUpdateReferralProgram)
     ...UpdateVolumeDiscountProgram
-      @include(if: $includeUpdateVolumeDiscountProgram)
     terms {
       closingDatetime
       enactmentDatetime
@@ -132,46 +130,25 @@ query Proposal(
           instrument {
             name
             code
-            futureProduct {
-              settlementAsset {
-                id
-                name
-                symbol
-                decimals
-                quantum
-              }
-              quoteName
-
-              dataSourceSpecForSettlementData {
-                sourceType {
-                  ... on DataSourceDefinitionInternal {
-                    sourceType {
-                      ... on DataSourceSpecConfigurationTime {
-                        conditions {
-                          operator
-                          value
-                        }
-                      }
-                    }
-                  }
-                  ... on DataSourceDefinitionExternal {
-                    sourceType {
-                      ... on DataSourceSpecConfiguration {
-                        signers {
-                          signer {
-                            ... on PubKey {
-                              key
-                            }
-                            ... on ETHAddress {
-                              address
-                            }
-                          }
-                        }
-                        filters {
-                          key {
-                            name
-                            type
-                          }
+            product {
+              ... on FutureProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
+                dataSourceSpecBinding {
+                  settlementDataProperty
+                  tradingTerminationProperty
+                }
+                dataSourceSpecForSettlementData {
+                  sourceType {
+                    ... on DataSourceDefinitionInternal {
+                      sourceType {
+                        ... on DataSourceSpecConfigurationTime {
                           conditions {
                             operator
                             value
@@ -179,52 +156,44 @@ query Proposal(
                         }
                       }
                     }
+                    ... on DataSourceDefinitionExternal {
+                      sourceType {
+                        ... on DataSourceSpecConfiguration {
+                          signers {
+                            signer {
+                              ... on PubKey {
+                                key
+                              }
+                              ... on ETHAddress {
+                                address
+                              }
+                            }
+                          }
+                          filters {
+                            key {
+                              name
+                              type
+                            }
+                            conditions {
+                              operator
+                              value
+                            }
+                          }
+                        }
+                      }
+                    }
                   }
                 }
               }
-              # dataSourceSpecForTradingTermination {
-              #   sourceType {
-              #     ... on DataSourceDefinitionInternal {
-              #       sourceType {
-              #         ... on DataSourceSpecConfigurationTime {
-              #           conditions {
-              #             operator
-              #             value
-              #           }
-              #         }
-              #       }
-              #     }
-              #     ... on DataSourceDefinitionExternal {
-              #       sourceType {
-              #         ... on DataSourceSpecConfiguration {
-              #           signers {
-              #             signer {
-              #               ... on PubKey {
-              #                 key
-              #               }
-              #               ... on ETHAddress {
-              #                 address
-              #               }
-              #             }
-              #           }
-              #           filters {
-              #             key {
-              #               name
-              #               type
-              #             }
-              #             conditions {
-              #               operator
-              #               value
-              #             }
-              #           }
-              #         }
-              #       }
-              #     }
-              #   }
-              # }
-              dataSourceSpecBinding {
-                settlementDataProperty
-                tradingTerminationProperty
+              ... on PerpetualProduct {
+                settlementAsset {
+                  id
+                  name
+                  symbol
+                  decimals
+                  quantum
+                }
+                quoteName
               }
             }
           }

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -62,7 +62,6 @@ export const ProposalContainer = () => {
       includeNewMarketProductField: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketState: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralProgram: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountProgram: !!FLAGS.VOLUME_DISCOUNTS,
     },
     skip: !params.proposalId,
   });

apps/governance/src/routes/proposals/proposals/Proposals.graphql

@@ -101,9 +101,16 @@ fragment ProposalFields on Proposal {
         instrument {
           name
           code
-          futureProduct {
-            settlementAsset {
-              symbol
+          product {
+            ... on FutureProduct {
+              settlementAsset {
+                symbol
+              }
+            }
+            ... on PerpetualProduct {
+              settlementAsset {
+                symbol
+              }
             }
           }
         }
@@ -164,7 +171,6 @@ query Proposals(
   $includeNewMarketProductFields: Boolean!
   $includeUpdateMarketStates: Boolean!
   $includeUpdateReferralPrograms: Boolean!
-  $includeUpdateVolumeDiscountPrograms: Boolean!
 ) {
   proposalsConnection {
     edges {
@@ -174,7 +180,6 @@ query Proposals(
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
         ...UpdateVolumeDiscountPrograms
-          @include(if: $includeUpdateVolumeDiscountPrograms)
       }
     }
   }

apps/governance/src/routes/proposals/proposals/__generated__/Proposals.ts

@@ -11,17 +11,16 @@ export type UpdateReferralProgramsFragment = { __typename?: 'Proposal', terms: {
 
 export type UpdateVolumeDiscountProgramsFragment = { __typename?: 'Proposal', terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket' } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter' } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } } };
 
-export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
+export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, product?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename?: 'PerpetualProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename?: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState' } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram' } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram' } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
 
 export type ProposalsQueryVariables = Types.Exact<{
   includeNewMarketProductFields: Types.Scalars['Boolean'];
   includeUpdateMarketStates: Types.Scalars['Boolean'];
   includeUpdateReferralPrograms: Types.Scalars['Boolean'];
-  includeUpdateVolumeDiscountPrograms: Types.Scalars['Boolean'];
 }>;
 
 
-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null, product?: { __typename: 'FutureProduct' } | { __typename: 'PerpetualProduct' } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, product?: { __typename: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename: 'PerpetualProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | { __typename: 'SpotProduct' } | null } } | { __typename?: 'NewSpotMarket' } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateMarketState', updateType: Types.MarketUpdateType, price?: string | null, market: { __typename?: 'Market', decimalPlaces: number, id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, product: { __typename: 'Future', quoteName: string } | { __typename: 'Perpetual', quoteName: string } | { __typename: 'Spot' } } } } } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } | { __typename?: 'UpdateReferralProgram', windowLength: number, endOfProgram: any, benefitTiers: Array<{ __typename?: 'BenefitTier', minimumEpochs: number, minimumRunningNotionalTakerVolume: string, referralDiscountFactor: string, referralRewardFactor: string }>, stakingTiers: Array<{ __typename?: 'StakingTier', minimumStakedTokens: string, referralRewardMultiplier: string }> } | { __typename?: 'UpdateSpotMarket' } | { __typename?: 'UpdateVolumeDiscountProgram', endOfProgramTimestamp: any, windowLength: number, benefitTiers: Array<{ __typename?: 'VolumeBenefitTier', minimumRunningNotionalTakerVolume: string, volumeDiscountFactor: string }> } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
 
 export const NewMarketProductFieldsFragmentDoc = gql`
     fragment NewMarketProductFields on Proposal {
@@ -131,9 +130,16 @@ export const ProposalFieldsFragmentDoc = gql`
         instrument {
           name
           code
-          futureProduct {
-            settlementAsset {
-              symbol
+          product {
+            ... on FutureProduct {
+              settlementAsset {
+                symbol
+              }
+            }
+            ... on PerpetualProduct {
+              settlementAsset {
+                symbol
+              }
             }
           }
         }
@@ -191,7 +197,7 @@ export const ProposalFieldsFragmentDoc = gql`
 }
     `;
 export const ProposalsDocument = gql`
-    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!, $includeUpdateVolumeDiscountPrograms: Boolean!) {
+    query Proposals($includeNewMarketProductFields: Boolean!, $includeUpdateMarketStates: Boolean!, $includeUpdateReferralPrograms: Boolean!) {
   proposalsConnection {
     edges {
       node {
@@ -199,7 +205,7 @@ export const ProposalsDocument = gql`
         ...NewMarketProductFields @include(if: $includeNewMarketProductFields)
         ...UpdateMarketStates @include(if: $includeUpdateMarketStates)
         ...UpdateReferralPrograms @include(if: $includeUpdateReferralPrograms)
-        ...UpdateVolumeDiscountPrograms @include(if: $includeUpdateVolumeDiscountPrograms)
+        ...UpdateVolumeDiscountPrograms
       }
     }
   }
@@ -225,7 +231,6 @@ ${UpdateVolumeDiscountProgramsFragmentDoc}`;
  *      includeNewMarketProductFields: // value for 'includeNewMarketProductFields'
  *      includeUpdateMarketStates: // value for 'includeUpdateMarketStates'
  *      includeUpdateReferralPrograms: // value for 'includeUpdateReferralPrograms'
- *      includeUpdateVolumeDiscountPrograms: // value for 'includeUpdateVolumeDiscountPrograms'
  *   },
  * });
  */

apps/governance/src/routes/proposals/proposals/proposals-container.tsx

@@ -52,7 +52,6 @@ export const ProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/governance/src/routes/proposals/propose/new-asset/propose-new-asset.tsx

@@ -8,7 +8,7 @@ import {
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -41,6 +41,7 @@ export interface NewAssetProposalFormFields {
 const DOCS_LINK = '/new-asset-proposal';
 
 export const ProposeNewAsset = () => {
+  const validateJson = useValidateJson();
   const {
     params,
     loading: networkParamsLoading,

apps/governance/src/routes/proposals/propose/new-market/propose-new-market.tsx

@@ -7,7 +7,7 @@ import {
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -39,6 +39,7 @@ export interface NewMarketProposalFormFields {
 const DOCS_LINK = '/new-market-proposal';
 
 export const ProposeNewMarket = () => {
+  const validateJson = useValidateJson();
   const {
     params,
     loading: networkParamsLoading,

apps/governance/src/routes/proposals/propose/raw/propose-raw.tsx

@@ -14,7 +14,7 @@ import {
   RoundedWrapper,
   TextArea,
 } from '@vegaprotocol/ui-toolkit';
-import { validateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -31,6 +31,7 @@ export interface RawProposalFormFields {
 }
 
 export const ProposeRaw = () => {
+  const validateJson = useValidateJson();
   const {
     params,
     loading: networkParamsLoading,

apps/governance/src/routes/proposals/propose/update-asset/propose-update-asset.tsx

@@ -7,7 +7,7 @@ import {
   doesValueEquateToParam,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -39,6 +39,7 @@ export interface UpdateAssetProposalFormFields {
 const DOCS_LINK = '/update-asset-proposal';
 
 export const ProposeUpdateAsset = () => {
+  const validateJson = useValidateJson();
   const {
     params,
     loading: networkParamsLoading,

apps/governance/src/routes/proposals/propose/update-market/propose-update-market.tsx

@@ -8,7 +8,7 @@ import {
   useProposalSubmit,
 } from '@vegaprotocol/proposals';
 import { useEnvironment, DocsLinks } from '@vegaprotocol/environment';
-import { validateJson } from '@vegaprotocol/utils';
+import { useValidateJson } from '@vegaprotocol/utils';
 import {
   NetworkParams,
   useNetworkParams,
@@ -53,6 +53,7 @@ export interface UpdateMarketProposalFormFields {
 const DOCS_LINK = '/update-market-proposal';
 
 export const ProposeUpdateMarket = () => {
+  const validateJson = useValidateJson();
   const {
     params,
     loading: networkParamsLoading,
@@ -260,7 +261,7 @@ export const ProposeUpdateMarket = () => {
               </FormGroup>
 
               {selectedMarket && (
-                <div className="mt-[-20px] mb-6">
+                <div className="mb-6 mt-[-20px]">
                   <KeyValueTable data-testid="update-market-details">
                     <KeyValueTableRow>
                       {t('MarketName')}

apps/governance/src/routes/proposals/rejected/rejected-proposals-container.tsx

@@ -42,7 +42,6 @@ export const RejectedProposalsContainer = () => {
       includeNewMarketProductFields: !!FLAGS.PRODUCT_PERPETUALS,
       includeUpdateMarketStates: !!FLAGS.UPDATE_MARKET_STATE,
       includeUpdateReferralPrograms: !!FLAGS.REFERRALS,
-      includeUpdateVolumeDiscountPrograms: !!FLAGS.VOLUME_DISCOUNTS,
     },
   });
 

apps/liquidity-provision-dashboard/netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

apps/liquidity-provision-dashboard/project.json

@@ -82,15 +82,6 @@
         "jestConfig": "apps/liquidity-provision-dashboard/jest.config.ts"
       }
     },
-    "build-netlify": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "cp apps/liquidity-provision-dashboard/netlify.toml netlify.toml",
-          "nx build liquidity-provision-dashboard"
-        ]
-      }
-    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/multisig-signer/netlify.toml

@@ -1,4 +0,0 @@
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200

apps/multisig-signer/project.json

@@ -66,15 +66,6 @@
         "jestConfig": "apps/multisig-signer/jest.config.ts"
       }
     },
-    "build-netlify": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "cp apps/multisig-signer/netlify.toml netlify.toml",
-          "nx build multisig-signer"
-        ]
-      }
-    },
     "build-spec": {
       "executor": "nx:run-commands",
       "outputs": [],

apps/static/netlify.toml

@@ -1,4 +0,0 @@
-[[headers]]  
-  for = "/*"
-    [headers.values]
-    Access-Control-Allow-Origin = "*"

apps/static/project.json

@@ -46,15 +46,6 @@
           "buildTarget": "static:build:production"
         }
       }
-    },
-    "build-netlify": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": [
-          "cp apps/static/netlify.toml netlify.toml",
-          "nx build static"
-        ]
-      }
     }
   }
 }

apps/trading-e2e/src/integration/capsule.cy.ts

@@ -1,23 +1,6 @@
-import { removeDecimal } from '@vegaprotocol/cypress';
-import * as Schema from '@vegaprotocol/types';
-import {
-  OrderStatusMapping,
-  OrderTypeMapping,
-  Side,
-} from '@vegaprotocol/types';
-import { isBefore, isAfter, addSeconds, subSeconds } from 'date-fns';
-import { createOrder } from '../support/create-order';
 import { connectEthereumWallet } from '../support/ethereum-wallet';
 import { selectAsset } from '../support/helpers';
 
-const orderSize = 'size';
-const orderType = 'type';
-const orderStatus = 'status';
-const orderRemaining = 'remaining';
-const orderPrice = 'price';
-const orderTimeInForce = 'timeInForce';
-const orderUpdatedAt = 'updatedAt';
-const assetSelectField = 'select[name="asset"]';
 const amountField = 'input[name="amount"]';
 const txTimeout = Cypress.env('txTimeout');
 const sepoliaUrl = Cypress.env('ETHERSCAN_URL');
@@ -25,18 +8,10 @@ const btcName = 0;
 const vegaName = 4;
 const btcSymbol = 'tBTC';
 const vegaSymbol = 'VEGA';
-const usdcSymbol = 'fUSDC';
 const toastContent = 'toast-content';
-const openOrdersTab = 'Open';
 const depositsTab = 'Deposits';
-const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
-const price = '390';
-const size = '0.0005';
-const newPrice = '200';
 const completeWithdrawalBtn = 'complete-withdrawal';
-const submitTransferBtn = '[type="submit"]';
-const transferForm = 'transfer-form';
 const depositSubmit = 'deposit-submit';
 const approveSubmit = 'approve-submit';
 const dialogContent = 'dialog-content';
@@ -116,33 +91,6 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
       });
   });
 
-  it('can key to key transfers', function () {
-    // 1003-TRAN-023
-    // 1003-TRAN-006
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
-
-    cy.getByTestId(collateralTab).click();
-    cy.getByTestId('open-transfer').eq(1).click();
-    cy.getByTestId('transfer-form').should('be.visible');
-    cy.getByTestId('transfer-form').find('[name="toAddress"]').select(1);
-    cy.get('select option')
-      .contains('BTC')
-      .invoke('index')
-      .then((index) => {
-        cy.get(assetSelectField).select(index, { force: true });
-      });
-    cy.getByTestId(transferForm)
-      .find(amountField)
-      .focus()
-      .type('1', { delay: 100 });
-    cy.getByTestId(transferForm).find(submitTransferBtn).click();
-    cy.getByTestId(toastContent).should(
-      'contain.text',
-      'Transfer completeYour transaction has been confirmed View in block explorerTransferTo 7f9cf0…c255351.00 tBTC'
-    );
-    cy.getByTestId(toastCloseBtn).click();
-  });
-
   it('can not withdrawal because of no MultiSign', function () {
     // 1002-WITH-022
     // 1002-WITH-023
@@ -187,143 +135,6 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
     cy.setVegaWallet();
   });
 
-  it('shows node health', function () {
-    // 0006-NETW-010
-    const regex = /^Operational\d+$/;
-    const market = this.market;
-    cy.visit(`/#/markets/${market.id}`);
-    cy.getByTestId('node-health-trigger').realHover();
-    cy.getByTestId('node-health')
-      .children()
-      .first()
-      .invoke('text')
-      .should('match', regex);
-    cy.getByTestId('node-health')
-      .children()
-      .eq(1)
-      .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname);
-  });
-
-  it('can place and receive an order', function () {
-    const market = this.market;
-    cy.visit(`/#/markets/${market.id}`);
-    const order = {
-      marketId: market.id,
-      type: Schema.OrderType.TYPE_LIMIT,
-      side: Schema.Side.SIDE_BUY,
-      size: size,
-      price: price,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-    };
-    const rawPrice = removeDecimal(order.price, market.decimalPlaces);
-    cy.getByTestId(toastCloseBtn, txTimeout).click();
-    cy.getByTestId('Collateral').click();
-    cy.get('[col-id="asset.symbol"]', txTimeout).should(
-      'contain.text',
-      usdcSymbol
-    );
-
-    createOrder(order);
-
-    cy.getByTestId(toastContent).should(
-      'contain.text',
-      `Order submittedYour transaction has been confirmed View in block explorerSubmit order - activeTEST.24h+${order.size} @ ${order.price}.00 ${usdcSymbol}`,
-      { matchCase: false }
-    );
-    cy.getByTestId(toastCloseBtn).click();
-    // orderbook cells are keyed by price level
-    cy.getByTestId('tab-orderbook')
-      .get(`[data-testid="price-${rawPrice}"]`)
-      .should('contain.text', order.price)
-      .get(`[data-testid="bid-vol-${rawPrice}"]`)
-      .should('contain.text', order.size);
-
-    cy.getByTestId(openOrdersTab).click();
-    cy.getByTestId('tab-open-orders').within(() => {
-      cy.get('.ag-center-cols-container')
-        .children()
-        .first()
-        .within(() => {
-          cy.get(`[col-id='${orderSize}']`).should(
-            'contain.text',
-            order.side === Side.SIDE_BUY ? '+' : '-' + order.size
-          );
-
-          cy.get(`[col-id='${orderType}']`).should(
-            'contain.text',
-            OrderTypeMapping[order.type]
-          );
-
-          cy.get(`[col-id='${orderStatus}']`).should(
-            'contain.text',
-            OrderStatusMapping.STATUS_ACTIVE
-          );
-
-          cy.get(`[col-id='${orderRemaining}']`).should('contain.text', '0.00');
-
-          cy.get(`[col-id='${orderPrice}']`).then(($price) => {
-            expect(parseFloat($price.text())).to.equal(parseFloat(order.price));
-          });
-
-          cy.get(`[col-id='${orderTimeInForce}']`).should(
-            'contain.text',
-            'GTC'
-          );
-
-          checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderUpdatedAt);
-        });
-    });
-  });
-  it('can edit order', function () {
-    const market = this.market;
-    cy.visit(`/#/markets/${market.id}`);
-    cy.getByTestId(toastCloseBtn, txTimeout).click();
-    cy.getByTestId(openOrdersTab).click();
-    cy.getByTestId('edit').first().click();
-    cy.getByTestId('dialog-title').should('contain.text', 'Edit order');
-    cy.get('#limitPrice').focus().clear().type(newPrice);
-    cy.getByTestId('edit-order').find('[type="submit"]').click();
-
-    cy.getByTestId(toastContent).should(
-      'contain.text',
-      `Order submittedYour transaction has been confirmed View in block explorerEdit order - activeTEST.24h+${size} @ ${price}.00 ${usdcSymbol}+${size} @ ${newPrice}.00 ${usdcSymbol}`,
-      { matchCase: false }
-    );
-
-    cy.getByTestId(toastCloseBtn).click({ multiple: true });
-    cy.getByTestId(openOrdersTab).click();
-    cy.get('.ag-center-cols-container')
-      .children()
-      .first()
-      .within(() => {
-        cy.get(`[col-id='${orderPrice}']`).then(($price) => {
-          expect(parseFloat($price.text())).to.equal(parseFloat(newPrice));
-        });
-        checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderUpdatedAt);
-      });
-  });
-
-  it('can cancel order', function () {
-    const market = this.market;
-    cy.visit(`/#/markets/${market.id}`);
-    cy.getByTestId(toastCloseBtn, txTimeout).click();
-    cy.getByTestId(openOrdersTab).click();
-    cy.getByTestId('cancel').first().click();
-    cy.getByTestId(toastContent).should(
-      'contain.text',
-      `Order cancelledYour transaction has been confirmed View in block explorerCancel order - cancelledTEST.24h+${size} @ ${newPrice}.00 ${usdcSymbol}`,
-      { matchCase: false }
-    );
-    cy.getByTestId(toastCloseBtn).click({ multiple: true });
-    cy.getByTestId('Closed').click();
-    cy.getByTestId('tab-closed-orders')
-      .get('.ag-center-cols-container')
-      .children()
-      .first()
-      .get(`[col-id='${orderStatus}']`, txTimeout)
-      .should('contain.text', OrderStatusMapping.STATUS_CANCELLED);
-  });
-
   it('can withdrawal', function () {
     // 1002-WITH-0014
     // 1002-WITH-006
@@ -524,22 +335,3 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
     });
   });
 });
-
-function checkIfDataAndTimeOfCreationAndUpdateIsEqual(date: string) {
-  cy.get(`[col-id='${date}'] .ag-cell-wrapper`)
-    .children('span')
-    .children('span')
-    .invoke('data', 'value')
-    .then(($dateTime) => {
-      // allow a date 5 seconds either side to allow for
-      // unexpected latency
-      const minBefore = subSeconds(new Date(), 5);
-      const maxAfter = addSeconds(new Date(), 5);
-      // eslint-disable-next-line no-console
-      console.log(maxAfter);
-      const date = new Date($dateTime.toString());
-      expect(isAfter(date, minBefore) && isBefore(date, maxAfter)).to.equal(
-        true
-      );
-    });
-}

apps/trading-e2e/src/integration/home-node-network.cy.ts

@@ -1,72 +0,0 @@
-const dialogContent = 'dialog-content';
-const nodeHealth = 'node-health';
-const nodeHealthTrigger = 'node-health-trigger';
-
-describe('home', { tags: '@regression' }, () => {
-  before(() => {
-    cy.setOnBoardingViewed();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/');
-  });
-
-  describe('node health', () => {
-    it('shows current block height', () => {
-      // 0006-NETW-004
-      // 0006-NETW-008
-      // 0006-NETW-009
-      cy.getByTestId(nodeHealthTrigger).realHover();
-      cy.getByTestId(nodeHealth)
-        .children()
-        .first()
-        .should('contain.text', 'Operational', {
-          timeout: 10000,
-        })
-        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
-      cy.getByTestId(nodeHealth)
-        .children()
-        .eq(1)
-        .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname);
-    });
-
-    it('shows node switcher details', () => {
-      // 0006-NETW-012
-      // 0006-NETW-013
-      // 0006-NETW-014
-      // 0006-NETW-015
-      // 0006-NETW-016
-      cy.getByTestId(nodeHealthTrigger).click();
-      cy.getByTestId(dialogContent).should('contain.text', 'Connected node');
-      cy.getByTestId(dialogContent).should(
-        'contain.text',
-        'This app will only work on CUSTOM. Select a node to connect to.'
-      );
-      cy.getByTestId('node')
-        .first()
-        .should('contain.text', new URL(Cypress.env('VEGA_URL')).origin)
-        .next()
-        .should('contain.text', 'Response time')
-        .next()
-        .should('contain.text', 'Block')
-        .next()
-        .should('contain.text', 'Subscription');
-      cy.getByTestId('custom-row').should('contain.text', 'Other');
-      cy.getByTestId('dialog-close').click();
-    });
-
-    it('switch to other node', () => {
-      // 0006-NETW-017
-      // 0006-NETW-018
-      // 0006-NETW-019
-      // 0006-NETW-020
-      cy.getByTestId(nodeHealthTrigger).click();
-      cy.getByTestId('connect').should('be.disabled');
-      cy.getByTestId('node-url-custom').click({ force: true });
-      cy.getByTestId('connect').should('be.disabled');
-      cy.get("input[placeholder='https://']")
-        .focus()
-        .type(new URL(Cypress.env('VEGA_URL')).origin + '/graphql');
-      cy.getByTestId('connect').click();
-    });
-  });
-});

apps/trading-e2e/src/integration/trading-deal-ticket-submit-account-validation.cy.ts

@@ -1,87 +0,0 @@
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import {
-  accountsQuery,
-  amendGeneralAccountBalance,
-  amendMarginAccountBalance,
-} from '@vegaprotocol/mock';
-
-describe.skip(
-  'account validation',
-  { tags: '@regression', testIsolation: true },
-  () => {
-    describe('zero balance error', () => {
-      beforeEach(() => {
-        cy.setVegaWallet();
-        cy.mockTradingPage();
-        let accounts = accountsQuery();
-        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
-        accounts = amendGeneralAccountBalance(accounts, 'market-0', '0');
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'Accounts', accounts);
-        });
-        cy.mockSubscription();
-        cy.visit('/#/markets/market-0');
-        cy.wait('@Markets');
-      });
-
-      it('should show an error if your balance is zero', () => {
-        const accounts = accountsQuery();
-        amendMarginAccountBalance(accounts, 'market-0', '0');
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'Accounts', accounts);
-        });
-        // 7002-SORD-060
-        cy.getByTestId('place-order').should('be.enabled');
-        // 7002-SORD-003
-        cy.getByTestId('deal-ticket-error-message-zero-balance').should(
-          'have.text',
-          'You need ' +
-            'tDAI' +
-            ' in your wallet to trade in this market. See all your collateral.Make a deposit'
-        );
-        cy.getByTestId('deal-ticket-deposit-dialog-button').should('exist');
-      });
-    });
-
-    describe('not enough balance warning', () => {
-      beforeEach(() => {
-        cy.setVegaWallet();
-        cy.mockTradingPage();
-        let accounts = accountsQuery();
-        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
-        accounts = amendGeneralAccountBalance(accounts, 'market-0', '1');
-        cy.mockGQL((req) => {
-          aliasGQLQuery(req, 'Accounts', accounts);
-        });
-        cy.mockSubscription();
-        cy.visit('/#/markets/market-0');
-        cy.wait('@Markets');
-
-        cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
-          if (!$form.length) {
-            cy.getByTestId('Order').click();
-          }
-        });
-      });
-
-      it('should display info and button for deposit', () => {
-        // 7002-SORD-003
-
-        // warning should show immediately
-        cy.getByTestId('deal-ticket-warning-margin').should(
-          'contain.text',
-          'You may not have enough margin available to open this position'
-        );
-        cy.getByTestId('deal-ticket-warning-margin').should(
-          'contain.text',
-          'You may not have enough margin available to open this position. 5.00 tDAI is currently required. You have only 0.01001 tDAI available.'
-        );
-        cy.getByTestId('deal-ticket-deposit-dialog-button').click();
-        cy.getByTestId('sidebar-content')
-          .find('h2')
-          .eq(0)
-          .should('have.text', 'Deposit');
-      });
-    });
-  }
-);

apps/trading-e2e/src/integration/trading-deal-ticket-submit-batch-auction.cy.ts

@@ -1,87 +0,0 @@
-import * as Schema from '@vegaprotocol/types';
-import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
-import { createOrder } from '../support/create-order';
-
-const displayTomorrow = () => {
-  const tomorrow = new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  return tomorrow.toISOString().substring(0, 16);
-};
-
-describe(
-  'must submit order for market in batch auction',
-  { tags: '@regression' },
-  () => {
-    before(() => {
-      cy.setVegaWallet();
-      cy.mockTradingPage(
-        Schema.MarketState.STATE_SUSPENDED,
-        Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
-      );
-      cy.mockSubscription();
-      cy.visit('/#/markets/market-0');
-      cy.wait('@Markets');
-    });
-
-    beforeEach(() => {
-      cy.setVegaWallet();
-    });
-
-    it('successfully places limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_BUY,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '200',
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '20000000' });
-    });
-
-    it('successfully places limit sell order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '50000',
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '5000000000' });
-    });
-
-    it('successfully places GTT limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '1.00',
-        expiresAt: displayTomorrow(),
-      };
-      createOrder(order);
-      testOrderSubmission(order, {
-        price: '100000',
-        postOnly: false,
-        reduceOnly: false,
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
-      });
-    });
-  }
-);

apps/trading-e2e/src/integration/trading-deal-ticket-submit-monitoring-auction.cy.ts

@@ -1,85 +0,0 @@
-import * as Schema from '@vegaprotocol/types';
-import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
-import { createOrder } from '../support/create-order';
-
-const displayTomorrow = () => {
-  const tomorrow = new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  return tomorrow.toISOString().substring(0, 16);
-};
-
-describe(
-  'must submit order for market in monitoring auction',
-  { tags: '@regression' },
-  () => {
-    before(() => {
-      cy.setVegaWallet();
-      cy.mockTradingPage(
-        Schema.MarketState.STATE_SUSPENDED,
-        Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
-      );
-      cy.mockSubscription();
-      cy.visit('/#/markets/market-0');
-      cy.wait('@Markets');
-    });
-
-    beforeEach(() => {
-      cy.setVegaWallet();
-    });
-
-    it('successfully places limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_BUY,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '200',
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '20000000' });
-    });
-
-    it('successfully places limit sell order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        price: '50000',
-        postOnly: false,
-        reduceOnly: false,
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '5000000000' });
-    });
-
-    it('successfully places GTT limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
-        size: '100',
-        price: '1.00',
-        expiresAt: displayTomorrow(),
-        postOnly: false,
-        reduceOnly: false,
-      };
-      createOrder(order);
-      testOrderSubmission(order, {
-        price: '100000',
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
-      });
-    });
-  }
-);

apps/trading-e2e/src/integration/trading-deal-ticket-submit-opening-auction.cy.ts

@@ -1,85 +0,0 @@
-import * as Schema from '@vegaprotocol/types';
-import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
-import { createOrder } from '../support/create-order';
-
-const displayTomorrow = () => {
-  const tomorrow = new Date();
-  tomorrow.setDate(tomorrow.getDate() + 1);
-  return tomorrow.toISOString().substring(0, 16);
-};
-
-describe(
-  'must submit order for market in opening auction',
-  { tags: '@regression' },
-  () => {
-    before(() => {
-      cy.setVegaWallet();
-      cy.mockTradingPage(
-        Schema.MarketState.STATE_SUSPENDED,
-        Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
-        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
-      );
-      cy.mockSubscription();
-      cy.visit('/#/markets/market-0');
-      cy.wait('@Markets');
-    });
-
-    beforeEach(() => {
-      cy.setVegaWallet();
-    });
-
-    it('successfully places limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_BUY,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '200',
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '20000000' });
-    });
-
-    it('successfully places limit sell order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-        size: '100',
-        postOnly: false,
-        reduceOnly: false,
-        price: '50000',
-      };
-      createOrder(order);
-      testOrderSubmission(order, { price: '5000000000' });
-    });
-
-    it('successfully places GTT limit buy order', () => {
-      cy.mockVegaWalletTransaction();
-      const order: OrderSubmission = {
-        marketId: 'market-0',
-        type: Schema.OrderType.TYPE_LIMIT,
-        side: Schema.Side.SIDE_SELL,
-        timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
-        size: '100',
-        price: '1.00',
-        expiresAt: displayTomorrow(),
-        postOnly: false,
-        reduceOnly: false,
-      };
-      createOrder(order);
-      testOrderSubmission(order, {
-        price: '100000',
-        expiresAt:
-          new Date(order.expiresAt as string).getTime().toString() + '000000',
-      });
-    });
-  }
-);

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,

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();

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>
     </>

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>

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 (

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();
 

apps/trading/client-pages/market/constants.ts

@@ -1,3 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-
-export const NO_MARKET = t('No market');

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'

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>

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"

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];
+};

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;

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

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 =

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);

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">

apps/trading/client-pages/markets/markets-sidebar.tsx

@@ -1,7 +1,4 @@
-import { Route, Routes, useParams } from 'react-router-dom';
-import { MarketState } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
-import { useMarket } from '@vegaprotocol/markets';
+import { Route, Routes } from 'react-router-dom';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import {
   SidebarButton,
@@ -9,14 +6,11 @@ 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 { marketId } = useParams();
+  const t = useT();
   const currentRouteId = useGetCurrentRouteId();
-  const { data } = useMarket(marketId);
-  const active =
-    data &&
-    [MarketState.STATE_ACTIVE, MarketState.STATE_PENDING].includes(data.state);
 
   return (
     <>
@@ -44,14 +38,12 @@ export const MarketsSidebar = () => {
           element={
             <>
               <SidebarDivider />
-              {active && (
-                <SidebarButton
-                  view={ViewType.Order}
-                  icon={VegaIconNames.TICKET}
-                  tooltip={t('Order')}
-                  routeId={currentRouteId}
-                />
-              )}
+              <SidebarButton
+                view={ViewType.Order}
+                icon={VegaIconNames.TICKET}
+                tooltip={t('Order')}
+                routeId={currentRouteId}
+              />
               <SidebarButton
                 view={ViewType.Info}
                 icon={VegaIconNames.BREAKDOWN}

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({

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 });
     }
   }
 

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,

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]
   );
 };

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 (

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(() => {

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"

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

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 (

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>
+  );
+};

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="">

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>
+  );
+};

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 (
     <>

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') },
       ]}

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

apps/trading/client-pages/rewards/index.ts

@@ -0,0 +1 @@
+export { Rewards } from './rewards';

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

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

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();

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);
 

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>
   );
 };
 

apps/trading/components/card/card.tsx

@@ -0,0 +1,102 @@
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import type { HTMLProps, ReactNode } from 'react';
+
+export const Card = ({
+  children,
+  title,
+  className,
+  loading = false,
+  highlight = false,
+}: {
+  children: ReactNode;
+  title: string;
+  className?: string;
+  loading?: boolean;
+  highlight?: boolean;
+}) => {
+  return (
+    <div
+      className={classNames(
+        'bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full p-0.5 lg:col-auto',
+        'rounded-lg',
+        {
+          'bg-rainbow': highlight,
+        },
+        className
+      )}
+    >
+      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4">
+        <h2 className="mb-3">{title}</h2>
+        {loading ? <CardLoader /> : children}
+      </div>
+    </div>
+  );
+};
+
+export const CardLoader = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="bg-vega-clight-600 dark:bg-vega-cdark-600 h-5 w-full" />
+      <div className="bg-vega-clight-600 dark:bg-vega-cdark-600 h-6 w-3/4" />
+    </div>
+  );
+};
+
+export const CardStat = ({
+  value,
+  text,
+  highlight,
+  description,
+  testId,
+}: {
+  value: ReactNode;
+  text?: string;
+  highlight?: boolean;
+  description?: ReactNode;
+  testId?: string;
+}) => {
+  const val = (
+    <span
+      className={classNames('inline-block text-3xl leading-none', {
+        'bg-rainbow bg-clip-text text-transparent': highlight,
+        'cursor-help': description,
+      })}
+      data-testid={testId}
+    >
+      {value}
+    </span>
+  );
+
+  return (
+    <p className="leading-none">
+      {description ? <Tooltip description={description}>{val}</Tooltip> : val}
+      {text && (
+        <small className="text-muted mt-0.5 block text-xs">{text}</small>
+      )}
+    </p>
+  );
+};
+
+export const CardTable = (props: HTMLProps<HTMLTableElement>) => {
+  return (
+    <table {...props} className="text-muted mt-0.5 w-full text-xs">
+      <tbody>{props.children}</tbody>
+    </table>
+  );
+};
+
+export const CardTableTH = (props: HTMLProps<HTMLTableHeaderCellElement>) => {
+  return (
+    <th
+      {...props}
+      className={classNames('text-left font-normal', props.className)}
+    />
+  );
+};
+
+export const CardTableTD = (props: HTMLProps<HTMLTableCellElement>) => {
+  return (
+    <td {...props} className={classNames('text-right', props.className)} />
+  );
+};

apps/trading/components/card/index.ts

@@ -0,0 +1 @@
+export { Card, CardStat, CardTable, CardTableTH, CardTableTD } from './card';

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,

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);
 

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

@@ -1,36 +0,0 @@
-import classNames from 'classnames';
-import type { ReactNode } from 'react';
-
-export const FeeCard = ({
-  children,
-  title,
-  className,
-  loading = false,
-}: {
-  children: ReactNode;
-  title: string;
-  className?: string;
-  loading?: boolean;
-}) => {
-  return (
-    <div
-      className={classNames(
-        'p-4 bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full lg:col-auto',
-        'rounded-lg',
-        className
-      )}
-    >
-      <h2 className="mb-3">{title}</h2>
-      {loading ? <FeeCardLoader /> : children}
-    </div>
-  );
-};
-
-export const FeeCardLoader = () => {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="w-full h-5 bg-vega-clight-600 dark:bg-vega-cdark-600" />
-      <div className="w-3/4 h-6 bg-vega-clight-600 dark:bg-vega-cdark-600" />
-    </div>
-  );
-};

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,
@@ -9,9 +8,8 @@ import {
 import { useMarketList } from '@vegaprotocol/markets';
 import { formatNumber, formatNumberRounded } from '@vegaprotocol/utils';
 import { useDiscountProgramsQuery, useFeesQuery } from './__generated__/Fees';
-import { FeeCard } from './fees-card';
+import { Card, CardStat, CardTable, CardTableTD, CardTableTH } from '../card';
 import { MarketFees } from './market-fees';
-import { Stat } from './stat';
 import { useVolumeStats } from './use-volume-stats';
 import { useReferralStats } from './use-referral-stats';
 import { formatPercentage, getAdjustedFee } from './utils';
@@ -25,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,
@@ -87,7 +87,7 @@ export const FeesContainer = () => {
     <div className="grid auto-rows-min grid-cols-4 gap-3">
       {isConnected && (
         <>
-          <FeeCard
+          <Card
             title={t('My trading fees')}
             className="sm:col-span-2"
             loading={loading}
@@ -98,8 +98,8 @@ export const FeesContainer = () => {
               referralDiscount={referralDiscount}
               volumeDiscount={volumeDiscount}
             />
-          </FeeCard>
-          <FeeCard
+          </Card>
+          <Card
             title={t('Total discount')}
             className="sm:col-span-2"
             loading={loading}
@@ -110,8 +110,8 @@ export const FeesContainer = () => {
               isReferralProgramRunning={isReferralProgramRunning}
               isVolumeDiscountProgramRunning={isVolumeDiscountProgramRunning}
             />
-          </FeeCard>
-          <FeeCard
+          </Card>
+          <Card
             title={t('My current volume')}
             className="sm:col-span-2"
             loading={loading}
@@ -124,12 +124,12 @@ export const FeesContainer = () => {
                 windowLength={volumeDiscountWindowLength}
               />
             ) : (
-              <p className="pt-3 text-sm text-muted">
+              <p className="text-muted pt-3 text-sm">
                 {t('No volume discount program active')}
               </p>
             )}
-          </FeeCard>
-          <FeeCard
+          </Card>
+          <Card
             title={t('Referral benefits')}
             className="sm:col-span-2"
             loading={loading}
@@ -143,14 +143,14 @@ export const FeesContainer = () => {
                 epochs={referralDiscountWindowLength}
               />
             ) : (
-              <p className="pt-3 text-sm text-muted">
+              <p className="text-muted pt-3 text-sm">
                 {t('No referral program active')}
               </p>
             )}
-          </FeeCard>
+          </Card>
         </>
       )}
-      <FeeCard
+      <Card
         title={t('Volume discount')}
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
@@ -161,8 +161,8 @@ export const FeesContainer = () => {
           lastEpochVolume={volumeInWindow}
           windowLength={volumeDiscountWindowLength}
         />
-      </FeeCard>
-      <FeeCard
+      </Card>
+      <Card
         title={t('Referral discount')}
         className="lg:col-span-full xl:col-span-2"
         loading={loading}
@@ -173,8 +173,8 @@ export const FeesContainer = () => {
           epochsInSet={epochsInSet}
           referralVolumeInWindow={referralVolumeInWindow}
         />
-      </FeeCard>
-      <FeeCard
+      </Card>
+      <Card
         title={t('Fees by market')}
         className="lg:col-span-full"
         loading={marketsLoading}
@@ -184,7 +184,7 @@ export const FeesContainer = () => {
           referralDiscount={referralDiscount}
           volumeDiscount={volumeDiscount}
         />
-      </FeeCard>
+      </Card>
     </div>
   );
 };
@@ -203,6 +203,7 @@ export const TradingFees = ({
   referralDiscount: number;
   volumeDiscount: number;
 }) => {
+  const t = useT();
   const referralDiscountBigNum = new BigNumber(referralDiscount);
   const volumeDiscountBigNum = new BigNumber(volumeDiscount);
 
@@ -244,8 +245,8 @@ export const TradingFees = ({
   }
 
   return (
-    <div>
-      <div className="pt-6 leading-none">
+    <div className="pt-4">
+      <div className="leading-none">
         <p className="block text-3xl leading-none" data-testid="adjusted-fees">
           {minAdjustedTotal !== undefined && maxAdjustedTotal !== undefined
             ? `${formatPercentage(minAdjustedTotal)}%-${formatPercentage(
@@ -253,47 +254,43 @@ export const TradingFees = ({
               )}%`
             : `${formatPercentage(adjustedTotal)}%`}
         </p>
-        <table className="w-full mt-0.5 text-xs text-muted">
-          <tbody>
+        <CardTable>
+          <tr className="text-default">
+            <CardTableTH>{t('Total fee before discount')}</CardTableTH>
+            <CardTableTD>
+              {minTotal !== undefined && maxTotal !== undefined
+                ? `${formatPercentage(minTotal.toNumber())}%-${formatPercentage(
+                    maxTotal.toNumber()
+                  )}%`
+                : `${formatPercentage(total.toNumber())}%`}
+            </CardTableTD>
+          </tr>
+          <tr>
+            <CardTableTH>{t('Infrastructure')}</CardTableTH>
+            <CardTableTD>
+              {formatPercentage(
+                Number(params.market_fee_factors_infrastructureFee)
+              )}
+              %
+            </CardTableTD>
+          </tr>
+          <tr>
+            <CardTableTH>{t('Maker')}</CardTableTH>
+            <CardTableTD>
+              {formatPercentage(Number(params.market_fee_factors_makerFee))}%
+            </CardTableTD>
+          </tr>
+          {minLiq && maxLiq && (
             <tr>
-              <th className="font-normal text-left text-default">
-                {t('Total fee before discount')}
-              </th>
-              <td className="text-right text-default">
-                {minTotal !== undefined && maxTotal !== undefined
-                  ? `${formatPercentage(
-                      minTotal.toNumber()
-                    )}%-${formatPercentage(maxTotal.toNumber())}%`
-                  : `${formatPercentage(total.toNumber())}%`}
-              </td>
+              <CardTableTH>{t('Liquidity')}</CardTableTH>
+              <CardTableTD>
+                {formatPercentage(Number(minLiq.fees.factors.liquidityFee))}%
+                {'-'}
+                {formatPercentage(Number(maxLiq.fees.factors.liquidityFee))}%
+              </CardTableTD>
             </tr>
-            <tr>
-              <th className="font-normal text-left">{t('Infrastructure')}</th>
-              <td className="text-right">
-                {formatPercentage(
-                  Number(params.market_fee_factors_infrastructureFee)
-                )}
-                %
-              </td>
-            </tr>
-            <tr>
-              <th className="font-normal text-left ">{t('Maker')}</th>
-              <td className="text-right">
-                {formatPercentage(Number(params.market_fee_factors_makerFee))}%
-              </td>
-            </tr>
-            {minLiq && maxLiq && (
-              <tr>
-                <th className="font-normal text-left ">{t('Liquidity')}</th>
-                <td className="text-right">
-                  {formatPercentage(Number(minLiq.fees.factors.liquidityFee))}%
-                  {'-'}
-                  {formatPercentage(Number(maxLiq.fees.factors.liquidityFee))}%
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
+          )}
+        </CardTable>
       </div>
     </div>
   );
@@ -310,19 +307,20 @@ export const CurrentVolume = ({
   windowLengthVolume: number;
   windowLength: number;
 }) => {
+  const t = useT();
   const nextTier = tiers[tierIndex + 1];
   const requiredForNextTier = nextTier
     ? Number(nextTier.minimumRunningNotionalTakerVolume) - windowLengthVolume
     : 0;
 
   return (
-    <div>
-      <Stat
+    <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 && (
-        <Stat
+        <CardStat
           value={formatNumber(requiredForNextTier)}
           text={t('Required for next tier')}
         />
@@ -340,17 +338,17 @@ const ReferralBenefits = ({
   setRunningNotionalTakerVolume: number;
   epochs: number;
 }) => {
+  const t = useT();
   return (
-    <div>
-      <Stat
+    <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,
+        })}
       />
-      <Stat value={epochsInSet} text={t('epochs in referral set')} />
+      <CardStat value={epochsInSet} text={t('epochs in referral set')} />
     </div>
   );
 };
@@ -366,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: '
@@ -377,8 +376,8 @@ const TotalDiscount = ({
   );
 
   return (
-    <div>
-      <Stat
+    <div className="pt-4">
+      <CardStat
         description={
           <>
             {totalDiscountDescription}
@@ -388,38 +387,36 @@ const TotalDiscount = ({
         value={formatPercentage(totalDiscount) + '%'}
         highlight={true}
       />
-      <table className="w-full mt-0.5 text-xs text-muted">
-        <tbody>
-          <tr>
-            <th className="font-normal text-left">{t('Volume discount')}</th>
-            <td className="text-right">
-              {formatPercentage(volumeDiscount)}%
-              {!isVolumeDiscountProgramRunning && (
-                <Tooltip description={t('No active volume discount programme')}>
-                  <span className="cursor-help">
-                    {' '}
-                    <VegaIcon name={VegaIconNames.INFO} size={12} />
-                  </span>
-                </Tooltip>
-              )}
-            </td>
-          </tr>
-          <tr>
-            <th className="font-normal text-left ">{t('Referral discount')}</th>
-            <td className="text-right">
-              {formatPercentage(referralDiscount)}%
-              {!isReferralProgramRunning && (
-                <Tooltip description={t('No active referral programme')}>
-                  <span className="cursor-help">
-                    {' '}
-                    <VegaIcon name={VegaIconNames.INFO} size={12} />
-                  </span>
-                </Tooltip>
-              )}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <CardTable>
+        <tr>
+          <CardTableTH>{t('Volume discount')}</CardTableTH>
+          <CardTableTD>
+            {formatPercentage(volumeDiscount)}%
+            {!isVolumeDiscountProgramRunning && (
+              <Tooltip description={t('No active volume discount programme')}>
+                <span className="cursor-help">
+                  {' '}
+                  <VegaIcon name={VegaIconNames.INFO} size={12} />
+                </span>
+              </Tooltip>
+            )}
+          </CardTableTD>
+        </tr>
+        <tr>
+          <CardTableTH>{t('Referral discount')}</CardTableTH>
+          <CardTableTD>
+            {formatPercentage(referralDiscount)}%
+            {!isReferralProgramRunning && (
+              <Tooltip description={t('No active referral programme')}>
+                <span className="cursor-help">
+                  {' '}
+                  <VegaIcon name={VegaIconNames.INFO} size={12} />
+                </span>
+              </Tooltip>
+            )}
+          </CardTableTD>
+        </tr>
+      </CardTable>
     </div>
   );
 };
@@ -438,9 +435,10 @@ const VolumeTiers = ({
   lastEpochVolume: number;
   windowLength: number;
 }) => {
+  const t = useT();
   if (!tiers.length) {
     return (
-      <p className="text-sm text-muted">
+      <p className="text-muted text-sm">
         {t('No volume discount program active')}
       </p>
     );
@@ -454,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>
@@ -499,9 +499,11 @@ const ReferralTiers = ({
   epochsInSet: number;
   referralVolumeInWindow: number;
 }) => {
+  const t = useT();
+
   if (!tiers.length) {
     return (
-      <p className="text-sm text-muted">{t('No referral program active')}</p>
+      <p className="text-muted text-sm">{t('No referral program active')}</p>
     );
   }
 
@@ -556,37 +558,43 @@ const ReferralTiers = ({
 };
 
 const YourTier = () => {
+  const t = useT();
+
   return (
-    <span className="px-4 py-1.5 rounded-xl bg-rainbow whitespace-nowrap text-white">
+    <span className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white">
       {t('Your tier')}
     </span>
   );
 };
 
-const ReferrerInfo = ({ code }: { code?: string }) => (
-  <div className="pt-3 text-sm text-vega-clight-200 dark:vega-cdark-200">
-    <p className="mb-1">
-      {t('Connected key is owner of the referral set')}
-      {code && (
-        <>
-          {' '}
-          <span className="text-transparent bg-rainbow bg-clip-text">
-            {truncateMiddle(code)}
-          </span>
-        </>
-      )}
-      {'. '}
-      {t('As owner, it is eligible for commission not fee discounts.')}
-    </p>
-    <p>
-      {t('See')}{' '}
-      <Link
-        className="underline text-black 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>
+  );
+};

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}

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

@@ -1,34 +0,0 @@
-import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import classNames from 'classnames';
-import type { ReactNode } from 'react';
-
-export const Stat = ({
-  value,
-  text,
-  highlight,
-  description,
-}: {
-  value: string | number;
-  text?: string;
-  highlight?: boolean;
-  description?: ReactNode;
-}) => {
-  const val = (
-    <span
-      className={classNames('inline-block text-3xl leading-none', {
-        'text-transparent bg-rainbow bg-clip-text': highlight,
-        'cursor-help': description,
-      })}
-    >
-      {value}
-    </span>
-  );
-  return (
-    <p className="pt-3 leading-none first:pt-6">
-      {description ? <Tooltip description={description}>{val}</Tooltip> : val}
-      {text && (
-        <small className="block mt-0.5 text-xs text-muted">{text}</small>
-      )}
-    </p>
-  );
-};