explorer: introduce transfer with seed instruction card (#14730)

explorer/src/components/instruction/system/SystemDetailsCard.tsx

@@ -17,6 +17,7 @@ import { NonceInitializeDetailsCard } from "./NonceInitializeDetailsCard";
 import { NonceAdvanceDetailsCard } from "./NonceAdvanceDetailsCard";
 import { NonceWithdrawDetailsCard } from "./NonceWithdrawDetailsCard";
 import { NonceAuthorizeDetailsCard } from "./NonceAuthorizeDetailsCard";
+import { TransferWithSeedDetailsCard } from "./TransferWithSeedDetailsCard";
 import { ParsedInfo } from "validators";
 import { coerce } from "superstruct";
 import { reportError } from "utils/sentry";
@@ -32,6 +33,7 @@ import {
   AuthorizeNonceInfo,
   InitializeNonceInfo,
   WithdrawNonceInfo,
+  TransferWithSeedInfo,
 } from "./types";
 
 type DetailsProps = {
@@ -91,6 +93,10 @@ export function SystemDetailsCard(props: DetailsProps) {
         const info = coerce(parsed.info, InitializeNonceInfo);
         return <NonceInitializeDetailsCard info={info} {...props} />;
       }
+      case "transferWithSeed": {
+        const info = coerce(parsed.info, TransferWithSeedInfo);
+        return <TransferWithSeedDetailsCard info={info} {...props} />;
+      }
       default:
         return <UnknownDetailsCard {...props} />;
     }

explorer/src/components/instruction/system/TransferWithSeedDetailsCard.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+  SystemProgram,
+  SignatureResult,
+  ParsedInstruction,
+} from "@solana/web3.js";
+import { lamportsToSolString } from "utils";
+import { InstructionCard } from "../InstructionCard";
+import { Copyable } from "components/common/Copyable";
+import { Address } from "components/common/Address";
+import { TransferWithSeedInfo } from "./types";
+
+export function TransferWithSeedDetailsCard(props: {
+  ix: ParsedInstruction;
+  index: number;
+  result: SignatureResult;
+  info: TransferWithSeedInfo;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+}) {
+  const { ix, index, result, info, innerCards, childIndex } = props;
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Transfer w/ Seed"
+      innerCards={innerCards}
+      childIndex={childIndex}
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-lg-right">
+          <Address pubkey={SystemProgram.programId} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>From Address</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.source} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Destination Address</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.destination} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Base Address</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.sourceBase} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Transfer Amount (SOL)</td>
+        <td className="text-lg-right">{lamportsToSolString(info.lamports)}</td>
+      </tr>
+
+      <tr>
+        <td>Seed</td>
+        <td className="text-lg-right">
+          <Copyable right text={info.sourceSeed}>
+            <code>{info.sourceSeed}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Source Owner</td>
+        <td className="text-lg-right">
+          <Address pubkey={info.sourceOwner} alignRight link />
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -111,5 +111,5 @@ export const SystemInstructionType = enums([
   "withdrawNonce",
   "authorizeNonce",
   "initializeNonce",
-  // "transferWithSeed", TODO: Add support for transfer with seed
+  "transferWithSeed",
 ]);