From b47caa76673f1d2a5705321bac8334072144eead Mon Sep 17 00:00:00 2001 From: Edd Date: Wed, 14 Dec 2022 16:36:47 +0000 Subject: [PATCH] feat(explorer): improve party account list display (#2391) * feat(explorer): party account list as table --- .../asset-balance/asset-balance.tsx | 11 ++- ...r-stats.graphql => Explorer-stats.graphql} | 0 .../{explorer-stats.ts => Explorer-stats.ts} | 0 .../{node-vote.graphql => Node-vote.graphql} | 0 .../src/app/components/txs/txs-stats-info.tsx | 4 +- .../assets/{assets.graphql => Assets.graphql} | 0 .../{proposals.graphql => Proposals.graphql} | 0 .../{proposals.ts => Proposals.ts} | 0 .../src/app/routes/governance/index.tsx | 2 +- .../{markets.graphql => Markets.graphql} | 0 ...ty-assets.graphql => Party-assets.graphql} | 48 ++++----- .../{party-assets.ts => Party-assets.ts} | 54 +++++----- .../parties/id/components/party-accounts.tsx | 81 +++++++++++++++ .../{error => components}/party-id-error.tsx | 0 .../src/app/routes/parties/id/index.tsx | 98 ++++--------------- .../{nodes.graphql => Nodes.graphql} | 0 .../__generated__/{nodes.ts => Nodes.ts} | 0 .../src/app/routes/validators/index.tsx | 2 +- 18 files changed, 167 insertions(+), 133 deletions(-) rename apps/explorer/src/app/components/txs/{explorer-stats.graphql => Explorer-stats.graphql} (100%) rename apps/explorer/src/app/components/txs/__generated__/{explorer-stats.ts => Explorer-stats.ts} (100%) rename apps/explorer/src/app/components/txs/details/{node-vote.graphql => Node-vote.graphql} (100%) rename apps/explorer/src/app/routes/assets/{assets.graphql => Assets.graphql} (100%) rename apps/explorer/src/app/routes/governance/{proposals.graphql => Proposals.graphql} (100%) rename apps/explorer/src/app/routes/governance/__generated__/{proposals.ts => Proposals.ts} (100%) rename apps/explorer/src/app/routes/markets/{markets.graphql => Markets.graphql} (100%) rename apps/explorer/src/app/routes/parties/id/{party-assets.graphql => Party-assets.graphql} (50%) rename apps/explorer/src/app/routes/parties/id/__generated__/{party-assets.ts => Party-assets.ts} (79%) create mode 100644 apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx rename apps/explorer/src/app/routes/parties/id/{error => components}/party-id-error.tsx (100%) rename apps/explorer/src/app/routes/validators/{nodes.graphql => Nodes.graphql} (100%) rename apps/explorer/src/app/routes/validators/__generated__/{nodes.ts => Nodes.ts} (100%) diff --git a/apps/explorer/src/app/components/asset-balance/asset-balance.tsx b/apps/explorer/src/app/components/asset-balance/asset-balance.tsx index 3201fc4f9..076976832 100644 --- a/apps/explorer/src/app/components/asset-balance/asset-balance.tsx +++ b/apps/explorer/src/app/components/asset-balance/asset-balance.tsx @@ -5,13 +5,18 @@ import { useExplorerAssetQuery } from '../links/asset-link/__generated__/Asset'; export type AssetBalanceProps = { assetId: string; price: string; + showAssetLink?: boolean; }; /** * Given a market ID and a price it will fetch the market * and format the price in that market's decimal places. */ -const AssetBalance = ({ assetId, price }: AssetBalanceProps) => { +const AssetBalance = ({ + assetId, + price, + showAssetLink = true, +}: AssetBalanceProps) => { const { data } = useExplorerAssetQuery({ fetchPolicy: 'cache-first', variables: { id: assetId }, @@ -25,7 +30,9 @@ const AssetBalance = ({ assetId, price }: AssetBalanceProps) => { return (
{label}{' '} - {data?.asset?.id ? : null} + {showAssetLink && data?.asset?.id ? ( + + ) : null}
); }; diff --git a/apps/explorer/src/app/components/txs/explorer-stats.graphql b/apps/explorer/src/app/components/txs/Explorer-stats.graphql similarity index 100% rename from apps/explorer/src/app/components/txs/explorer-stats.graphql rename to apps/explorer/src/app/components/txs/Explorer-stats.graphql diff --git a/apps/explorer/src/app/components/txs/__generated__/explorer-stats.ts b/apps/explorer/src/app/components/txs/__generated__/Explorer-stats.ts similarity index 100% rename from apps/explorer/src/app/components/txs/__generated__/explorer-stats.ts rename to apps/explorer/src/app/components/txs/__generated__/Explorer-stats.ts diff --git a/apps/explorer/src/app/components/txs/details/node-vote.graphql b/apps/explorer/src/app/components/txs/details/Node-vote.graphql similarity index 100% rename from apps/explorer/src/app/components/txs/details/node-vote.graphql rename to apps/explorer/src/app/components/txs/details/Node-vote.graphql diff --git a/apps/explorer/src/app/components/txs/txs-stats-info.tsx b/apps/explorer/src/app/components/txs/txs-stats-info.tsx index 9107f4d93..cce817b24 100644 --- a/apps/explorer/src/app/components/txs/txs-stats-info.tsx +++ b/apps/explorer/src/app/components/txs/txs-stats-info.tsx @@ -2,8 +2,8 @@ import { t } from '@vegaprotocol/react-helpers'; import { useEffect } from 'react'; import { InfoBlock } from '../../components/info-block'; import { Panel } from '../../components/panel'; -import { useExplorerStatsQuery } from './__generated__/explorer-stats'; -import type { ExplorerStatsFieldsFragment } from './__generated__/explorer-stats'; +import { useExplorerStatsQuery } from './__generated__/Explorer-stats'; +import type { ExplorerStatsFieldsFragment } from './__generated__/Explorer-stats'; interface StatsMap { field: keyof ExplorerStatsFieldsFragment; diff --git a/apps/explorer/src/app/routes/assets/assets.graphql b/apps/explorer/src/app/routes/assets/Assets.graphql similarity index 100% rename from apps/explorer/src/app/routes/assets/assets.graphql rename to apps/explorer/src/app/routes/assets/Assets.graphql diff --git a/apps/explorer/src/app/routes/governance/proposals.graphql b/apps/explorer/src/app/routes/governance/Proposals.graphql similarity index 100% rename from apps/explorer/src/app/routes/governance/proposals.graphql rename to apps/explorer/src/app/routes/governance/Proposals.graphql diff --git a/apps/explorer/src/app/routes/governance/__generated__/proposals.ts b/apps/explorer/src/app/routes/governance/__generated__/Proposals.ts similarity index 100% rename from apps/explorer/src/app/routes/governance/__generated__/proposals.ts rename to apps/explorer/src/app/routes/governance/__generated__/Proposals.ts diff --git a/apps/explorer/src/app/routes/governance/index.tsx b/apps/explorer/src/app/routes/governance/index.tsx index 91ba3afd4..05c8e57b3 100644 --- a/apps/explorer/src/app/routes/governance/index.tsx +++ b/apps/explorer/src/app/routes/governance/index.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { RouteTitle } from '../../components/route-title'; import { SubHeading } from '../../components/sub-heading'; import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit'; -import { useExplorerProposalsQuery } from './__generated__/proposals'; +import { useExplorerProposalsQuery } from './__generated__/Proposals'; import { useDocumentTitle } from '../../hooks/use-document-title'; const Governance = () => { diff --git a/apps/explorer/src/app/routes/markets/markets.graphql b/apps/explorer/src/app/routes/markets/Markets.graphql similarity index 100% rename from apps/explorer/src/app/routes/markets/markets.graphql rename to apps/explorer/src/app/routes/markets/Markets.graphql diff --git a/apps/explorer/src/app/routes/parties/id/party-assets.graphql b/apps/explorer/src/app/routes/parties/id/Party-assets.graphql similarity index 50% rename from apps/explorer/src/app/routes/parties/id/party-assets.graphql rename to apps/explorer/src/app/routes/parties/id/Party-assets.graphql index 74a3f563e..553d2e618 100644 --- a/apps/explorer/src/app/routes/parties/id/party-assets.graphql +++ b/apps/explorer/src/app/routes/parties/id/Party-assets.graphql @@ -1,3 +1,28 @@ +fragment ExplorerPartyAssetsAccounts on AccountBalance { + asset { + name + id + decimals + symbol + source { + __typename + ... on ERC20 { + contractAddress + } + } + } + type + balance + market { + id + tradableInstrument { + instrument { + name + } + } + } +} + query ExplorerPartyAssets($partyId: ID!) { partiesConnection(id: $partyId) { edges { @@ -21,28 +46,7 @@ query ExplorerPartyAssets($partyId: ID!) { accountsConnection { edges { node { - asset { - name - id - decimals - symbol - source { - __typename - ... on ERC20 { - contractAddress - } - } - } - type - balance - market { - id - tradableInstrument { - instrument { - name - } - } - } + ...ExplorerPartyAssetsAccounts } } } diff --git a/apps/explorer/src/app/routes/parties/id/__generated__/party-assets.ts b/apps/explorer/src/app/routes/parties/id/__generated__/Party-assets.ts similarity index 79% rename from apps/explorer/src/app/routes/parties/id/__generated__/party-assets.ts rename to apps/explorer/src/app/routes/parties/id/__generated__/Party-assets.ts index 7b3bf16de..e1d89ac74 100644 --- a/apps/explorer/src/app/routes/parties/id/__generated__/party-assets.ts +++ b/apps/explorer/src/app/routes/parties/id/__generated__/Party-assets.ts @@ -3,6 +3,8 @@ import * as Types from '@vegaprotocol/types'; import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; const defaultOptions = {} as const; +export type ExplorerPartyAssetsAccountsFragment = { __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, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string } } } | null }; + export type ExplorerPartyAssetsQueryVariables = Types.Exact<{ partyId: Types.Scalars['ID']; }>; @@ -10,7 +12,32 @@ 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 } }, market?: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string } } } | null } } | null> | null } | null } }> } | null }; - +export const ExplorerPartyAssetsAccountsFragmentDoc = gql` + fragment ExplorerPartyAssetsAccounts on AccountBalance { + asset { + name + id + decimals + symbol + source { + __typename + ... on ERC20 { + contractAddress + } + } + } + type + balance + market { + id + tradableInstrument { + instrument { + name + } + } + } +} + `; export const ExplorerPartyAssetsDocument = gql` query ExplorerPartyAssets($partyId: ID!) { partiesConnection(id: $partyId) { @@ -35,28 +62,7 @@ export const ExplorerPartyAssetsDocument = gql` accountsConnection { edges { node { - asset { - name - id - decimals - symbol - source { - __typename - ... on ERC20 { - contractAddress - } - } - } - type - balance - market { - id - tradableInstrument { - instrument { - name - } - } - } + ...ExplorerPartyAssetsAccounts } } } @@ -64,7 +70,7 @@ export const ExplorerPartyAssetsDocument = gql` } } } - `; + ${ExplorerPartyAssetsAccountsFragmentDoc}`; /** * __useExplorerPartyAssetsQuery__ diff --git a/apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx b/apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx new file mode 100644 index 000000000..32f703c39 --- /dev/null +++ b/apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx @@ -0,0 +1,81 @@ +import { t } from '@vegaprotocol/react-helpers'; +import get from 'lodash/get'; +import AssetBalance from '../../../../components/asset-balance/asset-balance'; +import { AssetLink, MarketLink } from '../../../../components/links'; +import { Table, TableRow } from '../../../../components/table'; +import type * as Schema from '@vegaprotocol/types'; +import type { ExplorerPartyAssetsAccountsFragment } from '../__generated__/Party-assets'; + +const accountTypeString: Record = { + ACCOUNT_TYPE_BOND: t('Bond'), + ACCOUNT_TYPE_EXTERNAL: t('External'), + ACCOUNT_TYPE_FEES_INFRASTRUCTURE: t('Fees (Infrastructure)'), + ACCOUNT_TYPE_FEES_LIQUIDITY: t('Fees (Liquidity)'), + ACCOUNT_TYPE_FEES_MAKER: t('Fees (Maker)'), + ACCOUNT_TYPE_GENERAL: t('General'), + ACCOUNT_TYPE_GLOBAL_INSURANCE: t('Global Insurance Pool'), + ACCOUNT_TYPE_GLOBAL_REWARD: t('Global Reward Pool'), + ACCOUNT_TYPE_INSURANCE: t('Insurance'), + ACCOUNT_TYPE_MARGIN: t('Margin'), + ACCOUNT_TYPE_PENDING_TRANSFERS: t('Pending Transfers'), + ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: t('Reward - LP Fees received'), + ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES: t('Reward - Maker fees paid'), + ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES: t('Reward - Maker fees received'), + ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: t('Reward - Market proposers'), + ACCOUNT_TYPE_SETTLEMENT: t('Settlement'), +}; + +interface PartyAccountsProps { + accounts: ExplorerPartyAssetsAccountsFragment[]; +} + +/** + * Renders a list of a party's accounts as a table. Currently unsorted, but could + * probably do with sorting by asset, and then within asset, by type with general + * appearing first and... tbd + */ +export const PartyAccounts = ({ accounts }: PartyAccountsProps) => { + return ( + + + + + + + + + + + {accounts.map((account) => { + const m = get(account, 'market.tradableInstrument.instrument.name'); + + return ( + + + + + + + ); + })} + +
{t('Type')}{t('Market')}{t('Balance')}{t('Asset')}
{accountTypeString[account.type]} + {account.market?.id ? ( + + ) : ( +

-

+ )} + 		+ + + +
+ ); +}; diff --git a/apps/explorer/src/app/routes/parties/id/error/party-id-error.tsx b/apps/explorer/src/app/routes/parties/id/components/party-id-error.tsx similarity index 100% rename from apps/explorer/src/app/routes/parties/id/error/party-id-error.tsx rename to apps/explorer/src/app/routes/parties/id/components/party-id-error.tsx diff --git a/apps/explorer/src/app/routes/parties/id/index.tsx b/apps/explorer/src/app/routes/parties/id/index.tsx index 47e70c04b..feb68e41a 100644 --- a/apps/explorer/src/app/routes/parties/id/index.tsx +++ b/apps/explorer/src/app/routes/parties/id/index.tsx @@ -1,40 +1,17 @@ -import { - t, - addDecimalsFormatNumber, - useScreenDimensions, -} from '@vegaprotocol/react-helpers'; +import { getNodes, t, useScreenDimensions } from '@vegaprotocol/react-helpers'; import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; import { SubHeading } from '../../../components/sub-heading'; import { Panel } from '../../../components/panel'; -import { InfoPanel } from '../../../components/info-panel'; import { toNonHex } from '../../../components/search/detect-search'; import { useTxsData } from '../../../hooks/use-txs-data'; import { TxsInfiniteList } from '../../../components/txs'; import { PageHeader } from '../../../components/page-header'; -import { useExplorerPartyAssetsQuery } from './__generated__/party-assets'; -import type * as Schema from '@vegaprotocol/types'; -import get from 'lodash/get'; +import { useExplorerPartyAssetsQuery } from './__generated__/Party-assets'; +import type { ExplorerPartyAssetsAccountsFragment } from './__generated__/Party-assets'; import { useDocumentTitle } from '../../../hooks/use-document-title'; - -const accountTypeString: Record = { - ACCOUNT_TYPE_BOND: t('Bond'), - ACCOUNT_TYPE_EXTERNAL: t('External'), - ACCOUNT_TYPE_FEES_INFRASTRUCTURE: t('Fees (Infrastructure)'), - ACCOUNT_TYPE_FEES_LIQUIDITY: t('Fees (Liquidity)'), - ACCOUNT_TYPE_FEES_MAKER: t('Fees (Maker)'), - ACCOUNT_TYPE_GENERAL: t('General'), - ACCOUNT_TYPE_GLOBAL_INSURANCE: t('Global Insurance Pool'), - ACCOUNT_TYPE_GLOBAL_REWARD: t('Global Reward Pool'), - ACCOUNT_TYPE_INSURANCE: t('Insurance'), - ACCOUNT_TYPE_MARGIN: t('Margin'), - ACCOUNT_TYPE_PENDING_TRANSFERS: t('Pending Transfers'), - ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: t('Reward - LP Fees received'), - ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES: t('Reward - Maker fees paid'), - ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES: t('Reward - Maker fees received'), - ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: t('Reward - Market proposers'), - ACCOUNT_TYPE_SETTLEMENT: t('Settlement'), -}; +import GovernanceAssetBalance from '../../../components/asset-balance/governance-asset-balance'; +import { PartyAccounts } from './components/party-accounts'; const Party = () => { const { party } = useParams<{ party: string }>(); @@ -71,63 +48,23 @@ const Party = () => { ); - const accounts = ( -
- {p?.accountsConnection?.edges?.length ? ( - p.accountsConnection?.edges?.map((a) => { - const account = a?.node; - if (!account || !account.asset) { - return ''; - } - const m = get(account, 'market.tradableInstrument.instrument.name'); - - return ( - -
-
-
-

- {t('Balance')} ({account.asset.symbol}) -

-
-
- {addDecimalsFormatNumber( - account.balance, - account.asset.decimals - )} -
-
-
- - ); - }) - ) : ( - -

No Data

- - )} -
- ); - const staking = (
{p?.stakingSummary?.currentStakeAvailable ? ( - - ) : ( - -

Nothing staked for {party}

- - )} +

+ {t('Staking Balance: ')} + +

+ ) : null}
); + const accounts = getNodes( + p?.accountsConnection + ); + return (

{ <> {header} {t('Asset data')} - {accounts} - {t('Staking')} + {accounts ? : null} {staking} {t('Transactions')} diff --git a/apps/explorer/src/app/routes/validators/nodes.graphql b/apps/explorer/src/app/routes/validators/Nodes.graphql similarity index 100% rename from apps/explorer/src/app/routes/validators/nodes.graphql rename to apps/explorer/src/app/routes/validators/Nodes.graphql diff --git a/apps/explorer/src/app/routes/validators/__generated__/nodes.ts b/apps/explorer/src/app/routes/validators/__generated__/Nodes.ts similarity index 100% rename from apps/explorer/src/app/routes/validators/__generated__/nodes.ts rename to apps/explorer/src/app/routes/validators/__generated__/Nodes.ts diff --git a/apps/explorer/src/app/routes/validators/index.tsx b/apps/explorer/src/app/routes/validators/index.tsx index 6411ca9e7..fc121ffa2 100644 --- a/apps/explorer/src/app/routes/validators/index.tsx +++ b/apps/explorer/src/app/routes/validators/index.tsx @@ -6,7 +6,7 @@ import { 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 { useExplorerNodesQuery } from './__generated__/Nodes'; import { useDocumentTitle } from '../../hooks/use-document-title'; const Validators = () => {