feat: load examples from menu

src/components/header/Example.tsx → src/components/header/Examples.tsx

@@ -9,9 +9,19 @@ import {
 } from "@chakra-ui/react";
 import { useWallet } from "@solana/wallet-adapter-react";
 import React from "react";
+import { useTransactionStore } from "../../hooks/useTransactionStore";
+import { EXAMPLES } from "../../models/examples";
+import { mapFromTransactionExt } from "../../models/external-mappers";
 
 export const Example: React.FC = () => {
   const { publicKey: walletPublicKey } = useWallet();
+  const setTransaction = useTransactionStore((state) => state.setTransaction);
+
+  const loadExample = (name: string) => {
+    setTransaction(
+      mapFromTransactionExt(EXAMPLES[name](walletPublicKey?.toBase58()!))
+    );
+  };
 
   return (
     <Menu>
@@ -36,8 +46,21 @@ export const Example: React.FC = () => {
       </Tooltip>
 
       <MenuList fontSize="md">
-        <MenuItem>System Program: Transfer SOL</MenuItem>
-        <MenuItem>System Program: Create Account</MenuItem>
+        <MenuItem
+          onClick={() => {
+            loadExample("systemProgramCreateAccount");
+          }}
+        >
+          System Program: Create Account
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            loadExample("systemProgramTransfer");
+          }}
+        >
+          System Program: Transfer SOL
+        </MenuItem>
+
         {/* TODO more examples */}
       </MenuList>
     </Menu>

src/components/header/Header.tsx

@@ -15,7 +15,7 @@ import { useState } from "react";
 import { FaRedo, FaUndo, FaWrench } from "react-icons/fa";
 import { useTransactionStore } from "../../hooks/useTransactionStore";
 import { ColorModeSwitcher } from "./ColorModeSwitcher";
-import { Example } from "./Example";
+import { Example } from "./Examples";
 import { WalletButton } from "./WalletButton";
 
 export const Header: React.FC = () => {

src/hooks/useTransactionStore.ts

@@ -1,11 +1,12 @@
 import produce from "immer";
+import { WritableDraft } from "immer/dist/internal";
 import create from "zustand";
-import { addTo, removeFrom } from "../models/sortable";
+import { addTo, IID, removeFrom } from "../models/sortable";
 import {
   DEFAULT_TRANSACTION_STATE,
   DEFAULT_UI_INSTRUCTION_STATE,
 } from "../models/state-default";
-import { TransactionState } from "../models/state-types";
+import { TransactionState, UIInstructionState } from "../models/state-types";
 
 const LOCAL_STORAGE_KEY = "bcsolTransactionState";
 
@@ -41,9 +42,23 @@ export const useTransactionStore = create<TransactionState>((set) => {
       set(produce(fn));
     },
     // define these helpers since they interact with different slices of state
+    setTransaction: (transaction) => {
+      set(
+        produce((state: WritableDraft<TransactionState>) => {
+          state.transaction = transaction;
+          state.uiState.instructions = transaction.instructions.order.reduce(
+            (acc, id) => {
+              acc[id] = DEFAULT_UI_INSTRUCTION_STATE;
+              return acc;
+            },
+            {} as Record<IID, UIInstructionState>
+          );
+        })
+      );
+    },
     addInstruction: (instruction) => {
       set(
-        produce((state) => {
+        produce((state: WritableDraft<TransactionState>) => {
           addTo(state.transaction.instructions, instruction);
           state.uiState.instructions[instruction.id] =
             DEFAULT_UI_INSTRUCTION_STATE;
@@ -52,7 +67,7 @@ export const useTransactionStore = create<TransactionState>((set) => {
     },
     removeInstruction: (instructionId) => {
       set(
-        produce((state) => {
+        produce((state: WritableDraft<TransactionState>) => {
           removeFrom(state.transaction.instructions, instructionId);
           delete state.uiState.instructions[instructionId];
         })

src/models/examples.ts

@@ -0,0 +1,97 @@
+import { Keypair } from "@solana/web3.js";
+import { ITransactionExt } from "./external-types";
+
+// TODO use export model instead and map across
+
+export const EXAMPLES: Record<
+  string,
+  (walletPublicKey: string) => ITransactionExt
+> = {
+  systemProgramCreateAccount: (walletPublicKey: string) => ({
+    name: "System Program: Create Account",
+    instructions: [
+      {
+        name: "Create Account",
+        programId: "11111111111111111111111111111111",
+        accounts: [
+          {
+            name: "From",
+            pubkey: walletPublicKey,
+            isWritable: true,
+            isSigner: true,
+          },
+          {
+            name: "To",
+            pubkey: Keypair.generate().publicKey.toBase58(),
+            isWritable: true,
+            isSigner: false,
+          },
+        ],
+        data: {
+          format: "bufferLayout",
+          value: [
+            {
+              name: "Instruction",
+              type: "u32",
+              value: 0,
+            },
+            {
+              name: "Lamport",
+              type: "u64",
+              value: 1400000,
+            },
+            {
+              name: "Space",
+              type: "u64",
+              value: 100,
+            },
+            {
+              name: "Program ID",
+              type: "publicKey",
+              value: 100,
+            },
+          ],
+        },
+      },
+    ],
+  }),
+
+  systemProgramTransfer: (walletPublicKey: string) => ({
+    name: "System Program: Transfer",
+    instructions: [
+      {
+        name: "Transfer",
+        programId: "11111111111111111111111111111111",
+        accounts: [
+          {
+            name: "From",
+            pubkey: walletPublicKey,
+            isWritable: true,
+            isSigner: true,
+          },
+          {
+            name: "To",
+            pubkey: "GoctE4EU5jZqbWg1Ffo5sjCqjrnzW1m76JmWwd84pwtV",
+            isWritable: true,
+            isSigner: false,
+          },
+        ],
+        data: {
+          format: "bufferLayout",
+          value: [
+            {
+              name: "Instruction",
+              type: "u32",
+              value: 2,
+            },
+            {
+              name: "Lamport",
+              type: "u64",
+              value: 1,
+            },
+          ],
+        },
+      },
+    ],
+  }),
+};

src/models/external-mappers.ts

@@ -0,0 +1,98 @@
+import { v4 as uuid } from "uuid";
+import { IInstrctionDataFieldExt, ITransactionExt } from "./external-types";
+import { IInstrctionDataField, ITransaction } from "./internal-types";
+import {
+  Identifiable,
+  SortableCollection,
+  toSortableCollection,
+  toSortedArray,
+} from "./sortable";
+
+const mapToIInstrctionDataFieldExt = ({
+  name,
+  type,
+  value,
+}: IInstrctionDataField): IInstrctionDataFieldExt => ({
+  name,
+  type,
+  value,
+});
+
+export const mapToTransactionExt = ({
+  name,
+  instructions,
+}: ITransaction): ITransactionExt => ({
+  name,
+  instructions: toSortedArray(instructions).map(
+    ({ name, programId, accounts, data }) => ({
+      name,
+      programId,
+      accounts: toSortedArray(accounts).map(
+        ({ name, pubkey, isWritable, isSigner }) => ({
+          name,
+          pubkey,
+          isWritable,
+          isSigner,
+        })
+      ),
+      data: {
+        format: data.format,
+        value:
+          data.format === "borsh"
+            ? toSortedArray(data.borsh).map(mapToIInstrctionDataFieldExt)
+            : data.format === "bufferLayout"
+            ? toSortedArray(data.bufferLayout).map(mapToIInstrctionDataFieldExt)
+            : data.raw,
+      },
+    })
+  ),
+});
+
+const mapToSortableCollection = <T>(
+  items: T[]
+): SortableCollection<T & Identifiable> =>
+  toSortableCollection(items.map((item) => ({ ...item, id: uuid() })));
+
+export const mapFromTransactionExt = ({
+  name,
+  instructions,
+}: ITransactionExt): ITransaction => ({
+  name,
+  instructions: mapToSortableCollection(
+    instructions.map(({ name, programId, accounts, data }) => ({
+      name,
+      programId,
+      accounts: mapToSortableCollection(
+        accounts.map(({ name, pubkey, isWritable, isSigner }) => ({
+          name,
+          pubkey,
+          isWritable,
+          isSigner,
+        }))
+      ),
+      data: {
+        format: data.format,
+        raw: data.format === "raw" ? (data.value as string) : "",
+        borsh: mapToSortableCollection(
+          data.format === "borsh"
+            ? (data.value as IInstrctionDataFieldExt[])
+            : []
+        ),
+        bufferLayout: mapToSortableCollection(
+          data.format === "bufferLayout"
+            ? (data.value as IInstrctionDataFieldExt[])
+            : []
+        ),
+      },
+    }))
+  ),
+});
+
+// const mapFromTransactionExport = (
+//   transaction: ITransactionExport
+// ): ITransaction => {
+// };
+
+// export const serialiseTransaction = (transaction: ITransaction): string => {};
+
+// export const deserialiseTransaction = (serialised: string): ITransaction => {};

src/models/external-types.ts

@@ -0,0 +1,35 @@
+// Models for the transaction to be exported
+
+import {
+  DataFormat,
+  InstructionDataFieldType,
+  IPubKey,
+} from "./internal-types";
+
+export interface IInstrctionDataFieldExt {
+  name?: string;
+  type: InstructionDataFieldType;
+  value: any;
+}
+
+export interface IAccountExt {
+  name?: string;
+  pubkey: IPubKey;
+  isWritable: boolean;
+  isSigner: boolean;
+}
+
+export interface IInstructionExt {
+  name?: string;
+  programId: IPubKey;
+  accounts: IAccountExt[];
+  data: {
+    format: DataFormat;
+    value: IInstrctionDataFieldExt[] | string;
+  };
+}
+
+export interface ITransactionExt {
+  name?: string;
+  instructions: IInstructionExt[];
+}

src/models/state-default.ts

@@ -99,6 +99,7 @@ export const DEFAULT_TRANSACTION_STATE: TransactionState = {
     welcomeOpen: true,
   },
   set: () => {}, // set by the hook
+  setTransaction: (_) => {}, // set by the hook
   addInstruction: (_) => {}, // set by the hook
   removeInstruction: (_) => {}, // set by the hook
 };

src/models/state-types.ts

@@ -40,11 +40,15 @@ export type OptionsState = {
   set: (fn: (state: Draft<OptionsState>) => void) => void;
 };
 
+// TODO split ITransaction out of the rest of the state
+// TODO implement undo/redo using https://github.com/charkour/zundo
+
 export type TransactionState = {
   readonly transaction: ITransaction;
   readonly results: IResults;
   readonly uiState: UIState;
   set: (fn: (state: Draft<TransactionState>) => void) => void;
+  setTransaction: (transaction: ITransaction) => void;
   addInstruction: (instruction: IInstruction) => void;
   removeInstruction: (instructionId: IID) => void;
 };