feat: associated token program card (#17043)

explorer/src/components/instruction/AssociatedTokenDetailsCard.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { ParsedInstruction, PublicKey, SignatureResult } from "@solana/web3.js";
+import { InstructionCard } from "./InstructionCard";
+import { Address } from "components/common/Address";
+
+export function AssociatedTokenDetailsCard({
+  ix,
+  index,
+  result,
+  innerCards,
+  childIndex,
+}: {
+  ix: ParsedInstruction;
+  index: number;
+  result: SignatureResult;
+  innerCards?: JSX.Element[];
+  childIndex?: number;
+}) {
+  const info = ix.parsed.info;
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Associated Token Program: Create"
+      innerCards={innerCards}
+      childIndex={childIndex}
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-lg-right">
+          <Address pubkey={ix.programId} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Account</td>
+        <td className="text-lg-right">
+          <Address pubkey={new PublicKey(info.account)} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Mint</td>
+        <td className="text-lg-right">
+          <Address pubkey={new PublicKey(info.mint)} alignRight link />
+        </td>
+      </tr>
+
+      <tr>
+        <td>Wallet</td>
+        <td className="text-lg-right">
+          <Address pubkey={new PublicKey(info.wallet)} alignRight link />
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

explorer/src/components/transaction/InstructionsSection.tsx

@@ -39,6 +39,7 @@ import { Cluster, useCluster } from "providers/cluster";
 import { BpfUpgradeableLoaderDetailsCard } from "components/instruction/bpf-upgradeable-loader/BpfUpgradeableLoaderDetailsCard";
 import { VoteDetailsCard } from "components/instruction/vote/VoteDetailsCard";
 import { isWormholeInstruction } from "components/instruction/wormhole/types";
+import { AssociatedTokenDetailsCard } from "components/instruction/AssociatedTokenDetailsCard";
 
 export type InstructionDetailsProps = {
   tx: ParsedTransaction;
@@ -183,6 +184,8 @@ function renderInstructionCard({
         return <StakeDetailsCard {...props} />;
       case "spl-memo":
         return <MemoDetailsCard {...props} />;
+      case "spl-associated-token-account":
+        return <AssociatedTokenDetailsCard {...props} />;
       case "vote":
         return <VoteDetailsCard {...props} />;
       default: