From 5707654413478dd2efd61a1c4648af54c174ccca Mon Sep 17 00:00:00 2001 From: Edd Date: Wed, 22 Mar 2023 10:59:35 +0100 Subject: [PATCH] fix(explorer): expand party query --- .../asset-balance/asset-balance.tsx | 10 +- .../governance-asset-balance.tsx | 12 +- .../app/components/txs/txs-infinite-list.tsx | 12 +- .../parties/id/components/party-accounts.tsx | 5 - .../parties/id/components/party-block.tsx | 15 ++ .../src/app/routes/parties/id/index.tsx | 135 ++++++++++++++---- apps/explorer/src/app/routes/txs/id/index.tsx | 1 + 7 files changed, 149 insertions(+), 41 deletions(-) create mode 100644 apps/explorer/src/app/routes/parties/id/components/party-block.tsx 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 6a614c4b0..a64a43623 100644 --- a/apps/explorer/src/app/components/asset-balance/asset-balance.tsx +++ b/apps/explorer/src/app/components/asset-balance/asset-balance.tsx @@ -6,6 +6,7 @@ export type AssetBalanceProps = { assetId: string; price: string; showAssetLink?: boolean; + showAssetSymbol?: boolean; }; /** @@ -16,18 +17,21 @@ const AssetBalance = ({ assetId, price, showAssetLink = true, + showAssetSymbol = false, }: AssetBalanceProps) => { - const { data: asset } = useAssetDataProvider(assetId); + const { data: asset, loading } = useAssetDataProvider(assetId); const label = - asset && asset.decimals + !loading && asset && asset.decimals ? addDecimalsFormatNumber(price, asset.decimals) : price; return (
{label}{' '} - {showAssetLink && asset?.id ? : null} + {showAssetLink && asset?.id ? ( + + ) : null}
); }; diff --git a/apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx b/apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx index fe33f36fd..b389a46ee 100644 --- a/apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx +++ b/apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx @@ -13,11 +13,17 @@ const DEFAULT_DECIMALS = 18; * the governance asset first, which is set by a network parameter */ const GovernanceAssetBalance = ({ price }: GovernanceAssetBalanceProps) => { - const { data } = useExplorerGovernanceAssetQuery(); + const { data, loading } = useExplorerGovernanceAssetQuery(); - if (data && data.networkParameter?.value) { + if (!loading && data && data.networkParameter?.value) { const governanceAssetId = data.networkParameter.value; - return ; + return ( + + ); } else { return (
diff --git a/apps/explorer/src/app/components/txs/txs-infinite-list.tsx b/apps/explorer/src/app/components/txs/txs-infinite-list.tsx index 6ce52bfd0..00a2a6ba3 100644 --- a/apps/explorer/src/app/components/txs/txs-infinite-list.tsx +++ b/apps/explorer/src/app/components/txs/txs-infinite-list.tsx @@ -30,7 +30,7 @@ const NOOP = () => {}; const Item = ({ index, style, isLoading, error }: ItemProps) => { let content; if (error) { - content = t(`Cannot fetch transaction: ${error}`); + content = t(`Cannot fetch transaction`); } else if (isLoading) { content = ; } else { @@ -97,13 +97,13 @@ export const TxsInfiniteList = ({
- Transaction   + {t('Transaction')}   ID
-
Submitted By
-
Type
-
Block
-
Success
+
{t('Submitted By')}
+
{t('Type')}
+
{t('Block')}
+
{t('Success')}
= { diff --git a/apps/explorer/src/app/routes/parties/id/components/party-block.tsx b/apps/explorer/src/app/routes/parties/id/components/party-block.tsx new file mode 100644 index 000000000..76e6926b1 --- /dev/null +++ b/apps/explorer/src/app/routes/parties/id/components/party-block.tsx @@ -0,0 +1,15 @@ +import type { ReactNode } from 'react'; + +export interface PartyBlockProps { + children: ReactNode; + title: string; +} + +export function PartyBlock({ children, title }: PartyBlockProps) { + return ( +
+

{title}

+ {children} +
+ ); +} diff --git a/apps/explorer/src/app/routes/parties/id/index.tsx b/apps/explorer/src/app/routes/parties/id/index.tsx index 422968076..73f805cbc 100644 --- a/apps/explorer/src/app/routes/parties/id/index.tsx +++ b/apps/explorer/src/app/routes/parties/id/index.tsx @@ -1,10 +1,11 @@ -import { getNodes } from '@vegaprotocol/utils'; import { t } from '@vegaprotocol/i18n'; -import { useScreenDimensions } from '@vegaprotocol/react-helpers'; +import { + useDataProvider, + 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 { toNonHex } from '../../../components/search/detect-search'; import { useTxsData } from '../../../hooks/use-txs-data'; import { TxsInfiniteList } from '../../../components/txs'; @@ -12,7 +13,22 @@ import { PageHeader } from '../../../components/page-header'; import { useExplorerPartyAssetsQuery } from './__generated__/Party-assets'; import { useDocumentTitle } from '../../../hooks/use-document-title'; import GovernanceAssetBalance from '../../../components/asset-balance/governance-asset-balance'; -import { PartyAccounts } from './components/party-accounts'; +import { + Icon, + KeyValueTable, + KeyValueTableRow, + Loader, + Splash, +} from '@vegaprotocol/ui-toolkit'; +import { PartyBlock } from './components/party-block'; +import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@vegaprotocol/ui-toolkit'; +import { addDecimalsFixedFormatNumber } from '@vegaprotocol/utils'; const Party = () => { const { party } = useParams<{ party: string }>(); @@ -27,6 +43,16 @@ const Party = () => { filters, }); + const variables = useMemo(() => ({ partyId }), [partyId]); + const { + data: AccountData, + loading: AccountLoading, + error: AccountError, + } = useDataProvider({ + dataProvider: aggregatedAccountsDataProvider, + variables, + }); + const partyRes = useExplorerPartyAssetsQuery({ // Don't cache data for this query, party information can move quite quickly fetchPolicy: 'network-only', @@ -37,7 +63,7 @@ const Party = () => { const p = partyRes.data?.partiesConnection?.edges[0].node; return ( -
+

{ {/* */}
-
+ + {AccountData ? ( + + +
{t('Assets')}
+ + {AccountData.length} assets held + + } + > + + {AccountData.map((asset) => ( + +
+ + {asset.asset.name} + + + {addDecimalsFixedFormatNumber( + asset.total, + asset.asset.decimals + )} + + {asset.asset.symbol} +
+ + ))} + + + + + ) : AccountLoading && !AccountError ? ( + + ) : ( +

+ + {t('Could not load assets')} +

+ )} + + + {p?.stakingSummary.currentStakeAvailable ? ( - <> - - {t('Staking Balance: ')} - - - - ) : null} -
+ + +
{t('Available stake')}
+
+ +
+ + + ) : AccountLoading && !AccountError ? ( + + ) : ( +

+ + + {t('Could not load stake details')} + +

+ )} +
{t('Transactions')} - + {!error ? ( + + ) : ( + + +  {t('Could not load transaction list for party')} + + )}

); }; diff --git a/apps/explorer/src/app/routes/txs/id/index.tsx b/apps/explorer/src/app/routes/txs/id/index.tsx index aa6e962a1..ca61e7623 100644 --- a/apps/explorer/src/app/routes/txs/id/index.tsx +++ b/apps/explorer/src/app/routes/txs/id/index.tsx @@ -8,6 +8,7 @@ import type { BlockExplorerTransaction } from '../../../routes/types/block-explo import { toNonHex } from '../../../components/search/detect-search'; import { PageHeader } from '../../../components/page-header'; import { useDocumentTitle } from '../../../hooks/use-document-title'; +import { t } from '@vegaprotocol/i18n'; const Tx = () => { const { txHash } = useParams<{ txHash: string }>();