Remove example

Initial fix for issue #175

components/DebugStream.tsx

@@ -10,10 +10,18 @@ interface ISelect<T = string> {
   value: T;
 }
 
-export const streamState = proxy({
+export interface IStreamState {
+  selectedAccount: ISelect | null;
+  status: "idle" | "opened" | "closed";
+  statusChangeTimestamp?: number;
+  logs: ILog[];
+  socket?: WebSocket;
+}
+
+export const streamState = proxy<IStreamState>({
   selectedAccount: null as ISelect | null,
+  status: "idle",
   logs: [] as ILog[],
-  socket: undefined as WebSocket | undefined,
 });
 
 const DebugStream = () => {
@@ -40,33 +48,6 @@ const DebugStream = () => {
     </>
   );
 
-  const prepareLog = useCallback((str: any): ILog => {
-    if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
-
-    const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))\ ?([\s\S]*)/m);
-    const [_, tm, msg] = match || [];
-
-    const extracted = extractJSON(msg);
-    const timestamp = isNaN(Date.parse(tm || ""))
-      ? tm
-      : new Date(tm).toLocaleTimeString();
-
-    const message = !extracted
-      ? msg
-      : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
-
-    const jsonData = extracted
-      ? JSON.stringify(extracted.result, null, 2)
-      : undefined;
-    return {
-      type: "log",
-      message,
-      timestamp,
-      jsonData,
-      defaultCollapsed: true,
-    };
-  }, []);
-
   useEffect(() => {
     const account = selectedAccount?.value;
     if (account && (!socket || !socket.url.endsWith(account))) {
@@ -82,6 +63,50 @@ const DebugStream = () => {
     }
   }, [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;
@@ -89,37 +114,27 @@ const DebugStream = () => {
 
     const onOpen = () => {
       streamState.logs = [];
-      streamState.logs.push({
+      streamState.status = "opened";
+      streamState.statusChangeTimestamp = Date.now();
+      pushLog(`Debug stream opened for account ${account}`, {
         type: "success",
-        message: `Debug stream opened for account ${account}`,
       });
     };
     const onError = () => {
-      streamState.logs.push({
+      pushLog("Something went wrong! Check your connection and try again.", {
         type: "error",
-        message: "Something went wrong! Check your connection and try again.",
       });
     };
     const onClose = (e: CloseEvent) => {
-      streamState.logs.push({
+      pushLog(`Connection was closed. [code: ${e.code}]`, {
         type: "error",
-        message: `Connection was closed. [code: ${e.code}]`,
       });
       streamState.selectedAccount = null;
+      streamState.status = "closed";
+      streamState.statusChangeTimestamp = Date.now();
     };
     const onMessage = (event: any) => {
-      if (!event.data) return;
-      const log = prepareLog(event.data);
-      // Filter out account_info and account_objects requests
-      try {
-        const parsed = JSON.parse(log.jsonData);
-        if (parsed?.id?._Request?.includes("hooks-builder-req")) {
-          return;
-        }
-      } catch (err) {
-        // Lets just skip if we cannot parse the message
-      }
-      return streamState.logs.push(log);
+      pushLog(event.data);
     };
 
     socket.addEventListener("open", onOpen);
@@ -133,7 +148,7 @@ const DebugStream = () => {
       socket.removeEventListener("message", onMessage);
       socket.removeEventListener("error", onError);
     };
-  }, [prepareLog, selectedAccount?.value, socket]);
+  }, [selectedAccount?.value, socket]);
 
   useEffect(() => {
     const account = transactionsState.transactions.find(
@@ -144,15 +159,59 @@ const DebugStream = () => {
       streamState.selectedAccount = account;
   }, [activeTxTab]);
 
+  const clearLog = () => {
+    streamState.logs = [];
+    streamState.statusChangeTimestamp = Date.now();
+  };
+
   return (
     <LogBox
       enhanced
       renderNav={renderNav}
       title="Debug stream"
       logs={logs}
-      clearLog={() => (streamState.logs = [])}
+      clearLog={clearLog}
     />
   );
 };
 
 export default DebugStream;
+
+export const pushLog = (
+  str: any,
+  opts: Partial<Pick<ILog, "type">> = {}
+): ILog | undefined => {
+  if (!str) return;
+  if (typeof str !== "string") throw Error("Unrecognized debug log stream!");
+
+  const match = str.match(/([\s\S]+(?:UTC|ISO|GMT[+|-]\d+))?\ ?([\s\S]*)/m);
+  const [_, tm, msg] = match || [];
+
+  const timestamp = Date.parse(tm || "") || undefined;
+  const timestring = !timestamp ? tm : new Date(timestamp).toLocaleTimeString();
+
+  const extracted = extractJSON(msg);
+  const message = !extracted
+    ? msg
+    : msg.slice(0, extracted.start) + msg.slice(extracted.end + 1);
+
+  const jsonData = extracted
+    ? JSON.stringify(extracted.result, null, 2)
+    : undefined;
+
+  if (extracted?.result?.id?._Request?.includes("hooks-builder-req")) {
+    return;
+  }
+
+  const { type = "log" } = opts;
+  const log: ILog = {
+    type,
+    message,
+    timestring,
+    jsonData,
+    defaultCollapsed: true,
+  };
+
+  if (log) streamState.logs.push(log);
+  return log;
+};

components/HooksEditor.tsx

@@ -5,7 +5,6 @@ import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
-import uniqBy from "lodash.uniqby";
 
 import Box from "./Box";
 import Container from "./Container";
@@ -45,18 +44,15 @@ const setMarkers = (monacoE: typeof monaco) => {
   // Get all the markers that are active at the moment,
   // Also if same error is there twice, we can show the content
   // only once (that's why we're using uniqBy)
-  const markers = uniqBy(
-    monacoE.editor
-      .getModelMarkers({})
-      // Filter out the markers that are hooks specific
-      .filter(
-        (marker) =>
-          typeof marker?.code === "string" &&
-          // Take only markers that starts with "hooks-"
-          marker?.code?.includes("hooks-")
-      ),
-    "code"
-  );
+  const markers = monacoE.editor
+    .getModelMarkers({})
+    // Filter out the markers that are hooks specific
+    .filter(
+      (marker) =>
+        typeof marker?.code === "string" &&
+        // Take only markers that starts with "hooks-"
+        marker?.code?.includes("hooks-")
+    );
 
   // Get the active model (aka active file you're editing)
   // const model = monacoE.editor?.getModel(

components/LogBox.tsx

@@ -147,7 +147,7 @@ const LogBox: FC<ILogBox> = ({
 
 export const Log: FC<ILog> = ({
   type,
-  timestamp: timestamp,
+  timestring,
   message: _message,
   link,
   linkText,
@@ -186,8 +186,17 @@ export const Log: FC<ILog> = ({
     },
     [accounts]
   );
-  _message = _message.trim().replace(/\n /gi, "\n");
-  const message = enrichAccounts(_message);
+
+  let message: ReactNode;
+  
+  if (typeof _message === 'string') {
+    _message = _message.trim().replace(/\n /gi, "\n");
+    message = enrichAccounts(_message)
+  }
+  else {
+    message = _message
+  }
+
   const jsonData = enrichAccounts(_jsonData);
 
   return (
@@ -197,9 +206,9 @@ export const Log: FC<ILog> = ({
         activeAccountAddress={dialogAccount}
       />
       <LogText variant={type}>
-        {timestamp && (
+        {timestring && (
           <Text muted monospace>
-            {timestamp}{" "}
+            {timestring}{" "}
           </Text>
         )}
         <Pre>{message} </Pre>

components/Popover.tsx

@@ -0,0 +1,105 @@
+import React, { ReactNode } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { styled, keyframes } from "../stitches.config";
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+const StyledContent = styled(PopoverPrimitive.Content, {
+  borderRadius: 4,
+  padding: "$3 $3",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "$text",
+  boxShadow:
+    "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    willChange: "transform, opacity",
+    '&[data-state="open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    backgroundColor: "$mauve5",
+    boxShadow:
+      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
+  },
+});
+
+const StyledArrow = styled(PopoverPrimitive.Arrow, {
+  fill: "$colors$mauve2",
+  ".dark &": {
+    fill: "$mauve5",
+  },
+});
+
+const StyledClose = styled(PopoverPrimitive.Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 25,
+  width: 25,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "$text",
+  position: "absolute",
+  top: 5,
+  right: 5,
+});
+
+// Exports
+export const PopoverRoot = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverContent = StyledContent;
+export const PopoverArrow = StyledArrow;
+export const PopoverClose = StyledClose;
+
+interface IPopover {
+  content: string | ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Popover: React.FC<IPopover> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+}) => (
+  <PopoverRoot
+    open={open}
+    defaultOpen={defaultOpen}
+    onOpenChange={onOpenChange}
+  >
+    <PopoverTrigger asChild>{children}</PopoverTrigger>
+    <PopoverContent sideOffset={5}>
+      {content} <PopoverArrow />
+    </PopoverContent>
+  </PopoverRoot>
+);
+
+export default Popover;

components/SetHookDialog.tsx

@@ -60,16 +60,25 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     handleSubmit,
     control,
     watch,
+    setValue,
     formState: { errors },
   } = useForm<SetHookData>({
     defaultValues: {
-      HookNamespace: snap.files?.[snap.active]?.name?.split(".")?.[0] || "",
+      HookNamespace: snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || "",
     },
   });
   const { fields, append, remove } = useFieldArray({
     control,
     name: "HookParameters", // unique name for your Field Array
   });
+
+  // Update value if activeWat changes
+  useEffect(() => {
+    setValue(
+      "HookNamespace",
+      snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
+    );
+  }, [snap.activeWat, snap.files, setValue]);
   // const {
   //   fields: grantFields,
   //   append: grantAppend,
@@ -156,7 +165,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                   {...register("HookNamespace", { required: true })}
                   autoComplete={"off"}
                   defaultValue={
-                    snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+                    snap.files?.[snap.activeWat]?.name?.split(".")?.[0] || ""
                   }
                 />
                 {errors.HookNamespace?.type === "required" && (
@@ -184,7 +193,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                         )}
                       />
                       <Input
-                        placeholder="Parameter value"
+                        placeholder="Value (hex-quoted)"
                         {...register(
                           `HookParameters.${index}.HookParameter.HookParameterValue`
                         )}

components/Transaction.tsx

@@ -351,6 +351,7 @@ const Transaction: FC<TransactionProps> = ({
           left: 0,
           bottom: 0,
           width: "100%",
+          mb: "$1"
         }}
       >
         <Button outline>VIEW AS JSON</Button>

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-dropdown-menu": "^0.1.1",
     "@radix-ui/react-id": "^0.1.1",
     "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-popover": "^0.1.6",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@stitches/react": "^1.2.6-0",
     "base64-js": "^1.5.1",

pages/api/proxy.ts

@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default async function handler(
+    req: NextApiRequest,
+    res: NextApiResponse
+) {
+    try {
+        const { url, opts } = req.body
+        const r = await fetch(url, opts);
+        if (!r.ok) throw (r.statusText)
+
+        const data = await r.json()
+        return res.json(data)
+    } catch (error) {
+        console.warn(error)
+        return res.status(500).json({ message: "Something went wrong!" })
+    }
+}

pages/develop/[[...slug]].tsx

@@ -1,16 +1,18 @@
+import { Label } from "@radix-ui/react-label";
 import type { NextPage } from "next";
 import dynamic from "next/dynamic";
-import { Play } from "phosphor-react";
+import { Gear, Play } from "phosphor-react";
 import Hotkeys from "react-hot-keys";
 import Split from "react-split";
 import { useSnapshot } from "valtio";
+import { ButtonGroup, Flex } from "../../components";
 import Box from "../../components/Box";
 import Button from "../../components/Button";
+import Popover from "../../components/Popover";
 import state from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 
-
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
 });
@@ -19,6 +21,59 @@ const LogBox = dynamic(() => import("../../components/LogBox"), {
   ssr: false,
 });
 
+const CompilerSettings = () => {
+  const snap = useSnapshot(state);
+  return (
+    <Flex css={{ minWidth: 200, flexDirection: "column" }}>
+      <Label>Optimization level</Label>
+      <ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O0"}
+          onClick={() => (state.compileOptions = "-O0")}
+        >
+          -O0
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O1"}
+          onClick={() => (state.compileOptions = "-O1")}
+        >
+          -O1
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O2"}
+          onClick={() => (state.compileOptions = "-O2")}
+        >
+          -O2
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O3"}
+          onClick={() => (state.compileOptions = "-O3")}
+        >
+          -O3
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-O4"}
+          onClick={() => (state.compileOptions = "-O4")}
+        >
+          -O4
+        </Button>
+        <Button
+          css={{ fontFamily: "$monospace" }}
+          outline={snap.compileOptions !== "-Os"}
+          onClick={() => (state.compileOptions = "-Os")}
+        >
+          -Os
+        </Button>
+      </ButtonGroup>
+    </Flex>
+  );
+};
+
 const Home: NextPage = () => {
   const snap = useSnapshot(state);
 
@@ -42,12 +97,7 @@ const Home: NextPage = () => {
               !snap.compiling && snap.files.length && compileCode(snap.active)
             }
           >
-            <Button
-              variant="primary"
-              uppercase
-              disabled={!snap.files.length}
-              isLoading={snap.compiling}
-              onClick={() => compileCode(snap.active)}
+            <Flex
               css={{
                 position: "absolute",
                 bottom: "$4",
@@ -55,11 +105,25 @@ const Home: NextPage = () => {
                 alignItems: "center",
                 display: "flex",
                 cursor: "pointer",
+                gap: "$2",
               }}
             >
-              <Play weight="bold" size="16px" />
-              Compile to Wasm
-            </Button>
+              <Button
+                variant="primary"
+                uppercase
+                disabled={!snap.files.length}
+                isLoading={snap.compiling}
+                onClick={() => compileCode(snap.active)}
+              >
+                <Play weight="bold" size="16px" />
+                Compile to Wasm
+              </Button>
+              <Popover content={<CompilerSettings />}>
+                <Button variant="primary" css={{ px: "10px" }}>
+                  <Gear size="16px" />
+                </Button>
+              </Popover>
+            </Flex>
           </Hotkeys>
         )}
       </main>

state/actions/compileCode.ts

@@ -38,6 +38,7 @@ export const compileCode = async (activeId: number) => {
         files: [
           {
             type: "c",
+            options: state.compileOptions || '-O0',
             name: state.files[activeId].name,
             src: state.files[activeId].content,
           },

state/actions/deployHook.tsx

@@ -4,19 +4,21 @@ import toast from "react-hot-toast";
 import state, { IAccount } from "../index";
 import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
 import { SetHookData } from "../../components/SetHookDialog";
+import { Link } from "../../components";
+import { ref } from "valtio";
 
 export const sha256 = async (string: string) => {
   const utf8 = new TextEncoder().encode(string);
-  const hashBuffer = await crypto.subtle.digest('SHA-256', utf8);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
   const hashHex = hashArray
-    .map((bytes) => bytes.toString(16).padStart(2, '0'))
-    .join('');
+    .map(bytes => bytes.toString(16).padStart(2, "0"))
+    .join("");
   return hashHex;
-}
+};
 
 function toHex(str: string) {
-  var result = '';
+  var result = "";
   for (var i = 0; i < str.length; i++) {
     result += str.charCodeAt(i).toString(16);
   }
@@ -51,7 +53,10 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
  * hex string, signs the transaction and deploys it to
  * Hooks testnet.
  */
-export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData) => {
+export const deployHook = async (
+  account: IAccount & { name?: string },
+  data: SetHookData
+) => {
   if (
     !state.files ||
     state.files.length === 0 ||
@@ -69,7 +74,15 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
   const HookNamespace = (await sha256(data.HookNamespace)).toUpperCase();
   const hookOnValues: (keyof TTS)[] = data.Invoke.map(tt => tt.value);
   const { HookParameters } = data;
-  const filteredHookParameters = HookParameters.filter(hp => hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue)?.map(aa => ({ HookParameter: { HookParameterName: toHex(aa.HookParameter.HookParameterName || ''), HookParameterValue: toHex(aa.HookParameter.HookParameterValue || '') } }));
+  const filteredHookParameters = HookParameters.filter(
+    hp =>
+      hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue
+  )?.map(aa => ({
+    HookParameter: {
+      HookParameterName: toHex(aa.HookParameter.HookParameterName || ""),
+      HookParameterValue: aa.HookParameter.HookParameterValue || "",
+    },
+  }));
   // const filteredHookGrants = HookGrants.filter(hg => hg.HookGrant.Authorize || hg.HookGrant.HookHash).map(hg => {
   //   return {
   //     HookGrant: {
@@ -97,16 +110,18 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
             HookApiVersion: 0,
             Flags: 1,
             // ...(filteredHookGrants.length > 0 && { HookGrants: filteredHookGrants }),
-            ...(filteredHookParameters.length > 0 && { HookParameters: filteredHookParameters }),
-          }
-        }
-      ]
+            ...(filteredHookParameters.length > 0 && {
+              HookParameters: filteredHookParameters,
+            }),
+          },
+        },
+      ],
     };
 
     const keypair = derive.familySeed(account.secret);
     const { signedTransaction } = sign(tx, keypair);
     const currentAccount = state.accounts.find(
-      (acc) => acc.address === account.address
+      acc => acc.address === account.address
     );
     if (currentAccount) {
       currentAccount.isLoading = true;
@@ -125,12 +140,28 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
         });
         state.deployLogs.push({
           type: "success",
-          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
+          message: ref(
+            <>
+              [{submitRes.engine_result}] {submitRes.engine_result_message}{" "}
+              Validated ledger index:{" "}
+              <Link
+                as="a"
+                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${submitRes.validated_ledger_index}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {submitRes.validated_ledger_index}
+              </Link>
+            </>
+          ),
+          // message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`,
         });
       } else {
         state.deployLogs.push({
           type: "error",
-          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
+          message: `[${submitRes.engine_result || submitRes.error}] ${
+            submitRes.engine_result_message || submitRes.error_exception
+          }`,
         });
       }
     } catch (err) {
@@ -152,10 +183,10 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     return;
   }
   const currentAccount = state.accounts.find(
-    (acc) => acc.address === account.address
+    acc => acc.address === account.address
   );
   if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
-    return
+    return;
   }
   if (typeof window !== "undefined") {
     const tx = {
@@ -168,9 +199,9 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
           Hook: {
             CreateCode: "",
             Flags: 1,
-          }
-        }
-      ]
+          },
+        },
+      ],
     };
 
     const keypair = derive.familySeed(account.secret);
