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

feat(explorer): validators page (#2982)

Browse Source
This commit is contained in:
Art 2023-02-27 10:17:23 +01:00 committed by GitHub
parent 23ce480daa
commit a3fcd6b7dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 878 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/explorer-e2e/src/integration/asset.cy.js
View File

@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {
it('should be able to see full assets list', () => {
cy.getAssets().then((assets) => {
Object.values(assets).forEach((asset) => {
assets.forEach((asset) => {
cy.get(`[row-id="${asset.id}"]`).should('be.visible');
});
});
@ -25,7 +25,7 @@ context('Asset page', { tags: '@regression' }, () => {
});
cy.getAssets().then((assets) => {
Object.values(assets).forEach((asset) => {
assets.forEach((asset) => {
cy.get(`[row-id="${asset.id}"]`).should('be.visible');
});
});
@ -33,7 +33,7 @@ context('Asset page', { tags: '@regression' }, () => {
it('should open details page when clicked on "View details"', () => {
cy.getAssets().then((assets) => {
Object.values(assets).forEach((asset) => {
assets.forEach((asset) => {
cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
.eq(0)
.should('contain.text', 'View details');

300
apps/explorer-e2e/src/integration/validator.cy.js
View File

@ -1,303 +1,15 @@
context('Validator page', { tags: '@smoke' }, function () {
const validatorMenuHeading = 'a[href="/validators"]';
const tendermintDataHeader = '[data-testid="tendermint-header"]';
const vegaDataHeader = '[data-testid="vega-header"]';
const jsonSection = '.language-json';
before('Visit validators page and obtain data', function () {
cy.visit('/');
cy.get(validatorMenuHeading).click();
cy.get_validators().as('validators');
cy.get_nodes().as('nodes');
cy.visit('/validators');
});
describe('Verify elements on page', function () {
before('Ensure at least two validators are present', function () {
assert.isAtLeast(
this.validators.length,
2,
'Ensuring at least two validators exist'
);
});
it('should be able to see validator page sections', function () {
cy.get(vegaDataHeader)
.contains('Vega data')
.and('is.visible')
.next()
.within(() => {
cy.get(jsonSection).should('not.be.empty');
});
cy.get(tendermintDataHeader)
.contains('Tendermint data')
.and('is.visible')
.next()
.within(() => {
cy.get(jsonSection).should('not.be.empty');
});
});
it('should be able to see relevant validator information in tendermint section', function () {
cy.get(tendermintDataHeader)
.contains('Tendermint data')
.next()
.within(() => {
cy.get(jsonSection)
.invoke('text')
.convert_string_json_to_js_object()
.then((validatorsInJson) => {
this.validators.forEach((validator, index) => {
const validatorInJson =
validatorsInJson.result.validators[index];
assert.equal(
validatorInJson.address,
validator.address,
`Checking that validator address shown in json matches system data`
);
cy.contains(validator.address).should('be.visible');
assert.equal(
validatorInJson.pub_key.type,
validator.pub_key.type,
`Checking that validator public key type shown in json matches system data`
);
cy.contains(validator.pub_key.type).should('be.visible');
assert.equal(
validatorInJson.pub_key.value,
validator.pub_key.value,
`Checking that validator public key value shown in json matches system data`
);
cy.contains(validator.pub_key.value).should('be.visible');
assert.equal(
validatorInJson.voting_power,
validator.voting_power,
`Checking that validator voting power in json matches system data`
);
cy.contains(validator.voting_power).should('be.visible');
// Proposer priority can change frequently mid test
// Therefore only checking the field name is present.
cy.contains('proposer_priority').should('be.visible');
});
});
});
});
// Test disabled 2022/11/15 during the 0.62.1 upgrade. The JSON structure changed, and
// this test failed. Rather than fix it, it will be replaced when the validator view displays
// something useful rather than just dumping out the JSON.
xit('should be able to see relevant node information in vega data section', function () {
cy.get(vegaDataHeader)
.contains('Vega data')
.next()
.within(() => {
cy.get(jsonSection)
.invoke('text')
.convert_string_json_to_js_object()
.then((nodesInJson) => {
this.nodes.forEach((node, index) => {
const nodeInJson = nodesInJson.edges[index].node;
// Vegacapsule shows no info or null for following fields:
// name, infoURL, avatarUrl, location, epoch data
// Therefore, these values remain unchecked.
assert.equal(
nodeInJson.__typename,
node.__typename,
`Checking that node __typename shown in json matches system data`
);
cy.contains(node.__typename).should('be.visible');
assert.equal(
nodeInJson.id,
node.id,
`Checking that node id shown in json matches system data`
);
cy.contains(node.id).should('be.visible');
assert.equal(
nodeInJson.pubkey,
node.pubkey,
`Checking that node pubkey shown in json matches system data`
);
cy.contains(node.pubkey).should('be.visible');
assert.equal(
nodeInJson.tmPubkey,
node.tmPubkey,
`Checking that node tmPubkey shown in json matches system data`
);
cy.contains(node.tmPubkey).should('be.visible');
assert.equal(
nodeInJson.ethereumAddress,
node.ethereumAddress,
`Checking that node ethereumAddress shown in json matches system data`
);
cy.contains(node.ethereumAddress).should('be.visible');
assert.equal(
nodeInJson.stakedByOperator,
node.stakedByOperator,
`Checking that node stakedByOperator value shown in json matches system data`
);
cy.contains(node.stakedByOperator).should('be.visible');
assert.equal(
nodeInJson.stakedByDelegates,
node.stakedByDelegates,
`Checking that node stakedByDelegates value shown in json matches system data`
);
cy.contains(node.stakedByDelegates).should('be.visible');
assert.equal(
nodeInJson.stakedTotal,
node.stakedTotal,
`Checking that node stakedTotal shown in json matches system data`
);
cy.contains(node.stakedTotal).should('be.visible');
assert.equal(
nodeInJson.pendingStake,
node.pendingStake,
`Checking that node pendingStake shown in json matches system data`
);
cy.contains(node.pendingStake).should('be.visible');
assert.equal(
nodeInJson.status,
node.status,
`Checking that node status shown in json matches system data`
);
cy.contains(node.status).should('be.visible');
});
});
});
});
it('should be able to see validator page displayed on mobile', function () {
cy.common_switch_to_mobile_and_click_toggle();
cy.get(validatorMenuHeading).click();
cy.get(vegaDataHeader)
.contains('Vega data')
.and('is.visible')
.next()
.within(() => {
cy.get(jsonSection).should('not.be.empty');
});
cy.get(tendermintDataHeader)
.contains('Tendermint data')
.and('is.visible')
.next()
.within(() => {
cy.get(jsonSection).should('not.be.empty');
});
cy.get(tendermintDataHeader)
.contains('Tendermint data')
.next()
.within(() => {
this.validators.forEach((validator) => {
cy.contains(validator.address).should('be.visible');
cy.contains(validator.pub_key.type).should('be.visible');
cy.contains(validator.pub_key.value).should('be.visible');
cy.contains(validator.voting_power).should('be.visible');
// Proposer priority can change frequently mid test
// Therefore only checking the field name is present.
cy.contains('proposer_priority').should('be.visible');
});
});
});
it('should be able to switch validator page between light and dark mode', function () {
const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
const themeSwitcher = '[data-testid="theme-switcher"]';
const jsonFields = '.hljs';
const sideMenuBackground = '.absolute';
// Engage dark mode if not allready set
cy.get(sideMenuBackground)
.should('have.css', 'background-color')
.then((background_color) => {
if (background_color.includes(whiteThemeSideMenuBackgroundColor))
cy.get(themeSwitcher).click();
});
// Engage white mode
cy.get(themeSwitcher).click();
// White Mode
cy.get(validatorMenuHeading)
.should('have.css', 'background-color')
.and('include', whiteThemeSelectedMenuOptionColor);
cy.get(jsonFields)
.should('have.css', 'background-color')
.and('include', whiteThemeJsonFieldBackColor);
cy.get(sideMenuBackground)
.should('have.css', 'background-color')
.and('include', whiteThemeSideMenuBackgroundColor);
// Dark Mode
cy.get(themeSwitcher).click();
cy.get(validatorMenuHeading)
.should('have.css', 'background-color')
.and('include', darkThemeSelectedMenuOptionColor);
cy.get(jsonFields)
.should('have.css', 'background-color')
.and('include', darkThemeJsonFieldBackColor);
cy.get(sideMenuBackground)
.should('have.css', 'background-color')
.and('include', darkThemeSideMenuBackgroundColor);
});
Cypress.Commands.add('get_validators', () => {
cy.request({
method: 'GET',
url: `http://localhost:26617/validators`,
headers: { 'content-type': 'application/json' },
})
.its(`body.result.validators`)
.then(function (response) {
let validators = [];
response.forEach((account, index) => {
validators[index] = account;
});
return validators;
});
});
Cypress.Commands.add('get_nodes', () => {
const mutation =
'{nodesConnection { edges { node { id name infoUrl avatarUrl pubkey tmPubkey ethereumAddress \
location stakedByOperator stakedByDelegates stakedTotal pendingStake \
epochData { total offline online __typename } status name __typename}}}}';
cy.request({
method: 'POST',
url: `http://localhost:3028/query`,
body: {
query: mutation,
},
headers: { 'content-type': 'application/json' },
})
.its(`body.data.nodesConnection.edges`)
.then(function (response) {
let nodes = [];
response.forEach((node) => {
nodes.push(node);
});
return nodes;
it('should be able to see validator tiles', function () {
cy.getNodes().then((nodes) => {
nodes.forEach((node) => {
cy.get(`[validator-id="${node.id}"]`).should('be.visible');
});
});
});
});
});

1
apps/explorer/src/app/components/page-helpers/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './page-actions';

10
apps/explorer/src/app/components/page-helpers/page-actions.tsx Normal file
View File

@ -0,0 +1,10 @@
import type { HTMLAttributes } from 'react';
export const PageActions = ({
children,
...props
}: HTMLAttributes<HTMLDivElement>) => (
<div className="flex flex-row items-start gap-1" {...props}>
{children}
</div>
);

45
apps/explorer/src/app/components/page-helpers/page-title.tsx Normal file
View File

@ -0,0 +1,45 @@
import classNames from 'classnames';
import type { HTMLAttributes, ReactNode } from 'react';
import { useDocumentTitle } from '../../hooks/use-document-title';
import { RouteTitle } from '../route-title';
import { PageActions } from './page-actions';
type PageTitleProps = {
/**
* The page title
* (also sets the document title unless overwritten by
* `documentTitle` property)
*/
title: string;
/**
* The react node that consists of CTA buttons, links, etc.
*/
actions?: ReactNode;
/**
* Overwrites the document title
*/
documentTitle?: Parameters<typeof useDocumentTitle>[0];
} & Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
export const PageTitle = ({
title,
actions,
documentTitle,
className,
...props
}: PageTitleProps) => {
useDocumentTitle(
documentTitle && documentTitle.length > 0 ? documentTitle : [title]
);
return (
<div
className="flex flex-col md:flex-row gap-1 justify-between content-start mb-8"
data-testid="page-title"
>
<RouteTitle className={classNames('mb-1', className)} {...props}>
{title}
</RouteTitle>
{actions && <PageActions>{actions}</PageActions>}
</div>
);
};

55
apps/explorer/src/app/hooks/use-tendermint-validators.ts Normal file
View File

@ -0,0 +1,55 @@
import { useFetch } from '@vegaprotocol/react-helpers';
import { useEffect, useRef } from 'react';
import { DATA_SOURCES } from '../config';
type PubKey = {
type: string;
value: string;
};
type Validator = {
address: string;
pub_key: PubKey;
voting_power: string;
proposer_priority: string;
};
type Result = {
block_height: string;
validators: Validator[];
count: string;
total: string;
};
type TendermintValidatorsResponse = {
jsonrpc: string;
id: number;
result: Result;
};
export const useTendermintValidators = (pollInterval?: number) => {
const {
state: { data, loading, error },
refetch,
} = useFetch<TendermintValidatorsResponse>(
`${DATA_SOURCES.tendermintUrl}/validators`
);
const ref = useRef<TendermintValidatorsResponse | undefined>(undefined);
useEffect(() => {
if (data) ref.current = data;
}, [data]);
useEffect(() => {
const interval =
pollInterval &&
setInterval(() => {
refetch();
}, pollInterval);
return () => {
clearInterval(interval);
};
}, [pollInterval, refetch]);
return { data: ref.current, loading, error, refetch };
};

21
apps/explorer/src/app/routes/assets/asset-page.tsx
View File

@ -1,5 +1,4 @@
import { t } from '@vegaprotocol/react-helpers';
import { RouteTitle } from '../../components/route-title';
import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
import { useScrollToLocation } from '../../hooks/scroll-to-location';
import { useDocumentTitle } from '../../hooks/use-document-title';
@ -8,6 +7,7 @@ import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
import { useParams } from 'react-router-dom';
import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
import { useState } from 'react';
import { PageTitle } from '../../components/page-helpers/page-title';
export const AssetPage = () => {
useDocumentTitle(['Assets']);
@ -22,18 +22,25 @@ export const AssetPage = () => {
return (
<>
<section className="relative">
<RouteTitle data-testid="asset-header">{title}</RouteTitle>
<PageTitle
data-testid="asset-header"
title={title}
actions={
<Button
disabled={!data}
size="xs"
onClick={() => setDialogOpen(true)}
>
{t('View JSON')}
</Button>
}
/>
<AsyncRenderer
noDataMessage={t('Asset not found')}
data={data}
loading={loading}
error={error}
>
<div className="absolute top-0 right-0">
<Button size="xs" onClick={() => setDialogOpen(true)}>
{t('View JSON')}
</Button>
</div>
<div className="h-full relative">
<AssetDetailsTable asset={data as AssetFieldsFragment} />
</div>

23
apps/explorer/src/app/routes/markets/market-page.tsx
View File

@ -3,12 +3,12 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
import { useMemo, useState } from 'react';
import { useParams } from 'react-router-dom';
import { MarketDetails } from '../../components/markets/market-details';
import { RouteTitle } from '../../components/route-title';
import { useScrollToLocation } from '../../hooks/scroll-to-location';
import { useDocumentTitle } from '../../hooks/use-document-title';
import compact from 'lodash/compact';
import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
import { PageTitle } from '../../components/page-helpers/page-title';
export const MarketPage = () => {
useScrollToLocation();
@ -40,20 +40,25 @@ export const MarketPage = () => {
return (
<>
<section className="relative">
<RouteTitle data-testid="markets-heading">
{data?.market?.tradableInstrument.instrument.name}
</RouteTitle>
<PageTitle
data-testid="markets-heading"
title={data?.market?.tradableInstrument.instrument.name || ''}
actions={
<Button
disabled={!data?.market}
size="xs"
onClick={() => setDialogOpen(true)}
>
{t('View JSON')}
</Button>
}
/>
<AsyncRenderer
noDataMessage={t('This chain has no markets')}
data={data}
loading={loading}
error={error}
>
<div className="absolute top-0 right-0">
<Button size="xs" onClick={() => setDialogOpen(true)}>
{t('View JSON')}
</Button>
</div>
<MarketDetails market={data?.market} />
</AsyncRenderer>
</section>

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

@ -9,7 +9,7 @@ import Party from './parties';
import { Parties } from './parties/home';
import { Party as PartySingle } from './parties/id';
import Txs from './txs';
import Validators from './validators';
import { ValidatorsPage } from './validators';
import Genesis from './genesis';
import { Block } from './blocks/id';
import { Blocks } from './blocks/home';
@ -125,7 +125,7 @@ const validators: Route[] = flags.validators
path: Routes.VALIDATORS,
name: 'Validators',
text: t('Validators'),
element: <Validators />,
element: <ValidatorsPage />,
},
]
: [];

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

@ -1,47 +1 @@
import { t } from '@vegaprotocol/react-helpers';
import { RouteTitle } from '../../components/route-title';
import { SubHeading } from '../../components/sub-heading';
import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
import { DATA_SOURCES } from '../../config';
import { useFetch } from '@vegaprotocol/react-helpers';
import type { TendermintValidatorsResponse } from './tendermint-validator-response';
import { useExplorerNodesQuery } from './__generated__/Nodes';
import { useDocumentTitle } from '../../hooks/use-document-title';
const Validators = () => {
const {
state: { data: validators },
} = useFetch<TendermintValidatorsResponse>(
`${DATA_SOURCES.tendermintUrl}/validators`
);
useDocumentTitle(['Validators']);
const { data } = useExplorerNodesQuery();
return (
<section>
<RouteTitle data-testid="validators-header">{t('Validators')}</RouteTitle>
{data ? (
<>
<SubHeading data-testid="vega-header">{t('Vega data')}</SubHeading>
<SyntaxHighlighter data-testid="vega-data" data={data} />
</>
) : (
<Loader />
)}
{validators ? (
<>
<SubHeading data-testid="tendermint-header">
{t('Tendermint data')}
</SubHeading>
<SyntaxHighlighter data-testid="tendermint-data" data={validators} />
</>
) : (
<Loader />
)}
</section>
);
};
export default Validators;
export * from './validators-page';

24
apps/explorer/src/app/routes/validators/tendermint-validator-response.tsx
View File

@ -1,24 +0,0 @@
export interface PubKey {
type: string;
value: string;
}
export interface Validator {
address: string;
pub_key: PubKey;
voting_power: string;
proposer_priority: string;
}
export interface Result {
block_height: string;
validators: Validator[];
count: string;
total: string;
}
export interface TendermintValidatorsResponse {
jsonrpc: string;
id: number;
result: Result;
}

340
apps/explorer/src/app/routes/validators/validators-page.tsx Normal file
View File

@ -0,0 +1,340 @@
import { countryCodeToFlagEmoji, t } from '@vegaprotocol/react-helpers';
import {
AsyncRenderer,
Button,
CopyWithTooltip,
ExternalLink,
Icon,
KeyValueTable,
KeyValueTableRow,
Tooltip,
truncateMiddle,
} from '@vegaprotocol/ui-toolkit';
import { useExplorerNodesQuery } from './__generated__/Nodes';
import { useDocumentTitle } from '../../hooks/use-document-title';
import compact from 'lodash/compact';
import { useTendermintValidators } from '../../hooks/use-tendermint-validators';
import { useMemo, useState } from 'react';
import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
import { PageTitle } from '../../components/page-helpers/page-title';
import BigNumber from 'bignumber.js';
import {
ContractAddressLink,
DApp,
TOKEN_VALIDATOR,
useLinks,
} from '@vegaprotocol/environment';
import classNames from 'classnames';
import { NodeStatus, NodeStatusMapping } from '@vegaprotocol/types';
type RateProps = {
value: BigNumber | number | undefined;
className?: string;
colour?: 'green' | 'blue' | 'pink' | 'orange';
asPoint?: boolean;
zero?: boolean;
};
const Rate = ({
value,
className,
colour = 'blue',
asPoint = false,
}: RateProps) => {
const val =
typeof value === 'undefined'
? new BigNumber(0)
: typeof value === 'number'
? new BigNumber(value)
: value;
const bar = asPoint
? {
right: `${val.times(100).toFixed(2)}%`,
}
: { width: `${val.times(100).toFixed(2)}%` };
return (
<div
className={classNames(
'overflow-hidden rounded h-[9px] flex w-full bg-vega-light-100 dark:bg-vega-dark-150',
{ 'pl-[9px]': asPoint },
{
'bg-gradient-to-l to-vega-orange-500 dark:to-vega-orange-550 from-vega-light-100 dark:from-vega-dark-150':
asPoint && colour === 'orange',
}
)}
>
<div className="relative w-full">
<div
className={classNames(
'w-[9px] h-[9px] absolute top-0 right-0 transition-all rounded',
{
'bg-vega-green-550 dark:bg-vega-green-500': colour === 'green',
'bg-vega-blue-550 dark:bg-vega-blue-500': colour === 'blue',
'bg-vega-pink-550 dark:bg-vega-pink-500': colour === 'pink',
'bg-vega-orange-550 dark:bg-vega-orange-500': colour === 'orange',
},
'bg-vega',
className
)}
style={bar}
></div>
</div>
</div>
);
};
export const ValidatorsPage = () => {
useDocumentTitle(['Validators']);
const { data: tmData } = useTendermintValidators(5000);
const { data, loading, error, refetch } = useExplorerNodesQuery();
const validators = compact(data?.nodesConnection.edges?.map((e) => e?.node));
// voting power
const powers = compact(tmData?.result.validators).map(
(v) => new BigNumber(v.voting_power)
);
const totalVotingPower = BigNumber.sum(...powers);
// proposer priority
const priorities = compact(tmData?.result.validators).map(
(v) => new BigNumber(v.proposer_priority)
);
const absoluteProposerPriority = BigNumber.max(
...priorities.map((p) => p.abs())
);
const tmValidators = useMemo(() => {
return tmData?.result.validators.map((v) => {
const data = {
key: v.pub_key.value,
votingPower: new BigNumber(v.voting_power),
proposerPriority: new BigNumber(v.proposer_priority),
};
return {
...data,
votingPowerRatio: data.votingPower.dividedBy(totalVotingPower),
proposerPriorityRatio: absoluteProposerPriority
.plus(data.proposerPriority)
.dividedBy(absoluteProposerPriority.times(2)),
};
});
}, [tmData?.result.validators, totalVotingPower, absoluteProposerPriority]);
const totalStaked = BigNumber.sum(
...validators.map((v) => new BigNumber(v.stakedTotal))
);
const [vegaDialog, setVegaDialog] = useState<boolean>(false);
const [tmDialog, setTmDialog] = useState<boolean>(false);
const tokenLink = useLinks(DApp.Token);
return (
<>
<section>
<PageTitle
title={t('Validators')}
actions={
<>
<Button
disabled={Boolean(!data)}
size="xs"
onClick={() => setVegaDialog(true)}
>
{t('View JSON')}
</Button>
{
<Button
disabled={Boolean(!tmData)}
size="xs"
onClick={() => setTmDialog(true)}
>
{t('View tendermint as JSON')}
</Button>
}
</>
}
/>
<AsyncRenderer
data={validators}
loading={loading}
error={error}
reload={refetch}
>
<ul className="md:columns-2">
{validators.map((v) => {
const tm = tmValidators?.find((tmv) => tmv.key === v.tmPubkey);
const stakedRatio = new BigNumber(v.stakedTotal).dividedBy(
totalStaked
);
const validatorPage = tokenLink(
TOKEN_VALIDATOR.replace(':id', v.id)
);
const validatorName =
v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
return (
<li className="mb-5" key={v.id}>
<div
data-testid="validator-tile"
validator-id={v.id}
className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
>
{v.avatarUrl && (
<div className="w-20">
<ExternalLink href={validatorPage}>
<img
className="w-full"
src={v.avatarUrl}
alt={validatorName}
/>
</ExternalLink>
</div>
)}
<div className="w-full">
<h2 className="font-alpha text-2xl">
<ExternalLink href={validatorPage}>
{validatorName}
</ExternalLink>
</h2>
<KeyValueTable>
<KeyValueTableRow>
<div>{t('ID')}</div>
<div className="break-all text-xs">{v.id}</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Status')}</div>
<div className="break-all text-xs">
<span
className={classNames('mr-1', {
'text-vega-green-550 dark:vega-green-500':
v.status === NodeStatus.NODE_STATUS_VALIDATOR,
'text-vega-pink-550 dark:vega-pink-500':
v.status ===
NodeStatus.NODE_STATUS_NON_VALIDATOR,
})}
>
<Icon name="tick-circle" size={3} />
</span>
{NodeStatusMapping[v.status]}
</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Location')}</div>
<div>
{countryCodeToFlagEmoji(v.location)}{' '}
<span className="text-[10px]">{v.location}</span>
</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Public key')}</div>
<div className="break-all text-xs">{v.pubkey}</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Ethereum address')}</div>
<div className="break-all text-xs">
<ContractAddressLink address={v.ethereumAddress} />{' '}
<CopyWithTooltip text={v.ethereumAddress}>
<button title={t('Copy address to clipboard')}>
<Icon size={3} name="duplicate" />
</button>
</CopyWithTooltip>
</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Tendermint public key')}</div>
<div className="break-all text-xs">{v.tmPubkey}</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Voting power')}</div>
<div className="w-44 text-right">
<Rate value={tm?.votingPowerRatio} />
<div className="text-[10px] leading-3">
{tm?.votingPowerRatio.times(100).toFixed(2)}
{'% '}({tm?.votingPower.toString()})
</div>
</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Proposer priority')}</div>
<div className="w-44 text-right">
<Rate
value={tm?.proposerPriorityRatio}
colour="orange"
asPoint={true}
zero={true}
/>
<div className="text-[10px] leading-3">
{tm?.proposerPriority.toString()}
</div>
</div>
</KeyValueTableRow>
<KeyValueTableRow>
<div>{t('Stake share')}</div>
<div className="w-44 text-right">
<Rate value={stakedRatio} colour="green" />
<div className="text-[10px] leading-3">
<Tooltip
description={
<KeyValueTable
numerical={true}
className="mb-1"
>
<KeyValueTableRow
className="text-xs"
noBorder={true}
>
<div>{t('Staked by operator')}</div>
<div>{v.stakedByOperator}</div>
</KeyValueTableRow>
<KeyValueTableRow
className="text-xs"
noBorder={true}
>
<div>{t('Staked by delegates')}</div>
<div>{v.stakedByDelegates}</div>
</KeyValueTableRow>
<KeyValueTableRow
className="text-xs"
noBorder={true}
>
<div>{t('Staked (total)')}</div>
<div>{v.stakedTotal}</div>
</KeyValueTableRow>
</KeyValueTable>
}
>
<span>
{stakedRatio.times(100).toFixed(2)}%
</span>
</Tooltip>
</div>
</div>
</KeyValueTableRow>
</KeyValueTable>
</div>
</div>
</li>
);
})}
</ul>
</AsyncRenderer>
</section>
<JsonViewerDialog
open={vegaDialog}
onChange={(isOpen) => setVegaDialog(isOpen)}
title={t('Vega Validators')}
content={data}
/>
<JsonViewerDialog
open={tmDialog}
onChange={(isOpen) => setTmDialog(isOpen)}
title={t('Tendermint Validators')}
content={tmData}
/>
</>
);
};

16
libs/assets/src/lib/asset-details-table.tsx
View File

@ -1,9 +1,8 @@
import { useEtherscanLink } from '@vegaprotocol/environment';
import { ContractAddressLink } from '@vegaprotocol/environment';
import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
import type * as Schema from '@vegaprotocol/types';
import type { KeyValueTableRowProps } from '@vegaprotocol/ui-toolkit';
import { CopyWithTooltip, Icon } from '@vegaprotocol/ui-toolkit';
import { Link } from '@vegaprotocol/ui-toolkit';
import {
KeyValueTable,
KeyValueTableRow,
@ -276,16 +275,3 @@ export const AssetDetailsTable = ({
</KeyValueTable>
);
};
// Separate component for the link as otherwise eslint will complain
// about useEnvironment being used in a component
// named with a lowercase 'value'
const ContractAddressLink = ({ address }: { address: string }) => {
const etherscanLink = useEtherscanLink();
const href = etherscanLink(`/address/${address}`);
return (
<Link href={href} target="_blank" title={t('View on etherscan')}>
{address}
</Link>
);
};

2
libs/cypress/src/index.ts
View File

@ -18,6 +18,7 @@ import { addMockTransactionResponse } from './lib/commands/mock-transaction-resp
import { addCreateMarket } from './lib/commands/create-market';
import { addConnectPublicKey } from './lib/commands/add-connect-public-key';
import { addVegaWalletSubmitProposal } from './lib/commands/vega-wallet-submit-proposal';
import { addGetNodes } from './lib/commands/get-nodes';
addGetTestIdcommand();
addSlackCommand();
@ -28,6 +29,7 @@ addMockWeb3ProviderCommand();
addHighlightLog();
addVegaWalletReceiveFaucetedAsset();
addGetAssets();
addGetNodes();
addContainsExactly();
addGetNetworkParameters();
addUpdateCapsuleMultiSig();

11
libs/cypress/src/lib/commands/get-assets.ts
View File

@ -1,13 +1,14 @@
import { gql } from '@apollo/client';
import { print } from 'graphql';
import type { AssetFieldsFragment } from '@vegaprotocol/assets';
import { edgesToList } from '../utils';
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable<Subject> {
getAssets(): Chainable<Record<string, AssetFieldsFragment>>;
getAssets(): Chainable<Array<AssetFieldsFragment>>;
}
}
}
@ -72,12 +73,6 @@ export function addGetAssets() {
headers: { 'content-type': 'application/json' },
})
.its('body.data.assetsConnection.edges')
.then((edges) => {
// @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
return edges.reduce((list, edge) => {
list[edge.node.name] = edge.node;
return list;
}, {});
});
.then(edgesToList);
});
}

55
libs/cypress/src/lib/commands/get-nodes.ts Normal file
View File

@ -0,0 +1,55 @@
import { gql } from '@apollo/client';
import type { Node } from '@vegaprotocol/types';
import { print } from 'graphql';
import { edgesToList } from '../utils';
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable<Subject> {
getNodes(): Chainable<Array<Partial<Node>>>;
}
}
}
export function addGetNodes() {
// @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
Cypress.Commands.add('getNodes', () => {
const query = gql`
query Nodes {
nodesConnection {
edges {
node {
__typename
avatarUrl
ethereumAddress
id
infoUrl
location
name
pendingStake
pubkey
stakedByDelegates
stakedByOperator
stakedTotal
status
tmPubkey
}
}
}
}
`;
cy.request({
method: 'POST',
url: `http://localhost:3028/query`,
body: {
query: print(query),
},
headers: { 'content-type': 'application/json' },
})
.its(`body.data.nodesConnection.edges`)
.then(edgesToList);
});
}

14
libs/cypress/src/lib/commands/vega-wallet-receive-fauceted-asset.ts
View File

@ -23,8 +23,8 @@ export function addVegaWalletReceiveFaucetedAsset() {
// @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
cy.getAssets().then((assets) => {
console.log(assets);
const asset = assets[assetName];
if (assets[assetName] !== undefined) {
const asset = assets.find((a) => a.name === assetName);
if (asset) {
for (let i = 0; i < asset.decimals; i++) amount += '0';
cy.exec(
`curl -X POST -d '{"amount": "${amount}", "asset": "${asset.id}", "party": "${vegaWalletPublicKey}"}' http://localhost:1790/api/v1/mint`
@ -38,15 +38,9 @@ export function addVegaWalletReceiveFaucetedAsset() {
);
});
} else {
const validAssets = Object.keys(assets)
.filter((key) => key.includes('fake'))
.reduce((obj, key) => {
return Object.assign(obj, {
[key]: assets[key],
});
}, {});
const validAssets = assets.filter((a) => a.name.includes('fake'));
assert.exists(
assets[assetName],
asset,
`${assetName} is not a faucet-able asset, only the following assets can be faucet-ed: ${validAssets}`
);
}

8
libs/cypress/src/lib/utils.ts
View File

@ -62,3 +62,11 @@ const checkSortChange = (tabsArr: string[], column: string) => {
});
});
};
type Edges = { node: unknown }[];
export function edgesToList(edges: Edges) {
// @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
return edges.map((edge) => {
return edge.node;
});
}

13
libs/environment/src/components/contract-address-link.tsx Normal file
View File

@ -0,0 +1,13 @@
import { t } from '@vegaprotocol/react-helpers';
import { Link } from '@vegaprotocol/ui-toolkit';
import { useEtherscanLink } from '../hooks';
export const ContractAddressLink = ({ address }: { address: string }) => {
const etherscanLink = useEtherscanLink();
const href = etherscanLink(`/address/${address}`);
return (
<Link href={href} target="_blank" title={t('View on etherscan')}>
{address}
</Link>
);
};

1
libs/environment/src/components/index.ts
View File

@ -2,3 +2,4 @@ export * from './network-loader';
export * from './network-switcher';
export * from './node-guard';
export * from './node-switcher';
export * from './contract-address-link';

1
libs/environment/src/hooks/use-links.ts
View File

@ -94,6 +94,7 @@ export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
export const TOKEN_GOVERNANCE = '/proposals';
export const TOKEN_PROPOSALS = '/proposals';
export const TOKEN_PROPOSAL = '/proposals/:id';
export const TOKEN_VALIDATOR = '/validators/:id';
// Explorer pages
export const EXPLORER_TX = '/txs/:hash';

267
libs/react-helpers/src/lib/flag-emoji.spec.ts Normal file
View File

@ -0,0 +1,267 @@
import { countryCodeToFlagEmoji, FALLBACK_FLAG } from './flag-emoji';
// REGIONAL INDICATOR SYMBOLS:
// 🇦
// 🇧
// 🇨
// 🇩
// 🇪
// 🇫
// 🇬
// 🇭
// 🇮
// 🇯
// 🇰
// 🇱
// 🇲
// 🇳
// 🇴
// 🇵
// 🇶
// 🇷
// 🇸
// 🇹
// 🇺
// 🇻
// 🇼
// 🇽
// 🇾
// 🇿
const cases = [
['AC', '🇦🇨'],
['AD', '🇦🇩'],
['AE', '🇦🇪'],
['AF', '🇦🇫'],
['AG', '🇦🇬'],
['AI', '🇦🇮'],
['AL', '🇦🇱'],
['AM', '🇦🇲'],
['AO', '🇦🇴'],
['AR', '🇦🇷'],
['AS', '🇦🇸'],
['AT', '🇦🇹'],
['AQ', '🇦🇶'],
['AW', '🇦🇼'],
['AZ', '🇦🇿'],
['BA', '🇧🇦'],
['BB', '🇧🇧'],
['BD', '🇧🇩'],
['BE', '🇧🇪'],
['BF', '🇧🇫'],
['BG', '🇧🇬'],
['BH', '🇧🇭'],
['BI', '🇧🇮'],
['BJ', '🇧🇯'],
['BL', '🇧🇱'],
['BM', '🇧🇲'],
['BN', '🇧🇳'],
['BO', '🇧🇴'],
['BR', '🇧🇷'],
['BS', '🇧🇸'],
['BT', '🇧🇹'],
['BQ', '🇧🇶'],
['BW', '🇧🇼'],
['BY', '🇧🇾'],
['BZ', '🇧🇿'],
['CA', '🇨🇦'],
['CC', '🇨🇨'],
['CD', '🇨🇩'],
['CF', '🇨🇫'],
['CG', '🇨🇬'],
['CH', '🇨🇭'],
['CI', '🇨🇮'],
['CK', '🇨🇰'],
['CL', '🇨🇱'],
['CM', '🇨🇲'],
['CN', '🇨🇳'],
['CO', '🇨🇴'],
['CP', '🇨🇵'],
['CR', '🇨🇷'],
['CW', '🇨🇼'],
['CY', '🇨🇾'],
['CZ', '🇨🇿'],
['DE', '🇩🇪'],
['DG', '🇩🇬'],
['DJ', '🇩🇯'],
['DK', '🇩🇰'],
['DM', '🇩🇲'],
['DO', '🇩🇴'],
['DZ', '🇩🇿'],
['EA', '🇪🇦'],
['EC', '🇪🇨'],
['EE', '🇪🇪'],
['EG', '🇪🇬'],
['EH', '🇪🇭'],
['ER', '🇪🇷'],
['ES', '🇪🇸'],
['ET', '🇪🇹'],
['FI', '🇫🇮'],
['FJ', '🇫🇯'],
['FK', '🇫🇰'],
['FM', '🇫🇲'],
['FO', '🇫🇴'],
['FR', '🇫🇷'],
['GA', '🇬🇦'],
['GB', '🇬🇧'],
['GD', '🇬🇩'],
['GE', '🇬🇪'],
['GF', '🇬🇫'],
['GG', '🇬🇬'],
['GH', '🇬🇭'],
['GI', '🇬🇮'],
['GL', '🇬🇱'],
['GM', '🇬🇲'],
['GN', '🇬🇳'],
['GP', '🇬🇵'],
['GR', '🇬🇷'],
['GS', '🇬🇸'],
['GT', '🇬🇹'],
['GQ', '🇬🇶'],
['GW', '🇬🇼'],
['GY', '🇬🇾'],
['HK', '🇭🇰'],
['HM', '🇭🇲'],
['HN', '🇭🇳'],
['HR', '🇭🇷'],
['HT', '🇭🇹'],
['IC', '🇮🇨'],
['ID', '🇮🇩'],
['IE', '🇮🇪'],
['IL', '🇮🇱'],
['IM', '🇮🇲'],
['IN', '🇮🇳'],
['IO', '🇮🇴'],
['IR', '🇮🇷'],
['IS', '🇮🇸'],
['IT', '🇮🇹'],
['IQ', '🇮🇶'],
['JE', '🇯🇪'],
['JM', '🇯🇲'],
['JO', '🇯🇴'],
['JP', '🇯🇵'],
['KE', '🇰🇪'],
['KG', '🇰🇬'],
['KH', '🇰🇭'],
['KI', '🇰🇮'],
['KM', '🇰🇲'],
['KN', '🇰🇳'],
['KP', '🇰🇵'],
['KR', '🇰🇷'],
['KW', '🇰🇼'],
['KY', '🇰🇾'],
['KZ', '🇰🇿'],
['LA', '🇱🇦'],
['LB', '🇱🇧'],
['LC', '🇱🇨'],
['LI', '🇱🇮'],
['LK', '🇱🇰'],
['LR', '🇱🇷'],
['LS', '🇱🇸'],
['LT', '🇱🇹'],
['LY', '🇱🇾'],
['MA', '🇲🇦'],
['MC', '🇲🇨'],
['MD', '🇲🇩'],
['ME', '🇲🇪'],
['MF', '🇲🇫'],
['MG', '🇲🇬'],
['MH', '🇲🇭'],
['MK', '🇲🇰'],
['ML', '🇲🇱'],
['MM', '🇲🇲'],
['MN', '🇲🇳'],
['MO', '🇲🇴'],
['MP', '🇲🇵'],
['MR', '🇲🇷'],
['MS', '🇲🇸'],
['MT', '🇲🇹'],
['MQ', '🇲🇶'],
['MW', '🇲🇼'],
['MY', '🇲🇾'],
['MZ', '🇲🇿'],
['NA', '🇳🇦'],
['NC', '🇳🇨'],
['NE', '🇳🇪'],
['NF', '🇳🇫'],
['NG', '🇳🇬'],
['NI', '🇳🇮'],
['NL', '🇳🇱'],
['NO', '🇳🇴'],
['NP', '🇳🇵'],
['NR', '🇳🇷'],
['NZ', '🇳🇿'],
['OM', '🇴🇲'],
['PA', '🇵🇦'],
['PE', '🇵🇪'],
['PF', '🇵🇫'],
['PG', '🇵🇬'],
['PH', '🇵🇭'],
['PK', '🇵🇰'],
['PL', '🇵🇱'],
['PM', '🇵🇲'],
['PN', '🇵🇳'],
['PR', '🇵🇷'],
['PS', '🇵🇸'],
['PT', '🇵🇹'],
['PW', '🇵🇼'],
['PY', '🇵🇾'],
['RE', '🇷🇪'],
['RO', '🇷🇴'],
['RS', '🇷🇸'],
['RW', '🇷🇼'],
['SA', '🇸🇦'],
['SB', '🇸🇧'],
['SC', '🇸🇨'],
['SD', '🇸🇩'],
['SE', '🇸🇪'],
['SG', '🇸🇬'],
['SH', '🇸🇭'],
['SI', '🇸🇮'],
['SJ', '🇸🇯'],
['SK', '🇸🇰'],
['SL', '🇸🇱'],
['SM', '🇸🇲'],
['SN', '🇸🇳'],
['SO', '🇸🇴'],
['SR', '🇸🇷'],
['SS', '🇸🇸'],
['ST', '🇸🇹'],
['SY', '🇸🇾'],
['SZ', '🇸🇿'],
['TA', '🇹🇦'],
['TC', '🇹🇨'],
['TD', '🇹🇩'],
['TF', '🇹🇫'],
['TG', '🇹🇬'],
['TH', '🇹🇭'],
['TJ', '🇹🇯'],
['TK', '🇹🇰'],
['TL', '🇹🇱'],
['TM', '🇹🇲'],
['TN', '🇹🇳'],
['TO', '🇹🇴'],
['TR', '🇹🇷'],
['TT', '🇹🇹'],
['TW', '🇹🇼'],
['TZ', '🇹🇿'],
['QA', '🇶🇦'],
['VG', '🇻🇬'],
['WF', '🇼🇫'],
['WS', '🇼🇸'],
['YE', '🇾🇪'],
['YT', '🇾🇹'],
['ZA', '🇿🇦'],
['ZM', '🇿🇲'],
['ZW', '🇿🇼'],
// unknown
['AA', FALLBACK_FLAG],
['XX', FALLBACK_FLAG],
['AAA', FALLBACK_FLAG],
];
describe('countryCodeToFlagEmoji', () => {
it.each(cases)('converts %s to %s', (countryCode, flag) => {
expect(countryCodeToFlagEmoji(countryCode)).toEqual(flag);
});
});

24
libs/react-helpers/src/lib/flag-emoji.ts Normal file
View File

@ -0,0 +1,24 @@
import compact from 'lodash/compact';
export const FALLBACK_FLAG = '🏳';
const KNOWN_CODES = `AC AD AE AF AG AI AL AM AO AR AS AT AQ AW AZ BA BB BD BE BF
BG BH BI BJ BL BM BN BO BR BS BT BQ BW BY BZ CA CC CD CF CG CH CI CK CL CM CN
CO CP CR CW CY CZ DE DG DJ DK DM DO DZ EA EC EE EG EH ER ES ET FI FJ FK FM FO
FR GA GB GD GE GF GG GH GI GL GM GN GP GR GS GT GQ GW GY HK HM HN HR HT IC ID
IE IL IM IN IO IR IS IT IQ JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB
LC LI LK LR LS LT LY MA MC MD ME MF MG MH MK ML MM MN MO MP MR MS MT MQ MW MY
MZ NA NC NE NF NG NI NL NO NP NR NZ OM PA PE PF PG PH PK PL PM PN PR PS PT PW
PY RE RO RS RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SY SZ TA TC
TD TF TG TH TJ TK TL TM TN TO TR TT TW TZ QA VG WF WS YE YT ZA ZM ZW`;
export const countryCodeToFlagEmoji = (countryCode: string) => {
const code = countryCode.trim().toUpperCase();
const known = compact(KNOWN_CODES.split(' ').map((ch) => ch.trim()));
if (known.includes(code)) {
return code.replace(/./g, (char) =>
String.fromCodePoint(0x1f1a5 + char.toUpperCase().charCodeAt(0))
);
}
return FALLBACK_FLAG;
};

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

@ -19,3 +19,4 @@ export * from './remove-pagination-wrapper';
export * from './storage';
export * from './time';
export * from './validate';
export * from './flag-emoji';

8
libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx
View File

@ -7,6 +7,7 @@ export interface KeyValueTableProps
children: React.ReactNode;
headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
numerical?: boolean;
className?: string;
}
export const KeyValueTable = ({
@ -14,6 +15,7 @@ export const KeyValueTable = ({
children,
numerical,
headingLevel,
className,
...rest
}: KeyValueTableProps) => {
const TitleTag: keyof JSX.IntrinsicElements = headingLevel
@ -22,7 +24,11 @@ export const KeyValueTable = ({
return (
<React.Fragment>
{title && <TitleTag className={`text-xl my-2`}>{title}</TitleTag>}
<div data-testid="key-value-table" {...rest} className="mb-4">
<div
data-testid="key-value-table"
{...rest}
className={classNames('mb-4', className)}
>
<div>
{children &&
React.Children.map(