Add stake instruction support

explorer/src/components/TransactionDetails.tsx

@@ -11,23 +11,17 @@ import { fetchDetails } from "providers/transactions/details";
 import { useCluster, useClusterModal } from "providers/cluster";
 import {
   TransactionSignature,
-  SystemInstruction,
+  SystemProgram,
-  SystemProgram
+  StakeProgram
 } from "@solana/web3.js";
 import ClusterStatusButton from "components/ClusterStatusButton";
 import { lamportsToSolString } from "utils";
 import { displayAddress } from "utils/tx";
 import Copyable from "./Copyable";
 import { useHistory, useLocation } from "react-router-dom";
-import { TransferDetailsCard } from "./instruction/system/TransferDetailsCard";
-import { AssignDetailsCard } from "./instruction/system/AssignDetailsCard";
-import { CreateDetailsCard } from "./instruction/system/CreateDetailsCard";
-import { CreateWithSeedDetailsCard } from "./instruction/system/CreateWithSeedDetailsCard";
 import { UnknownDetailsCard } from "./instruction/UnknownDetailsCard";
-import { NonceInitializeDetailsCard } from "./instruction/system/NonceInitializeDetailsCard";
+import { SystemDetailsCard } from "./instruction/system/SystemDetailsCard";
-import { NonceAdvanceDetailsCard } from "./instruction/system/NonceAdvanceDetailsCard";
+import { StakeDetailsCard } from "./instruction/stake/StakeDetailsCard";
-import { NonceWithdrawDetailsCard } from "./instruction/system/NonceWithdrawDetailsCard";
-import { NonceAuthorizeDetailsCard } from "./instruction/system/NonceAuthorizeDetailsCard";
 
 type Props = { signature: TransactionSignature };
 export default function TransactionDetails({ signature }: Props) {
@@ -298,36 +292,11 @@ function InstructionsSection({ signature }: Props) {
   const instructionDetails = transaction.instructions.map((ix, index) => {
     const props = { ix, result, index };
 
-    if (!ix.programId.equals(SystemProgram.programId)) {
+    if (SystemProgram.programId.equals(ix.programId)) {
-      return <UnknownDetailsCard key={index} {...props} />;
+      return <SystemDetailsCard key={index} {...props} />;
-    }
+    } else if (StakeProgram.programId.equals(ix.programId)) {
-
+      return <StakeDetailsCard key={index} {...props} />;
-    let systemInstructionType;
+    } else {
-    try {
-      systemInstructionType = SystemInstruction.decodeInstructionType(ix);
-    } catch (err) {
-      console.error(err);
-      return <UnknownDetailsCard key={index} {...props} />;
-    }
-
-    switch (systemInstructionType) {
-      case "Create":
-        return <CreateDetailsCard key={index} {...props} />;
-      case "Assign":
-        return <AssignDetailsCard key={index} {...props} />;
-      case "Transfer":
-        return <TransferDetailsCard key={index} {...props} />;
-      case "CreateWithSeed":
-        return <CreateWithSeedDetailsCard key={index} {...props} />;
-      case "AdvanceNonceAccount":
-        return <NonceAdvanceDetailsCard key={index} {...props} />;
-      case "WithdrawNonceAccount":
-        return <NonceWithdrawDetailsCard key={index} {...props} />;
-      case "AuthorizeNonceAccount":
-        return <NonceAuthorizeDetailsCard key={index} {...props} />;
-      case "InitializeNonceAccount":
-        return <NonceInitializeDetailsCard key={index} {...props} />;
-      default:
       return <UnknownDetailsCard key={index} {...props} />;
     }
   });

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

@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function AuthorizeDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeAuthorize(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakePubkey = params.stakePubkey.toBase58();
+  const authorizedPubkey = params.authorizedPubkey.toBase58();
+  const newAuthorizedPubkey = params.newAuthorizedPubkey.toBase58();
+
+  let authorizationType;
+  switch (params.stakeAuthorizationType.index) {
+    case 0:
+      authorizationType = "Staker";
+      break;
+    case 1:
+      authorizationType = "Withdrawer";
+      break;
+    default:
+      authorizationType = "Invalid";
+      break;
+  }
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Stake Authorize"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Old Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={authorizedPubkey}>
+            <code>{authorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>New Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={newAuthorizedPubkey}>
+            <code>{newAuthorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorization Type</td>
+        <td className="text-right">{authorizationType}</td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function DeactivateDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeDeactivate(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakePubkey = params.stakePubkey.toBase58();
+  const authorizedPubkey = params.authorizedPubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Deactivate Stake"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={authorizedPubkey}>
+            <code>{authorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,76 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function DelegateDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeDelegate(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakePubkey = params.stakePubkey.toBase58();
+  const votePubkey = params.votePubkey.toBase58();
+  const authorizedPubkey = params.authorizedPubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Delegate Stake"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Delegated Vote Address</td>
+        <td className="text-right">
+          <Copyable text={votePubkey}>
+            <code>{votePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={authorizedPubkey}>
+            <code>{authorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,97 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function InitializeDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeInitialize(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakerPubkey = params.authorized.staker.toBase58();
+  const withdrawerPubkey = params.authorized.withdrawer.toBase58();
+  const stakePubkey = params.stakePubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Stake Initialize"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Staker Address</td>
+        <td className="text-right">
+          <Copyable text={stakerPubkey}>
+            <code>{stakerPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Withdrawer Address</td>
+        <td className="text-right">
+          <Copyable text={withdrawerPubkey}>
+            <code>{withdrawerPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Lockup Expiry Epoch</td>
+        <td className="text-right">{params.lockup.epoch}</td>
+      </tr>
+
+      <tr>
+        <td>Lockup Expiry Timestamp</td>
+        <td className="text-right">
+          {new Date(params.lockup.unixTimestamp * 1000).toUTCString()}
+        </td>
+      </tr>
+
+      <tr>
+        <td>Lockup Custodian Address</td>
+        <td className="text-right">
+          <Copyable text={params.lockup.custodian.toBase58()}>
+            <code>{displayAddress(params.lockup.custodian)}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { lamportsToSolString } from "utils";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function SplitDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeSplit(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakePubkey = params.stakePubkey.toBase58();
+  const authorizedPubkey = params.authorizedPubkey.toBase58();
+  const splitStakePubkey = params.splitStakePubkey.toBase58();
+
+  return (
+    <InstructionCard ix={ix} index={index} result={result} title="Split Stake">
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={authorizedPubkey}>
+            <code>{authorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>New Stake Address</td>
+        <td className="text-right">
+          <Copyable text={splitStakePubkey}>
+            <code>{splitStakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Split Amount (SOL)</td>
+        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  StakeInstruction,
+  TransactionInstruction,
+  SignatureResult
+} from "@solana/web3.js";
+
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import { InitializeDetailsCard } from "./InitializeDetailsCard";
+import { DelegateDetailsCard } from "./DelegateDetailsCard";
+import { AuthorizeDetailsCard } from "./AuthorizeDetailsCard";
+import { SplitDetailsCard } from "./SplitDetailsCard";
+import { WithdrawDetailsCard } from "./WithdrawDetailsCard";
+import { DeactivateDetailsCard } from "./DeactivateDetailsCard";
+
+type DetailsProps = {
+  ix: TransactionInstruction;
+  result: SignatureResult;
+  index: number;
+};
+
+export function StakeDetailsCard(props: DetailsProps) {
+  let stakeInstructionType;
+  try {
+    stakeInstructionType = StakeInstruction.decodeInstructionType(props.ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  switch (stakeInstructionType) {
+    case "Initialize":
+      return <InitializeDetailsCard {...props} />;
+    case "Delegate":
+      return <DelegateDetailsCard {...props} />;
+    case "Authorize":
+      return <AuthorizeDetailsCard {...props} />;
+    case "Split":
+      return <SplitDetailsCard {...props} />;
+    case "Withdraw":
+      return <WithdrawDetailsCard {...props} />;
+    case "Deactivate":
+      return <DeactivateDetailsCard {...props} />;
+    default:
+      return <UnknownDetailsCard {...props} />;
+  }
+}

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

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SignatureResult,
+  StakeInstruction,
+  StakeProgram
+} from "@solana/web3.js";
+import { lamportsToSolString } from "utils";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function WithdrawDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = StakeInstruction.decodeWithdraw(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const stakePubkey = params.stakePubkey.toBase58();
+  const toPubkey = params.toPubkey.toBase58();
+  const authorizedPubkey = params.authorizedPubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Withdraw Stake"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={StakeProgram.programId.toBase58()}>
+            <code>{displayAddress(StakeProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Stake Address</td>
+        <td className="text-right">
+          <Copyable text={stakePubkey}>
+            <code>{stakePubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Authorized Address</td>
+        <td className="text-right">
+          <Copyable text={authorizedPubkey}>
+            <code>{authorizedPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>To Address</td>
+        <td className="text-right">
+          <Copyable text={toPubkey}>
+            <code>{toPubkey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Withdraw Amount (SOL)</td>
+        <td className="text-right">{lamportsToSolString(params.lamports)}</td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -26,7 +26,6 @@ export function AssignDetailsCard(props: {
   }
 
   const from = params.fromPubkey.toBase58();
-  const [fromMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -45,15 +44,7 @@ export function AssignDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>From Address</td>
-          <div className="mr-2 d-md-inline">From Address</div>
-          {!fromMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {fromMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={from}>
             <code>{from}</code>

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

@@ -28,7 +28,6 @@ export function CreateDetailsCard(props: {
 
   const from = params.fromPubkey.toBase58();
   const newKey = params.newAccountPubkey.toBase58();
-  const [fromMeta, newMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -47,15 +46,7 @@ export function CreateDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>From Address</td>
-          <div className="mr-2 d-md-inline">From Address</div>
-          {!fromMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {fromMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={from}>
             <code>{from}</code>
@@ -64,15 +55,7 @@ export function CreateDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>New Address</td>
-          <div className="mr-2 d-md-inline">New Address</div>
-          {!newMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {newMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={newKey}>
             <code>{newKey}</code>

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

@@ -29,7 +29,6 @@ export function CreateWithSeedDetailsCard(props: {
   const from = params.fromPubkey.toBase58();
   const newKey = params.newAccountPubkey.toBase58();
   const baseKey = params.basePubkey.toBase58();
-  const [fromMeta, newMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -48,15 +47,7 @@ export function CreateWithSeedDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>From Address</td>
-          <div className="mr-2 d-md-inline">From Address</div>
-          {!fromMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {fromMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={from}>
             <code>{from}</code>
@@ -65,15 +56,7 @@ export function CreateWithSeedDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>New Address</td>
-          <div className="mr-2 d-md-inline">New Address</div>
-          {!newMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {newMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={newKey}>
             <code>{newKey}</code>
@@ -82,15 +65,7 @@ export function CreateWithSeedDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>New Address</td>
-          <div className="mr-2 d-md-inline">New Address</div>
-          {!newMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {newMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={newKey}>
             <code>{newKey}</code>

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

@@ -27,7 +27,6 @@ export function NonceAdvanceDetailsCard(props: {
 
   const nonceKey = params.noncePubkey.toBase58();
   const authorizedKey = params.authorizedPubkey.toBase58();
-  const [nonceMeta, , authorizedMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -46,15 +45,7 @@ export function NonceAdvanceDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Nonce Address</td>
-          <div className="mr-2 d-md-inline">Nonce Address</div>
-          {!nonceMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {nonceMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={nonceKey}>
             <code>{nonceKey}</code>
@@ -63,15 +54,7 @@ export function NonceAdvanceDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Authorized Address</td>
-          <div className="mr-2 d-md-inline">Authorized Address</div>
-          {!authorizedMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {authorizedMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={authorizedKey}>
             <code>{authorizedKey}</code>

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

@@ -28,7 +28,6 @@ export function NonceAuthorizeDetailsCard(props: {
   const nonceKey = params.noncePubkey.toBase58();
   const authorizedKey = params.authorizedPubkey.toBase58();
   const newAuthorizedKey = params.newAuthorizedPubkey.toBase58();
-  const [nonceMeta, authorizedMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -47,15 +46,7 @@ export function NonceAuthorizeDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Nonce Address</td>
-          <div className="mr-2 d-md-inline">Nonce Address</div>
-          {!nonceMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {nonceMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={nonceKey}>
             <code>{nonceKey}</code>
@@ -64,15 +55,7 @@ export function NonceAuthorizeDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Authorized Address</td>
-          <div className="mr-2 d-md-inline">Authorized Address</div>
-          {!authorizedMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {authorizedMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={authorizedKey}>
             <code>{authorizedKey}</code>

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

@@ -27,7 +27,6 @@ export function NonceInitializeDetailsCard(props: {
 
   const nonceKey = params.noncePubkey.toBase58();
   const authorizedKey = params.authorizedPubkey.toBase58();
-  const [nonceMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -46,15 +45,7 @@ export function NonceInitializeDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Nonce Address</td>
-          <div className="mr-2 d-md-inline">Nonce Address</div>
-          {!nonceMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {nonceMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={nonceKey}>
             <code>{nonceKey}</code>

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

@@ -30,7 +30,6 @@ export function NonceWithdrawDetailsCard(props: {
   const toKey = params.toPubkey.toBase58();
   const authorizedKey = params.authorizedPubkey.toBase58();
   const lamports = params.lamports;
-  const [nonceMeta, toMeta, , , authorizedMeta] = ix.keys;
 
   return (
     <InstructionCard
@@ -49,15 +48,7 @@ export function NonceWithdrawDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Nonce Address</td>
-          <div className="mr-2 d-md-inline">Nonce Address</div>
-          {!nonceMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {nonceMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={nonceKey}>
             <code>{nonceKey}</code>
@@ -66,15 +57,7 @@ export function NonceWithdrawDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>Authorized Address</td>
-          <div className="mr-2 d-md-inline">Authorized Address</div>
-          {!authorizedMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {authorizedMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={authorizedKey}>
             <code>{authorizedKey}</code>
@@ -83,15 +66,7 @@ export function NonceWithdrawDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>To Address</td>
-          <div className="mr-2 d-md-inline">To Address</div>
-          {!toMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {toMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={toKey}>
             <code>{toKey}</code>

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

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  SystemInstruction,
+  TransactionInstruction,
+  SignatureResult
+} from "@solana/web3.js";
+
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+import { TransferDetailsCard } from "./TransferDetailsCard";
+import { AssignDetailsCard } from "./AssignDetailsCard";
+import { CreateDetailsCard } from "./CreateDetailsCard";
+import { CreateWithSeedDetailsCard } from "./CreateWithSeedDetailsCard";
+import { NonceInitializeDetailsCard } from "./NonceInitializeDetailsCard";
+import { NonceAdvanceDetailsCard } from "./NonceAdvanceDetailsCard";
+import { NonceWithdrawDetailsCard } from "./NonceWithdrawDetailsCard";
+import { NonceAuthorizeDetailsCard } from "./NonceAuthorizeDetailsCard";
+
+type DetailsProps = {
+  ix: TransactionInstruction;
+  result: SignatureResult;
+  index: number;
+};
+
+export function SystemDetailsCard(props: DetailsProps) {
+  let systemInstructionType;
+  try {
+    systemInstructionType = SystemInstruction.decodeInstructionType(props.ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  switch (systemInstructionType) {
+    case "Create":
+      return <CreateDetailsCard {...props} />;
+    case "Assign":
+      return <AssignDetailsCard {...props} />;
+    case "Transfer":
+      return <TransferDetailsCard {...props} />;
+    case "CreateWithSeed":
+      return <CreateWithSeedDetailsCard {...props} />;
+    case "AdvanceNonceAccount":
+      return <NonceAdvanceDetailsCard {...props} />;
+    case "WithdrawNonceAccount":
+      return <NonceWithdrawDetailsCard {...props} />;
+    case "AuthorizeNonceAccount":
+      return <NonceAuthorizeDetailsCard {...props} />;
+    case "InitializeNonceAccount":
+      return <NonceInitializeDetailsCard {...props} />;
+    default:
+      return <UnknownDetailsCard {...props} />;
+  }
+}

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

@@ -28,7 +28,6 @@ export function TransferDetailsCard(props: {
 
   const from = transfer.fromPubkey.toBase58();
   const to = transfer.toPubkey.toBase58();
-  const [fromMeta, toMeta] = ix.keys;
   return (
     <InstructionCard ix={ix} index={index} result={result} title="Transfer">
       <tr>
@@ -41,15 +40,7 @@ export function TransferDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>From Address</td>
-          <div className="mr-2 d-md-inline">From Address</div>
-          {!fromMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {fromMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={from}>
             <code>{from}</code>
@@ -58,15 +49,7 @@ export function TransferDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>
+        <td>To Address</td>
-          <div className="mr-2 d-md-inline">To Address</div>
-          {!toMeta.isWritable && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
-          )}
-          {toMeta.isSigner && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
-          )}
-        </td>
         <td className="text-right">
           <Copyable text={to}>
             <code>{to}</code>