feat(explorer): add specific link types, start specific tx views (#2152)

* feat(explorer): add specific link types, start specific tx views

* feat(explorer): add raw tx view

* chore(explorer): remove default nx vega url

* fix(explorer): improve prop typing for link components

* fix(explorer): remove console log

* fix(explorer): remove unused import

* fix(explorer): refactor txdetails component selection
This commit is contained in:
Edd 2022-11-18 17:10:57 +00:00 committed by GitHub
parent 8e5012891c
commit 8f8a727b4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 1197 additions and 85 deletions

View File

@ -2,7 +2,6 @@
NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
NX_TENDERMINT_URL=http://localhost:26617
NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
NX_VEGA_URL=http://localhost:3028/query
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_ENV=CUSTOM
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

View File

@ -3,7 +3,6 @@ NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-exp
NX_TENDERMINT_URL=https://n04.d.vega.xyz/tm
NX_TENDERMINT_WEBSOCKET_URL=wss://n04.d.vega.xyz/tm/websocket
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_ENV=DEVNET
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

View File

@ -3,7 +3,6 @@ NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-exp
NX_TENDERMINT_URL=https://be.explorer.vega.xyz
NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
NX_VEGA_URL=https://api.vega.xyz/query
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_ENV=MAINNET
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

View File

@ -1,5 +1,4 @@
# App configuration variables
NX_VEGA_URL=https://api.sandbox.vega.xyz/graphql
NX_VEGA_ENV=SANDBOX
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/sandbox-network.json
NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz

View File

@ -6,7 +6,6 @@ NX_VEGA_ENV=STAGNET1
NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
NX_VEGA_URL=https://api.n00.stagnet1.vega.xyz/graphql
NX_VEGA_WALLET_URL=http://localhost:1789
NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket

View File

@ -3,7 +3,6 @@ NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-exp
NX_TENDERMINT_URL=https://n01.stagnet3.vega.xyz/tm
NX_TENDERMINT_WEBSOCKET_URL=wss://n01.stagnet3.vega.xyz/tm/websocket
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_ENV=STAGNET3
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

View File

@ -1,11 +1,12 @@
# App configuration variables
NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
NX_TENDERMINT_URL=https://be.testnet.vega.xyz
NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/
NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.testnet.vega.xyz/
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
NX_VEGA_ENV=TESTNET
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
NX_VEGA_URL=https://api.n09.testnet.vega.xyz/graphql
NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
NX_VEGA_NETWORKS={}

View File

@ -2,7 +2,6 @@
NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
NX_TENDERMINT_URL=http://localhost:26607/
NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
NX_VEGA_URL=http://localhost:3003/query
NX_VEGA_ENV=CUSTOM
NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
NX_BLOCK_EXPLORER=

View File

@ -45,22 +45,21 @@ yarn nx run explorer:serve --env={env} # e.g. stagnet3
There are a few different configuration options offered for this app:
| **Flag** | **Purpose** |
| -------------------------------- | ---------------------------------------------------------------------------------------------------- | --- |
| `NX_CHAIN_EXPLORER_URL` | The URL of the chain explorer service for decoding transactions |
| `NX_TENDERMINT_URL` | The Tendermint REST URL for the Vega consesus engine |
| `NX_TENDERMINT_WEBSOCKET_URL` | The Tendermint Websocket URL for the Vega consensus engine |
| `NX_VEGA_URL` | The GraphQl query endpoint of a [Vega data node](https://github.com/vegaprotocol/networks#data-node) |
| `NX_VEGA_ENV` | The name of the currently connected vega environment | |
| `NX_EXPLORER_ASSETS` | Enable the assets page for the explorer |
| `NX_EXPLORER_GENESIS` | Enable the genesis page for the explorer |
| `NX_EXPLORER_GOVERNANCE` | Enable the governance page for the explorer |
| `NX_EXPLORER_MARKETS` | Enable the markets page for the explorer |
| `NX_EXPLORER_ORACLES` | Enable the oracles page for the explorer |
| `NX_EXPLORER_TXS_LIST` | Enable the transactions list page for the explorer |
| `NX_EXPLORER_NETWORK_PARAMETERS` | Enable the network parameters page for the explorer |
| `NX_EXPLORER_PARTIES` | Enable the parties page for the explorer |
| `NX_EXPLORER_VALIDATORS` | Enable the validators page for the explorer |
| **Flag** | **Purpose** |
| -------------------------------- | --------------------------------------------------------------- | --- |
| `NX_CHAIN_EXPLORER_URL` | The URL of the chain explorer service for decoding transactions |
| `NX_TENDERMINT_URL` | The Tendermint REST URL for the Vega consesus engine |
| `NX_TENDERMINT_WEBSOCKET_URL` | The Tendermint Websocket URL for the Vega consensus engine |
| `NX_VEGA_ENV` | The name of the currently connected vega environment | |
| `NX_EXPLORER_ASSETS` | Enable the assets page for the explorer |
| `NX_EXPLORER_GENESIS` | Enable the genesis page for the explorer |
| `NX_EXPLORER_GOVERNANCE` | Enable the governance page for the explorer |
| `NX_EXPLORER_MARKETS` | Enable the markets page for the explorer |
| `NX_EXPLORER_ORACLES` | Enable the oracles page for the explorer |
| `NX_EXPLORER_TXS_LIST` | Enable the transactions list page for the explorer |
| `NX_EXPLORER_NETWORK_PARAMETERS` | Enable the network parameters page for the explorer |
| `NX_EXPLORER_PARTIES` | Enable the parties page for the explorer |
| `NX_EXPLORER_VALIDATORS` | Enable the validators page for the explorer |
## Testing

View File

@ -0,0 +1,8 @@
query ExplorerAsset($id: ID!) {
asset(id: $id) {
id
name
status
decimals
}
}

View File

@ -0,0 +1,51 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type ExplorerAssetQueryVariables = Types.Exact<{
id: Types.Scalars['ID'];
}>;
export type ExplorerAssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, status: Types.AssetStatus, decimals: number } | null };
export const ExplorerAssetDocument = gql`
query ExplorerAsset($id: ID!) {
asset(id: $id) {
id
name
status
decimals
}
}
`;
/**
* __useExplorerAssetQuery__
*
* To run a query within a React component, call `useExplorerAssetQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerAssetQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useExplorerAssetQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useExplorerAssetQuery(baseOptions: Apollo.QueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
}
export function useExplorerAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
}
export type ExplorerAssetQueryHookResult = ReturnType<typeof useExplorerAssetQuery>;
export type ExplorerAssetLazyQueryHookResult = ReturnType<typeof useExplorerAssetLazyQuery>;
export type ExplorerAssetQueryResult = Apollo.QueryResult<ExplorerAssetQuery, ExplorerAssetQueryVariables>;

View File

@ -0,0 +1,63 @@
import { MemoryRouter } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import type { MockedResponse } from '@apollo/client/testing';
import { render } from '@testing-library/react';
import AssetLink from './asset-link';
import { ExplorerAssetDocument } from './__generated__/Asset';
function renderComponent(id: string, mock: MockedResponse[]) {
return (
<MockedProvider mocks={mock}>
<MemoryRouter>
<AssetLink id={id} />
</MemoryRouter>
</MockedProvider>
);
}
describe('Asset link component', () => {
it('Renders the ID at first', () => {
const res = render(renderComponent('123', []));
expect(res.getByText('123')).toBeInTheDocument();
});
it('Renders the asset name when the query returns a result', async () => {
const mock = {
request: {
query: ExplorerAssetDocument,
variables: {
id: '123',
},
},
result: {
data: {
asset: {
id: '123',
name: 'test-label',
status: 'irrelevant-test-data',
decimals: 18,
},
},
},
};
const res = render(renderComponent('123', [mock]));
expect(res.getByText('123')).toBeInTheDocument();
expect(await res.findByText('test-label')).toBeInTheDocument();
});
it('Leaves the asset id when the asset is not found', async () => {
const mock = {
request: {
query: ExplorerAssetDocument,
variables: {
id: '123',
},
},
error: new Error('No such asset'),
};
const res = render(renderComponent('123', [mock]));
expect(await res.findByText('123')).toBeInTheDocument();
});
});

View File

@ -0,0 +1,35 @@
import React from 'react';
import { Routes } from '../../../routes/route-names';
import { useExplorerAssetQuery } from './__generated__/Asset';
import { Link } from 'react-router-dom';
import type { ComponentProps } from 'react';
export type AssetLinkProps = Partial<ComponentProps<typeof Link>> & {
id: string;
};
/**
* Given an asset ID, it will fetch the asset name and show that,
* with a link to the assets list. If the name does not come back
* it will use the ID instead.
*/
const AssetLink = ({ id, ...props }: AssetLinkProps) => {
const { data } = useExplorerAssetQuery({
variables: { id },
});
let label: string = id;
if (data?.asset?.name) {
label = data.asset.name;
}
return (
<Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
{label}
</Link>
);
};
export default AssetLink;

View File

@ -0,0 +1,19 @@
import React from 'react';
import { Routes } from '../../../routes/route-names';
import { Link } from 'react-router-dom';
import type { ComponentProps } from 'react';
export type BlockLinkProps = Partial<ComponentProps<typeof Link>> & {
height: string;
};
const BlockLink = ({ height, ...props }: BlockLinkProps) => {
return (
<Link className="underline" {...props} to={`/${Routes.BLOCKS}/${height}`}>
{height}
</Link>
);
};
export default BlockLink;

View File

@ -0,0 +1,5 @@
export { default as BlockLink } from './block-link/block-link';
export { default as PartyLink } from './party-link/party-link';
export { default as NodeLink } from './node-link/node-link';
export { default as MarketLink } from './market-link/market-link';
export { default as AssetLink } from './asset-link/asset-link';

View File

@ -0,0 +1,11 @@
query ExplorerMarket($id: ID!) {
market(id: $id) {
id
tradableInstrument {
instrument {
name
}
}
state
}
}

View File

@ -0,0 +1,54 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type ExplorerMarketQueryVariables = Types.Exact<{
id: Types.Scalars['ID'];
}>;
export type ExplorerMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string } } } | null };
export const ExplorerMarketDocument = gql`
query ExplorerMarket($id: ID!) {
market(id: $id) {
id
tradableInstrument {
instrument {
name
}
}
state
}
}
`;
/**
* __useExplorerMarketQuery__
*
* To run a query within a React component, call `useExplorerMarketQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerMarketQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useExplorerMarketQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useExplorerMarketQuery(baseOptions: Apollo.QueryHookOptions<ExplorerMarketQuery, ExplorerMarketQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ExplorerMarketQuery, ExplorerMarketQueryVariables>(ExplorerMarketDocument, options);
}
export function useExplorerMarketLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerMarketQuery, ExplorerMarketQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ExplorerMarketQuery, ExplorerMarketQueryVariables>(ExplorerMarketDocument, options);
}
export type ExplorerMarketQueryHookResult = ReturnType<typeof useExplorerMarketQuery>;
export type ExplorerMarketLazyQueryHookResult = ReturnType<typeof useExplorerMarketLazyQuery>;
export type ExplorerMarketQueryResult = Apollo.QueryResult<ExplorerMarketQuery, ExplorerMarketQueryVariables>;

View File

@ -0,0 +1,66 @@
import { MemoryRouter } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import type { MockedResponse } from '@apollo/client/testing';
import { render } from '@testing-library/react';
import MarketLink from './market-link';
import { ExplorerMarketDocument } from './__generated__/Market';
function renderComponent(id: string, mock: MockedResponse[]) {
return (
<MockedProvider mocks={mock}>
<MemoryRouter>
<MarketLink id={id} />
</MemoryRouter>
</MockedProvider>
);
}
describe('Market link component', () => {
it('Renders the ID at first', () => {
const res = render(renderComponent('123', []));
expect(res.getByText('123')).toBeInTheDocument();
});
it('Renders the market name when the query returns a result', async () => {
const mock = {
request: {
query: ExplorerMarketDocument,
variables: {
id: '123',
},
},
result: {
data: {
market: {
id: '123',
state: 'irrelevant-test-data',
tradableInstrument: {
instrument: {
name: 'test-label',
},
},
},
},
},
};
const res = render(renderComponent('123', [mock]));
expect(res.getByText('123')).toBeInTheDocument();
expect(await res.findByText('test-label')).toBeInTheDocument();
});
it('Leaves the market id when the market is not found', async () => {
const mock = {
request: {
query: ExplorerMarketDocument,
variables: {
id: '123',
},
},
error: new Error('No such market'),
};
const res = render(renderComponent('123', [mock]));
expect(await res.findByText('123')).toBeInTheDocument();
});
});

View File

@ -0,0 +1,35 @@
import React from 'react';
import { Routes } from '../../../routes/route-names';
import { useExplorerMarketQuery } from './__generated__/Market';
import { Link } from 'react-router-dom';
import type { ComponentProps } from 'react';
export type MarketLinkProps = Partial<ComponentProps<typeof Link>> & {
id: string;
};
/**
* Given a market ID, it will fetch the market name and show that,
* with a link to the markets list. If the name does not come back
* it will use the ID instead
*/
const MarketLink = ({ id, ...props }: MarketLinkProps) => {
const { data } = useExplorerMarketQuery({
variables: { id },
});
let label: string = id;
if (data?.market?.tradableInstrument.instrument.name) {
label = data.market.tradableInstrument.instrument.name;
}
return (
<Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
{label}
</Link>
);
};
export default MarketLink;

