Fix split error

* Make ping interval 45s

Co-authored-by: Vaclav Barta <vbarta@mangrove.cz>

components/Accounts.tsx

@@ -116,9 +116,16 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
-                  {activeAccount?.address}
+                  <a
+                    href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {activeAccount?.address}
+                  </a>
                 </Text>
               </Flex>
               <Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
@@ -215,7 +222,11 @@ export const AccountDialog = ({
                   </Button>
                 </Text>
               </Flex>
-              <Flex css={{ marginLeft: "auto" }}>
+              <Flex
+                css={{
+                  marginLeft: "auto",
+                }}
+              >
                 <a
                   href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${activeAccount?.address}`}
                   target="_blank"
@@ -237,10 +248,22 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    a: { "&:hover": { textDecoration: "underline" } },
                   }}
                 >
                   {activeAccount && activeAccount.hooks.length > 0
-                    ? activeAccount.hooks.map((i) => truncate(i, 12)).join(",")
+                    ? activeAccount.hooks.map((i) => {
+                        return (
+                          <a
+                            key={i}
+                            href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${i}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {truncate(i, 12)}
+                          </a>
+                        );
+                      })
                     : "–"}
                 </Text>
               </Flex>

components/DebugStream.tsx

@@ -1,5 +1,7 @@
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
+import ReconnectingWebSocket, { CloseEvent } from "reconnecting-websocket";
 import { proxy, ref, useSnapshot } from "valtio";
+import { subscribeKey } from "valtio/utils";
 import { Select } from ".";
 import state, { ILog, transactionsState } from "../state";
 import { extractJSON } from "../utils/json";
@@ -15,7 +17,7 @@ export interface IStreamState {
   status: "idle" | "opened" | "closed";
   statusChangeTimestamp?: number;
   logs: ILog[];
-  socket?: WebSocket;
+  socket?: ReconnectingWebSocket;
 }
 
 export const streamState = proxy<IStreamState>({
@@ -24,12 +26,85 @@ export const streamState = proxy<IStreamState>({
   logs: [] as ILog[],
 });
 
+const onOpen = (account: ISelect | null) => {
+  if (!account) {
+    return;
+  }
+  // streamState.logs = [];
+  streamState.status = "opened";
+  streamState.statusChangeTimestamp = Date.now();
+
+  pushLog(`Debug stream opened for account ${account?.value}`, {
+    type: "success",
+  });
+};
+const onError = () => {
+  pushLog("Something went wrong! Check your connection and try again.", {
+    type: "error",
+  });
+};
+const onClose = (e: CloseEvent) => {
+  // 999 = closed websocket connection by switching account
+  if (e.code !== 4999) {
+    pushLog(`Connection was closed. [code: ${e.code}]`, {
+      type: "error",
+    });
+  }
+  streamState.status = "closed";
+  streamState.statusChangeTimestamp = Date.now();
+};
+const onMessage = (event: any) => {
+  // Ping returns just account address, if we get that
+  // response we don't need to log anything
+  if (event.data !== streamState.selectedAccount?.value) {
+    pushLog(event.data);
+  }
+};
+
+let interval: NodeJS.Timer | null = null;
+
+const addListeners = (account: ISelect | null) => {
+  if (account?.value && streamState.socket?.url.endsWith(account?.value)) {
+    return;
+  }
+  streamState.logs = [];
+  if (account?.value) {
+    if (interval) {
+      clearInterval(interval);
+    }
+    if (streamState.socket) {
+      streamState.socket?.removeEventListener("open", () => onOpen(account));
+      streamState.socket?.removeEventListener("close", onClose);
+      streamState.socket?.removeEventListener("error", onError);
+      streamState.socket?.removeEventListener("message", onMessage);
+    }
+
+    streamState.socket = ref(
+      new ReconnectingWebSocket(
+        `wss://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/${account?.value}`
+      )
+    );
+    if (streamState.socket) {
+      interval = setInterval(() => {
+        streamState.socket?.send("");
+      }, 45000);
+    }
+
+    streamState.socket.addEventListener("open", () => onOpen(account));
+    streamState.socket.addEventListener("close", onClose);
+    streamState.socket.addEventListener("error", onError);
+    streamState.socket.addEventListener("message", onMessage);
+  }
+};
+
+subscribeKey(streamState, "selectedAccount", addListeners);
+
 const DebugStream = () => {
-  const { selectedAccount, logs, socket } = useSnapshot(streamState);
+  const { selectedAccount, logs } = useSnapshot(streamState);
   const { activeHeader: activeTxTab } = useSnapshot(transactionsState);
   const { accounts } = useSnapshot(state);
 
-  const accountOptions = accounts.map(acc => ({
+  const accountOptions = accounts.map((acc) => ({
     label: acc.name,
     value: acc.address,
   }));
@@ -42,117 +117,21 @@ const DebugStream = () => {
         options={accountOptions}
         hideSelectedOptions
         value={selectedAccount}
-        onChange={acc => (streamState.selectedAccount = acc as any)}
+        onChange={(acc) => {
+          streamState.socket?.close(
+            4999,
+            "Old connection closed because user switched account"
+          );
+          streamState.selectedAccount = acc as any;
+        }}
         css={{ width: "100%" }}
       />
     </>
   );
 
-  useEffect(() => {
-    const account = selectedAccount?.value;
-    if (account && (!socket || !socket.url.endsWith(account))) {
-      socket?.close();
-      streamState.socket = ref(
-        new WebSocket(
-          `wss://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/${account}`
-        )
-      );
-    } else if (!account && socket) {
-      socket.close();
-      streamState.socket = undefined;
-    }
-  }, [selectedAccount?.value, socket]);
-
-  const onMount = useCallback(async () => {
-    // deliberately using `proxy` values and not the `useSnapshot` ones to have no dep list
-    const acc = streamState.selectedAccount;
-    const status = streamState.status;
-
-    if (status === "opened" && acc) {
-      // fetch the missing ones
-      try {
-        const url = `https://${process.env.NEXT_PUBLIC_DEBUG_STREAM_URL}/recent/${acc?.value}`;
-
-        // TODO Remove after api sets cors properly
-        const res = await fetch("/api/proxy", {
-          method: "POST",
-          body: JSON.stringify({ url }),
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!res.ok) return;
-
-        const body = await res.json();
-
-        if (!body?.logs) return;
-
-        const start = streamState.statusChangeTimestamp || 0;
-        streamState.logs = [];
-        pushLog(`Debug stream opened for account ${acc.value}`, {
-          type: "success",
-        });
-
-        const logs = Object.entries(body.logs).filter(([tm]) => +tm >= start);
-
-        logs.forEach(([tm, log]) => pushLog(log));
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    onMount();
-  }, [onMount]);
-
-  useEffect(() => {
-    const account = selectedAccount?.value;
-    const socket = streamState.socket;
-    if (!socket) return;
-
-    const onOpen = () => {
-      streamState.logs = [];
-      streamState.status = "opened";
-      streamState.statusChangeTimestamp = Date.now();
-      pushLog(`Debug stream opened for account ${account}`, {
-        type: "success",
-      });
-    };
-    const onError = () => {
-      pushLog("Something went wrong! Check your connection and try again.", {
-        type: "error",
-      });
-    };
-    const onClose = (e: CloseEvent) => {
-      pushLog(`Connection was closed. [code: ${e.code}]`, {
-        type: "error",
-      });
-      streamState.selectedAccount = null;
-      streamState.status = "closed";
-      streamState.statusChangeTimestamp = Date.now();
-    };
-    const onMessage = (event: any) => {
-      pushLog(event.data);
-    };
-
-    socket.addEventListener("open", onOpen);
-    socket.addEventListener("close", onClose);
-    socket.addEventListener("error", onError);
-    socket.addEventListener("message", onMessage);
-
-    return () => {
-      socket.removeEventListener("open", onOpen);
-      socket.removeEventListener("close", onClose);
-      socket.removeEventListener("message", onMessage);
-      socket.removeEventListener("error", onError);
-    };
-  }, [selectedAccount?.value, socket]);
-
   useEffect(() => {
     const account = transactionsState.transactions.find(
-      tx => tx.header === activeTxTab
+      (tx) => tx.header === activeTxTab
     )?.state.selectedAccount;
 
     if (account && account.value !== streamState.selectedAccount?.value)

components/EditorNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
 import {
   Plus,
   Share,
@@ -101,7 +101,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
       if (!filename) {
         return { error: "You need to add filename" };
       }
-      if (snap.files.find(file => file.name === filename)) {
+      if (snap.files.find((file) => file.name === filename)) {
         return { error: "Filename already exists." };
       }
 
@@ -132,22 +132,55 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
     createNewFile(filename);
     setFilename("");
   }, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
-
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const files = snap.files;
   return (
     <Flex css={{ flexShrink: 0, gap: "$0" }}>
       <Flex
+        id="kissa"
+        ref={scrollRef}
         css={{
           overflowX: "scroll",
+          overflowY: "hidden",
           py: "$3",
+          pb: "$0",
           flex: 1,
           "&::-webkit-scrollbar": {
-            height: 0,
+            height: "0.3em",
-            background: "transparent",
+            background: "rgba(0,0,0,.0)",
+          },
+          "&::-webkit-scrollbar-gutter": "stable",
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "rgba(0,0,0,.2)",
+            outline: "0px",
+            borderRadius: "9999px",
+          },
+          scrollbarColor: "rgba(0,0,0,.2) rgba(0,0,0,0)",
+          scrollbarGutter: "stable",
+          scrollbarWidth: "thin",
+          ".dark &": {
+            "&::-webkit-scrollbar": {
+              background: "rgba(0,0,0,.0)",
+            },
+            "&::-webkit-scrollbar-gutter": "stable",
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "rgba(255,255,255,.2)",
+              outline: "0px",
+              borderRadius: "9999px",
+            },
+            scrollbarColor: "rgba(255,255,255,.2) rgba(0,0,0,0)",
+            scrollbarGutter: "stable",
+            scrollbarWidth: "thin",
           },
         }}
+        onWheelCapture={(e) => {
+          if (scrollRef.current) {
+            scrollRef.current.scrollLeft += e.deltaY;
+          }
+        }}
       >
-        <Container css={{ flex: 1 }}>
+        <Container css={{ flex: 1 }} ref={containerRef}>
           <Stack
             css={{
               gap: "$3",
@@ -233,8 +266,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                     <Label>Filename</Label>
                     <Input
                       value={filename}
-                      onChange={e => setFilename(e.target.value)}
+                      onChange={(e) => setFilename(e.target.value)}
-                      onKeyPress={e => {
+                      onKeyPress={(e) => {
                         if (e.key === "Enter") {
                           handleConfirm();
                         }
@@ -509,8 +542,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
               type="number"
               min="1"
               value={editorSettings.tabSize}
-              onChange={e =>
+              onChange={(e) =>
-                setEditorSettings(curr => ({
+                setEditorSettings((curr) => ({
                   ...curr,
                   tabSize: Number(e.target.value),
                 }))

components/HooksEditor.tsx

@@ -164,21 +164,15 @@ const HooksEditor = () => {
                 onConnection: (connection) => {
                   // create and start the language client
                   const languageClient = createLanguageClient(connection);
-                  languageClient.start();
+                  const disposable = languageClient.start();
-                  // connection.onDispose((d) => {
+
-                  //   console.log("disposed: ", d);
+                  connection.onClose(() => {
-                  // });
+                    try {
-                  // connection.onError((ee) => {
+                      disposable.dispose();
-                  //   console.log(ee =)
+                    } catch (err) {
-                  // })
+                      console.log("err", err);
-                  // connection.onClose(() => {
+                    }
-                  //   try {
+                  });
-                  //     // disposable.stop();
-                  //     disposable.dispose();
-                  //   } catch (err) {
-                  //     console.log("err", err);
-                  //   }
-                  // });
                 },
               });
             }

components/Navigation.tsx

@@ -30,12 +30,6 @@ import PanelBox from "./PanelBox";
 import { templateFileIds } from "../state/constants";
 import { styled } from "../stitches.config";
 
-import Starter from "../components/icons/Starter";
-import Firewall from "../components/icons/Firewall";
-import Notary from "../components/icons/Notary";
-import Carbon from "../components/icons/Carbon";
-import Peggy from "../components/icons/Peggy";
-
 const ImageWrapper = styled(Flex, {
   position: "relative",
   mt: "$2",
@@ -301,66 +295,18 @@ const Navigation = () => {
                         },
                       }}
                     >
-                      <PanelBox
+                      {Object.values(templateFileIds).map((template) => (
-                        as="a"
+                        <PanelBox
-                        href={`/develop/${templateFileIds.starter}`}
+                          key={template.id}
-                      >
+                          as="a"
-                        <ImageWrapper>
+                          href={`/develop/${template.id}`}
-                          <Starter />
+                        >
-                        </ImageWrapper>
+                          <ImageWrapper>{template.icon()}</ImageWrapper>
-                        <Heading>Starter</Heading>
+                          <Heading>{template.name}</Heading>
 
-                        <Text>
+                          <Text>{template.description}</Text>
-                          Just a basic starter with essential imports, just
+                        </PanelBox>
-                          accepts any transaction coming through
+                      ))}
-                        </Text>
-                      </PanelBox>
-
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.firewall}`}
-                        css={{ alignItems: "flex-start" }}
-                      >
-                        <ImageWrapper>
-                          <Firewall />
-                        </ImageWrapper>
-                        <Heading>Firewall</Heading>
-                        <Text>
-                          This Hook essentially checks a blacklist of accounts
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.notary}`}
-                      >
-                        <ImageWrapper>
-                          <Notary />
-                        </ImageWrapper>
-                        <Heading>Notary</Heading>
-                        <Text>
-                          Collecting signatures for multi-sign transactions
-                        </Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.carbon}`}
-                      >
-                        <ImageWrapper>
-                          <Carbon />
-                        </ImageWrapper>
-                        <Heading>Carbon</Heading>
-                        <Text>Send a percentage of sum to an address</Text>
-                      </PanelBox>
-                      <PanelBox
-                        as="a"
-                        href={`/develop/${templateFileIds.peggy}`}
-                      >
-                        <ImageWrapper>
-                          <Peggy />
-                        </ImageWrapper>
-                        <Heading>Peggy</Heading>
-                        <Text>An oracle based stable coin hook</Text>
-                      </PanelBox>
                     </Flex>
                   </Flex>
                   <DialogClose asChild>
@@ -394,6 +340,8 @@ const Navigation = () => {
               height: 0,
               background: "transparent",
             },
+            scrollbarColor: "transparent",
+            scrollbarWidth: "none",
           }}
         >
           <Stack

components/SetHookDialog.tsx

@@ -22,12 +22,12 @@ import {
 import { TTS, tts } from "../utils/hookOnCalculator";
 import { deployHook } from "../state/actions";
 import { useSnapshot } from "valtio";
-import state from "../state";
+import state, { SelectOption } from "../state";
 import toast from "react-hot-toast";
 import { prepareDeployHookTx, sha256 } from "../state/actions/deployHook";
 import estimateFee from "../utils/estimateFee";
 
-const transactionOptions = Object.keys(tts).map((key) => ({
+const transactionOptions = Object.keys(tts).map(key => ({
   label: key,
   value: key as keyof TTS,
 }));
@@ -56,9 +56,22 @@ export type SetHookData = {
 export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
   ({ accountAddress }) => {
     const snap = useSnapshot(state);
-    const account = snap.accounts.find((acc) => acc.address === accountAddress);
+    const activeFile = snap.files[snap.active]?.compiledContent
-
+      ? snap.files[snap.active]
+      : snap.files.filter(file => file.compiledContent)[0];
     const [isSetHookDialogOpen, setIsSetHookDialogOpen] = useState(false);
+
+    const accountOptions: SelectOption[] = snap.accounts.map(acc => ({
+      label: acc.name,
+      value: acc.address,
+    }));
+
+    const [selectedAccount, setSelectedAccount] = useState(
+      accountOptions.find(acc => acc.value === accountAddress)
+    );
+    const account = snap.accounts.find(
+      acc => acc.address === selectedAccount?.value
+    );
     const {
       register,
       handleSubmit,
@@ -68,11 +81,13 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       getValues,
       formState: { errors },
     } = useForm<SetHookData>({
-      defaultValues: {
+      defaultValues: snap.deployValues?.[activeFile?.name]
-        HookNamespace:
+        ? snap.deployValues[activeFile?.name]
-          snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+        : {
-        Invoke: transactionOptions.filter((to) => to.label === "ttPAYMENT"),
+            HookNamespace:
-      },
+              snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
+            Invoke: transactionOptions.filter(to => to.label === "ttPAYMENT"),
+          },
     });
     const { fields, append, remove } = useFieldArray({
       control,
@@ -81,14 +96,21 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     const [formInitialized, setFormInitialized] = useState(false);
     const [estimateLoading, setEstimateLoading] = useState(false);
     const watchedFee = watch("Fee");
+
     // Update value if activeWat changes
     useEffect(() => {
-      setValue(
+      const defaultValue = snap.deployValues?.[activeFile?.name]
-        "HookNamespace",
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
-        snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "";
-      );
+      setValue("HookNamespace", defaultValue);
       setFormInitialized(true);
-    }, [snap.activeWat, snap.files, setValue]);
+    }, [
+      snap.activeWat,
+      snap.files,
+      setValue,
+      activeFile?.name,
+      snap.deployValues,
+    ]);
     useEffect(() => {
       if (
         watchedFee &&
@@ -108,7 +130,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
     const [hashedNamespace, setHashedNamespace] = useState("");
     const namespace = watch(
       "HookNamespace",
-      snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+      snap.deployValues?.[activeFile?.name]
+        ? snap.deployValues?.[activeFile?.name].HookNamespace
+        : snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
     );
     const calculateHashedValue = useCallback(async () => {
       const hashedVal = await sha256(namespace);
@@ -136,14 +160,10 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [formInitialized]);
 
-    if (!account) {
-      return null;
-    }
-
     const tooLargeFile = () => {
       const activeFile = snap.files[snap.active].compiledContent
         ? snap.files[snap.active]
-        : snap.files.filter((file) => file.compiledContent)[0];
+        : snap.files.filter(file => file.compiledContent)[0];
       return Boolean(
         activeFile?.compiledContent?.byteLength &&
           activeFile?.compiledContent?.byteLength >= 64000
@@ -152,8 +172,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
 
     const onSubmit: SubmitHandler<SetHookData> = async (data) => {
       const currAccount = state.accounts.find(
-        (acc) => acc.address === account.address
+        (acc) => acc.address === account?.address
       );
+      if (!account) return;
       if (currAccount) currAccount.isLoading = true;
       const res = await deployHook(account, data);
       if (currAccount) currAccount.isLoading = false;
@@ -173,8 +194,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             uppercase
             variant={"secondary"}
             disabled={
+              !account ||
               account.isLoading ||
-              !snap.files.filter((file) => file.compiledWatContent).length ||
+              !snap.files.filter(file => file.compiledWatContent).length ||
               tooLargeFile()
             }
           >
@@ -186,14 +208,22 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
             <DialogTitle>Deploy configuration</DialogTitle>
             <DialogDescription as="div">
               <Stack css={{ width: "100%", flex: 1 }}>
+                <Box css={{ width: "100%" }}>
+                  <Label>Account</Label>
+                  <Select
+                    instanceId="deploy-account"
+                    placeholder="Select account"
+                    hideSelectedOptions
+                    options={accountOptions}
+                    value={selectedAccount}
+                    onChange={(acc: any) => setSelectedAccount(acc)}
+                  />
+                </Box>
                 <Box css={{ width: "100%" }}>
                   <Label>Invoke on transactions</Label>
                   <Controller
                     name="Invoke"
                     control={control}
-                    defaultValue={transactionOptions.filter(
-                      (to) => to.label === "ttPAYMENT"
-                    )}
                     render={({ field }) => (
                       <Select
                         {...field}
@@ -210,9 +240,6 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                   <Input
                     {...register("HookNamespace", { required: true })}
                     autoComplete={"off"}
-                    defaultValue={
-                      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
-                    }
                   />
                   {errors.HookNamespace?.type === "required" && (
                     <Box css={{ display: "inline", color: "$red11" }}>
@@ -275,7 +302,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                       type="number"
                       {...register("Fee", { required: true })}
                       autoComplete={"off"}
-                      onKeyPress={(e) => {
+                      onKeyPress={e => {
                         if (e.key === "." || e.key === ",") {
                           e.preventDefault();
                         }
@@ -307,8 +334,9 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                         alignContent: "center",
                         display: "flex",
                       }}
-                      onClick={async (e) => {
+                      onClick={async e => {
                         e.preventDefault();
+                        if (!account) return;
                         setEstimateLoading(true);
                         const formValues = getValues();
                         try {
@@ -407,7 +435,7 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
               <Button
                 variant="primary"
                 type="submit"
-                isLoading={account.isLoading}
+                isLoading={account?.isLoading}
               >
                 Set Hook
               </Button>

components/Tabs.tsx

@@ -31,13 +31,15 @@ interface TabProps {
 
 // TODO customise messages shown
 interface Props {
+  label?: string;
   activeIndex?: number;
   activeHeader?: string;
   headless?: boolean;
   children: ReactElement<TabProps>[];
   keepAllAlive?: boolean;
   defaultExtension?: string;
-  forceDefaultExtension?: boolean;
+  appendDefaultExtension?: boolean;
+  allowedExtensions?: string[];
   onCreateNewTab?: (name: string) => any;
   onCloseTab?: (index: number, header?: string) => any;
   onChangeActive?: (index: number, header?: string) => any;
@@ -46,6 +48,7 @@ interface Props {
 export const Tab = (props: TabProps) => null;
 
 export const Tabs = ({
+  label = "Tab",
   children,
   activeIndex,
   activeHeader,
@@ -55,7 +58,8 @@ export const Tabs = ({
   onCloseTab,
   onChangeActive,
   defaultExtension = "",
-  forceDefaultExtension,
+  appendDefaultExtension = false,
+  allowedExtensions,
 }: Props) => {
   const [active, setActive] = useState(activeIndex || 0);
   const tabs: TabProps[] = children.map(elem => elem.props);
@@ -86,9 +90,13 @@ export const Tabs = ({
       if (tabs.find(tab => tab.header === tabname)) {
         return { error: "Name already exists." };
       }
+      const ext = tabname.split(".").pop() || "";
+      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+        return { error: "This file extension is not allowed!" };
+      }
       return { error: null };
     },
-    [tabs]
+    [allowedExtensions, tabs]
   );
 
   const handleActiveChange = useCallback(
@@ -101,9 +109,11 @@ export const Tabs = ({
 
   const handleCreateTab = useCallback(() => {
     // add default extension in case omitted
-    let _tabname = tabname.includes(".") ? tabname : tabname + defaultExtension;
+    let _tabname = tabname.includes(".")
-    if (forceDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      ? tabname
-      _tabname = _tabname + defaultExtension;
+      : `${tabname}.${defaultExtension}`;
+    if (appendDefaultExtension && !_tabname.endsWith(defaultExtension)) {
+      _tabname = `${_tabname}.${defaultExtension}`;
     }
 
     const chk = validateTabname(_tabname);
@@ -122,7 +132,7 @@ export const Tabs = ({
   }, [
     tabname,
     defaultExtension,
-    forceDefaultExtension,
+    appendDefaultExtension,
     validateTabname,
     onCreateNewTab,
     handleActiveChange,
@@ -206,13 +216,13 @@ export const Tabs = ({
                   size="sm"
                   css={{ alignItems: "center", px: "$2", mr: "$3" }}
                 >
-                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
+                  <Plus size="16px" /> {tabs.length === 0 && `Add new ${label.toLocaleLowerCase()}`}
                 </Button>
               </DialogTrigger>
               <DialogContent>
-                <DialogTitle>Create new tab</DialogTitle>
+                <DialogTitle>Create new {label.toLocaleLowerCase()}</DialogTitle>
                 <DialogDescription>
-                  <Label>Tabname</Label>
+                  <Label>{label} name</Label>
                   <Input
                     value={tabname}
                     onChange={e => setTabname(e.target.value)}

components/Transaction/ui.tsx

@@ -294,6 +294,8 @@ export const TxUI: FC<UIProps> = ({
                     size="xs"
                     variant="primary"
                     outline
+                    disabled={txState.txIsDisabled}
+                    isDisabled={txState.txIsDisabled}
                     isLoading={feeLoading}
                     css={{
                       position: "absolute",

package.json

@@ -36,6 +36,7 @@
     "monaco-editor": "^0.33.0",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
+    "next-plausible": "^3.2.0",
     "next-themes": "^0.1.1",
     "normalize-url": "^7.0.2",
     "octokit": "^1.7.0",

pages/_app.tsx

@@ -7,6 +7,7 @@ import { ThemeProvider } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { useRouter } from "next/router";
 import { IdProvider } from "@radix-ui/react-id";
+import PlausibleProvider from "next-plausible";
 
 import { darkTheme, css } from "../stitches.config";
 import Navigation from "../components/Navigation";
@@ -17,6 +18,8 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en.json";
 import { useSnapshot } from "valtio";
 import Alert from "../components/AlertDialog";
+import { Button, Flex } from "../components";
+import { ChatCircleText } from "phosphor-react";
 
 TimeAgo.setDefaultLocale(en.locale);
 TimeAgo.addLocale(en);
@@ -37,7 +40,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
       if (
         !gistId &&
         router.isReady &&
-        !router.pathname.includes("/sign-in") &&
+        router.pathname.includes("/develop") &&
         !snap.files.length &&
         !snap.mainModalShowed
       ) {
@@ -114,6 +117,7 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
           media="(prefers-color-scheme: light)"
         />
       </Head>
+
       <IdProvider>
         <SessionProvider session={session}>
           <ThemeProvider
@@ -125,23 +129,40 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
               dark: darkTheme.className,
             }}
           >
-            <Navigation />
+            <PlausibleProvider
-            <Component {...pageProps} />
+              domain="hooks-builder.xrpl.org"
-            <Toaster
+              trackOutboundLinks
-              toastOptions={{
+            >
-                className: css({
+              <Navigation />
-                  backgroundColor: "$mauve1",
+              <Component {...pageProps} />
-                  color: "$mauve10",
+              <Toaster
-                  fontSize: "$sm",
+                toastOptions={{
-                  zIndex: 9999,
+                  className: css({
-                  ".dark &": {
+                    backgroundColor: "$mauve1",
-                    backgroundColor: "$mauve4",
+                    color: "$mauve10",
-                    color: "$mauve12",
+                    fontSize: "$sm",
-                  },
+                    zIndex: 9999,
-                })(),
+                    ".dark &": {
-              }}
+                      backgroundColor: "$mauve4",
-            />
+                      color: "$mauve12",
-            <Alert />
+                    },
+                  })(),
+                }}
+              />
+              <Alert />
+              <Flex
+                as="a"
+                href="https://github.com/XRPLF/Hooks/discussions"
+                target="_blank"
+                rel="noopener noreferrer"
+                css={{ position: "fixed", right: "$4", bottom: "$4" }}
+              >
+                <Button size="sm" variant="primary" outline>
+                  <ChatCircleText size={14} style={{ marginRight: "0px" }} />
+                  Bugs & Discussions
+                </Button>
+              </Flex>
+            </PlausibleProvider>
           </ThemeProvider>
         </SessionProvider>
       </IdProvider>

pages/test/[[...slug]].tsx

@@ -32,14 +32,20 @@ const Test = () => {
   if (!showComponent) {
     return null;
   }
-  const hasScripts =
+  const hasScripts = Boolean(
-    snap.files.filter((f) => f.name.endsWith(".js")).length > 0;
+    snap.files.filter((f) => f.name.toLowerCase()?.endsWith(".js")).length
+  );
+
   return (
     <Container css={{ px: 0 }}>
       <Split
         direction="vertical"
         sizes={
-          getSplit("testVertical") || (hasScripts ? [50, 20, 30] : [50, 50])
+          hasScripts && getSplit("testVertical")?.length === 2
+            ? [50, 20, 30]
+            : hasScripts
+            ? [50, 20, 50]
+            : [50, 50, 0]
         }
         gutterSize={4}
         gutterAlign="center"
@@ -70,14 +76,15 @@ const Test = () => {
           >
             <Box css={{ width: "55%", px: "$2" }}>
               <Tabs
+                label='Transaction'
                 activeHeader={activeHeader}
                 // TODO make header a required field
                 onChangeActive={(idx, header) => {
                   if (header) transactionsState.activeHeader = header;
                 }}
                 keepAllAlive
-                forceDefaultExtension
+                defaultExtension="json"
-                defaultExtension=".json"
+                allowedExtensions={['json']}
                 onCreateNewTab={(header) => modifyTransaction(header, {})}
                 onCloseTab={(idx, header) =>
                   header && modifyTransaction(header, undefined)
@@ -95,7 +102,7 @@ const Test = () => {
             </Box>
           </Split>
         </Flex>
-        {hasScripts && (
+        {hasScripts ? (
           <Flex
             as="div"
             css={{
@@ -110,7 +117,7 @@ const Test = () => {
               clearLog={() => (state.scriptLogs = [])}
             />
           </Flex>
-        )}
+        ) : null}
         <Flex>
           <Split
             direction="horizontal"

state/actions/deployHook.tsx

@@ -126,6 +126,10 @@ export const deployHook = async (
   data: SetHookData
 ) => {
   if (typeof window !== "undefined") {
+    const activeFile = state.files[state.active]?.compiledContent
+      ? state.files[state.active]
+      : state.files.filter((file) => file.compiledContent)[0];
+    state.deployValues[activeFile.name] = data;
     const tx = await prepareDeployHookTx(account, data);
     if (!tx) {
       return;

state/actions/fetchFiles.ts

@@ -19,7 +19,7 @@ export const fetchFiles = (gistId: string) => {
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
       .then(async res => {
-        if (!Object.values(templateFileIds).includes(gistId)) {
+        if (!Object.values(templateFileIds).map(v => v.id).includes(gistId)) {
           return res
         }
         // in case of templates, fetch header file(s) and append to res

state/constants/templates.ts

@@ -1,20 +1,41 @@
-// export const templateFileIds = {
+import Carbon from "../../components/icons/Carbon";
-//     'starter': '1d14e51e2e02dc0a508cb0733767a914', // TODO currently same as accept
+import Firewall from "../../components/icons/Firewall";
-//     'firewall': 'bcd6d0c0fcbe52545ddb802481ff9d26',
+import Notary from "../../components/icons/Notary";
-//     'notary': 'a789c75f591eeab7932fd702ed8cf9ea',
+import Peggy from "../../components/icons/Peggy";
-//     'carbon': '43925143fa19735d8c6505c34d3a6a47',
+import Starter from "../../components/icons/Starter";
-//     'peggy': 'ceaf352e2a65741341033ab7ef05c448',
-//     'headers': '9b448e8a55fab11ef5d1274cb59f9cf3'
-// }
 
 export const templateFileIds = {
-    'starter': '1f7d2963d9e342ea092286115274f3e3',
+    'starter': {
-    'firewall': '70edec690f0de4dd315fad1f4f996d8c',
+        id: '9106f1fe60482d90475bfe8f1315affe',
-    'notary': '3d5677768fe8a54c4f6317e185d9ba66',
+        name: 'Starter',
-    'carbon': 'a9fbcaf1b816b198c7fc0f62962bebf2',
+        description: 'Just a basic starter with essential imports, just accepts any transaction coming through',
-    'doubler': '56b86174aeb70b2b48eee962bad3e355',
+        icon: Starter
-    'peggy': 'd21298a37e1550b781682014762a567b',
+
-    'headers': '55f639bce59a49c58c45e663776b5138'
+    },
+    'firewall': {
+        id: '741816f53eddac862ef1ba400e1b9b84',
+        name: 'Firewall',
+        description: 'This Hook essentially checks a blacklist of accounts',
+        icon: Firewall
+    },
+    'notary': {
+        id: '0dfe12adb0aa75cff24c3c19497fb95a',
+        name: 'Notary',
+        description: 'Collecting signatures for multi-sign transactions',
+        icon: Notary
+    },
+    'carbon': {
+        id: '5941c19dce3e147948f564e224553c02',
+        name: 'Carbon',
+        description: 'Send a percentage of sum to an address',
+        icon: Carbon
+    },
+    'peggy': {
+        id: '52e61c02e777c44c913808981a4ca61f',
+        name: 'Peggy',
+        description: 'An oracle based stable coin hook',
+        icon: Peggy
+    },
 }
 
-export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'hookmacro.h']
+export const apiHeaderFiles = ['hookapi.h', 'sfcodes.h', 'macro.h', 'extern.h', 'error.h'];

state/index.ts

@@ -52,6 +52,8 @@ export interface ILog {
   defaultCollapsed?: boolean
 }
 
+export type DeployValue = Record<IFile['name'], any>;
+
 export interface IState {
   files: IFile[];
   gistId?: string | null;
@@ -82,7 +84,8 @@ export interface IState {
   compileOptions: {
     optimizationLevel: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
     strip: boolean
-  }
+  },
+  deployValues: DeployValue
 }
 
 // let localStorageState: null | string = null;
@@ -116,7 +119,8 @@ let initialState: IState = {
   compileOptions: {
     optimizationLevel: '-O2',
     strip: true
-  }
+  },
+  deployValues: {}
 };
 
 let localStorageAccounts: string | null = null;

yarn.lock

@@ -2981,6 +2981,11 @@ next-auth@^4.0.0-beta.5:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
+next-plausible@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.2.0.tgz#d801346253e0c1cf64a02b9fc3a42050455cbc47"
+  integrity sha512-OlYcLXBG3kKd/fKMpm8SZ5IkUKSFm1/8t7cv6e5bewIqlpdZpdWuSrjbdJpbmutb2KPLXHzilKp09zmDGjy9KQ==
+
 next-themes@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
@@ -3475,7 +3480,7 @@ react-select@^5.2.1:
 
 react-split@^2.0.14:
   version "2.0.14"
-  resolved "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz"
+  resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.14.tgz#ef198259bf43264d605f792fb3384f15f5b34432"
   integrity sha512-bKWydgMgaKTg/2JGQnaJPg51T6dmumTWZppFgEbbY0Fbme0F5TuatAScCLaqommbGQQf/ZT1zaejuPDriscISA==
   dependencies:
     prop-types "^15.5.7"