@@ -188,7 +219,7 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
       });
 
       if (submitRes.engine_result === "tesSUCCESS") {
-        toast.success('Hook deleted successfully ✅', { id: toastId })
+        toast.success("Hook deleted successfully ✅", { id: toastId });
         state.deployLogs.push({
           type: "success",
           message: "Hook deleted successfully ✅",
@@ -199,15 +230,20 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
         });
         currentAccount.hooks = [];
       } else {
-        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, { id: toastId })
+        toast.error(
+          `${submitRes.engine_result_message || submitRes.error_exception}`,
+          { id: toastId }
+        );
         state.deployLogs.push({
           type: "error",
-          message: `[${submitRes.engine_result || submitRes.error}] ${submitRes.engine_result_message || submitRes.error_exception}`,
+          message: `[${submitRes.engine_result || submitRes.error}] ${
+            submitRes.engine_result_message || submitRes.error_exception
+          }`,
         });
       }
     } catch (err) {
       console.log(err);
-      toast.error('Error occured while deleting hoook', { id: toastId })
+      toast.error("Error occured while deleting hoook", { id: toastId });
       state.deployLogs.push({
         type: "error",
         message: "Error occured while deleting hook",
@@ -218,4 +254,4 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     }
     return submitRes;
   }
-};
+};

state/index.ts

@@ -39,9 +39,10 @@ export interface IAccount {
 
 export interface ILog {
   type: "error" | "warning" | "log" | "success";
-  message: string;
+  message: string | JSX.Element;
+  key?: string;
   jsonData?: any,
-  timestamp?: string;
+  timestring?: string;
   link?: string;
   linkText?: string;
   defaultCollapsed?: boolean
@@ -73,6 +74,7 @@ export interface IState {
   mainModalOpen: boolean;
   mainModalShowed: boolean;
   accounts: IAccount[];
+  compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os';
 }
 
 // let localStorageState: null | string = null;
@@ -102,6 +104,7 @@ let initialState: IState = {
   mainModalOpen: false,
   mainModalShowed: false,
   accounts: [],
+  compileOptions: '-O0'
 };
 
 let localStorageAccounts: string | null = null;