fix(explorer): expand party query

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 (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
+      {showAssetLink && asset?.id ? (
+        <AssetLink showAssetSymbol={showAssetSymbol} assetId={assetId} />
+      ) : null}
     </div>
   );
 };

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 <AssetBalance price={price} assetId={governanceAssetId} />;
+    return (
+      <AssetBalance
+        price={price}
+        showAssetSymbol={true}
+        assetId={governanceAssetId}
+      />
+    );
   } else {
     return (
       <div className="inline-block">

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 = <Loader />;
   } else {
@@ -97,13 +97,13 @@ export const TxsInfiniteList = ({
     <div className={className} data-testid="transactions-list">
       <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-vega-dark-300 uppercase">
         <div className="col-span-3">
-          <span className="hidden xl:inline">Transaction &nbsp;</span>
+          <span className="hidden xl:inline">{t('Transaction')} &nbsp;</span>
           <span>ID</span>
         </div>
-        <div className="col-span-3">Submitted By</div>
-        <div className="col-span-2">Type</div>
-        <div className="col-span-1">Block</div>
-        <div className="col-span-1">Success</div>
+        <div className="col-span-3">{t('Submitted By')}</div>
+        <div className="col-span-2">{t('Type')}</div>
+        <div className="col-span-1">{t('Block')}</div>
+        <div className="col-span-1">{t('Success')}</div>
       </div>
       <div data-testid="infinite-scroll-wrapper">
         <InfiniteLoader

apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx

@@ -1,10 +1,5 @@
 import { t } from '@vegaprotocol/i18n';
-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';
 import { AccountManager } from '@vegaprotocol/accounts';
 
 const accountTypeString: Record<Schema.AccountType, string> = {

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 (
+    <div className="border-2 min-h-[125px] border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
+      <h3 className="font-semibold text-lg mb-4">{title}</h3>
+      {children}
+    </div>
+  );
+}

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 (
-    <section>
+    <section className="max-w-5xl mx-auto">
       <h1
         className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
@@ -54,29 +80,90 @@ const Party = () => {
       {/*<PartyAccounts partyId={partyId} /> */}
 
       <div className="grid md:grid-flow-col grid-flow-row md:space-x-4 grid-cols-1 md:grid-cols-3 w-full">
-        <div className="border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
+        <PartyBlock title={t('Assets')}>
+          {AccountData ? (
+            <KeyValueTable>
+              <KeyValueTableRow>
+                <div>{t('Assets')}</div>
+                <DropdownMenu
+                  trigger={
+                    <DropdownMenuTrigger>
+                      <span>{AccountData.length} assets held</span>
+                    </DropdownMenuTrigger>
+                  }
+                >
+                  <DropdownMenuContent>
+                    {AccountData.map((asset) => (
+                      <DropdownMenuItem key={asset.asset.name}>
+                        <div>
+                          <strong className="block w-2 bold">
+                            {asset.asset.name}
+                          </strong>
+                          <span className="font-mono">
+                            {addDecimalsFixedFormatNumber(
+                              asset.total,
+                              asset.asset.decimals
+                            )}
+                          </span>
+                          <span className="ml-1">{asset.asset.symbol}</span>
+                        </div>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </KeyValueTableRow>
+            </KeyValueTable>
+          ) : AccountLoading && !AccountError ? (
+            <Loader size="small" />
+          ) : (
+            <p>
+              <Icon className="mr-1" name="error" />
+              <span className="text-sm">{t('Could not load assets')}</span>
+            </p>
+          )}
+        </PartyBlock>
+
+        <PartyBlock title={t('Staking')}>
           {p?.stakingSummary.currentStakeAvailable ? (
-            <>
-              <strong className="font-semibold">
-                {t('Staking Balance: ')}
-              </strong>
-              <GovernanceAssetBalance
-                price={p.stakingSummary.currentStakeAvailable}
-              />
-            </>
-          ) : null}
-        </div>
+            <KeyValueTable>
+              <KeyValueTableRow>
+                <div>{t('Available stake')}</div>
+                <div>
+                  <GovernanceAssetBalance
+                    price={p.stakingSummary.currentStakeAvailable}
+                  />
+                </div>
+              </KeyValueTableRow>
+            </KeyValueTable>
+          ) : AccountLoading && !AccountError ? (
+            <Loader size="small" />
+          ) : (
+            <p>
+              <Icon className="mr-1" name="error" />
+              <span className="text-sm">
+                {t('Could not load stake details')}
+              </span>
+            </p>
+          )}
+        </PartyBlock>
       </div>
 
       <SubHeading>{t('Transactions')}</SubHeading>
-      <TxsInfiniteList
-        hasMoreTxs={hasMoreTxs}
-        areTxsLoading={loading}
-        txs={txsData}
-        loadMoreTxs={loadTxs}
-        error={error}
-        className="mb-28"
-      />
+      {!error ? (
+        <TxsInfiniteList
+          hasMoreTxs={hasMoreTxs}
+          areTxsLoading={loading}
+          txs={txsData}
+          loadMoreTxs={loadTxs}
+          error={error}
+          className="mb-28"
+        />
+      ) : (
+        <Splash>
+          <Icon name="error" className="mr-1" />
+          &nbsp;{t('Could not load transaction list for party')}
+        </Splash>
+      )}
     </section>
   );
 };

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