Add support for more system instructions

explorer/package-lock.json

@@ -1269,9 +1269,8 @@
       "integrity": "sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw=="
     },
     "@solana/web3.js": {
-      "version": "0.48.1",
+      "version": "github:jstarry/solana-web3.js#93d3d4e6288c99d028610254fb525f40b18b9dec",
-      "resolved": "https://registry.npmjs.org/@solana/web3.js/-/web3.js-0.48.1.tgz",
+      "from": "github:jstarry/solana-web3.js#add-system-ixs",
-      "integrity": "sha512-fzOv8yodlRI8ehjKJPX7Xd0wmswYrzWoHBnf3Anm0FdDaLT5J1riTcE9w6mHijnh97KuIGdD5DQ3J6RX0Sbp4g==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "bn.js": "^5.0.0",
@@ -1627,9 +1626,9 @@
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.6",
+      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.6.tgz",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.7.tgz",
-      "integrity": "sha512-U2oynuRIB17GIbEdvjFrrEACOy7GQkzsX7bPEBz1H41vZYEU4j0fLL97sawmHDwHUXpUQDBMHIyM9vejqP9o1A==",
+      "integrity": "sha512-EMgTj/DF9qpgLXyc+Btimg+XoH7A2liE8uKul8qSmMTHCeNYzydDKFdsJskDvw42UsesCnhO63dO0Grbj8J4Dw==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",

explorer/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@solana/web3.js": "^0.48.1",
+    "@solana/web3.js": "github:jstarry/solana-web3.js#add-system-ixs",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

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

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SystemProgram,
+  SignatureResult,
+  SystemInstruction
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function AllocateDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = SystemInstruction.decodeAllocate(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const accountKey = params.accountPubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Allocate Account"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={SystemProgram.programId.toBase58()}>
+            <code>{displayAddress(SystemProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Account Address</td>
+        <td className="text-right">
+          <Copyable text={accountKey}>
+            <code>{accountKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Allocated Space (Bytes)</td>
+        <td className="text-right">{params.space}</td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -0,0 +1,89 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SystemProgram,
+  SignatureResult,
+  SystemInstruction
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function AllocateWithSeedDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = SystemInstruction.decodeAllocateWithSeed(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const accountKey = params.accountPubkey.toBase58();
+  const baseKey = params.basePubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Allocate Account w/ Seed"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={SystemProgram.programId.toBase58()}>
+            <code>{displayAddress(SystemProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Account Address</td>
+        <td className="text-right">
+          <Copyable text={accountKey}>
+            <code>{accountKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Base Address</td>
+        <td className="text-right">
+          <Copyable text={baseKey}>
+            <code>{baseKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Seed</td>
+        <td className="text-right">
+          <Copyable text={params.seed}>
+            <code>{params.seed}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Allocated Space (Bytes)</td>
+        <td className="text-right">{params.space}</td>
+      </tr>
+
+      <tr>
+        <td>Assigned Owner</td>
+        <td className="text-right">
+          <Copyable text={params.programId.toBase58()}>
+            <code>{displayAddress(params.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -25,7 +25,7 @@ export function AssignDetailsCard(props: {
     return <UnknownDetailsCard {...props} />;
   }
 
-  const from = params.fromPubkey.toBase58();
+  const accountKey = params.accountPubkey.toBase58();
 
   return (
     <InstructionCard
@@ -44,10 +44,10 @@ export function AssignDetailsCard(props: {
       </tr>
 
       <tr>
-        <td>From Address</td>
+        <td>Account Address</td>
         <td className="text-right">
-          <Copyable text={from}>
+          <Copyable text={accountKey}>
-            <code>{from}</code>
+            <code>{accountKey}</code>
           </Copyable>
         </td>
       </tr>

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

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  TransactionInstruction,
+  SystemProgram,
+  SignatureResult,
+  SystemInstruction
+} from "@solana/web3.js";
+import { displayAddress } from "utils/tx";
+import { InstructionCard } from "../InstructionCard";
+import Copyable from "components/Copyable";
+import { UnknownDetailsCard } from "../UnknownDetailsCard";
+
+export function AssignWithSeedDetailsCard(props: {
+  ix: TransactionInstruction;
+  index: number;
+  result: SignatureResult;
+}) {
+  const { ix, index, result } = props;
+
+  let params;
+  try {
+    params = SystemInstruction.decodeAssignWithSeed(ix);
+  } catch (err) {
+    console.error(err);
+    return <UnknownDetailsCard {...props} />;
+  }
+
+  const accountKey = params.accountPubkey.toBase58();
+  const baseKey = params.basePubkey.toBase58();
+
+  return (
+    <InstructionCard
+      ix={ix}
+      index={index}
+      result={result}
+      title="Assign Account w/ Seed"
+    >
+      <tr>
+        <td>Program</td>
+        <td className="text-right">
+          <Copyable bottom text={SystemProgram.programId.toBase58()}>
+            <code>{displayAddress(SystemProgram.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Account Address</td>
+        <td className="text-right">
+          <Copyable text={accountKey}>
+            <code>{accountKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Base Address</td>
+        <td className="text-right">
+          <Copyable text={baseKey}>
+            <code>{baseKey}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Seed</td>
+        <td className="text-right">
+          <Copyable text={params.seed}>
+            <code>{params.seed}</code>
+          </Copyable>
+        </td>
+      </tr>
+
+      <tr>
+        <td>Assigned Owner</td>
+        <td className="text-right">
+          <Copyable text={params.programId.toBase58()}>
+            <code>{displayAddress(params.programId)}</code>
+          </Copyable>
+        </td>
+      </tr>
+    </InstructionCard>
+  );
+}

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

@@ -7,7 +7,10 @@ import {
 
 import { UnknownDetailsCard } from "../UnknownDetailsCard";
 import { TransferDetailsCard } from "./TransferDetailsCard";
+import { AllocateDetailsCard } from "./AllocateDetailsCard";
+import { AllocateWithSeedDetailsCard } from "./AllocateWithSeedDetailsCard";
 import { AssignDetailsCard } from "./AssignDetailsCard";
+import { AssignWithSeedDetailsCard } from "./AssignWithSeedDetailsCard";
 import { CreateDetailsCard } from "./CreateDetailsCard";
 import { CreateWithSeedDetailsCard } from "./CreateWithSeedDetailsCard";
 import { NonceInitializeDetailsCard } from "./NonceInitializeDetailsCard";
@@ -33,12 +36,18 @@ export function SystemDetailsCard(props: DetailsProps) {
   switch (systemInstructionType) {
     case "Create":
       return <CreateDetailsCard {...props} />;
-    case "Assign":
-      return <AssignDetailsCard {...props} />;
-    case "Transfer":
-      return <TransferDetailsCard {...props} />;
     case "CreateWithSeed":
       return <CreateWithSeedDetailsCard {...props} />;
+    case "Allocate":
+      return <AllocateDetailsCard {...props} />;
+    case "AllocateWithSeed":
+      return <AllocateWithSeedDetailsCard {...props} />;
+    case "Assign":
+      return <AssignDetailsCard {...props} />;
+    case "AssignWithSeed":
+      return <AssignWithSeedDetailsCard {...props} />;
+    case "Transfer":
+      return <TransferDetailsCard {...props} />;
     case "AdvanceNonceAccount":
       return <NonceAdvanceDetailsCard {...props} />;
     case "WithdrawNonceAccount":