feat(explorer): updatemarginmode tx view (#5690)

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

@@ -32,6 +32,7 @@ import { TxDetailsCreateReferralSet } from './tx-create-referral-set';
 import { TxDetailsApplyReferralCode } from './tx-apply-referral-code';
 import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
 import { TxDetailsJoinTeam } from './tx-join-team';
+import { TxDetailsUpdateMarginMode } from './tx-update-margin-mode';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -133,6 +134,8 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsApplyReferralCode;
     case 'Join Team':
       return TxDetailsJoinTeam;
+    case 'Update Margin Mode':
+      return TxDetailsUpdateMarginMode;
     default:
       return TxDetailsGeneric;
   }

apps/explorer/src/app/components/txs/details/tx-update-margin-mode.tsx

@@ -0,0 +1,60 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+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';
+import { MarketLink } from '../../links';
+
+interface TxDetailsUpdateMarginModeProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+type Mode = components['schemas']['UpdateMarginModeMode'];
+
+const MarginModeLabels: Record<Mode, string> = {
+  MODE_CROSS_MARGIN: t('Cross margin'),
+  MODE_ISOLATED_MARGIN: t('Isolated margin'),
+  MODE_UNSPECIFIED: t('Unspecified'),
+};
+
+export const TxDetailsUpdateMarginMode = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsUpdateMarginModeProps) => {
+  if (!txData || !txData.command.updateMarginMode) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const u: components['schemas']['v1UpdateMarginMode'] =
+    txData.command.updateMarginMode;
+
+  return (
+    <TableWithTbody className="mb-8" allowWrap={true}>
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      {u.marketId && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Market ID')}</TableCell>
+          <TableCell>
+            <MarketLink id={u.marketId} />
+          </TableCell>
+        </TableRow>
+      )}
+      {u.mode && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('New margin mode')}</TableCell>
+          <TableCell>{MarginModeLabels[u.mode]}</TableCell>
+        </TableRow>
+      )}
+      {u.marginFactor && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Margin factor')}</TableCell>
+          <TableCell>{u.marginFactor}</TableCell>
+        </TableRow>
+      )}
+    </TableWithTbody>
+  );
+};

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -44,6 +44,7 @@ export type FilterOption =
   | 'Transfer Funds'
   | 'Undelegate'
   | 'Update Referral Set'
+  | 'Update Margin Mode'
   | 'Validator Heartbeat'
   | 'Vote on Proposal'
   | 'Withdraw';
@@ -59,6 +60,7 @@ export const filterOptions: Record<string, FilterOption[]> = {
     'Stop Orders Submission',
     'Stop Orders Cancellation',
     'Submit Order',
+    'Update Margin Mode',
   ],
   'Transfers and Withdrawals': [
     'Transfer Funds',