chore: formatting

feat(utils): use i18next
2023-11-19 13:30:26 -08:00 · 2023-11-19 13:20:37 -08:00
46 changed files with 167 additions and 402 deletions
@@ -1,4 +1,3 @@
-import '../i18n';
 import {
  NetworkLoader,
  NodeFailure,
@@ -29,24 +28,20 @@ function App() {
  );
  return (
    <TendermintWebsocketProvider>
-      <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>
+      <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>
    </TendermintWebsocketProvider>
  );
 }
@@ -3,9 +3,6 @@
 // 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,
@@ -16,14 +13,3 @@ 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',
-});
@@ -1 +0,0 @@
-../../../../libs/i18n/src/locales
@@ -1,45 +0,0 @@
-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;
@@ -1,7 +1,7 @@
 import {
  getProposalDialogIcon,
  getProposalDialogIntent,
-  useGetProposalDialogTitle,
+  getProposalDialogTitle,
 } from '@vegaprotocol/proposals';
 import type { ProposalEventFieldsFragment } from '@vegaprotocol/proposals';
 import type { DialogProps } from '@vegaprotocol/proposals';
@@ -15,7 +15,6 @@ 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 ? (
@@ -25,7 +24,7 @@ export const ProposalFormTransactionDialog = ({
  return (
    <div data-testid="proposal-transaction-dialog">
      <TransactionDialog
-        title={title}
+        title={getProposalDialogTitle(finalizedProposal?.state)}
        intent={getProposalDialogIntent(finalizedProposal?.state)}
        icon={getProposalDialogIcon(finalizedProposal?.state)}
        content={{
@@ -31,17 +31,16 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
    cy.visit('/#/portfolio');
    cy.get('[data-testid="pathname-/portfolio"]').should('exist');

+    // 1001-DEPO-001
    // 1001-DEPO-002
-    /* must select the asset that I want to deposit (1001-DEPO-002)
-    should easily see the assets that I have a non-zero balance for (in the connected eth wallet)
-    should see the ERC20 token address of the asset
-    should see the Vega asset symbol
-    should see the Vega asset name */
-
+    // 1001-DEPO-003
+    // 1001-DEPO-005
+    // 1001-DEPO-006
+    // 1001-DEPO-007
+    // 1001-DEPO-008
    // 1001-DEPO-009
-    // must see feedback on the deposit ETH transaction (1001-DEPO-009)
    // 1001-DEPO-010
-    // must see feedback that the deposit has or has not been credited to the Vega key (1001-DEPO-010)
+
    cy.getByTestId(depositsTab).click();
    cy.getByTestId('deposit-button').click();
    connectEthereumWallet('Unknown');
@@ -138,9 +137,14 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {

  it('can withdrawal', function () {
    // 1002-WITH-0014
-
+    // 1002-WITH-006
+    // 1002-WITH-009
+    // 1002-WITH-011
    // 1002-WITH-024
-
+    // 1002-WITH-012
+    // 1002-WITH-013
+    // 1002-WITH-014
+    // 1002-WITH-015
    // 1002-WITH-016
    // 1002-WITH-017
    // 1002-WITH-019
@@ -233,6 +237,28 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // cy.getByTestId('BALANCE_AVAILABLE_value').should('have.text', '6.999');
  });

+  it('approved amount is less than deposit', function () {
+    // 1001-DEPO-006
+    // 1001-DEPO-007
+    cy.visit('/#/portfolio');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.getByTestId(toastCloseBtn, txTimeout).click();
+    cy.getByTestId(depositsTab).click();
+    cy.getByTestId('deposit-button').click();
+    connectEthereumWallet('Unknown');
+    selectAsset(btcName);
+    cy.get('[data-testid="rich-select-option"]').eq(btcName).click();
+    cy.contains('Deposits of tBTC not approved').should('not.exist');
+    cy.contains('Use maximum').should('be.visible');
+    cy.get(amountField).clear().type('20000000');
+    cy.getByTestId(depositSubmit).should('be.visible');
+    cy.getByTestId(depositSubmit).click();
+    cy.getByTestId('input-error-text').should(
+      'contain.text',
+      `You can't deposit more than you have in your Ethereum wallet`
+    );
+  });
+
  it('withdraw - delay verification', function () {
    // 1001-DEPO-024
    // 1002-WITH-007
@@ -84,19 +84,6 @@ beforeEach(() => {
  });
 });

-// Missing ACs
-// 1001-DEPO-002
-/* must select the asset that I want to deposit (1001-DEPO-002)
-    should easily see the assets that I have a non-zero balance for (in the connected eth wallet)
-    should see the ERC20 token address of the asset
-    should see the Vega asset symbol
-    should see the Vega asset name */
-
-// 1001-DEPO-009
-// must see feedback on the deposit ETH transaction (1001-DEPO-009)
-// 1001-DEPO-010
-// must see feedback that the deposit has or has not been credited to the Vega key (1001-DEPO-010)
-
 describe('Deposit form', () => {
  it('renders with default values', async () => {
    render(<DepositForm {...props} />);
@@ -108,7 +95,6 @@ describe('Deposit form', () => {
    );
    expect(screen.getByLabelText('Asset')).toHaveValue('');
    expect(screen.getByLabelText('To (Vega key)')).toHaveValue('');
-    // 1001-DEPO-003
    expect(screen.getByLabelText('Amount')).toHaveValue(null);
  });

@@ -118,7 +104,6 @@ describe('Deposit form', () => {

      fireEvent.submit(screen.getByTestId('deposit-form'));

-      // 1001-DEPO-005
      expect(props.submitDeposit).not.toHaveBeenCalled();
      const validationMessages = await screen.findAllByRole('alert');
      expect(validationMessages).toHaveLength(3);
@@ -135,7 +120,7 @@ describe('Deposit form', () => {
      render(<DepositForm {...props} />);

      fireEvent.submit(screen.getByTestId('deposit-form'));
-      // 1001-DEPO-001
+
      expect(
        await screen.findByText('Connect Ethereum wallet')
      ).toBeInTheDocument();
@@ -206,8 +191,6 @@ describe('Deposit form', () => {
      });
      fireEvent.submit(screen.getByTestId('deposit-form'));

-      // 1001-DEPO-006
-      // 1001-DEPO-007
      expect(
        await screen.findByText(
          "You can't deposit more than your approved deposit amount, 30"
@@ -323,8 +306,7 @@ describe('Deposit form', () => {
    });

    fireEvent.click(screen.getByRole('button', { name: 'Deposit' }));
-    // 1001-DEPO-005
-    // 1001-DEPO-008
+
    await waitFor(() => {
      expect(props.submitDeposit).toHaveBeenCalledWith({
        // @ts-ignore contract address definitely defined
@@ -332,7 +314,6 @@ describe('Deposit form', () => {
        amount: '8',
        vegaPublicKey: pubKey,
      });
-      screen.debug();
    });
  });

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

+import en_positions from './locales/en/positions.json';
 export const locales = {
  en: {
    accounts: en_accounts,
@@ -34,8 +30,5 @@ export const locales = {
    markets: en_markets,
    web3: en_web3,
    positions: en_positions,
-    proposals: en_proposals,
-    trades: en_trades,
-    'ui-toolkit': en_ui_toolkit,
  },
 };
@@ -1 +0,0 @@
-{}
@@ -1,46 +0,0 @@
-{
-  "[This is {{network}} transaction only]": "[This is {{network}} transaction only]",
-  "{{proposalChange}} proposal {{proposalState}}": "{{proposalChange}} proposal {{proposalState}}",
-  "<0>{{count}}</0> blocks": "<0>{{count}}</0> blocks",
-  "Awaiting network confirmation": "Awaiting network confirmation",
-  "blocks": "blocks",
-  "Changes have been proposed for this asset.": "Changes have been proposed for this asset.",
-  "Changes have been proposed for this market.": "Changes have been proposed for this market.",
-  "Closing date": "Closing date",
-  "Confirm transaction in wallet": "Confirm transaction in wallet",
-  "Enactment date: {{date}}": "Enactment date: {{date}}",
-  "Enactment date": "Enactment date",
-  "estimated time to protocol upgrade": "estimated time to protocol upgrade",
-  "estimating...": "estimating...",
-  "Market": "Market",
-  "Network upgrade in {{countdown}}": "Network upgrade in {{countdown}}",
-  "No proposed markets": "No proposed markets",
-  "Parent market": "Parent market",
-  "Please open your wallet application and confirm or reject the transaction": "Please open your wallet application and confirm or reject the transaction",
-  "Please wait for your transaction to be confirmed": "Please wait for your transaction to be confirmed",
-  "Proposal declined": "Proposal declined",
-  "Proposal enacted": "Proposal enacted",
-  "Proposal failed": "Proposal failed",
-  "Proposal passed": "Proposal passed",
-  "Proposal rejected": "Proposal rejected",
-  "Proposal submitted": "Proposal submitted",
-  "Proposal waiting for node vote": "Proposal waiting for node vote",
-  "Rejection reason: {{reason}}": "Rejection reason: {{reason}}",
-  "Settlement asset": "Settlement asset",
-  "State": "State",
-  "Submission failed": "Submission failed",
-  "The network is being upgraded to {{vegaReleaseTag}}": "The network is being upgraded to {{vegaReleaseTag}}",
-  "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}": "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}",
-  "Trading activity will be interrupted, manage your risk appropriately.": "Trading activity will be interrupted, manage your risk appropriately.",
-  "Trading and other network activity has stopped until the upgrade is complete.": "Trading and other network activity has stopped until the upgrade is complete.",
-  "Transaction complete": "Transaction complete",
-  "Transaction failed": "Transaction failed",
-  "Unknown proposal {{proposalState}}": "Unknown proposal {{proposalState}}",
-  "Update <0>{{key}}</0> to {{value}}": "Update <0>{{key}}</0> to {{value}}",
-  "View details": "View details",
-  "View in block explorer": "View in block explorer",
-  "View proposal details": "View proposal details",
-  "View proposal": "View proposal",
-  "Voting": "Voting",
-  "Your transaction has been confirmed": "Your transaction has been confirmed"
-}
@@ -1,6 +0,0 @@
-{
-  "Created at": "Created at",
-  "No trades": "No trades",
-  "Price": "Price",
-  "Size": "Size"
-}
@@ -1,21 +0,0 @@
-{
-  "{{fee}} Fee": "{{fee}} Fee",
-  "Auction Trigger stake {{trigger}}": "Auction Trigger stake {{trigger}}",
-  "Collapse": "Collapse",
-  "Copied": "Copied",
-  "Dark mode": "Dark mode",
-  "Dismiss all toasts": "Dismiss all toasts",
-  "Dismiss all": "Dismiss all",
-  "Exit view as": "Exit view as",
-  "Expand": "Expand",
-  "Light mode": "Light mode",
-  "Loading...": "Loading...",
-  "No data": "No data",
-  "Providers greater than 2x target stake not shown": "Providers greater than 2x target stake not shown",
-  "Show more": "Show more",
-  "Something went wrong: {{errorMessage}}": "Something went wrong: {{errorMessage}}",
-  "Target stake {{target}}": "Target stake {{target}}",
-  "This is an example of a toast notification": "This is an example of a toast notification",
-  "Try again": "Try again",
-  "Viewing as Vega user: {{pubKey}}": "Viewing as Vega user: {{pubKey}}"
-}
@@ -1,8 +1,8 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { useUpdateProposal } from '../lib';
-import { useT } from '../use-t';

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

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

 export const ProposalActionsDropdown = ({ id }: { id: string }) => {
-  const t = useT();
  const linkCreator = useLinks(DApp.Governance);

  return (
@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import { AgGrid } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useProposalsListQuery } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useColumnDefs } from './use-column-defs';
-import { useT } from '../../use-t';

 export const getNewMarketProposals = (data: ProposalListFieldsFragment[]) =>
  data.filter((proposal) =>
@@ -30,7 +30,6 @@ interface ProposalListProps {
 }

 export const ProposalsList = ({ cellRenderers }: ProposalListProps) => {
-  const t = useT();
  const { data } = useProposalsListQuery({
    variables: {
      proposalType: Types.ProposalType.TYPE_NEW_MARKET,
@@ -8,6 +8,7 @@ import {
 } from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
@@ -18,11 +19,8 @@ import {
 } from '@vegaprotocol/types';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { ProposalActionsDropdown } from '../proposal-actions-dropdown';
-import { useT } from '../../use-t';

 export const useColumnDefs = () => {
-  const t = useT();
-
  const columnDefs: ColDef[] = useMemo(() => {
    return compact([
      {
@@ -126,7 +124,7 @@ export const useColumnDefs = () => {
        },
      },
    ]);
-  }, [t]);
+  }, []);

  return columnDefs;
 };
@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/i18n';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import classNames from 'classnames';
@@ -8,8 +9,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { useContext } from 'react';
-import { useT } from '../use-t';
-import { Trans } from 'react-i18next';

 export enum ProtocolUpgradeCountdownMode {
  IN_BLOCKS,
@@ -22,7 +21,6 @@ type ProtocolUpgradeCountdownProps = {
 export const ProtocolUpgradeCountdown = ({
  mode = ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING,
 }: ProtocolUpgradeCountdownProps) => {
-  const t = useT();
  const { theme } = useContext(NavigationContext);
  const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();

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

+import { t } from '@vegaprotocol/i18n';
 import {
  ExternalLink,
  Intent,
@@ -13,7 +14,6 @@ import {
 } from '../lib';
 import { useLocalStorageSnapshot } from '@vegaprotocol/react-helpers';
 import { useBlockRising } from '../lib/protocol-upgrade-proposals/use-block-rising';
-import { useT } from '../use-t';

 /**
 * A flag determining whether to get the upgrade proposal data from local
@@ -22,7 +22,6 @@ import { useT } from '../use-t';
 const ALLOW_STORED_PROPOSAL_DATA = true;

 export const ProtocolUpgradeInProgressNotification = () => {
-  const t = useT();
  const { data, error } = useNextProtocolUpgradeProposal(undefined, true);
  const [nextUpgrade] = useLocalStorageSnapshot(
    NEXT_PROTOCOL_UPGRADE_PROPOSAL_SNAPSHOT
@@ -72,9 +71,7 @@ export const ProtocolUpgradeInProgressNotification = () => {
  return (
    <NotificationBanner intent={Intent.Danger} className={SHORT}>
      <div className="uppercase">
-        {t('The network is being upgraded to {{vegaReleaseTag}}', {
-          vegaReleaseTag,
-        })}
+        {t('The network is being upgraded to %s', vegaReleaseTag)}
      </div>
      <div>
        {t(
@@ -4,12 +4,11 @@ import {
  NotificationBanner,
 } from '@vegaprotocol/ui-toolkit';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
+import { t } from '@vegaprotocol/i18n';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { ProtocolUpgradeCountdownMode } from './protocol-upgrade-countdown';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import { useState } from 'react';
-import { useT } from '../use-t';
-import { Trans } from 'react-i18next';

 type ProtocolUpgradeProposalNotificationProps = {
  mode?: ProtocolUpgradeCountdownMode;
@@ -17,7 +16,6 @@ type ProtocolUpgradeProposalNotificationProps = {
 export const ProtocolUpgradeProposalNotification = ({
  mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
 }: ProtocolUpgradeProposalNotificationProps) => {
-  const t = useT();
  const [visible, setVisible] = useState(true);
  const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
  const detailsLink = useProtocolUpgradeProposalLink();
@@ -42,13 +40,10 @@ export const ProtocolUpgradeProposalNotification = ({
  switch (mode) {
    case ProtocolUpgradeCountdownMode.IN_BLOCKS:
      countdown = (
-        <Trans
-          defaults="<0>{{count}}</0> blocks"
-          components={[<span className="text-vega-orange-500">count</span>]}
-          values={{
-            count: blocksLeft,
-          }}
-        />
+        <>
+          <span className="text-vega-orange-500">{blocksLeft}</span>{' '}
+          {t('blocks')}
+        </>
      );
      break;
    case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
@@ -77,13 +72,10 @@ export const ProtocolUpgradeProposalNotification = ({
      }}
    >
      <div className="uppercase ">
-        {t('The network will upgrade to {{vegaReleaseTag}} in {{countdown}}', {
-          vegaReleaseTag: data.vegaReleaseTag,
-          countdown,
-        })}
+        {t('The network will upgrade to %s in ', [data.vegaReleaseTag])}
+        {countdown}
      </div>
      <div>
-        <Trans />
        {t(
          'Trading activity will be interrupted, manage your risk appropriately.'
        )}{' '}
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
+import { t } from '@vegaprotocol/i18n';
 import { Dialog, Icon, Intent, Loader } from '@vegaprotocol/ui-toolkit';
 import { WalletClientError } from '@vegaprotocol/wallet-client';
 import type { VegaTxState } from '../../lib/proposals-hooks/use-vega-transaction';
 import { VegaTxStatus } from '../../lib/proposals-hooks/use-vega-transaction';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useT } from '../../use-t';

 export type VegaTransactionContentMap = {
  [C in VegaTxStatus]?: JSX.Element;
@@ -28,9 +28,8 @@ export const VegaTransactionDialog = ({
  icon,
  content,
 }: VegaTransactionDialogProps) => {
-  const t = useT();
  const computedIntent = intent ? intent : getIntent(transaction);
-  const computedTitle = title ? title : getTitle(transaction, t);
+  const computedTitle = title ? title : getTitle(transaction);
  const computedIcon = icon ? icon : getIcon(transaction);

  return (
@@ -87,7 +86,6 @@ interface VegaDialogProps {
 * Default dialog content
 */
 export const VegaDialog = ({ transaction }: VegaDialogProps) => {
-  const t = useT();
  const { links, network } = useVegaWallet();

  let content = null;
@@ -101,7 +99,7 @@ export const VegaDialog = ({ transaction }: VegaDialogProps) => {
        </p>
        {network !== 'MAINNET' && (
          <p data-testid="testnet-transaction-info">
-            {t('[This is {{network}} transaction only]', { network })}
+            {t('[This is %s transaction only]').replace('%s', network)}
          </p>
        )}
      </>
@@ -178,7 +176,7 @@ const getIntent = (transaction: VegaTxState) => {
  }
 };

-const getTitle = (transaction: VegaTxState, t: ReturnType<typeof useT>) => {
+const getTitle = (transaction: VegaTxState) => {
  switch (transaction.status) {
    case VegaTxStatus.Requested:
      return t('Confirm transaction in wallet');
@@ -1,5 +1,6 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import {
  ProposalChangeMapping,
  ProposalRejectionReasonMapping,
@@ -15,8 +16,6 @@ import {
  useOnProposalSubscription,
  type OnProposalFragmentFragment,
 } from './__generated__/Proposal';
-import { Trans } from 'react-i18next';
-import { useT } from '../../use-t';

 export const PROPOSAL_STATES_TO_TOAST = [
  ProposalState.STATE_DECLINED,
@@ -28,7 +27,6 @@ const CLOSE_AFTER = 0;
 type Proposal = OnProposalFragmentFragment;

 const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
-  const t = useT();
  const change = proposal.terms.change;
  switch (change.__typename) {
    case 'UpdateNetworkParameter':
@@ -45,10 +43,8 @@ const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
          {proposal.state === ProposalState.STATE_REJECTED &&
          proposal.rejectionReason ? (
            <p data-testid="proposal-toast-rejection-reason">
-              {t('Rejection reason: {{reason}}', {
-                reason:
-                  ProposalRejectionReasonMapping[proposal.rejectionReason],
-              })}
+              {t('Rejection reason:')}{' '}
+              {ProposalRejectionReasonMapping[proposal.rejectionReason]}
            </p>
          ) : null}
        </>
@@ -65,30 +61,24 @@ const UpdateNetworkParameterDetails = ({
  if (change.__typename !== 'UpdateNetworkParameter') return null;
  return (
    <p data-testid="proposal-toast-network-param" className="italic">
-      <Trans
-        defaults="Update <0>{{key}}</0> to {{value}}"
-        values={change.networkParameter}
-        components={[<span className="break-all">key</span>]}
-      />
+      '{t('Update ')}
+      <span className="break-all">{change.networkParameter.key}</span>
+      {t(' to ')}
+      <span>{change.networkParameter.value}</span>'
    </p>
  );
 };

 export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
-  const t = useT();
  const tokenLink = useLinks(DApp.Governance);
  const change = proposal.terms.change;

  // Generates toast's title,
  // e.g. Update market proposal enacted, New transfer proposal open, ...
-  const title = change.__typename
-    ? t('{{proposalChange}} proposal {{proposalState}}', {
-        proposalChange: ProposalChangeMapping[change.__typename],
-        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
-      })
-    : t('Unknown proposal {{proposalState}}', {
-        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
-      });
+  const title = t('%s proposal %s', [
+    change.__typename ? ProposalChangeMapping[change.__typename] : 'Unknown',
+    ProposalStateMapping[proposal.state].toLowerCase(),
+  ]);

  const enactment = Date.parse(proposal.terms.enactmentDatetime);

@@ -98,9 +88,7 @@ export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
      <ProposalDetails proposal={proposal} />
      {!isNaN(enactment) && (
        <p>
-          {t('Enactment date: {{date}}', {
-            date: getDateTimeFormat().format(enactment),
-          })}
+          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
        </p>
      )}
      <p>
@@ -1,17 +1,4 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
-import '@testing-library/jest-dom';
-import { locales } from '@vegaprotocol/i18n';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';

-// Set up i18n instance so that components have the correct default
-// en translations
-i18n.use(initReactI18next).init({
-  // we init with resources
-  resources: locales,
-  fallbackLng: 'en',
-  ns: ['proposals'],
-  defaultNS: 'proposals',
-});
 global.ResizeObserver = ResizeObserver;
@@ -1,3 +0,0 @@
-import { useTranslation } from 'react-i18next';
-export const ns = 'proposals';
-export const useT = () => useTranslation(ns).t;
@@ -1,12 +1,11 @@
 import { ProposalState } from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/i18n';
 import { Icon, Intent } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
-import { useT } from '../use-t';

-export const useGetProposalDialogTitle = (
+export const getProposalDialogTitle = (
  status?: ProposalState
 ): string | undefined => {
-  const t = useT();
  if (!status) {
    return;
  }
@@ -1,3 +0,0 @@
-export const useTranslation = () => ({
-  t: (label: string) => label,
-});
@@ -2,8 +2,8 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
 import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
+import { t } from '@vegaprotocol/i18n';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { useT } from './use-t';

 interface TradesContainerProps {
  marketId: string;
@@ -14,7 +14,6 @@ export const TradesManager = ({
  marketId,
  gridProps,
 }: TradesContainerProps) => {
-  const t = useT();
  const update = useDealTicketFormValues((state) => state.updateAll);

  const { data, error } = useDataProvider({
@@ -10,6 +10,7 @@ import {
  addDecimalsFormatNumber,
  getTimeFormat,
 } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import {
  type ColDef,
  type CellClassParams,
@@ -19,7 +20,6 @@ import {
 import { type AgGridReactProps } from 'ag-grid-react';
 import { type Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
-import { useT } from './use-t';

 export const BUY_CLASS = 'text-market-green-600 dark:text-market-green';
 export const SELL_CLASS = 'text-market-red dark:text-market-red';
@@ -51,7 +51,6 @@ interface Props extends AgGridReactProps {
 }

 export const TradesTable = ({ onClick, ...props }: Props) => {
-  const t = useT();
  const columnDefs = useMemo<ColDef[]>(
    () => [
      {
@@ -119,7 +118,7 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
        },
      },
    ],
-    [onClick, t]
+    [onClick]
  );
  return (
    <AgGrid
@@ -1,3 +0,0 @@
-import { useTranslation } from 'react-i18next';
-export const ns = 'trades';
-export const useT = () => useTranslation(ns).t;
@@ -1,14 +0,0 @@
-export const useTranslation = () => ({
-  t: (label: string, replacements?: Record<string, string>) => {
-    let translatedLabel = label;
-    if (typeof replacements === 'object' && replacements !== null) {
-      Object.keys(replacements).forEach((key) => {
-        translatedLabel = translatedLabel.replace(
-          `{{${key}}}`,
-          replacements[key]
-        );
-      });
-    }
-    return translatedLabel;
-  },
-});
@@ -1,7 +1,7 @@
 import { Splash } from '../splash';
 import type { ReactNode } from 'react';
+import { t } from '@vegaprotocol/i18n';
 import { Button } from '../button';
-import { useT } from '../../use-t';

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

 const itemClass = classNames(
  'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@@ -214,7 +214,6 @@ export const DropdownMenuCopyItem = ({
  value: string;
  text: string;
 }) => {
-  const t = useT();
  const [copied, setCopied] = useCopyTimeout();

  return (
@@ -3,14 +3,14 @@ import {
  addDecimalsFormatNumber,
  formatNumberPercentage,
 } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import { BigNumber } from 'bignumber.js';
 import { getIntentBackground, Intent } from '../../utils/intent';
 import { Indicator } from '../indicator';
 import { Tooltip } from '../tooltip';
-import { useT } from '../../use-t';

 const Remainder = () => (
-  <div className="bg-greys-light-200 relative h-[inherit] flex-1" />
+  <div className="bg-greys-light-200 h-[inherit] relative flex-1" />
 );

 const Target = ({
@@ -22,7 +22,6 @@ const Target = ({
  target: string;
  decimals: number;
 }) => {
-  const t = useT();
  return (
    <Tooltip
      description={
@@ -31,22 +30,20 @@ const Target = ({
            <Indicator variant={Intent.None} />
          </div>
          <span>
-            {t('Target stake {{target}}', {
-              target: addDecimalsFormatNumber(target, decimals),
-            })}{' '}
+            {t('Target stake')} {addDecimalsFormatNumber(target, decimals)}
          </span>
        </div>
      }
    >
      <div
        className={classNames(
-          'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
+          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
        )}
        style={{ left: '50%' }}
      >
        <div
          className={classNames(
-            'health-target bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-y-108 w-0.5 group-hover:scale-x-150',
+            'health-target w-0.5 bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-x-150 group-hover:scale-y-108',
            {
              'h-6': !isLarge,
              'h-12': isLarge,
@@ -69,7 +66,6 @@ const AuctionTarget = ({
  rangeLimit: number;
  decimals: number;
 }) => {
-  const t = useT();
  const leftPosition = new BigNumber(trigger).div(rangeLimit).multipliedBy(100);
  return (
    <Tooltip
@@ -79,16 +75,15 @@ const AuctionTarget = ({
            <Indicator variant={Intent.None} />
          </div>
          <span>
-            {t('Auction Trigger stake {{trigger}}', {
-              trigger: addDecimalsFormatNumber(trigger, decimals),
-            })}
+            {t('Auction Trigger stake')}{' '}
+            {addDecimalsFormatNumber(trigger, decimals)}
          </span>
        </div>
      }
    >
      <div
        className={classNames(
-          'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
+          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
        )}
        style={{
          left: `${leftPosition}%`,
@@ -96,7 +91,7 @@ const AuctionTarget = ({
      >
        <div
          className={classNames(
-            'health-target group-hover:scale-y-108 dashed-background w-0.5 group-hover:scale-x-150',
+            'health-target w-0.5 group-hover:scale-x-150 group-hover:scale-y-108 dashed-background',
            {
              'h-6': !isLarge,
              'h-12': isLarge,
@@ -125,7 +120,6 @@ const Level = ({
  decimals: number;
  intent: Intent;
 }) => {
-  const t = useT();
  const width = new BigNumber(commitmentAmount)
    .div(rangeLimit)
    .multipliedBy(100)
@@ -140,7 +134,9 @@ const Level = ({
      <div className="mt-1.5 inline-flex">
        <Indicator variant={intent} />
      </div>
-      <span>{t('{{fee}} Fee', { fee: formattedFee })}</span>
+      <span>
+        {formattedFee} {t('Fee')}
+      </span>
      <div className="flex  flex-col">
        <span>
          {prevLevel ? addDecimalsFormatNumber(prevLevel, decimals) : '0'} -{' '}
@@ -153,14 +149,14 @@ const Level = ({
  return (
    <Tooltip description={tooltipContent}>
      <div
-        className="group relative h-[inherit] w-full min-w-[1px]"
+        className={classNames(`relative h-[inherit] w-full group min-w-[1px]`)}
        style={{
          width: `${width}%`,
        }}
      >
        <div
          className={classNames(
-            'relative h-[inherit] w-full group-hover:scale-y-150',
+            'relative w-full h-[inherit] group-hover:scale-y-150',
            getIntentBackground(intent)
          )}
          style={{ opacity }}
@@ -171,7 +167,7 @@ const Level = ({
 };

 const Full = () => (
-  <div className="absolute bottom-0 left-0 h-[inherit] w-full bg-transparent" />
+  <div className="bg-transparent w-full h-[inherit] absolute bottom-0 left-0" />
 );

 interface Levels {
@@ -194,7 +190,6 @@ export const HealthBar = ({
  intent: Intent;
  triggerRatio?: string;
 }) => {
-  const t = useT();
  const targetNumber = parseInt(target, 10);
  const rangeLimit = targetNumber * 2;

@@ -225,7 +220,7 @@ export const HealthBar = ({
        })}
      >
        <div
-          className={classNames('health-inner relative flex w-full', {
+          className={classNames('health-inner relative w-full flex', {
            'h-4': !isLarge,
            'h-8': isLarge,
          })}
@@ -233,8 +228,8 @@ export const HealthBar = ({
          <Full />

          <div
-            className="health-bars outline-vega-light-200 dark:outline-vega-dark-200 flex
-              h-[inherit] w-full gap-0.5 outline"
+            className="health-bars h-[inherit] flex w-full
+              gap-0.5 outline outline-vega-light-200 dark:outline-vega-dark-200"
          >
            {levels.map((p, index) => {
              const { commitmentAmount, fee } = p;
@@ -258,11 +253,11 @@ export const HealthBar = ({
              <Tooltip
                description={
                  <div className="text-vega-dark-100 dark:text-vega-light-200">
-                    {t('Providers greater than 2x target stake not shown')}
+                    t( 'Providers greater than 2x target stake not shown' )
                  </div>
                }
              >
-                <div className="relative h-[inherit] flex-1 leading-4">...</div>
+                <div className="h-[inherit] relative flex-1 leading-4">...</div>
              </Tooltip>
            )}
          </div>
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { useRef, useState, useEffect } from 'react';
+import { t } from '@vegaprotocol/i18n';
 import { Button } from '../button';
 import type { ReactNode } from 'react';
-import { useT } from '../../use-t';

 type ShowMoreProps = {
  children: ReactNode;
@@ -15,7 +15,6 @@ export const ShowMore = ({
  closedMaxHeightPx = 125,
  overlayColourOverrides,
 }: ShowMoreProps) => {
-  const t = useT();
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [expanded, setExpanded] = useState(false);

@@ -1,7 +1,7 @@
+import { t } from '@vegaprotocol/i18n';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { SunIcon, MoonIcon } from './icons';
 import { Toggle } from '../toggle';
-import { useT } from '../../use-t';

 export const ThemeSwitcher = ({
  className,
@@ -10,7 +10,6 @@ export const ThemeSwitcher = ({
  className?: string;
  withMobile?: boolean;
 }) => {
-  const t = useT();
  const { theme, setTheme } = useThemeSwitcher();
  const button = (
    <button
@@ -36,7 +35,7 @@ export const ThemeSwitcher = ({
  ];
  return withMobile ? (
    <>
-      <div className="flex grow justify-between gap-6 whitespace-nowrap md:hidden">
+      <div className="flex grow gap-6 md:hidden whitespace-nowrap justify-between">
        {button}{' '}
        <Toggle
          name="theme-switch"
@@ -1,27 +1,28 @@
 import classNames from 'classnames';
+import { t } from '@vegaprotocol/i18n';
 import { IconNames } from '@blueprintjs/icons';
 import { Icon } from '../icon';
 import { ToastPosition, useToastsConfiguration, useToasts } from './use-toasts';
 import { useCallback } from 'react';
 import { Intent } from '../../utils/intent';
-import { useT } from '../../use-t';
+
+const TEST_TOAST = {
+  id: 'test-toast',
+  intent: Intent.Primary,
+  content: <>{t('This is an example of a toast notification')}</>,
+  onClose: () => useToasts.getState().remove('test-toast'),
+};

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

 export type ToastContent = JSX.Element | undefined;

@@ -83,7 +83,6 @@ export const CollapsiblePanel = forwardRef<
  HTMLDivElement,
  CollapsiblePanelProps & HTMLAttributes<HTMLDivElement>
 >(({ children, className, actions, ...props }, ref) => {
-  const t = useT();
  const [collapsed, setCollapsed] = useState(true);
  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/i18n';
 import { usePrevious } from '@vegaprotocol/react-helpers';
 import classNames from 'classnames';
 import type { Ref } from 'react';
@@ -8,7 +9,6 @@ import type { Toasts } from './use-toasts';
 import { ToastPosition, useToasts, useToastsConfiguration } from './use-toasts';

 import { Portal } from '@radix-ui/react-portal';
-import { useT } from '../../use-t';

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

 const itemClass = classNames(
  'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@@ -188,7 +188,6 @@ export const TradingDropdownCopyItem = ({
  value: string;
  text: string;
 }) => {
-  const t = useT();
  const [copied, setCopied] = useCopyTimeout();

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

 export function truncateMiddle(address: string, start = 6, end = 4) {
  if (address.length < 11) return address;
@@ -21,14 +21,15 @@ export const ViewingAsBanner = ({
  pubKey,
  disconnect,
 }: ViewingAsBannerProps) => {
-  const t = useT();
  return (
-    <NotificationBanner intent={Intent.None} className={SHORT}>
-      <div className="flex items-baseline justify-between">
-        <span data-testid="view-banner">
-          {t('Viewing as Vega user: {{pubKey}}', {
-            pubKey: pubKey && truncateMiddle(pubKey),
-          })}
+    <NotificationBanner
+      data-testid="view-banner"
+      intent={Intent.None}
+      className={SHORT}
+    >
+      <div className="flex justify-between items-baseline">
+        <span>
+          {t('Viewing as Vega user:')} {pubKey && truncateMiddle(pubKey)}{' '}
        </span>
        <TradingButton
          intent={Intent.None}
@@ -1,3 +0,0 @@
-import { useTranslation } from 'react-i18next';
-export const ns = 'ui-toolkit';
-export const useT = () => useTranslation(ns).t;
@@ -60,7 +60,6 @@ it('Should perform the Ethereum transaction with the fetched approval', async ()
  act(() => {
    result.current.submit(withdrawalId);
  });
-  // 1002-WITH-011
  await waitFor(() => {
    expect(mockPerform).toHaveBeenCalledWith(
      erc20WithdrawalApproval.assetSource,
@@ -46,7 +46,6 @@ describe('Withdrawal form', () => {
    render(<WithdrawForm {...props} />);

    expect(screen.getByLabelText('Asset')).toHaveValue('');
-    // 1002-WITH-006
    expect(screen.getByLabelText('To (Ethereum address)')).toHaveValue(
      MOCK_ETH_ADDRESS
    );
@@ -69,7 +69,6 @@ describe('WithdrawManager', () => {
    );
    await userEvent.type(screen.getByLabelText('Amount'), '0.01');
    await userEvent.click(screen.getByTestId('submit-withdrawal'));
-    // 1002-WITH-009
    expect(props.submit).toHaveBeenCalledWith({
      amount: '1000',
      asset: props.assets[0].id,
@@ -76,10 +76,6 @@ describe('Withdrawals', () => {
        'Completed',
        '0x1234…121314',
      ];
-      // 1002-WITH-012
-      // 1002-WITH-013
-      // 1002-WITH-014
-      // 1002-WITH-015
      cells.forEach((cell, i) => {
        expect(cell).toHaveTextContent(expectedValues[i]);
      });
Author	SHA1	Message	Date
Matthew Russell	a87a4a1af5	chore: formatting	2023-11-19 13:30:26 -08:00
Bartłomiej Głownia	ddc62e6913	feat(utils): use i18next	2023-11-19 13:20:37 -08:00