feat: separate simulation from run types

package.json

@@ -76,7 +76,7 @@
     "stream-browserify": "^3.0.0",
     "uuid": "^8.3.2",
     "web-vitals": "^0.2.4",
-    "zustand": "^4.1.5"
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
     "@types/bs58": "^4.0.1",
@@ -91,7 +91,7 @@
     "protobufjs-cli": "^1.1.1",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-visualizer": "^5.9.0",
-    "semantic-release": "^19.0.5",
+    "semantic-release": "^21.0.1",
     "semantic-release-export-data": "^1.0.1",
     "ts-json-schema-generator": "^1.2.0",
     "typescript": "^5.0.4",

src/components/Footer.tsx

@@ -9,7 +9,7 @@ import {
   Text,
   useColorModeValue,
 } from "@chakra-ui/react";
-import { FaGithub, FaLaptop, FaTwitter } from "react-icons/fa";
+import { FaGithub, FaTwitter } from "react-icons/fa";
 
 export const Footer: React.FC = () => (
   <Grid p="3" pb="5" templateColumns="repeat(3,1fr)" alignItems="center">
@@ -28,11 +28,8 @@ export const Footer: React.FC = () => (
         >
           <Icon as={FaGithub} />
         </Link>
-        <Link mr="4" href="https://twitter.com/labeleven_dev" isExternal>
-          <Icon as={FaTwitter} />
-        </Link>
         <Link href="https://twitter.com/sohrabwashere" isExternal>
-          <Icon as={FaLaptop} />
+          <Icon as={FaTwitter} />
         </Link>
       </Center>
     </Box>

src/components/client/ClientHeader.tsx

@@ -4,6 +4,7 @@ import {
   AlertDescription,
   AlertIcon,
   Button,
+  Checkbox,
   Collapse,
   Flex,
   Heading,
@@ -33,10 +34,9 @@ import { TRANSACTION_VERSIONS } from "utils/ui-constants";
 export const ClientHeader: React.FC<{ sendButton: React.ReactNode }> = ({
   sendButton,
 }) => {
-  const [runType, setUI] = useShallowSessionStoreWithoutUndo((state) => [
-    state.uiState.runType,
-    state.set,
-  ]);
+  const [runType, simulate, setUI] = useShallowSessionStoreWithoutUndo(
+    (state) => [state.uiState.runType, state.uiState.simulate, state.set]
+  );
 
   const [
     transactionVersion,
@@ -119,6 +119,19 @@ export const ClientHeader: React.FC<{ sendButton: React.ReactNode }> = ({
           }}
         />
 
+        <Checkbox
+          mx="2"
+          colorScheme="green"
+          isChecked={simulate}
+          onChange={(event) => {
+            setUI((state) => {
+              state.uiState.simulate = event.target.checked;
+            });
+          }}
+        >
+          Simulate
+        </Checkbox>
+
         {sendButton}
 
         <Spacer />
@@ -181,9 +194,7 @@ export const ClientHeader: React.FC<{ sendButton: React.ReactNode }> = ({
         </Alert>
       </Collapse>
 
-      {(runType === "squadsSimulate" || runType === "squadsSend") && (
-        <SquadsConfig />
-      )}
+      {runType === "squads" && <SquadsConfig />}
 
       <Heading mt="5" mb="2" alignItems="center" flex="1" size="lg">
         <EditableName

src/components/client/SendButton.tsx

@@ -50,23 +50,11 @@ export const RUN_TYPES: {
 }[] = [
   { id: "send", name: "Send", type: "standard", icon: <Icon as={FaPlay} /> },
   {
-    id: "simulate",
-    name: "Simulate",
-    type: "standard",
-    icon: <Icon as={FaFlask} />,
-  },
-  {
-    id: "squadsSend",
+    id: "squads",
     name: "Send to Squads",
     type: "integration",
     icon: <SquadsIcon />,
   },
-  {
-    id: "squadsSimulate",
-    name: "Simulate to Squads",
-    type: "integration",
-    icon: <SquadsIcon />,
-  },
 ];
 
 export const SendButton: React.FC<{
@@ -76,13 +64,13 @@ export const SendButton: React.FC<{
   const scrollToResults = useConfigStore(
     (state) => state.appOptions.scrollToResults
   );
-  const [runType, inProgress, setUI] = useShallowSessionStoreWithoutUndo(
-    (state) => [
+  const [runType, simulate, inProgress, setUI] =
+    useShallowSessionStoreWithoutUndo((state) => [
       state.uiState.runType,
+      state.uiState.simulate,
       state.transactionRun.inProgress,
       state.set,
-    ]
-  );
+    ]);
 
   const { publicKey: walletPublicKey } = useWallet();
 
@@ -151,7 +139,7 @@ export const SendButton: React.FC<{
     scrollDown();
   };
 
-  const { simulate, send } = useSendWeb3Transaction({
+  const { simulate: sendSimulate, send } = useSendWeb3Transaction({
     onSimulated,
     onSent,
     onError,
@@ -171,13 +159,13 @@ export const SendButton: React.FC<{
       };
     });
 
-    if (runType === "simulate") {
-      simulate(transaction);
-    } else if (runType === "send") {
+    if (runType === "send" && simulate) {
+      sendSimulate(transaction);
+    } else if (runType === "send" && !simulate) {
       send(transaction);
-    } else if (runType === "squadsSimulate") {
+    } else if (runType === "squads" && simulate) {
       squadsSimulate(transaction);
-    } else if (runType === "squadsSend") {
+    } else if (runType === "squads" && !simulate) {
       squadsSend(transaction);
     }
   };
@@ -203,7 +191,9 @@ export const SendButton: React.FC<{
       hasArrow={!walletPublicKey}
       label={
         walletPublicKey
-          ? "Send transaction"
+          ? simulate
+            ? "Simulate transaction"
+            : "Send transaction"
           : "Please connect a wallet to continue"
       }
     >
@@ -215,7 +205,8 @@ export const SendButton: React.FC<{
           w="fit-content"
           colorScheme="green"
           aria-label="Send transaction"
-          rightIcon={runIcon}
+          rightIcon={simulate ? <Icon as={FaFlask} /> : runIcon}
+          boxShadow={!simulate ? "0 0 8px 1px #9AE6B4" : undefined}
           onClick={onClick}
         >
           {runName}
@@ -228,6 +219,7 @@ export const SendButton: React.FC<{
             variant="outline"
             colorScheme="green"
             aria-label="More"
+            boxShadow={!simulate ? "0 0 8px 1px #9AE6B4" : undefined}
             icon={<TriangleDownIcon w="2" />}
           />
           <MenuList fontSize="md">

src/components/client/SquadsConfig.tsx

@@ -28,7 +28,7 @@ export const SquadsConfig: React.FC = () => {
     useSessionStoreWithUndo((state) => [state.squadsConfig, state.set]);
 
   const [transactionPda, setTransactionPda] = useState("");
-  const { isLoading: transactionPdaIsLoading, refetch: getTransactionPda } =
+  const { isFetching: transactionPdaIsLoading, refetch: getTransactionPda } =
     useTransactionPda(programId, multisig, (pubkey) => {
       if (!!pubkey) {
         setTransactionPda(pubkey.toBase58());

src/hooks/squads.ts

@@ -15,7 +15,7 @@ import { mapITransactionToWeb3Instructions } from "mappers/internal-to-web3js";
 import { useMemo } from "react";
 import { useQuery } from "react-query";
 import { ITransaction } from "types/internal";
-import { isValidPublicKey } from "utils/web3js";
+import { isValidPublicKey, toPublicKey } from "utils/web3js";
 
 export const useTransactionPda = (
   programId: string,
@@ -81,8 +81,8 @@ export const useSendToSquads = (
     }
 
     const anchorProvider = new AnchorProvider(connection, anchorWallet, {});
-    const programPubkey = new PublicKey(programId);
-    const multisigPda = new PublicKey(multisig);
+    const programPubkey = toPublicKey(programId, "Squads program");
+    const multisigPda = toPublicKey(multisig, "Multisig account");
 
     const squads = new Squads({
       connection: anchorProvider.connection,

src/hooks/useSessionStore.ts

@@ -1,8 +1,8 @@
 import produce from "immer";
 import { SessionStateWithoutUndo, SessionStateWithUndo } from "types/state";
 import {
-  DEFAULT_SESSION_STATE_WITHOUT_UNDO,
   DEFAULT_SESSION_STATE_WITH_UNDO,
+  DEFAULT_SESSION_STATE_WITHOUT_UNDO,
 } from "utils/state";
 import create from "zustand";
 import { persist, subscribeWithSelector } from "zustand/middleware";

src/types/state.ts

@@ -17,7 +17,7 @@ export type Explorer =
   | "solscan"
   | "none";
 
-export type RunType = "send" | "simulate" | "squadsSimulate" | "squadsSend";
+export type RunType = "send" | "squads";
 
 // We mutate state using immerjs. All state fields are set to readonly
 // so we don't by mistake try to mutate outside immerjs.
@@ -32,6 +32,7 @@ export interface AppOptions {
 
 export interface UIState {
   readonly runType: RunType;
+  readonly simulate: boolean;
   readonly sidePanel: "import" | "closed";
   readonly optionsOpen: boolean;
   readonly shareOpen: boolean;

src/utils/state.ts

@@ -120,6 +120,7 @@ export const DEFAULT_SESSION_STATE_WITHOUT_UNDO: SessionStateWithoutUndo = {
   transactionRun: DEFAULT_TRANSACTION_RUN,
   uiState: {
     runType: "send",
+    simulate: false,
     sidePanel: "closed",
     optionsOpen: false,
     shareOpen: false,

src/utils/web3js.ts

@@ -1,6 +1,7 @@
 import { SIGHASH_GLOBAL_NAMESPACE } from "@project-serum/anchor/dist/cjs/coder/borsh/instruction";
 import {
   LAMPORTS_PER_SOL,
+  PublicKey,
   TransactionVersion,
   VersionedTransaction,
 } from "@solana/web3.js";
@@ -32,6 +33,16 @@ export const isValidPublicKey = (key: string): boolean => {
   return valid;
 };
 
+export const toPublicKey = (key: string, field?: string): PublicKey => {
+  try {
+    return new PublicKey(key);
+  } catch (_) {
+    throw new Error(
+      `Invalid public key${field ? " in " + field : ""}: ${key || "N/A"}`
+    );
+  }
+};
+
 export const toTransactionVersion = (
   version: string | undefined
 ): TransactionVersion =>