View File

@ -0,0 +1,7 @@
query ExplorerNode($id: ID!) {
node(id: $id) {
id
name
status
}
}

View File

@ -0,0 +1,50 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type ExplorerNodeQueryVariables = Types.Exact<{
id: Types.Scalars['ID'];
}>;
export type ExplorerNodeQuery = { __typename?: 'Query', node?: { __typename?: 'Node', id: string, name: string, status: Types.NodeStatus } | null };
export const ExplorerNodeDocument = gql`
query ExplorerNode($id: ID!) {
node(id: $id) {
id
name
status
}
}
`;
/**
* __useExplorerNodeQuery__
*
* To run a query within a React component, call `useExplorerNodeQuery` and pass it any options that fit your needs.
* When your component renders, `useExplorerNodeQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useExplorerNodeQuery({
* variables: {
* id: // value for 'id'
* },
* });
*/
export function useExplorerNodeQuery(baseOptions: Apollo.QueryHookOptions<ExplorerNodeQuery, ExplorerNodeQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ExplorerNodeQuery, ExplorerNodeQueryVariables>(ExplorerNodeDocument, options);
}
export function useExplorerNodeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerNodeQuery, ExplorerNodeQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<ExplorerNodeQuery, ExplorerNodeQueryVariables>(ExplorerNodeDocument, options);
}
export type ExplorerNodeQueryHookResult = ReturnType<typeof useExplorerNodeQuery>;
export type ExplorerNodeLazyQueryHookResult = ReturnType<typeof useExplorerNodeLazyQuery>;
export type ExplorerNodeQueryResult = Apollo.QueryResult<ExplorerNodeQuery, ExplorerNodeQueryVariables>;

View File

