feat(explorer): add liquidity cancel view (#2680)

apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx

@@ -18,6 +18,7 @@ import { TxDetailsDelegate } from './tx-delegation';
 import { TxDetailsUndelegate } from './tx-undelegation';
 import { TxDetailsLiquiditySubmission } from './tx-liquidity-submission';
 import { TxDetailsLiquidityAmendment } from './tx-liquidity-amend';
+import { TxDetailsLiquidityCancellation } from './tx-liquidity-cancel';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -65,7 +66,9 @@ export const TxDetailsWrapper = ({
 };
 
 /**
- * Chooses the appropriate component to render the full details of a transaction
+ * Chooses the appropriate component to render the full details of a transaction.
+ * The generic view that is default here displays as much detail as it can in a
+ * detail table at the top of the page.
  *
  * @param txData
  * @returns JSX.Element
@@ -75,6 +78,7 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
     return TxDetailsGeneric;
   }
 
+  // These come from https://github.com/vegaprotocol/vega/blob/develop/core/txn/command.go#L72-L98
   switch (txData.type) {
     case 'Submit Order':
       return TxDetailsOrder;
@@ -94,8 +98,10 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsWithdrawSubmission;
     case 'Liquidity Provision Order':
       return TxDetailsLiquiditySubmission;
-    case 'Amend Liquidity Provision Order':
+    case 'Amend LiquidityProvision Order':
       return TxDetailsLiquidityAmendment;
+    case 'Cancel LiquidityProvision Order':
+      return TxDetailsLiquidityCancellation;
     case 'Delegate':
       return TxDetailsDelegate;
     case 'Undelegate':

apps/explorer/src/app/components/txs/details/tx-liquidity-cancel.tsx

@@ -0,0 +1,49 @@
+import { t } from '@vegaprotocol/react-helpers';
+import type { 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';
+import type { components } from '../../../../types/explorer';
+
+export type LiquidityCancellation =
+  components['schemas']['v1LiquidityProvisionCancellation'];
+
+interface TxDetailsLiquidityCancellationProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * An existing liquidity order is being cancelled - or attempted to be
+ * cancelled. It may ot may not be actioned depending on the state of
+ * the market at the time. Given the transaction is so basic, this view
+ * simply adds a Market ID row to the header. When APIs support fetching
+ * data at a tx or block height, we can populate this with accurate data
+ */
+export const TxDetailsLiquidityCancellation = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsLiquidityCancellationProps) => {
+  if (!txData || !txData.command.liquidityProvisionAmendment) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const cancel: LiquidityCancellation =
+    txData.command.liquidityProvisionCancellation;
+  const marketId: string = cancel.marketId || '-';
+
+  return (
+    <TableWithTbody className="mb-8">
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      <TableRow modifier="bordered">
+        <TableCell>{t('Market')}</TableCell>
+        <TableCell>
+          <MarketLink id={marketId} />
+        </TableCell>
+      </TableRow>
+    </TableWithTbody>
+  );
+};