Merge pull request #6583 from vegaprotocol/chore/release-v0.26.13

chore(trading,governance,explorer): release v0.26.13

CODEOWNERS

@@ -1,4 +1,2 @@
 * @vegaprotocol/frontend
-apps/ @vegaprotocol/frontend-qa
-libs/ @vegaprotocol/frontend-qa
 *.graphql @vegaprotocol/core

apps/explorer/src/app/components/links/external-explorer-link/external-explorer-link.tsx

@@ -14,13 +14,15 @@ export type ExternalExplorerLinkProps = Partial<typeof HTMLAnchorElement> & {
   // Defaults to Ethereum Mainnet, as chain support was added late
   chain?: string;
   code?: boolean;
+  truncate?: boolean;
 };
 
 export const ExternalExplorerLink = ({
   id,
   type,
   chain = '1',
   code = false,
+  truncate = false,
   ...props
 }: ExternalExplorerLinkProps) => {
   const link = `${getExternalExplorerLink(chain)}/${type}/${id}${
@@ -35,7 +37,7 @@ export const ExternalExplorerLink = ({
       href={link}
     >
       <ExternalChainIcon chainId={chain} />
-      <Hash text={id} />
+      <Hash text={id} truncate={truncate} />
     </a>
   );
 };

apps/explorer/src/app/components/links/hash.tsx

@@ -9,7 +9,7 @@ export type HashProps = React.HTMLProps<HTMLSpanElement> & {
  * for a lot of the overflow scrolling that currently exists.
  */
 const Hash = ({ className, text, truncate = false }: HashProps) => {
-  const h = truncate ? text.slice(0, 6) : text;
+  const h = truncate ? text.slice(0, 8) : text;
 
   return (
     <code

apps/explorer/src/app/components/links/oracle-link/oracle-link.spec.tsx

@@ -24,7 +24,7 @@ describe('OracleLink', () => {
         </MemoryRouter>
       </MockedProvider>
     );
-    const idElement = screen.getByText(id.slice(0, 6));
+    const idElement = screen.getByText(id.slice(0, 8));
     expect(idElement).toBeInTheDocument();
     expect(idElement).toHaveAttribute('title', id);
   });

apps/explorer/src/app/components/txs/details/proposal/batch-item.spec.tsx

@@ -42,7 +42,7 @@ describe('BatchItem', () => {
     };
     render(<BatchItem item={item} />);
     expect(screen.getByText('Cancel transfer')).toBeInTheDocument();
-    expect(screen.getByText('transf')).toBeInTheDocument();
+    expect(screen.getByText('transfer')).toBeInTheDocument();
   });
 
   it('Renders "Cancel transfer" without an id', () => {

apps/explorer/src/app/routes/parties/id/components/PartyDepositsWithdrawals.graphql

@@ -0,0 +1,63 @@
+fragment ExplorerPartyDepositFields on Deposit {
+  id
+  asset {
+    id
+    source {
+      ... on ERC20 {
+        contractAddress
+        chainId
+      }
+    }
+  }
+  amount
+  createdTimestamp
+  creditedTimestamp
+  status
+  txHash
+}
+
+fragment ExplorerPartyWithdrawalFields on Withdrawal {
+  id
+  createdTimestamp
+  withdrawnTimestamp
+  asset {
+    id
+    source {
+      ... on ERC20 {
+        contractAddress
+        chainId
+      }
+    }
+  }
+  amount
+  status
+  txHash
+  details {
+    ... on Erc20WithdrawalDetails {
+      receiverAddress
+    }
+  }
+}
+
+query ExplorerPartyDepositsWithdrawals($partyId: ID!, $first: Int = 3) {
+  partiesConnection(id: $partyId) {
+    edges {
+      node {
+        depositsConnection(pagination: { first: $first }) {
+          edges {
+            node {
+              ...ExplorerPartyDepositFields
+            }
+          }
+        }
+        withdrawalsConnection(pagination: { first: $first }) {
+          edges {
+            node {
+              ...ExplorerPartyWithdrawalFields
+            }
+          }
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/parties/id/components/lib/combine-deposits-withdrawals.test.ts

@@ -0,0 +1,69 @@
+import { getDepositWithdrawalStatusLabel } from '../party-deposits-withdrawals-status-icon';
+import { isDepositStatus } from './combine-deposits-withdrawals';
+import { DepositStatus, WithdrawalStatus } from '@vegaprotocol/types';
+
+describe('isDepositStatus & getDepositWithdrawalStatusLabel', () => {
+  it('Use deposit status label for open, regardless of type', () => {
+    expect(isDepositStatus(DepositStatus['STATUS_OPEN'])).toBe(true);
+    expect(isDepositStatus(WithdrawalStatus['STATUS_OPEN'])).toBe(true);
+    expect(
+      getDepositWithdrawalStatusLabel(DepositStatus['STATUS_OPEN'])
+    ).toEqual('Open');
+    expect(
+      getDepositWithdrawalStatusLabel(WithdrawalStatus['STATUS_OPEN'])
+    ).toEqual('Open');
+  });
+
+  it('Use deposit status label for finalized, regardless of type (custom label - incomplete)', () => {
+    expect(isDepositStatus(DepositStatus['STATUS_FINALIZED'])).toBe(true);
+    expect(isDepositStatus(WithdrawalStatus['STATUS_FINALIZED'])).toBe(true);
+    expect(
+      getDepositWithdrawalStatusLabel(DepositStatus['STATUS_FINALIZED'])
+    ).toEqual('Incomplete');
+    expect(
+      getDepositWithdrawalStatusLabel(WithdrawalStatus['STATUS_FINALIZED'])
+    ).toEqual('Incomplete');
+  });
+
+  it('Use deposit status label for finalized, regardless of type (custom label - complete)', () => {
+    expect(isDepositStatus(DepositStatus['STATUS_FINALIZED'])).toBe(true);
+    expect(isDepositStatus(WithdrawalStatus['STATUS_FINALIZED'])).toBe(true);
+    expect(
+      getDepositWithdrawalStatusLabel(
+        DepositStatus['STATUS_FINALIZED'],
+        'fake-tx-hash'
+      )
+    ).toEqual('Complete');
+    expect(
+      getDepositWithdrawalStatusLabel(
+        WithdrawalStatus['STATUS_FINALIZED'],
+        'fake-tx-hash'
+      )
+    ).toEqual('Complete');
+  });
+
+  it('Use deposit status label for cancelled', () => {
+    expect(isDepositStatus(DepositStatus['STATUS_CANCELLED'])).toBe(true);
+    expect(
+      getDepositWithdrawalStatusLabel(DepositStatus['STATUS_CANCELLED'])
+    ).toEqual('Cancelled');
+  });
+
+  it('Use deposit status label for duplicate', () => {
+    expect(isDepositStatus(DepositStatus['STATUS_DUPLICATE_REJECTED'])).toBe(
+      true
+    );
+    expect(
+      getDepositWithdrawalStatusLabel(
+        DepositStatus['STATUS_DUPLICATE_REJECTED']
+      )
+    ).toEqual('Duplicate rejected');
+  });
+
+  it('Use withdraw status label for rejected', () => {
+    expect(isDepositStatus(WithdrawalStatus['STATUS_REJECTED'])).toBe(false);
+    expect(
+      getDepositWithdrawalStatusLabel(WithdrawalStatus['STATUS_REJECTED'])
+    ).toEqual('Rejected');
+  });
+});

apps/explorer/src/app/routes/parties/id/components/lib/combine-deposits-withdrawals.ts

@@ -0,0 +1,69 @@
+import {
+  DepositStatusMapping,
+  type DepositStatus,
+  type WithdrawalStatus,
+} from '@vegaprotocol/types';
+import type {
+  ExplorerPartyDepositsWithdrawalsQuery,
+  ExplorerPartyDepositFieldsFragment,
+  ExplorerPartyWithdrawalFieldsFragment,
+} from '../__generated__/PartyDepositsWithdrawals';
+
+export type DepositOrWithdrawal =
+  | ExplorerPartyDepositFieldsFragment
+  | ExplorerPartyWithdrawalFieldsFragment
+  | undefined;
+
+/**
+ * Deposits and Withdrawals are separate types in the array, but when rendering them we want both to appear
+ * in the same list, in date order, and with only the properties we care about. This function does that.
+ *
+ * @param data GraphQL query result, presumably containing 0 or more deposits and 0 or more withdrawals
+ * @param limit Integer (default 3)
+ * @returns Array combined withdrawals and deposits, sorted and limited
+ */
+export function combineDepositsWithdrawals(
+  data: ExplorerPartyDepositsWithdrawalsQuery,
+  limit: number = 3
+): DepositOrWithdrawal[] {
+  const transfers =
+    data?.partiesConnection?.edges?.flatMap((edge) => {
+      return edge.node.depositsConnection?.edges?.map((depositEdge) => {
+        return depositEdge?.node;
+      });
+    }) || [];
+
+  const withdrawals =
+    data?.partiesConnection?.edges?.flatMap((edge) => {
+      return edge.node.withdrawalsConnection?.edges?.map((withdrawalEdge) => {
+        return withdrawalEdge?.node;
+      });
+    }) || [];
+
+  // Combine deposits and withdrawals
+  return (
+    [...transfers, ...withdrawals]
+      // Filter out null values
+      .filter(Boolean)
+      // Order by creation of the initial transaction
+      .sort((a, b) => {
+        return b?.createdTimestamp.localeCompare(a?.createdTimestamp);
+      })
+      // Limit to 3 by default (for the overview block), or the param limit
+      .slice(0, limit)
+  );
+}
+
+/**
+ * Type narrowing for deposits/withdrawals, used only for labels. There are some
+ * crossover statuses (FINALIZED, OPEN) but from a label point of view this is
+ * adequate.
+ *
+ * @param status
+ * @returns Boolean true if the provided object is a Deposit (i.e false is a Withdrawal)
+ */
+export function isDepositStatus(
+  status: DepositStatus | WithdrawalStatus
+): status is DepositStatus {
+  return status in DepositStatusMapping;
+}

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

@@ -23,7 +23,7 @@ export const PartyAccounts = ({ partyId }: PartyAccountsProps) => {
   const accounts =
     party?.accountsConnection?.edges?.filter((edge) => edge?.node) || [];
   return (
-    <div className="block min-h-44 h-60 4 w-full border-red-800 relative">
+    <div className="block min-h-44 4 w-full relative">
       <table>
         <thead>
           <tr>