@ -0,0 +1,62 @@
import { MemoryRouter } from 'react-router-dom';
import { MockedProvider } from '@apollo/client/testing';
import type { MockedResponse } from '@apollo/client/testing';
import { render } from '@testing-library/react';
import NodeLink from './node-link';
import { ExplorerNodeDocument } from './__generated__/Node';
function renderComponent(id: string, mock: MockedResponse[]) {
return (
<MockedProvider mocks={mock}>
<MemoryRouter>
<NodeLink id={id} />
</MemoryRouter>
</MockedProvider>
);
}
describe('Node link component', () => {
it('Renders the ID at first', () => {
const res = render(renderComponent('123', []));
expect(res.getByText('123')).toBeInTheDocument();
});
it('Renders the node name when the query returns a result', async () => {
const mock = {
request: {
query: ExplorerNodeDocument,
variables: {
id: '123',
},
},
result: {
data: {
node: {
id: '123',
status: 'irrelevant-test-data',
name: 'test-label',
},
},
},
};
const res = render(renderComponent('123', [mock]));
expect(res.getByText('123')).toBeInTheDocument();
expect(await res.findByText('test-label')).toBeInTheDocument();
});
it('Leaves the node id when the node is not found', async () => {
const mock = {
request: {
query: ExplorerNodeDocument,
variables: {
id: '123',
},
},
error: new Error('No such node'),
};
const res = render(renderComponent('123', [mock]));
expect(await res.findByText('123')).toBeInTheDocument();
});
});

View File

@ -0,0 +1,30 @@
import React from 'react';
import { Routes } from '../../../routes/route-names';
import { useExplorerNodeQuery } from './__generated__/Node';
import { Link } from 'react-router-dom';
import type { ComponentProps } from 'react';
export type NodeLinkProps = Partial<ComponentProps<typeof Link>> & {
id: string;
};
const NodeLink = ({ id, ...props }: NodeLinkProps) => {
const { data } = useExplorerNodeQuery({
variables: { id },
});
let label: string = id;
if (data?.node?.name) {
label = data.node.name;
}
return (
<Link className="underline" {...props} to={`/${Routes.VALIDATORS}#${id}`}>
{label}
</Link>
);
};
export default NodeLink;

View File

@ -0,0 +1,19 @@
import React from 'react';
import { Routes } from '../../../routes/route-names';
import { Link } from 'react-router-dom';
import type { ComponentProps } from 'react';
export type PartyLinkProps = Partial<ComponentProps<typeof Link>> & {
id: string;
};
const PartyLink = ({ id, ...props }: PartyLinkProps) => {
return (
<Link className="underline" {...props} to={`/${Routes.PARTIES}/${id}`}>
{id}
</Link>
);
};
export default PartyLink;

View File

