remove a console.log

Persisted transactions and debug stream state.

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/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/Transaction.tsx

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

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!" })
+    }
+}

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: toHex(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