Task/Mark translations (#174)

* add dummy i18n translate function to market text that will need translation in future

* add i18n function to aria-labels

apps/explorer/src/app/components/blocks/block-data.tsx

@@ -4,6 +4,7 @@ import { Routes } from '../../routes/router-config';
 import { Link } from 'react-router-dom';
 import { SecondsAgo } from '../seconds-ago';
 import { Table, TableRow, TableCell } from '../table';
+import { t } from '@vegaprotocol/react-helpers';
 
 interface BlockProps {
   block: BlockMeta;
@@ -20,7 +21,7 @@ export const BlockData = ({ block, className }: BlockProps) => {
         <TableCell
           data-testid="block-height"
           className="pl-4 py-2 font-mono"
-          aria-label="Block height"
+          aria-label={t('Block height')}
         >
           <Link
             to={`/${Routes.BLOCKS}/${block.header?.height}`}
@@ -32,16 +33,16 @@ export const BlockData = ({ block, className }: BlockProps) => {
         <TableCell
           data-testid="num-txs"
           className="px-8 text-center"
-          aria-label="Number of transactions"
+          aria-label={t('Number of transactions')}
         >
           {block.num_txs === '1'
-            ? '1 transaction'
+            ? t('1 transaction')
-            : `${block.num_txs} transactions`}
+            : t(`${block.num_txs} transactions`)}
         </TableCell>
         <TableCell
           data-testid="validator-link"
           className="px-8 text-center font-mono"
-          aria-label="Validator"
+          aria-label={t('Validator')}
         >
           <Link to={`/${Routes.VALIDATORS}`}>
             {block.header.proposer_address}
@@ -50,7 +51,7 @@ export const BlockData = ({ block, className }: BlockProps) => {
         <TableCell
           data-testid="block-time"
           className="text-center pr-28 text-neutral-300 w-[170px]"
-          aria-label="Block genesis"
+          aria-label={t('Block genesis')}
         >
           <SecondsAgo date={block.header?.time} />
         </TableCell>

apps/explorer/src/app/components/blocks/blocks-data.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import type { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from './block-data';
@@ -9,12 +10,14 @@ interface BlocksProps {
 
 export const BlocksData = ({ data, className }: BlocksProps) => {
   if (!data?.result) {
-    return <div className={className}>Awaiting block data</div>;
+    return <div className={className}>{t('Awaiting block data')}</div>;
   }
 
   return (
     <ul
-      aria-label={`Showing ${data.result?.block_metas.length} most recently loaded blocks`}
+      aria-label={t(
+        `Showing ${data.result?.block_metas.length} most recently loaded blocks`
+      )}
       className={className}
     >
       {data.result?.block_metas?.map((block, index) => {

apps/explorer/src/app/components/blocks/blocks-refetch.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Button } from '@vegaprotocol/ui-toolkit';
 
 interface BlocksRefetchProps {
@@ -12,7 +13,7 @@ export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
       className="mb-28"
       data-testid="refresh"
     >
-      Refresh to see latest blocks
+      {t('Refresh to see latest blocks')}
     </Button>
   );
 };

apps/explorer/src/app/components/header/header.tsx

@@ -1,10 +1,11 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 
 export const Header = () => {
   return (
     <header className="flex px-16 pt-16 pb-8">
       <h1 className="text-h3" data-testid="explorer-header">
-        Vega Explorer
+        {t('Vega Explorer')}
       </h1>
       <Search />
     </header>

apps/explorer/src/app/components/jump-to-block/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../routes/router-config';
@@ -22,8 +23,8 @@ export const JumpToBlock = () => {
 
   return (
     <JumpTo
-      label="Jump to block"
+      label={t('Jump to block')}
-      placeholder="Block number"
+      placeholder={t('Block number')}
       inputId="block-input"
       inputType="number"
       inputName="blockNumber"

apps/explorer/src/app/components/jump-to/index.tsx

@@ -1,5 +1,6 @@
 import type { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
 import { Input, Button } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
 
 interface JumpToProps {
   label: string;
@@ -35,7 +36,7 @@ export const JumpTo = ({
           className="max-w-[200px]"
         />
         <Button variant="secondary" type="submit">
-          Go
+          {t('Go')}
         </Button>
       </div>
     </form>

apps/explorer/src/app/components/render-fetched/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { StatusMessage } from '../status-message';
 
@@ -15,12 +16,16 @@ export const RenderFetched = ({
   className,
 }: RenderFetchedProps) => {
   if (loading) {
-    return <StatusMessage className={className}>Loading...</StatusMessage>;
+    return (
+      <StatusMessage className={className}>{t('Loading...')}</StatusMessage>
+    );
   }
 
   if (error) {
     return (
-      <StatusMessage className={className}>Error retrieving data</StatusMessage>
+      <StatusMessage className={className}>
+        {t('Error retrieving data')}
+      </StatusMessage>
     );
   }
 

apps/explorer/src/app/components/router-error-boundary/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 
 interface RouteErrorBoundaryProps {
@@ -23,7 +24,7 @@ export class RouteErrorBoundary extends React.Component<
 
   override render() {
     if (this.state.hasError) {
-      return <h1>Something went wrong</h1>;
+      return <h1>{t('Something went wrong')}</h1>;
     }
 
     return this.props.children;

apps/explorer/src/app/components/search/search.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { FormGroup, Input, InputError, Button } from '@vegaprotocol/ui-toolkit';
 import React from 'react';
 import { useForm } from 'react-hook-form';
@@ -28,23 +29,23 @@ export const Search = () => {
 
       const search = fields.search;
       if (!search) {
-        setError(new Error('Search required'));
+        setError(new Error(t('Search required')));
       } else if (isPrependedTransaction(search)) {
         if (Number.isNaN(Number(search))) {
-          setError(new Error('Transaction is not hexadecimal'));
+          setError(new Error(t('Transaction is not hexadecimal')));
         } else {
           navigate(`${Routes.TX}/${search}`);
         }
       } else if (isTransaction(search)) {
         if (Number.isNaN(Number(`0x${search}`))) {
-          setError(new Error('Transaction is not hexadecimal'));
+          setError(new Error(t('Transaction is not hexadecimal')));
         } else {
           navigate(`${Routes.TX}/0x${search}`);
         }
       } else if (isBlock(search)) {
         navigate(`${Routes.BLOCKS}/${Number(search)}`);
       } else {
-        setError(new Error("Something doesn't look right"));
+        setError(new Error(t("Something doesn't look right")));
       }
     },
     [navigate]
@@ -62,7 +63,7 @@ export const Search = () => {
           hasError={Boolean(error?.message)}
           type="text"
           autoFocus={true}
-          placeholder="Enter block number or transaction hash"
+          placeholder={t('Enter block number or transaction hash')}
         />
         {error?.message ? (
           <InputError
@@ -77,7 +78,7 @@ export const Search = () => {
         )}
       </FormGroup>
       <Button type="submit" variant="secondary" data-testid="search-button">
-        Search
+        {t('Search')}
       </Button>
     </form>
   );

apps/explorer/src/app/components/seconds-ago/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { useEffect, useState } from 'react';
 
 interface SecondsAgoProps {
@@ -15,15 +16,18 @@ export const SecondsAgo = ({ date, ...props }: SecondsAgoProps) => {
   }, [setNow]);
 
   if (!date) {
-    return <>Date unknown</>;
+    return <>{t('Date unknown')}</>;
   }
 
-
   const timeAgoInSeconds = Math.floor((now - new Date(date).getTime()) / 1000);
 
   return (
     <div {...props}>
-      {timeAgoInSeconds === 1 ? '1 second' : `${timeAgoInSeconds} seconds`} ago
+      {t(
+        `${
+          timeAgoInSeconds === 1 ? '1 second' : `${timeAgoInSeconds} seconds`
+        } ago`
+      )}
     </div>
   );
 };

apps/explorer/src/app/components/txs/block-txs-data.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import type { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from '../blocks';
@@ -13,12 +14,14 @@ export const BlockTxsData = ({ data, className }: TxsProps) => {
     // Data for the block has already been fetched at this point, so no errors
     // or loading to deal with. This is specifically the case
     // where the data object is not undefined, but lacks a result.
-    return <div className={className}>No data</div>;
+    return <div className={className}>{t('No data')}</div>;
   }
 
   return (
     <ul
-      aria-label={`Showing ${data.result?.block_metas.length} most recently loaded blocks and transactions`}
+      aria-label={t(
+        `Showing ${data.result?.block_metas.length} most recently loaded blocks and transactions`
+      )}
       className={className}
     >
       {data.result?.block_metas?.map((block, index) => {

apps/explorer/src/app/components/txs/tx-list.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import type { TendermintUnconfirmedTransactionsResponse } from '../../routes/txs/tendermint-unconfirmed-transactions-response.d';
 
 interface TxsProps {
@@ -6,7 +7,7 @@ interface TxsProps {
 
 export const TxList = ({ data }: TxsProps) => {
   if (!data) {
-    return <div>Awaiting transactions</div>;
+    return <div>{t('Awaiting transactions')}</div>;
   }
 
   return <div>{JSON.stringify(data, null, '  ')}</div>;

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import { RenderFetched } from '../render-fetched';
 import { TruncateInline } from '../truncate/truncate';
 import { TxOrderType } from './tx-order-type';
+import { t } from '@vegaprotocol/react-helpers';
 
 interface TxsPerBlockProps {
   blockHeight: string | undefined;
@@ -36,9 +37,9 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
           <table className="w-full">
             <thead>
               <tr className="font-mono">
-                <td>Transaction</td>
+                <td>{t('Transaction')}</td>
-                <td>From</td>
+                <td>{t('From')}</td>
-                <td>Type</td>
+                <td>{t('Type')}</td>
               </tr>
             </thead>
             <tbody>
@@ -76,7 +77,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
         </div>
       ) : (
         <div className="font-mono mb-28">
-          No transactions in block {blockHeight}
+          {t(`No transactions in block ${blockHeight}`)}
         </div>
       )}
     </RenderFetched>

apps/explorer/src/app/routes/assets/index.tsx

@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -37,7 +38,7 @@ const Assets = () => {
   if (!data || !data.assets) return null;
   return (
     <section>
-      <RouteTitle data-testid="assets-header">Assets</RouteTitle>
+      <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
       {data?.assets.map((a) => (
         <React.Fragment key={a.id}>
           <SubHeading data-testid="asset-header">

apps/explorer/src/app/routes/blocks/home/index.tsx

@@ -5,6 +5,7 @@ import { RouteTitle } from '../../../components/route-title';
 import { RenderFetched } from '../../../components/render-fetched';
 import { BlocksData, BlocksRefetch } from '../../../components/blocks';
 import { JumpToBlock } from '../../../components/jump-to-block';
+import { t } from '@vegaprotocol/react-helpers';
 
 const Blocks = () => {
   const {
@@ -16,7 +17,7 @@ const Blocks = () => {
 
   return (
     <section>
-      <RouteTitle>Blocks</RouteTitle>
+      <RouteTitle>{t('Blocks')}</RouteTitle>
       <RenderFetched error={error} loading={loading}>
         <>
           <BlocksRefetch refetch={refetch} />

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -15,6 +15,7 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../router-config';
 import { RenderFetched } from '../../../components/render-fetched';
+import { t } from '@vegaprotocol/react-helpers';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
@@ -26,12 +27,12 @@ const Block = () => {
 
   const header = blockData?.result.block.header;
   if (!header) {
-    return <p>Could not get block data</p>;
+    return <p>{t('Could not get block data')}</p>;
   }
 
   return (
     <section>
-      <RouteTitle data-testid="block-header">BLOCK {block}</RouteTitle>
+      <RouteTitle data-testid="block-header">{t(`BLOCK ${block}`)}</RouteTitle>
       <RenderFetched error={error} loading={loading}>
         <>
           <div className="grid grid-cols-2 gap-16">

apps/explorer/src/app/routes/genesis/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { RouteTitle } from '../../components/route-title';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { DATA_SOURCES } from '../../config';
@@ -13,7 +14,7 @@ const Genesis = () => {
   if (!genesis?.result.genesis) return null;
   return (
     <section>
-      <RouteTitle data-testid="genesis-header">Genesis</RouteTitle>
+      <RouteTitle data-testid="genesis-header">{t('Genesis')}</RouteTitle>
       <SyntaxHighlighter data={genesis?.result.genesis} />
     </section>
   );

apps/explorer/src/app/routes/governance/index.tsx

@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -10,16 +11,16 @@ import type {
 
 export function getProposalName(change: ProposalsQuery_proposals_terms_change) {
   if (change.__typename === 'NewAsset') {
-    return `New asset: ${change.symbol}`;
+    return t(`New asset: ${change.symbol}`);
   } else if (change.__typename === 'NewMarket') {
-    return `New market: ${change.instrument.name}`;
+    return t(`New market: ${change.instrument.name}`);
   } else if (change.__typename === 'UpdateMarket') {
-    return `Update market: ${change.marketId}`;
+    return t(`Update market: ${change.marketId}`);
   } else if (change.__typename === 'UpdateNetworkParameter') {
-    return `Update network: ${change.networkParameter.key}`;
+    return t(`Update network: ${change.networkParameter.key}`);
   }
 
-  return 'Unknown proposal';
+  return t('Unknown proposal');
 }
 
 const PROPOSAL_QUERY = gql`
@@ -105,7 +106,7 @@ const Governance = () => {
   if (!data) return null;
   return (
     <section>
-      <RouteTitle data-testid="governance-header">Governance</RouteTitle>
+      <RouteTitle data-testid="governance-header">{t('Governance')}</RouteTitle>
       {data.proposals?.map((p) => (
         <React.Fragment key={p.id}>
           <SubHeading>{getProposalName(p.terms.change)}</SubHeading>

apps/explorer/src/app/routes/markets/index.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
+import { t } from '@vegaprotocol/react-helpers';
 
 const MARKETS_QUERY = gql`
   query MarketsQuery {
@@ -151,7 +152,7 @@ const Markets = () => {
   if (!data || !data.markets) return null;
   return (
     <section>
-      <RouteTitle data-testid="markets-heading">Markets</RouteTitle>
+      <RouteTitle data-testid="markets-heading">{t('Markets')}</RouteTitle>
 
       {data
         ? data.markets.map((m) => (

apps/explorer/src/app/routes/network-parameters/index.tsx

@@ -2,6 +2,7 @@ import { gql, useQuery } from '@apollo/client';
 import { RouteTitle } from '../../components/route-title';
 import type { NetworkParametersQuery } from './__generated__/NetworkParametersQuery';
 import { SyntaxHighlighter } from '../../components/syntax-highlighter';
+import { t } from '@vegaprotocol/react-helpers';
 
 export const NETWORK_PARAMETERS_QUERY = gql`
   query NetworkParametersQuery {
@@ -17,7 +18,7 @@ const NetworkParameters = () => {
   return (
     <section>
       <RouteTitle data-testid="network-param-header">
-        Network Parameters
+        {t('Network Parameters')}
       </RouteTitle>
       {data ? <SyntaxHighlighter data={data} /> : null}
     </section>

apps/explorer/src/app/routes/parties/home/index.tsx

@@ -4,6 +4,7 @@ import { JumpTo } from '../../../components/jump-to';
 
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../router-config';
+import { t } from '@vegaprotocol/react-helpers';
 
 export const JumpToParty = () => {
   const navigate = useNavigate();
@@ -23,8 +24,8 @@ export const JumpToParty = () => {
   };
   return (
     <JumpTo
-      label="Go to party"
+      label={t('Go to party')}
-      placeholder="Party id"
+      placeholder={t('Party id')}
       inputId="party-input"
       inputType="text"
       inputName="partyId"
@@ -36,7 +37,7 @@ export const JumpToParty = () => {
 const Parties = () => {
   return (
     <section>
-      <RouteTitle data-testid="parties-header">Parties</RouteTitle>
+      <RouteTitle data-testid="parties-header">{t('Parties')}</RouteTitle>
       <JumpToParty />
     </section>
   );

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client';
 import { gql } from '@apollo/client';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 import { RouteTitle } from '../../../components/route-title';
@@ -71,17 +72,17 @@ const Party = () => {
 
   return (
     <section>
-      <RouteTitle data-testid="parties-header">Party</RouteTitle>
+      <RouteTitle data-testid="parties-header">{t('Party')}</RouteTitle>
       {data ? (
         <>
-          <SubHeading>Asset data</SubHeading>
+          <SubHeading>{t('Asset data')}</SubHeading>
           <SyntaxHighlighter data={data} />
         </>
       ) : null}
 
       {partyData ? (
         <>
-          <SubHeading>Tendermint Data</SubHeading>
+          <SubHeading>{t('Tendermint Data')}</SubHeading>
           <SyntaxHighlighter data={partyData} />
         </>
       ) : null}

apps/explorer/src/app/routes/pending/index.tsx

@@ -4,6 +4,7 @@ import useFetch from '../../hooks/use-fetch';
 import type { TendermintUnconfirmedTransactionsResponse } from '../txs/tendermint-unconfirmed-transactions-response.d';
 import { TxList } from '../../components/txs';
 import { RouteTitle } from '../../components/route-title';
+import { t } from '@vegaprotocol/react-helpers';
 
 const PendingTxs = () => {
   const {
@@ -15,11 +16,11 @@ const PendingTxs = () => {
   return (
     <section>
       <RouteTitle data-testid="unconfirmed-transactions-header">
-        Unconfirmed transactions
+        {t('Unconfirmed transactions')}
       </RouteTitle>
       https://lb.testnet.vega.xyz/tm/unconfirmed_txs
       <br />
-      <div>Number: {unconfirmedTransactions?.result?.n_txs || 0}</div>
+      <div>{t(`Number: ${unconfirmedTransactions?.result?.n_txs || 0}`)}</div>
       <br />
       <div>
         <br />

apps/explorer/src/app/routes/router-config.tsx

@@ -16,6 +16,7 @@ import { Tx } from './txs/id';
 import { Txs as TxHome } from './txs/home';
 import { PendingTxs } from './pending';
 import flags from '../lib/flags';
+import { t } from '@vegaprotocol/react-helpers';
 export const Routes = {
   HOME: '/',
   TX: 'txs',
@@ -34,7 +35,7 @@ const partiesRoutes = flags.parties
       {
         path: Routes.PARTIES,
         name: 'Parties',
-        text: 'Parties',
+        text: t('Parties'),
         element: <Party />,
         children: [
           {
@@ -54,7 +55,7 @@ const assetsRoutes = flags.assets
   ? [
       {
         path: Routes.ASSETS,
-        text: 'Assets',
+        text: t('Assets'),
         name: 'Assets',
         element: <Assets />,
       },
@@ -66,7 +67,7 @@ const genesisRoutes = flags.genesis
       {
         path: Routes.GENESIS,
         name: 'Genesis',
-        text: 'Genesis Parameters',
+        text: t('Genesis Parameters'),
         element: <Genesis />,
       },
     ]
@@ -77,7 +78,7 @@ const governanceRoutes = flags.governance
       {
         path: Routes.GOVERNANCE,
         name: 'Governance',
-        text: 'Proposals',
+        text: t('Proposals'),
         element: <Governance />,
       },
     ]
@@ -88,7 +89,7 @@ const marketsRoutes = flags.markets
       {
         path: Routes.MARKETS,
         name: 'Markets',
-        text: 'Markets',
+        text: t('Markets'),
         element: <Markets />,
       },
     ]
@@ -99,7 +100,7 @@ const networkParametersRoutes = flags.networkParameters
       {
         path: Routes.NETWORK_PARAMETERS,
         name: 'NetworkParameters',
-        text: 'Network Parameters',
+        text: t('Network Parameters'),
         element: <NetworkParameters />,
       },
     ]
@@ -109,7 +110,7 @@ const validators = flags.validators
       {
         path: Routes.VALIDATORS,
         name: 'Validators',
-        text: 'Validators',
+        text: t('Validators'),
         element: <Validators />,
       },
     ]
@@ -119,14 +120,14 @@ const routerConfig = [
   {
     path: Routes.HOME,
     name: 'Home',
-    text: 'Home',
+    text: t('Home'),
     element: <Home />,
     index: true,
   },
   {
     path: Routes.TX,
     name: 'Txs',
-    text: 'Transactions',
+    text: t('Transactions'),
     element: <Txs />,
     children: [
       {
@@ -146,7 +147,7 @@ const routerConfig = [
   {
     path: Routes.BLOCKS,
     name: 'Blocks',
-    text: 'Blocks',
+    text: t('Blocks'),
     element: <BlockPage />,
     children: [
       {

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -6,6 +6,7 @@ import { BlocksRefetch } from '../../../components/blocks';
 import { RenderFetched } from '../../../components/render-fetched';
 import { BlockTxsData } from '../../../components/txs';
 import { JumpToBlock } from '../../../components/jump-to-block';
+import { t } from '@vegaprotocol/react-helpers';
 
 const Txs = () => {
   const {
@@ -17,7 +18,7 @@ const Txs = () => {
 
   return (
     <section>
-      <RouteTitle>Transactions</RouteTitle>
+      <RouteTitle>{t('Transactions')}</RouteTitle>
       <RenderFetched error={error} loading={loading}>
         <>
           <BlocksRefetch refetch={refetch} />

apps/explorer/src/app/routes/txs/id/index.tsx

@@ -8,6 +8,7 @@ import { RouteTitle } from '../../../components/route-title';
 import { RenderFetched } from '../../../components/render-fetched';
 import { TxContent } from './tx-content';
 import { TxDetails } from './tx-details';
+import { t } from '@vegaprotocol/react-helpers';
 
 const Tx = () => {
   const { txHash } = useParams<{ txHash: string }>();
@@ -30,7 +31,7 @@ const Tx = () => {
 
   return (
     <section>
-      <RouteTitle>Transaction details</RouteTitle>
+      <RouteTitle>{t('Transaction details')}</RouteTitle>
 
       <RenderFetched error={tTxError} loading={tTxLoading}>
         <TxDetails
@@ -40,7 +41,7 @@ const Tx = () => {
         />
       </RenderFetched>
 
-      <h2 className="text-h4 uppercase mb-16">Transaction content</h2>
+      <h2 className="text-h4 uppercase mb-16">{t('Transaction content')}</h2>
       <RenderFetched error={ceTxError} loading={ceTxLoading}>
         <TxContent data={ceTxData} />
       </RenderFetched>

apps/explorer/src/app/routes/txs/id/tx-content.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { StatusMessage } from '../../../components/status-message';
 import { SyntaxHighlighter } from '../../../components/syntax-highlighter';
 import {
@@ -16,7 +17,9 @@ interface TxContentProps {
 export const TxContent = ({ data }: TxContentProps) => {
   if (!data?.Command) {
     return (
-      <StatusMessage>Could not retrieve transaction content</StatusMessage>
+      <StatusMessage>
+        {t('Could not retrieve transaction content')}
+      </StatusMessage>
     );
   }
 
@@ -25,7 +28,7 @@ export const TxContent = ({ data }: TxContentProps) => {
       <Table className="mb-12">
         <TableRow modifier="bordered">
           <TableHeader scope="row" className="w-[160px]">
-            Type
+            {t('Type')}
           </TableHeader>
           <TableCell modifier="bordered">
             <TxOrderType orderType={data.Type} />
@@ -33,7 +36,7 @@ export const TxContent = ({ data }: TxContentProps) => {
         </TableRow>
       </Table>
 
-      <h3 className="font-mono mb-8">Decoded transaction content</h3>
+      <h3 className="font-mono mb-8">{t('Decoded transaction content')}</h3>
       <SyntaxHighlighter data={JSON.parse(data.Command)} />
     </>
   );

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Link } from 'react-router-dom';
 import {
   Table,
@@ -19,20 +20,20 @@ const truncateLength = 30;
 
 export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
   if (!txData) {
-    return <>Awaiting Tendermint transaction details</>;
+    return <>{t('Awaiting Tendermint transaction details')}</>;
   }
 
   return (
     <Table className={className}>
       <TableRow modifier="bordered">
-        <TableCell>Hash</TableCell>
+        <TableCell>{t('Hash')}</TableCell>
         <TableCell modifier="bordered" data-testid="hash">
           {txData.hash}
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">
         <TableHeader scope="row" className="w-[160px]">
-          Submitted by
+          {t('Submitted by')}
         </TableHeader>
         <TableCell modifier="bordered" data-testid="submitted-by">
           <Link
@@ -44,7 +45,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">
-        <TableCell>Block</TableCell>
+        <TableCell>{t('Block')}</TableCell>
         <TableCell modifier="bordered" data-testid="block">
           <Link
             className="text-vega-yellow"
@@ -55,7 +56,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">
-        <TableCell>Encoded txn</TableCell>
+        <TableCell>{t('Encoded txn')}</TableCell>
         <TableCell modifier="bordered" data-testid="encoded-tnx">
           <TruncateInline
             text={txData.tx}

apps/explorer/src/app/routes/validators/index.tsx

@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -44,17 +45,17 @@ const Validators = () => {
 
   return (
     <section>
-      <RouteTitle data-testid="validators-header">Validators</RouteTitle>
+      <RouteTitle data-testid="validators-header">{t('Validators')}</RouteTitle>
       {data ? (
         <>
-          <SubHeading data-testid="vega-header">Vega data</SubHeading>
+          <SubHeading data-testid="vega-header">{t('Vega data')}</SubHeading>
           <SyntaxHighlighter data-testid="vega-data" data={data} />
         </>
       ) : null}
       {validators ? (
         <>
           <SubHeading data-testid="tendermint-header">
-            Tendermint data
+            {t('Tendermint data')}
           </SubHeading>
           <SyntaxHighlighter data-testid="tendermint-data" data={validators} />
         </>

apps/trading/components/navbar/navbar.tsx

@@ -2,6 +2,7 @@ import { useRouter } from 'next/router';
 import { Vega } from '../icons/vega';
 import Link from 'next/link';
 import { AnchorButton } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
 
 export const Navbar = () => {
   return (
@@ -12,8 +13,8 @@ export const Navbar = () => {
         </a>
       </Link>
       {[
-        { name: 'Trading', path: '/markets' },
+        { name: t('Trading'), path: '/markets' },
-        { name: 'Portfolio', path: '/portfolio' },
+        { name: t('Portfolio'), path: '/portfolio' },
       ].map((route) => (
         <NavLink key={route.path} {...route} />
       ))}

apps/trading/components/vega-wallet-connect-button/index.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
 interface VegaWalletButtonProps {
@@ -23,7 +24,7 @@ export const VegaWalletButton = ({
       onClick={handleClick}
       className="ml-auto inline-block text-ui sm:text-body-large"
     >
-      {isConnected ? 'Disconnect Vega wallet' : 'Connect Vega wallet'}
+      {isConnected ? t('Disconnect Vega wallet') : t('Connect Vega wallet')}
     </button>
   );
 };

apps/trading/components/web3-container/web3-container.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Button, Splash } from '@vegaprotocol/ui-toolkit';
 import { Web3Provider, Web3ConnectDialog } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
@@ -42,8 +43,10 @@ export const Web3Content = ({ children, setDialogOpen }: Web3ContentProps) => {
   if (error) {
     return (
       <SplashWrapper>
-        <p className="mb-12">Something went wrong: {error.message}</p>
+        <p className="mb-12">{t(`Something went wrong: ${error.message}`)}</p>
-        <Button onClick={() => connector.deactivate()}>Disconnect</Button>
+        <Button onClick={() => connector.deactivate()}>
+          {t('Disconnect')}
+        </Button>
       </SplashWrapper>
     );
   }
@@ -51,8 +54,8 @@ export const Web3Content = ({ children, setDialogOpen }: Web3ContentProps) => {
   if (!isActive) {
     return (
       <SplashWrapper>
-        <p className="mb-12">Connect your Ethereum wallet</p>
+        <p className="mb-12">{t('Connect your Ethereum wallet')}</p>
-        <Button onClick={() => setDialogOpen(true)}>Connect</Button>
+        <Button onClick={() => setDialogOpen(true)}>{t('Connect')}</Button>
       </SplashWrapper>
     );
   }
@@ -60,8 +63,12 @@ export const Web3Content = ({ children, setDialogOpen }: Web3ContentProps) => {
   if (chainId !== appChainId) {
     return (
       <SplashWrapper>
-        <p className="mb-12">This app only works on chain ID: {appChainId}</p>
+        <p className="mb-12">
-        <Button onClick={() => connector.deactivate()}>Disconnect</Button>
+          {t(`This app only works on chain ID: ${appChainId}`)}
+        </p>
+        <Button onClick={() => connector.deactivate()}>
+          {t('Disconnect')}
+        </Button>
       </SplashWrapper>
     );
   }

apps/trading/pages/_app.page.tsx

@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Navbar } from '../components/navbar';
-import { ThemeContext } from '@vegaprotocol/react-helpers';
+import { t, ThemeContext } from '@vegaprotocol/react-helpers';
 import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
 import { useCallback, useMemo, useState } from 'react';
@@ -32,7 +32,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
         <VegaWalletProvider>
           <AppLoader>
             <Head>
-              <title>Welcome to trading!</title>
+              <title>{t('Welcome to Vega trading!')}</title>
               <link
                 rel="icon"
                 href="https://vega.xyz/favicon-32x32.png"

apps/trading/pages/index.page.tsx

@@ -1,17 +1,6 @@
-import {
+import { Button, Callout, Intent } from '@vegaprotocol/ui-toolkit';
-  AgGridDynamic as AgGrid,
-  Button,
-  Callout,
-  Intent,
-} from '@vegaprotocol/ui-toolkit';
-import { AgGridColumn } from 'ag-grid-react';
 
 export function Index() {
-  const rowData = [
-    { make: 'Toyota', model: 'Celica', price: 35000 },
-    { make: 'Ford', model: 'Mondeo', price: 32000 },
-    { make: 'Porsche', model: 'Boxter', price: 72000 },
-  ];
   return (
     <div className="m-24">
       <div className="mb-24">
@@ -29,11 +18,6 @@ export function Index() {
           </div>
         </Callout>
       </div>
-      <AgGrid rowData={rowData} style={{ height: 400, width: 600 }}>
-        <AgGridColumn field="make"></AgGridColumn>
-        <AgGridColumn field="model"></AgGridColumn>
-        <AgGridColumn field="price"></AgGridColumn>
-      </AgGrid>
     </div>
   );
 }

apps/trading/pages/markets/[marketId].page.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useState } from 'react';
 import debounce from 'lodash/debounce';
 import { PageQueryContainer } from '../../components/page-query-container';
 import { TradeGrid, TradePanels } from './trade-grid';
+import { t } from '@vegaprotocol/react-helpers';
 
 // Top level page query
 const MARKET_QUERY = gql`
@@ -29,7 +30,7 @@ const MarketPage = () => {
   if (!marketId) {
     return (
       <Splash>
-        <p>Not found</p>
+        <p>{t('Not found')}</p>
       </Splash>
     );
   }
@@ -46,7 +47,7 @@ const MarketPage = () => {
     >
       {({ market }) => {
         if (!market) {
-          return <Splash>Market not found</Splash>;
+          return <Splash>{t('Market not found')}</Splash>;
         }
 
         return w > 960 ? (

apps/trading/pages/markets/grid-tabs.tsx

@@ -19,7 +19,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
     }
 
     // Default to first tab
-    return children[0].props.name;
+    return children[0].props.id;
   });
 
   // Update the query string in the url when the active tab changes
@@ -45,7 +45,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
       >
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;
-          const isActive = child.props.name === activeTab;
+          const isActive = child.props.id === activeTab;
           const triggerClass = classNames('py-4', 'px-12', 'capitalize', {
             'text-black dark:text-vega-yellow': isActive,
             'bg-white dark:bg-black': isActive,
@@ -53,7 +53,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
             'bg-black-10 dark:bg-white-10': !isActive,
           });
           return (
-            <Tabs.Trigger value={child.props.name} className={triggerClass}>
+            <Tabs.Trigger value={child.props.id} className={triggerClass}>
               {child.props.name}
             </Tabs.Trigger>
           );
@@ -64,7 +64,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
         {Children.map(children, (child) => {
           if (!isValidElement(child)) return null;
           return (
-            <Tabs.Content value={child.props.name} className="h-full">
+            <Tabs.Content value={child.props.id} className="h-full">
               {child.props.children}
             </Tabs.Content>
           );
@@ -76,6 +76,7 @@ export const GridTabs = ({ children, group }: GridTabsProps) => {
 
 interface GridTabProps {
   children: ReactNode;
+  id: string;
   name: string;
 }
 

apps/trading/pages/markets/trade-grid.tsx

@@ -8,25 +8,26 @@ import { OrderListContainer } from '@vegaprotocol/order-list';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { PositionsContainer } from '@vegaprotocol/positions';
 import type { Market_market } from './__generated__/Market';
+import { t } from '@vegaprotocol/react-helpers';
 
 const Chart = () => (
   <Splash>
-    <p>Chart</p>
+    <p>{t('Chart')}</p>
   </Splash>
 );
 const Orderbook = () => (
   <Splash>
-    <p>Orderbook</p>
+    <p>{t('Orderbook')}</p>
   </Splash>
 );
 const Collateral = () => (
   <Splash>
-    <p>Collateral</p>
+    <p>{t('Collateral')}</p>
   </Splash>
 );
 const Trades = () => (
   <Splash>
-    <p>Trades</p>
+    <p>{t('Trades')}</p>
   </Splash>
 );
 
@@ -56,7 +57,9 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <header className="col-start-1 col-end-2 row-start-1 row-end-1 p-8">
-        <h1>Market: {market.name}</h1>
+        <h1>
+          {t('Market')}: {market.name}
+        </h1>
       </header>
       <TradeGridChild className="col-start-1 col-end-2">
         <TradingViews.Chart />
@@ -66,23 +69,23 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
       </TradeGridChild>
       <TradeGridChild className="row-start-1 row-end-3">
         <GridTabs group="trade">
-          <GridTab name="trades">
+          <GridTab id="trades" name={t('Trades')}>
             <TradingViews.Trades />
           </GridTab>
-          <GridTab name="orderbook">
+          <GridTab id="orderbook" name={t('Orderbook')}>
             <TradingViews.Orderbook />
           </GridTab>
         </GridTabs>
       </TradeGridChild>
       <TradeGridChild className="col-span-3">
         <GridTabs group="portfolio">
-          <GridTab name="orders">
+          <GridTab id="orders" name={t('Orders')}>
             <TradingViews.Orders />
           </GridTab>
-          <GridTab name="positions">
+          <GridTab id="positions" name={t('Positions')}>
             <TradingViews.Positions />
           </GridTab>
-          <GridTab name="collateral">
+          <GridTab id="collateral" name={t('Collateral')}>
             <TradingViews.Collateral />
           </GridTab>
         </GridTabs>
@@ -131,7 +134,9 @@ export const TradePanels = ({ market }: TradePanelsProps) => {
   return (
     <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
       <header className="p-8">
-        <h1>Market: {market.name}</h1>
+        <h1>
+          {t('Market')}: {market.name}
+        </h1>
       </header>
       <div className="h-full">
         <AutoSizer>

apps/trading/pages/portfolio/index.page.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { AnchorButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
@@ -5,14 +6,10 @@ const Portfolio = () => {
   const { keypair } = useVegaWallet();
   return (
     <div>
-      <h1>Portfolio</h1>
+      <h1>{t('Portfolio')}</h1>
-      {keypair && (
+      {keypair && <p>{t(`Keypair: ${keypair.name} ${keypair.pub}`)}</p>}
-        <p>
-          Keypair: {keypair.name} {keypair.pub}
-        </p>
-      )}
       <div className="flex gap-4">
-        <AnchorButton href="/portfolio/deposit">Deposit</AnchorButton>
+        <AnchorButton href="/portfolio/deposit">{t('Deposit')}</AnchorButton>
       </div>
     </div>
   );

libs/deal-ticket/src/deal-ticket-container.tsx

@@ -2,6 +2,7 @@ import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { gql, useQuery } from '@apollo/client';
 import { DealTicketManager } from './deal-ticket-manager';
 import type { DealTicketQuery } from './__generated__/DealTicketQuery';
+import { t } from '@vegaprotocol/react-helpers';
 
 const DEAL_TICKET_QUERY = gql`
   query DealTicketQuery($marketId: ID!) {
@@ -43,7 +44,7 @@ export const DealTicketContainer = ({ marketId }: DealTicketContainerProps) => {
         if (!data.market) {
           return (
             <Splash>
-              <p>Could not load market</p>
+              <p>{t('Could not load market')}</p>
             </Splash>
           );
         }

libs/deal-ticket/src/order-dialog.tsx

@@ -1,7 +1,7 @@
 import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
 import type { OrderEvent_busEvents_event_Order } from './__generated__/OrderEvent';
-import { formatNumber } from '@vegaprotocol/react-helpers';
+import { formatNumber, t } from '@vegaprotocol/react-helpers';
 import type { TransactionState } from '@vegaprotocol/wallet';
 import { VegaTxStatus } from '@vegaprotocol/wallet';
 
@@ -40,7 +40,7 @@ export const OrderDialog = ({
         icon={<Loader />}
       >
         {transaction.hash && (
-          <p className="break-all">Tx hash: {transaction.hash}</p>
+          <p className="break-all">{t(`Tx hash: ${transaction.hash}`)}</p>
         )}
       </OrderDialogWrapper>
     );
@@ -53,7 +53,7 @@ export const OrderDialog = ({
         title="Order failed"
         icon={<Icon name="warning-sign" size={20} />}
       >
-        <p>Reason: {finalizedOrder.rejectionReason}</p>
+        <p>{t(`Reason: ${finalizedOrder.rejectionReason}`)}</p>
       </OrderDialogWrapper>
     );
   }
@@ -63,16 +63,19 @@ export const OrderDialog = ({
       title="Order placed"
       icon={<Icon name="tick" size={20} />}
     >
-      <p>Status: {finalizedOrder.status}</p>
+      <p>{t(`Status: ${finalizedOrder.status}`)}</p>
-      {finalizedOrder.market && <p>Market: {finalizedOrder.market.name}</p>}
+      {finalizedOrder.market && (
-      <p>Type: {finalizedOrder.type}</p>
+        <p>{t(`Market: {finalizedOrder.market.name}`)}</p>
-      <p>Amount: {finalizedOrder.size}</p>
+      )}
+      <p>{t(`Type: ${finalizedOrder.type}`)}</p>
+      <p>{t(`Amount: ${finalizedOrder.size}`)}</p>
       {finalizedOrder.type === 'Limit' && finalizedOrder.market && (
         <p>
-          Price:{' '}
+          {t(
-          {formatNumber(
+            `Price: ${formatNumber(
               finalizedOrder.price,
               finalizedOrder.market.decimalPlaces
+            )}`
           )}
         </p>
       )}

libs/deal-ticket/src/submit-button.tsx

@@ -6,6 +6,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { TransactionStatus } from './deal-ticket';
 import type { DealTicketQuery_market } from './__generated__/DealTicketQuery';
 import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/react-helpers';
 
 interface SubmitButtonProps {
   transactionStatus: TransactionStatus;
@@ -22,31 +23,31 @@ export const SubmitButton = ({
 
   const invalidText = useMemo(() => {
     if (!keypair) {
-      return 'No public key selected';
+      return t('No public key selected');
     }
 
     if (keypair.tainted) {
-      return 'Selected public key has been tainted';
+      return t('Selected public key has been tainted');
     }
 
     if (market.state !== MarketState.Active) {
       if (market.state === MarketState.Suspended) {
-        return 'Market is currently suspended';
+        return t('Market is currently suspended');
       }
 
       if (
         market.state === MarketState.Proposed ||
         market.state === MarketState.Pending
       ) {
-        return 'Market is not active yet';
+        return t('Market is not active yet');
       }
 
-      return 'Market is no longer active';
+      return t('Market is no longer active');
     }
 
     if (market.tradingMode !== MarketTradingMode.Continuous) {
       if (order.type === OrderType.Market) {
-        return 'Only limit orders are permitted when market is in auction';
+        return t('Only limit orders are permitted when market is in auction');
       }
 
       if (
@@ -56,7 +57,9 @@ export const SubmitButton = ({
           OrderTimeInForce.GFN,
         ].includes(order.timeInForce)
       ) {
-        return 'Only GTT, GTC and GFA are permitted when market is in auction';
+        return t(
+          'Only GTT, GTC and GFA are permitted when market is in auction'
+        );
       }
     }
 
@@ -73,7 +76,7 @@ export const SubmitButton = ({
         type="submit"
         disabled={disabled}
       >
-        {transactionStatus === 'pending' ? 'Pending...' : 'Place order'}
+        {transactionStatus === 'pending' ? t('Pending...') : t('Place order')}
       </Button>
       {invalidText && <InputError className="mb-8">{invalidText}</InputError>}
     </>

libs/market-list/src/lib/market-list-table.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import type { ValueFormatterParams } from 'ag-grid-community';
-import { PriceCell, formatNumber } from '@vegaprotocol/react-helpers';
+import { PriceCell, formatNumber, t } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import type { Markets_markets } from './__generated__/Markets';
 import { AgGridColumn } from 'ag-grid-react';
@@ -18,7 +18,7 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
     return (
       <AgGrid
         style={{ width: '100%', height: '100%' }}
-        overlayNoRowsTemplate="No markets"
+        overlayNoRowsTemplate={t('No markets')}
         rowData={data}
         getRowNodeId={getRowNodeId}
         ref={ref}
@@ -32,22 +32,22 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
         components={{ PriceCell }}
       >
         <AgGridColumn
-          headerName="Market"
+          headerName={t('Market')}
           field="tradableInstrument.instrument.code"
         />
         <AgGridColumn
-          headerName="Settlement asset"
+          headerName={t('Settlement asset')}
           field="tradableInstrument.instrument.product.settlementAsset.symbol"
         />
         <AgGridColumn
-          headerName="State"
+          headerName={t('State')}
           field="data"
           valueFormatter={({ value }: ValueFormatterParams) =>
             `${value.market.state} (${value.market.tradingMode})`
           }
         />
         <AgGridColumn
-          headerName="Best bid"
+          headerName={t('Best bid')}
           field="data.bestBidPrice"
           type="rightAligned"
           cellRenderer="PriceCell"
@@ -56,7 +56,7 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
           }
         />
         <AgGridColumn
-          headerName="Best offer"
+          headerName={t('Best offer')}
           field="data.bestOfferPrice"
           type="rightAligned"
           valueFormatter={({ value, data }: ValueFormatterParams) =>
@@ -65,7 +65,7 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
           cellRenderer="PriceCell"
         />
         <AgGridColumn
-          headerName="Mark price"
+          headerName={t('Mark price')}
           field="data.markPrice"
           type="rightAligned"
           cellRenderer="PriceCell"
@@ -73,7 +73,7 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
             formatNumber(value, data.decimalPlaces)
           }
         />
-        <AgGridColumn headerName="Description" field="name" />
+        <AgGridColumn headerName={t('Description')} field="name" />
       </AgGrid>
     );
   }

libs/network-stats/src/config/stats-fields.ts

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import type { Stats as IStats, StatFields as IStatFields } from './types';
 
 // Stats fields config. Keys will correspond to graphql queries when used, and values
@@ -6,7 +7,7 @@ import type { Stats as IStats, StatFields as IStatFields } from './types';
 export const statsFields: { [key in keyof IStats]: IStatFields[] } = {
   status: [
     {
-      title: 'Status',
+      title: t('Status'),
       formatter: (status: string) => {
         if (!status) {
           return;
@@ -22,123 +23,126 @@ export const statsFields: { [key in keyof IStats]: IStatFields[] } = {
       goodThreshold: (status: string) =>
         status === 'CONNECTED' || status === 'CHAIN_STATUS_CONNECTED',
       promoted: true,
-      description:
+      description: t(
-        'Status is either connected, replaying, unspecified or disconnected',
+        'Status is either connected, replaying, unspecified or disconnected'
+      ),
     },
   ],
   blockHeight: [
     {
-      title: 'Height',
+      title: t('Height'),
       goodThreshold: (height: number) => height >= 60,
       promoted: true,
-      description: 'Block height',
+      description: t('Block height'),
     },
   ],
   totalNodes: [
     {
-      title: 'Total nodes',
+      title: t('Total nodes'),
-      description: 'The total number of nodes registered on the network',
+      description: t('The total number of nodes registered on the network'),
     },
   ],
   validatingNodes: [
     {
-      title: 'Validating nodes',
+      title: t('Validating nodes'),
       promoted: true,
-      description: 'Nodes participating in consensus',
+      description: t('Nodes participating in consensus'),
     },
   ],
   inactiveNodes: [
     {
-      title: 'Inactive nodes',
+      title: t('Inactive nodes'),
       goodThreshold: (totalInactive: number) => totalInactive < 1,
-      description: 'Nodes that are registered but not validating',
+      description: t('Nodes that are registered but not validating'),
     },
   ],
   stakedTotal: [
     {
-      title: 'Total staked',
+      title: t('Total staked'),
       formatter: (total: string) =>
         total.length > 18 &&
         parseInt(total.substring(0, total.length - 18)).toLocaleString('en-US'),
-      description: 'Sum of VEGA associated with a Vega key',
+      description: t('Sum of VEGA associated with a Vega key'),
     },
   ],
   backlogLength: [
     {
-      title: 'Backlog',
+      title: t('Backlog'),
       goodThreshold: (length: number, blockDuration: number) => {
         return (
           length < 1000 || (length >= 1000 && blockDuration / 1000000000 <= 1)
         );
       },
-      description: 'Number of transactions waiting to be processed',
+      description: t('Number of transactions waiting to be processed'),
     },
   ],
   tradesPerSecond: [
     {
-      title: 'Trades / second',
+      title: t('Trades / second'),
       goodThreshold: (trades: number) => trades >= 2,
-      description: 'Number of trades processed in the last second',
+      description: t('Number of trades processed in the last second'),
     },
   ],
   averageOrdersPerBlock: [
     {
-      title: 'Orders / block',
+      title: t('Orders / block'),
       goodThreshold: (orders: number) => orders >= 2,
-      description:
+      description: t(
-        'Number of new orders processed in the last block. All pegged orders and liquidity provisions count as a single order',
+        'Number of new orders processed in the last block. All pegged orders and liquidity provisions count as a single order'
+      ),
     },
   ],
   ordersPerSecond: [
     {
-      title: 'Orders / second',
+      title: t('Orders / second'),
       goodThreshold: (orders: number) => orders >= 2,
-      description:
+      description: t(
-        'Number of orders processed in the last second. All pegged orders and liquidity provisions count as a single order',
+        'Number of orders processed in the last second. All pegged orders and liquidity provisions count as a single order'
+      ),
     },
   ],
   txPerBlock: [
     {
-      title: 'Transactions / block',
+      title: t('Transactions / block'),
       goodThreshold: (tx: number) => tx > 2,
-      description: 'Number of transactions processed in the last block',
+      description: t('Number of transactions processed in the last block'),
     },
   ],
   blockDuration: [
     {
-      title: 'Block time',
+      title: t('Block time'),
       formatter: (duration: number) => (duration / 1000000000).toFixed(3),
       goodThreshold: (blockDuration: number) =>
         blockDuration > 0 && blockDuration <= 2000000000,
-      description: 'Seconds between the two most recent blocks',
+      description: t('Seconds between the two most recent blocks'),
     },
   ],
   vegaTime: [
     {
-      title: 'Time',
+      title: t('Time'),
       formatter: (time: Date) => new Date(time).toLocaleTimeString(),
       goodThreshold: (time: Date) => {
         const diff = new Date().getTime() - new Date(time).getTime();
         return diff > 0 && diff < 5000;
       },
-      description: 'The time on the blockchain',
+      description: t('The time on the blockchain'),
     },
   ],
   appVersion: [
     {
-      title: 'App',
+      title: t('App'),
-      description: 'Vega node software version on this node',
+      description: t('Vega node software version on this node'),
     },
   ],
   chainVersion: [
     {
-      title: 'Tendermint',
+      title: t('Tendermint'),
-      description: 'Tendermint software version on this node',
+      description: t('Tendermint software version on this node'),
     },
   ],
   uptime: [
     {
-      title: 'Uptime',
+      title: t('Uptime'),
       formatter: (t: string) => {
         if (!t) {
           return;
@@ -152,23 +156,23 @@ export const statsFields: { [key in keyof IStats]: IStatFields[] } = {
         return `${days}d ${hours}h ${mins}m ${secs}s`;
       },
       promoted: true,
-      description: 'Time since genesis',
+      description: t('Time since genesis'),
     },
     {
-      title: 'Up since',
+      title: t('Up since'),
       formatter: (t: string) => {
         if (!t) {
           return;
         }
         return `${new Date(t).toLocaleString().replace(',', ' ')}`;
       },
-      description: 'Genesis',
+      description: t('Genesis'),
     },
   ],
   chainId: [
     {
-      title: 'Chain ID',
+      title: t('Chain ID'),
-      description: 'Identifier',
+      description: t('Identifier'),
     },
   ],
 };

libs/order-list/src/order-list-container.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { OrderListManager } from './order-list-manager';
@@ -6,7 +7,7 @@ export const OrderListContainer = () => {
   const { keypair } = useVegaWallet();
 
   if (!keypair) {
-    return <Splash>Please connect Vega wallet</Splash>;
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
 
   return <OrderListManager partyId={keypair.pub} />;

libs/order-list/src/order-list.spec.tsx

@@ -87,7 +87,7 @@ test('Correct columns are rendered', async () => {
     'Amount',
     'Type',
     'Status',
-    'Filled',
+    'Remaining',
     'Price',
     'Time In Force',
     'Created At',

libs/order-list/src/order-list.tsx

@@ -3,6 +3,7 @@ import type { Orders_party_orders } from './__generated__/Orders';
 import {
   formatNumber,
   getDateTimeFormat,
+  t,
   useApplyGridTransaction,
 } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
@@ -33,11 +34,11 @@ export const OrderList = ({ orders }: OrderListProps) => {
       getRowNodeId={(data) => data.id}
     >
       <AgGridColumn
-        headerName="Market"
+        headerName={t('Market')}
         field="market.tradableInstrument.instrument.code"
       />
       <AgGridColumn
-        headerName="Amount"
+        headerName={t('Amount')}
         field="size"
         cellClass="font-mono"
         valueFormatter={({ value, data }: ValueFormatterParams) => {
@@ -57,7 +58,6 @@ export const OrderList = ({ orders }: OrderListProps) => {
         }}
       />
       <AgGridColumn
-        headerName="Filled"
         field="remaining"
         cellClass="font-mono"
         valueFormatter={({ data }: ValueFormatterParams) => {

libs/positions/src/lib/positions-container.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { PositionsManager } from './positions-manager';
@@ -8,7 +9,7 @@ export const PositionsContainer = () => {
   if (!keypair) {
     return (
       <Splash>
-        <p>Please connect Vega wallet</p>
+        <p>{t('Please connect Vega wallet')}</p>
       </Splash>
     );
   }

libs/positions/src/lib/positions-table.tsx

@@ -5,6 +5,7 @@ import {
   formatNumber,
   volumePrefix,
   addDecimal,
+  t,
 } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
@@ -64,18 +65,18 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
         components={{ PriceCell }}
       >
         <AgGridColumn
-          headerName="Market"
+          headerName={t('Market')}
           field="market.tradableInstrument.instrument.code"
         />
         <AgGridColumn
-          headerName="Amount"
+          headerName={t('Amount')}
           field="openVolume"
           valueFormatter={({ value }: PositionsTableValueFormatterParams) =>
             volumePrefix(value)
           }
         />
         <AgGridColumn
-          headerName="Average Entry Price"
+          headerName={t('Average Entry Price')}
           field="averageEntryPrice"
           cellRenderer="PriceCell"
           valueFormatter={({
@@ -86,7 +87,7 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
           }
         />
         <AgGridColumn
-          headerName="Mark Price"
+          headerName={t('Mark Price')}
           field="market.data.markPrice"
           type="rightAligned"
           cellRenderer="PriceCell"
@@ -104,7 +105,7 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
           }}
         />
         <AgGridColumn
-          headerName="Realised PNL"
+          headerName={t('Realised PNL')}
           field="realisedPNL"
           type="rightAligned"
           cellClassRules={{

libs/react-helpers/src/index.ts

@@ -5,5 +5,6 @@ export * from './lib/format';
 export * from './lib/grid-cells';
 export * from './lib/storage';
 export * from './lib/generic-data-provider';
+export * from './lib/i18n';
 
 export * from './hooks';

libs/react-helpers/src/lib/i18n.ts

@@ -0,0 +1 @@
+export const t = (str: string) => str;

libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx

@@ -1,7 +1,9 @@
+import { t } from '@vegaprotocol/react-helpers';
+
 export const VegaLogo = () => {
   return (
     <svg
-      aria-label="Vega logo"
+      aria-label={t('Vega logo')}
       width="111"
       height="24"
       fill="none"

libs/wallet/src/connect-dialog.tsx

@@ -5,6 +5,7 @@ import { RestConnectorForm } from './rest-connector-form';
 import { useEffect } from 'react';
 import { RestConnector } from './connectors/rest-connector';
 import { useVegaWallet } from './hooks';
+import { t } from '@vegaprotocol/react-helpers';
 
 export interface VegaConnectDialogProps {
   connectors: { [name: string]: VegaConnector };
@@ -69,7 +70,7 @@ export function VegaConnectDialog({
                 onClick={() => setSelectedConnector(connector)}
                 className="capitalize hover:text-vega-pink dark:hover:text-vega-yellow underline"
               >
-                {key} provider
+                {t(`${key} provider`)}
               </button>
               <p className="text-black-60">{connector.description}</p>
             </li>

libs/wallet/src/provider.tsx

@@ -1,4 +1,4 @@
-import { LocalStorage } from '@vegaprotocol/react-helpers';
+import { LocalStorage, t } from '@vegaprotocol/react-helpers';
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { VegaKeyExtended, VegaWalletContextShape } from '.';
@@ -38,7 +38,7 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
           const nameMeta = pk.meta?.find((m) => m.key === 'name');
           return {
             ...pk,
-            name: nameMeta?.value ? nameMeta.value : 'None',
+            name: nameMeta?.value ? nameMeta.value : t('None'),
           };
         });
 

libs/wallet/src/rest-connector-form.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Button, FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -40,20 +41,20 @@ export function RestConnectorForm({
       }
     } catch (err) {
       if (err instanceof TypeError) {
-        setError('Wallet not running at http://localhost:1789');
+        setError(t('Wallet not running at http://localhost:1789'));
       } else if (err instanceof Error) {
-        setError('Authentication failed');
+        setError(t('Authentication failed'));
       } else {
-        setError('Something went wrong');
+        setError(t('Something went wrong'));
       }
     }
   }
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} data-testid="rest-connector-form">
-      <FormGroup label="Wallet" labelFor="wallet">
+      <FormGroup label={t('Wallet')} labelFor="wallet">
         <Input
-          {...register('wallet', { required: 'Required' })}
+          {...register('wallet', { required: t('Required') })}
           id="wallet"
           type="text"
           autoFocus={true}
@@ -64,9 +65,9 @@ export function RestConnectorForm({
           </InputError>
         )}
       </FormGroup>
-      <FormGroup label="Passphrase" labelFor="passphrase">
+      <FormGroup label={t('Passphrase')} labelFor="passphrase">
         <Input
-          {...register('passphrase', { required: 'Required' })}
+          {...register('passphrase', { required: t('Required') })}
           id="passphrase"
           type="password"
         />
@@ -82,7 +83,7 @@ export function RestConnectorForm({
         </p>
       )}
       <Button variant="primary" type="submit">
-        Connect
+        {t('Connect')}
       </Button>
     </form>
   );

libs/web3/src/lib/web3-connect-dialog.tsx

@@ -1,3 +1,4 @@
+import { t } from '@vegaprotocol/react-helpers';
 import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import type { Connectors } from './types';
 
@@ -19,7 +20,7 @@ export const Web3ConnectDialog = ({
       open={dialogOpen}
       onChange={setDialogOpen}
       intent={Intent.Prompt}
-      title="Connect to your Ethereum wallet"
+      title={t('Connect to your Ethereum wallet')}
     >
       <ul data-testid="web3-connector-list">
         {Object.entries(connectors).map(([connectorName, [connector]]) => {