@ -41,10 +41,10 @@ describe('NestedDataList', () => {
const parent = getAllByRole('listitem', { name: 'Validator Heartbeat' });
const nestedContainer = parent[0].querySelector('[aria-hidden]');
const expandBtn = parent[0].querySelector('button');
expect(nestedContainer).toHaveAttribute('aria-hidden', 'true');
expect(nestedContainer).toHaveAttribute('aria-hidden', 'false');
await user.click(expandBtn as HTMLButtonElement);
await waitFor(() => nestedContainer);
expect(nestedContainer).toHaveAttribute('aria-hidden', 'false');
expect(nestedContainer).toHaveAttribute('aria-hidden', 'true');
});
it('add border to the title of the parent', () => {

View File

@ -55,7 +55,7 @@ const NestedDataListItem = ({
value,
index,
}: NestedDataListItemProps) => {
const [isCollapsed, setCollapsed] = useState(true);
const [isCollapsed, setCollapsed] = useState(false);
const toggleVisible = useCallback(
(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
event.stopPropagation();

View File

@ -0,0 +1,71 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import { TableRow, TableCell } from '../../../table';
import { BlockLink, PartyLink } from '../../../links/';
import { TimeAgo } from '../../../time-ago';
import type { BlockExplorerTransactionResult } from '../../../../routes/types/block-explorer-response';
import type { TendermintBlocksResponse } from '../../../../routes/blocks/tendermint-blocks-response';
interface TxDetailsSharedProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* These rows are shown for every transaction type, providing a consistent set of rows for the top
* of a transaction details row. The order is relatively arbitrary but felt right - it might need to
* change as the views get more bespoke.
*/
export const TxDetailsShared = ({
txData,
pubKey,
blockData,
}: TxDetailsSharedProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const time: string = blockData?.result.block.header.time || '';
const height: string = blockData?.result.block.header.height || '';
let timeFormatted = '';
if (time) {
timeFormatted = new Date(time).toLocaleString();
}
return (
<>
<TableRow modifier="bordered">
<TableCell>{t('Hash')}</TableCell>
<TableCell>{txData.hash}</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Submitter')}</TableCell>
<TableCell>{pubKey ? <PartyLink id={pubKey} /> : '-'}</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Block')}</TableCell>
<TableCell>
<BlockLink height={height} />
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Time')}</TableCell>
<TableCell>
{time ? (
<div>
<span className="mr-5">{timeFormatted} </span>
<span>
<TimeAgo date={time} />
</span>
</div>
) : (
'-'
)}
</TableCell>
</TableRow>
</>
);
};

View File

@ -0,0 +1,75 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type {
BlockExplorerTransactionResult,
BatchMarketInstructions,
} from '../../../routes/types/block-explorer-response';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableWithTbody, TableRow, TableCell } from '../../table';
interface TxDetailsBatchProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* BatchMarketInstructions are sets of changes in three categories: new orders (submissions),
* order change s(amendments) and cancellations.
*
* Design considerations for batch:
* - So far it's very basic details about the size of the batch
*/
export const TxDetailsBatch = ({
txData,
pubKey,
blockData,
}: TxDetailsBatchProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const cmd = txData.command as BatchMarketInstructions;
const batchSubmissions = cmd.batchMarketInstructions.submissions.length;
const batchAmendments = cmd.batchMarketInstructions.amendments.length;
const batchCancellations = cmd.batchMarketInstructions.cancellations.length;
const batchTotal = batchSubmissions + batchAmendments + batchCancellations;
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
<TableRow modifier="bordered">
<TableCell>{t('Batch size')}</TableCell>
<TableCell>
<span>{batchTotal}</span>
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>
<span className="ml-5">{t('Submissions')}</span>
</TableCell>
<TableCell>
<span>{batchSubmissions}</span>
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>
<span className="ml-5">{t('Amendments')}</span>
</TableCell>
<TableCell>
<span>{batchAmendments}</span>
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>
<span className="ml-5">{t('Cancellations')}</span>
</TableCell>
<TableCell>
<span>{batchCancellations}</span>
</TableCell>
</TableRow>
</TableWithTbody>
);
};

View File

@ -0,0 +1,64 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type {
BlockExplorerTransactionResult,
ChainEvent,
} from '../../../routes/types/block-explorer-response';
import { AssetLink, PartyLink } from '../../links';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableCell, TableRow, TableWithTbody } from '../../table';
interface TxDetailsChainEventProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* Chain events are external blockchain events (e.g. Ethereum) reported by bridge
* Multiple events will relay the same data, from each validator, so that the
* deposit/withdrawal can be verified independently.
*
* Design considerations so far:
* - The ethereum address should be a link to an Ethereum explorer
* - Sender and recipient are shown because they are easy
* - Amount is not shown because there is no formatter by asset component
*/
export const TxDetailsChainEvent = ({
txData,
pubKey,
blockData,
}: TxDetailsChainEventProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const cmd = txData.command as ChainEvent;
const assetId = cmd.chainEvent.erc20.deposit.vegaAssetId;
const sender = cmd.chainEvent.erc20.deposit.sourceEthereumAddress;
const recipient = cmd.chainEvent.erc20.deposit.targetPartyId;
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
<TableRow modifier="bordered">
<TableCell>{t('Asset')}</TableCell>
<TableCell>
<AssetLink id={assetId} />
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Sender')}</TableCell>
<TableCell>
<span>{sender}</span>
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Recipient')}</TableCell>
<TableCell>
<PartyLink id={recipient} />
</TableCell>
</TableRow>
</TableWithTbody>
);
};

View File

@ -0,0 +1,83 @@
import React, { useMemo } from 'react';
import { DATA_SOURCES } from '../../../config';
import { t, useFetch } from '@vegaprotocol/react-helpers';
import { TxDetailsOrder } from './tx-order';
import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsHeartbeat } from './tx-hearbeat';
import { TxDetailsLPAmend } from './tx-lp-amend';
import { TxDetailsGeneric } from './tx-generic';
import { TxDetailsBatch } from './tx-batch';
import { TxDetailsChainEvent } from './tx-chain-event';
import { TxContent } from '../../../routes/txs/id/tx-content';
type resultOrNull = BlockExplorerTransactionResult | undefined;
interface TxDetailsWrapperProps {
txData: resultOrNull;
pubKey: string | undefined;
height: string;
}
export const TxDetailsWrapper = ({
txData,
pubKey,
height,
}: TxDetailsWrapperProps) => {
const {
state: { data: blockData },
} = useFetch<TendermintBlocksResponse>(
`${DATA_SOURCES.tendermintUrl}/block?height=${height}`
);
const child = useMemo(() => getTransactionComponent(txData), [txData]);
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
return (
<>
<section>{child({ txData, pubKey, blockData })}</section>
<details title={t('Decoded transaction')} className="mt-3">
<summary className="cursor-pointer">{t('Decoded transaction')}</summary>
<TxContent data={txData} />
</details>
<details title={t('Raw transaction')} className="mt-3">
<summary className="cursor-pointer">{t('Raw transaction')}</summary>
<code className="break-all font-mono text-xs">
{blockData?.result.block.data.txs[txData.index]}
</code>
</details>
</>
);
};
/**
* Chooses the appropriate component to render the full details of a transaction
*
* @param txData
* @returns JSX.Element
*/
function getTransactionComponent(txData: resultOrNull) {
if (!txData) {
return TxDetailsGeneric;
}
switch (txData.type) {
case 'Submit Order':
return TxDetailsOrder;
case 'Validator Heartbeat':
return TxDetailsHeartbeat;
case 'Amend LiquidityProvision Order':
return TxDetailsLPAmend;
case 'Batch Market Instructions':
return TxDetailsBatch;
case 'Chain Event':
return TxDetailsChainEvent;
default:
return TxDetailsGeneric;
}
}

View File

@ -0,0 +1,32 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableWithTbody } from '../../table';
interface TxDetailsGenericProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* If there is not yet a custom component for a transaction, just display
* the basic details. This allows someone to view the decoded transaction.
*/
export const TxDetailsGeneric = ({
txData,
pubKey,
blockData,
}: TxDetailsGenericProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
</TableWithTbody>
);
};

View File

