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

This commit is contained in:
Edd 2023-01-19 18:43:35 +00:00 committed by GitHub
parent df4cea8e00
commit 24fafe5a34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 2 deletions

View File

@ -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':

View File

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