explorer: introduce stake merge instruction card (#15160)

explorer/src/components/instruction/stake/MergeDetailsCard.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  SignatureResult,
+  StakeProgram,
+  ParsedInstruction,
+} from "@solana/web3.js";
+import { InstructionCard } from "../InstructionCard";
+import { Address } from "components/common/Address";
+import { MergeInfo } from "./types";
+
+export function MergeDetailsCard(props: {
+  ix: ParsedInstruction;
+  index: number;
+  result: SignatureResult;
+  info: MergeInfo;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+}) {
+  const { ix, index, result, info, innerCards, childIndex } = props;
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Stake Merge"
+      innerCards={innerCards}
+      childIndex={childIndex}
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-lg-right">
+          <Address pubkey={StakeProgram.programId} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Source</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.source} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Destination</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.destination} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authority Address</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.stakeAuthority} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Clock Sysvar</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.clockSysvar} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake History Sysvar</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.stakeHistorySysvar} alignRight link />
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

explorer/src/components/instruction/stake/StakeDetailsCard.tsx

@@ -20,9 +20,11 @@ import {
   DeactivateInfo,
   DelegateInfo,
   InitializeInfo,
+  MergeInfo,
   SplitInfo,
   WithdrawInfo,
 } from "./types";
+import { MergeDetailsCard } from "./MergeDetailsCard";
 
 type DetailsProps = {
   tx: ParsedTransaction;
@@ -62,6 +64,10 @@ export function StakeDetailsCard(props: DetailsProps) {
         const info = coerce(parsed.info, DeactivateInfo);
         return <DeactivateDetailsCard info={info} {...props} />;
       }
+      case "merge": {
+        const info = coerce(parsed.info, MergeInfo);
+        return <MergeDetailsCard info={info} {...props} />;
+      }
       default:
         return <UnknownDetailsCard {...props} />;
     }

explorer/src/components/instruction/stake/types.ts

@@ -54,6 +54,15 @@ export const DeactivateInfo = pick({
   stakeAuthority: Pubkey,
 });
 
+export type MergeInfo = StructType<typeof MergeInfo>;
+export const MergeInfo = pick({
+  source: Pubkey,
+  destination: Pubkey,
+  stakeAuthority: Pubkey,
+  stakeHistorySysvar: Pubkey,
+  clockSysvar: Pubkey,
+});
+
 export type StakeInstructionType = StructType<typeof StakeInstructionType>;
 export const StakeInstructionType = enums([
   "initialize",
@@ -62,4 +71,5 @@ export const StakeInstructionType = enums([
   "split",
   "withdraw",
   "deactivate",
+  "merge",
 ]);