@ -0,0 +1,86 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type {
BlockExplorerTransactionResult,
ValidatorHeartbeat,
} from '../../../routes/types/block-explorer-response';
import { BlockLink, NodeLink } from '../../links/';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableCell, TableRow, TableWithTbody } from '../../table';
/**
* Returns an integer representing how fresh the signature is, ranging from 1 to 500.
* Below 1 should be impossible - you can't sign a block before it is finished
* Any result about 500 is counted as stale in core and would be bad
*
* The precise freshness isn't that important, as long as it is within bounds
*
* @param txHeight string Block number that this signature was in
* @param signatureForHeight string Block number that this signature is signing
* @returns
*/
export function scoreFreshness(
txHeight: string,
signatureForHeight: string
): number {
const txHeightInt = parseInt(txHeight, 10);
const signatureForHeightInt = parseInt(signatureForHeight, 10);
return txHeightInt - signatureForHeightInt;
}
interface TxDetailsHeartbeatProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* Validator Heartbeat transactions are a way for non-consensus validators to signal that they
* are still alive, still following along, and still valid for consideration in the validator set.
* To indicate they are still alive, they use their Ethereum and Vega private keys to provide two
* signatures of a recent block on chain.
*
* Blocks must be signed within 500 seconds (i.e. roughly 500 blocks) to not be considered stale
*
* For the sake of block explorer, these design decisions were made:
* - The signature values are not interesting. They're available in details but not worth displaying
* - Freshness is a word that isn't used anywhere else. It's meant to imply how close to the lower
* bound the signature was. But it doesn't matter as long as it's less than 500.
* @param param0
* @returns
*/
export const TxDetailsHeartbeat = ({
txData,
pubKey,
blockData,
}: TxDetailsHeartbeatProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const cmd = txData.command as ValidatorHeartbeat;
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
<TableRow modifier="bordered">
<TableCell>{t('Node')}</TableCell>
<TableCell>
<NodeLink id={cmd.validatorHeartbeat.nodeId} />
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Signed block height')}</TableCell>
<TableCell>
<BlockLink height={cmd.blockHeight} />
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableCell>{t('Freshness (lower is better)')}</TableCell>
<TableCell>{scoreFreshness(txData.block, cmd.blockHeight)}</TableCell>
</TableRow>
</TableWithTbody>
);
};

View File

@ -0,0 +1,45 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type {
AmendLiquidityProvisionOrder,
BlockExplorerTransactionResult,
} from '../../../routes/types/block-explorer-response';
import { MarketLink } from '../../links/';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableCell, TableRow, TableWithTbody } from '../../table';
interface TxDetailsOrderProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* Specifies changes to the shape of a users Liquidity Commitment order for
* a specific market. So far this only displays the market, which is only
* because it's very easy to do so.
*/
export const TxDetailsLPAmend = ({
txData,
pubKey,
blockData,
}: TxDetailsOrderProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const cmd = txData.command as AmendLiquidityProvisionOrder;
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
<TableRow modifier="bordered">
<TableCell>{t('Market')}</TableCell>
<TableCell>
<MarketLink id={cmd.liquidityProvisionAmendment.marketId} />
</TableCell>
</TableRow>
</TableWithTbody>
);
};

View File

@ -0,0 +1,46 @@
import React from 'react';
import { t } from '@vegaprotocol/react-helpers';
import type {
BlockExplorerTransactionResult,
SubmitOrder,
} from '../../../routes/types/block-explorer-response';
import { MarketLink } from '../../links/';
import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
import { TxDetailsShared } from './shared/tx-details-shared';
import { TableCell, TableRow, TableWithTbody } from '../../table';
interface TxDetailsOrderProps {
txData: BlockExplorerTransactionResult | undefined;
pubKey: string | undefined;
blockData: TendermintBlocksResponse | undefined;
}
/**
* An order type is probably the most interesting type we'll see! Except until:
* https://github.com/vegaprotocol/vega/issues/6832 is complete, we can only
* fetch the actual transaction and not more details about the order. So for now
* this view is very basic
*/
export const TxDetailsOrder = ({
txData,
pubKey,
blockData,
}: TxDetailsOrderProps) => {
if (!txData) {
return <>{t('Awaiting Block Explorer transaction details')}</>;
}
const cmd = txData.command as SubmitOrder;
return (
<TableWithTbody>
<TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
<TableRow modifier="bordered">
<TableCell>{t('Market')}</TableCell>
<TableCell>
<MarketLink id={cmd.orderSubmission.marketId} />
</TableCell>
</TableRow>
</TableWithTbody>
);
};

View File

