LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Task/Mark translations (#174)

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

* add i18n function to aria-labels
This commit is contained in:
Matthew Russell 2022-03-30 18:08:25 -07:00 committed by GitHub
parent 83104cf1d6
commit 4899d1bce8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
55 changed files with 281 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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'
: `${block.num_txs} transactions`}
? t('1 transaction')
: 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>

7
apps/explorer/src/app/components/blocks/blocks-data.tsx
View File

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

3
apps/explorer/src/app/components/blocks/blocks-refetch.tsx
View File

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

3
apps/explorer/src/app/components/header/header.tsx
View File

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

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

@ -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"
placeholder="Block number"
label={t('Jump to block')}
placeholder={t('Block number')}
inputId="block-input"
inputType="number"
inputName="blockNumber"

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

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

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

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

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

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

13
apps/explorer/src/app/components/search/search.tsx
View File

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

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

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

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

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

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

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

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

@ -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>From</td>
<td>Type</td>
<td>{t('Transaction')}</td>
<td>{t('From')}</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>

3
apps/explorer/src/app/routes/assets/index.tsx
View File

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

3
apps/explorer/src/app/routes/blocks/home/index.tsx
View File

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

5
apps/explorer/src/app/routes/blocks/id/block.tsx
View File

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

3
apps/explorer/src/app/routes/genesis/index.tsx
View File

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

13
apps/explorer/src/app/routes/governance/index.tsx
View File

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

3
apps/explorer/src/app/routes/markets/index.tsx
View File

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

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

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

7
apps/explorer/src/app/routes/parties/home/index.tsx
View File

@ -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"
placeholder="Party id"
label={t('Go to party')}
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>
);

7
apps/explorer/src/app/routes/parties/id/index.tsx
View File

@ -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}

5
apps/explorer/src/app/routes/pending/index.tsx
View File

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

21
apps/explorer/src/app/routes/router-config.tsx
View File

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

3
apps/explorer/src/app/routes/txs/home/index.tsx
View File

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

5
apps/explorer/src/app/routes/txs/id/index.tsx
View File

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

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

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

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

@ -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}

7
apps/explorer/src/app/routes/validators/index.tsx
View File

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

5
apps/trading/components/navbar/navbar.tsx
View File

@ -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: 'Portfolio', path: '/portfolio' },
{ name: t('Trading'), path: '/markets' },
{ name: t('Portfolio'), path: '/portfolio' },
].map((route) => (
<NavLink key={route.path} {...route} />
))}

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

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

19
apps/trading/components/web3-container/web3-container.tsx
View File

@ -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>
<Button onClick={() => connector.deactivate()}>Disconnect</Button>
<p className="mb-12">{t(`Something went wrong: ${error.message}`)}</p>
<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>
<Button onClick={() => setDialogOpen(true)}>Connect</Button>
<p className="mb-12">{t('Connect your Ethereum wallet')}</p>
<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>
<Button onClick={() => connector.deactivate()}>Disconnect</Button>
<p className="mb-12">
{t(`This app only works on chain ID: ${appChainId}`)}
</p>
<Button onClick={() => connector.deactivate()}>
{t('Disconnect')}
</Button>
</SplashWrapper>
);
}

4
apps/trading/pages/_app.page.tsx
View File

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

18
apps/trading/pages/index.page.tsx
View File

@ -1,17 +1,6 @@
import {
AgGridDynamic as AgGrid,
Button,
Callout,
Intent,
} from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
import { Button, Callout, Intent } from '@vegaprotocol/ui-toolkit';
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>
);
}

5
apps/trading/pages/markets/[marketId].page.tsx
View File

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

9
apps/trading/pages/markets/grid-tabs.tsx
View File

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

27
apps/trading/pages/markets/trade-grid.tsx
View File

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

11
apps/trading/pages/portfolio/index.page.tsx
View File

@ -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>
{keypair && (
<p>
Keypair: {keypair.name} {keypair.pub}
</p>
)}
<h1>{t('Portfolio')}</h1>
{keypair && <p>{t(`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>
);

3
libs/deal-ticket/src/deal-ticket-container.tsx
View File

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

25
libs/deal-ticket/src/order-dialog.tsx
View File

@ -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>
{finalizedOrder.market && <p>Market: {finalizedOrder.market.name}</p>}
<p>Type: {finalizedOrder.type}</p>
<p>Amount: {finalizedOrder.size}</p>
<p>{t(`Status: ${finalizedOrder.status}`)}</p>
{finalizedOrder.market && (
<p>{t(`Market: {finalizedOrder.market.name}`)}</p>
)}
<p>{t(`Type: ${finalizedOrder.type}`)}</p>
<p>{t(`Amount: ${finalizedOrder.size}`)}</p>
{finalizedOrder.type === 'Limit' && finalizedOrder.market && (
<p>
Price:{' '}
{formatNumber(
finalizedOrder.price,
finalizedOrder.market.decimalPlaces
{t(
`Price: ${formatNumber(
finalizedOrder.price,
finalizedOrder.market.decimalPlaces
)}`
)}
</p>
)}

19
libs/deal-ticket/src/submit-button.tsx
View File

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

18
libs/market-list/src/lib/market-list-table.tsx
View File

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

82
libs/network-stats/src/config/stats-fields.ts
View File

@ -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:
'Status is either connected, replaying, unspecified or disconnected',
description: t(
'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',
description: 'The total number of nodes registered on the network',
title: t('Total nodes'),
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:
'Number of new orders processed in the last block. All pegged orders and liquidity provisions count as a single order',
description: t(
'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:
'Number of orders processed in the last second. All pegged orders and liquidity provisions count as a single order',
description: t(
'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',
description: 'Vega node software version on this node',
title: t('App'),
description: t('Vega node software version on this node'),
},
],
chainVersion: [
{
title: 'Tendermint',
description: 'Tendermint software version on this node',
title: t('Tendermint'),
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',
description: 'Identifier',
title: t('Chain ID'),
description: t('Identifier'),
},
],
};

3
libs/order-list/src/order-list-container.tsx
View File

@ -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} />;

2
libs/order-list/src/order-list.spec.tsx
View File

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

6
libs/order-list/src/order-list.tsx
View File

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

3
libs/positions/src/lib/positions-container.tsx
View File

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

11
libs/positions/src/lib/positions-table.tsx
View File

@ -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={{

1
libs/react-helpers/src/index.ts
View File

@ -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';

1
libs/react-helpers/src/lib/i18n.ts Normal file
View File

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

4
libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
View File

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

3
libs/wallet/src/connect-dialog.tsx
View File

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

4
libs/wallet/src/provider.tsx
View File

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

17
libs/wallet/src/rest-connector-form.tsx
View File

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

3
libs/web3/src/lib/web3-connect-dialog.tsx
View File

@ -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]]) => {