@ -3,6 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { Routes as RouteNames } from '../../route-names';
import { useFetch } from '@vegaprotocol/react-helpers';
import { MockedProvider } from '@apollo/client/testing';
jest.mock('@vegaprotocol/react-helpers', () => {
const original = jest.requireActual('@vegaprotocol/react-helpers');
@ -121,11 +122,13 @@ const createBlockResponse = (id: number = blockId) => {
const renderComponent = (id: number = blockId) => {
return (
<MemoryRouter initialEntries={[`/${RouteNames.BLOCKS}/${id}`]}>
<Routes>
<Route path={`/${RouteNames.BLOCKS}/:block`} element={<Block />} />
</Routes>
</MemoryRouter>
<MockedProvider>
<MemoryRouter initialEntries={[`/${RouteNames.BLOCKS}/${id}`]}>
<Routes>
<Route path={`/${RouteNames.BLOCKS}/:block`} element={<Block />} />
</Routes>
</MemoryRouter>
</MockedProvider>
);
};
@ -168,11 +171,13 @@ describe('Block', () => {
expect(screen.getByTestId('block-header')).toHaveTextContent(
`BLOCK ${blockId}`
);
const expectedValidator = '1C9B6E2708F8217F8D5BFC8D8734ED9A5BC19B21';
const proposer = screen.getByTestId('block-validator');
expect(proposer).toHaveTextContent(
'1C9B6E2708F8217F8D5BFC8D8734ED9A5BC19B21'
expect(proposer).toHaveTextContent(expectedValidator);
expect(proposer).toHaveAttribute(
'href',
`/${RouteNames.VALIDATORS}#${expectedValidator}`
);
expect(proposer).toHaveAttribute('href', `/${RouteNames.VALIDATORS}`);
expect(screen.getByTestId('block-time')).toHaveTextContent(
'59 minutes ago'
);

View File

@ -15,8 +15,8 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
import { Button } from '@vegaprotocol/ui-toolkit';
import { Routes } from '../../route-names';
import { RenderFetched } from '../../../components/render-fetched';
import { HighlightedLink } from '../../../components/highlighted-link';
import { t, useFetch } from '@vegaprotocol/react-helpers';
import { NodeLink } from '../../../components/links';
const Block = () => {
const { block } = useParams<{ block: string }>();
@ -60,9 +60,8 @@ const Block = () => {
<TableRow modifier="bordered">
<TableHeader scope="row">Mined by</TableHeader>
<TableCell modifier="bordered">
<HighlightedLink
to={`/${Routes.VALIDATORS}`}
text={blockData.result.block.header.proposer_address}
<NodeLink
id={blockData.result.block.header.proposer_address}
data-testid="block-validator"
/>
</TableCell>
@ -80,6 +79,12 @@ const Block = () => {
)}
</TableCell>
</TableRow>
<TableRow modifier="bordered">
<TableHeader scope="row">Transactions</TableHeader>
<TableCell modifier="bordered">
<span>{blockData.result.block.data.txs.length}</span>
</TableCell>
</TableRow>
</TableWithTbody>
{blockData.result.block.data.txs.length > 0 ? (
<TxsPerBlock blockHeight={block} />

View File

@ -8,7 +8,7 @@ export type ExplorerPartyAssetsQueryVariables = Types.Exact<{
}>;
export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } } } } | null> | null } | null } }> } | null };
export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } }, market?: { __typename?: 'Market', id: string } | null } } | null> | null } | null } }> } | null };
export const ExplorerPartyAssetsDocument = gql`
@ -49,6 +49,9 @@ export const ExplorerPartyAssetsDocument = gql`
}
type
balance
market {
id
}
}
}
}

View File

@ -69,9 +69,11 @@ const Party = () => {
return (
<InfoPanel title={account.asset.name} id={account.asset.id}>
<section>
<dl className="flex gap-2">
<dl className="flex gap-2 flex-wrap">
<dt className="text-zinc-500 dark:text-zinc-400 text-md">
{t('Balance')} ({account.asset.symbol})
<p>
{t('Balance')} ({account.asset.symbol})
</p>
</dt>
<dd className="text-md">
{addDecimalsFormatNumber(

View File

@ -35,6 +35,9 @@ query ExplorerPartyAssets($partyId: ID!) {
}
type
balance
market {
id
}
}
}
}

View File

@ -3,7 +3,6 @@ import { Link, useParams } from 'react-router-dom';
import { useFetch } from '@vegaprotocol/react-helpers';
import { DATA_SOURCES } from '../../../config';
import { RenderFetched } from '../../../components/render-fetched';
import { TxContent } from './tx-content';
import { TxDetails } from './tx-details';
import type { BlockExplorerTransaction } from '../../../routes/types/block-explorer-response';
import { toNonHex } from '../../../components/search/detect-search';
@ -36,24 +35,18 @@ const Tx = () => {
</Link>
<PageHeader
title={hash}
prefix="Transaction"
copy
title="transaction"
truncateStart={5}
truncateEnd={9}
className="mb-5"
/>
<RenderFetched error={tTxError} loading={tTxLoading}>
<>
<TxDetails
className="mb-28"
txData={data?.transaction}
pubKey={data?.transaction.submitter}
/>
<TxContent data={data?.transaction} />
</>
<TxDetails
className="mb-28"
txData={data?.transaction}
pubKey={data?.transaction.submitter}
/>
</RenderFetched>
</section>
);

View File

@ -1,6 +1,7 @@
import { t } from '@vegaprotocol/react-helpers';
import { StatusMessage } from '../../../components/status-message';
import { NestedDataList } from '../../../components/nested-data-list';
import type { UnknownObject } from '../../../components/nested-data-list';
import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
interface TxContentProps {
@ -16,5 +17,5 @@ export const TxContent = ({ data }: TxContentProps) => {
);
}
return <NestedDataList data={data.command} />;
return <NestedDataList data={data.command as unknown as UnknownObject} />;
};

View File

@ -1,9 +1,14 @@
import { BrowserRouter as Router } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import { TxDetails } from './tx-details';
import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
import type {
BlockExplorerTransactionResult,
ValidatorHeartbeat,
} from '../../../routes/types/block-explorer-response';
const pubKey = 'test';
// Note: Long enough that there is a truncated output and a full output
const pubKey =
'67755549e43e95f0697f83b2bf419c6ccc18eee32a8a61b8ba6f59471b86fbef';
const hash = '7416753A30622A9E24A06F0172D6C33A95186B36806D96345C6DC5A23FA3F283';
const height = '52987';
@ -15,7 +20,7 @@ const txData: BlockExplorerTransactionResult = {
code: 0,
cursor: `${height}.0`,
type: 'type',
command: {},
command: {} as ValidatorHeartbeat,
};
const renderComponent = (txData: BlockExplorerTransactionResult) => (
@ -25,13 +30,9 @@ const renderComponent = (txData: BlockExplorerTransactionResult) => (
);
describe('Transaction details', () => {
it('Renders the pubKey', () => {
it('Renders the details common to all txs', () => {
render(renderComponent(txData));
expect(screen.getByText(pubKey)).toBeInTheDocument();
});
it('Renders the height', () => {
render(renderComponent(txData));
expect(screen.getByText(height)).toBeInTheDocument();
expect(screen.getByText(hash)).toBeInTheDocument();
});
});

View File

@ -4,6 +4,7 @@ import type { BlockExplorerTransactionResult } from '../../../routes/types/block
import React from 'react';
import { TruncateInline } from '../../../components/truncate/truncate';
import { Link } from 'react-router-dom';
import { TxDetailsWrapper } from '../../../components/txs/details/tx-details-wrapper';
interface TxDetailsProps {
txData: BlockExplorerTransactionResult | undefined;
@ -24,7 +25,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
return (
<section className="mb-10">
<h3 className="text-3xl xl:text-4xl uppercase font-alpha mb-4">
<h3 className="text-l xl:text-l uppercase mb-4">
{txData.type} by{' '}
<Link
className="font-bold underline"
@ -33,17 +34,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
{truncatedSubmitter}
</Link>
</h3>
<p className="text-xl xl:text-2xl uppercase font-alpha">
Block{' '}
<Link
className="font-bold underline"
to={`/${Routes.BLOCKS}/${txData.block}`}
>
{txData.block}
</Link>
{', '}
Index {txData.index}
</p>
<TxDetailsWrapper height={txData.block} txData={txData} pubKey={pubKey} />
</section>
);
};

View File

@ -1,3 +1,5 @@
import type { UnknownObject } from '../../components/nested-data-list';
export interface BlockExplorerTransactionResult {
block: string;
index: number;
@ -6,7 +8,13 @@ export interface BlockExplorerTransactionResult {
type: string;
code: number;
cursor: string;
command: Record<string, unknown>;
command:
| ValidatorHeartbeat
| SubmitOrder
| StateVariableProposal
| AmendLiquidityProvisionOrder
| BatchMarketInstructions
| ChainEvent;
}
export interface BlockExplorerTransactions {
@ -16,3 +24,95 @@ export interface BlockExplorerTransactions {
export interface BlockExplorerTransaction {
transaction: BlockExplorerTransactionResult;
}
export interface ValidatorHeartbeat {
blockHeight: string;
nonce: string;
validatorHeartbeat: {
nodeId: string;
ethereumSignature: ValidatorHeartbeatSignature;
vegaSignature: ValidatorHeartbeatSignature;
};
}
export interface ValidatorHeartbeatSignature {
algo: string;
value: string;
version: number;
}
export interface SubmitOrder {
orderSubmission: {
marketId: string;
};
}
export interface StateVariableProposal {
proposal: {
stateVarId: string;
eventId: string;
kvb: StateVariableProposalValues[];
};
}
export interface StateVariableProposalValues {
key: 'up' | 'down';
tolerance: string;
value: UnknownObject;
}
export interface AmendLiquidityProvisionOrder {
blockHeight: string;
nonce: string;
liquidityProvisionAmendment: {
marketId: string;
commitmentAmount: string;
fee: string;
sells: LiquidityProvisionOrderChange[];
buys: LiquidityProvisionOrderChange[];
reference: string;
};
}
export interface LiquidityProvisionOrderChange {
string: Reference;
proportion: number;
offset: string;
}
export interface BatchMarketInstructions {
blockHeight: string;
nonce: string;
batchMarketInstructions: {
amendments: BatchInstruction[];
submissions: BatchInstruction[];
cancellations: BatchCancellationInstruction[];
};
}
export interface BatchInstruction {
orderId: string;
marketId: string;
}
export interface BatchCancellationInstruction {
orderId: string;
marketId: string;
}
export interface ChainEvent {
blockHeight: string;
nonce: string;
chainEvent: {
erc20: {
deposit: ERC20Deposit;
};
};
}
export interface ERC20Deposit {
vegaAssetId: string;
sourceEthereumAddress: string;
targetPartyId: string;
amount: string;
}

View File

@ -6,7 +6,7 @@ const defaultOptions = {} as const;
export type ExplorerNodesQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type ExplorerNodesQuery = { __typename?: 'Query', nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null } } | null> | null } };
export type ExplorerNodesQuery = { __typename?: 'Query', nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, status: Types.NodeStatus, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null } } | null> | null } };
export const ExplorerNodesDocument = gql`
@ -22,6 +22,7 @@ export const ExplorerNodesDocument = gql`
tmPubkey
ethereumAddress
location
status
stakedByOperator
stakedByDelegates
stakedTotal
@ -31,8 +32,6 @@ export const ExplorerNodesDocument = gql`
offline
online
}
status
name
}
}
}

View File

@ -10,6 +10,7 @@ query ExplorerNodes {
tmPubkey
ethereumAddress
location
status
stakedByOperator
stakedByDelegates
stakedTotal
@ -19,8 +20,6 @@ query ExplorerNodes {
offline
online
}
status
name
}
}
}