requiring user-quoted Hook Parameter values

Fix/regression #171

.env.example

@@ -2,6 +2,7 @@ NEXTAUTH_URL=https://example.com
 GITHUB_SECRET=""
 GITHUB_ID=""
 NEXT_PUBLIC_COMPILE_API_ENDPOINT="http://localhost:9000/api/build"
+NEXT_PUBLIC_COMPILE_API_BASE_URL="http://localhost:9000"
 NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT="ws://localhost:9000/language-server/c"
 NEXT_PUBLIC_TESTNET_URL="hooks-testnet-v2.xrpl-labs.com"
 NEXT_PUBLIC_DEBUG_STREAM_URL="hooks-testnet-v2-debugstream.xrpl-labs.com"

components/HooksEditor.tsx

@@ -1,29 +1,28 @@
-import { listen } from "@codingame/monaco-jsonrpc";
-import { MonacoServices } from "@codingame/monaco-languageclient";
+import React, { useEffect, useRef } from "react";
+import { useSnapshot, ref } from "valtio";
 import Editor, { loader } from "@monaco-editor/react";
-import uniqBy from "lodash.uniqby";
 import type monaco from "monaco-editor";
+import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
-import { ArrowBendLeftUp } from "phosphor-react";
-import React, { useEffect, useRef } from "react";
-import toast from "react-hot-toast";
-import ReconnectingWebSocket from "reconnecting-websocket";
-import { ref, useSnapshot } from "valtio";
-import state from "../state";
-import { saveFile } from "../state/actions";
-import { apiHeaderFiles } from "../state/constants";
-import dark from "../theme/editor/amy.json";
-import light from "../theme/editor/xcode_default.json";
-import { createLanguageClient, createWebSocket } from "../utils/languageClient";
-import docs from "../xrpl-hooks-docs/docs";
+import uniqBy from "lodash.uniqby";
+
 import Box from "./Box";
 import Container from "./Container";
+import dark from "../theme/editor/amy.json";
+import light from "../theme/editor/xcode_default.json";
+import { saveFile } from "../state/actions";
+import { apiHeaderFiles } from "../state/constants";
+import state from "../state";
+
 import EditorNavigation from "./EditorNavigation";
 import Text from "./Text";
+import { MonacoServices } from "@codingame/monaco-languageclient";
+import { createLanguageClient, createWebSocket } from "../utils/languageClient";
+import { listen } from "@codingame/monaco-jsonrpc";
+import ReconnectingWebSocket from "reconnecting-websocket";
 
-
-
+import docs from "../xrpl-hooks-docs/docs";
 
 loader.config({
   paths: {
@@ -124,7 +123,6 @@ const HooksEditor = () => {
       setMarkers(monacoRef.current);
     }
   }, [snap.active]);
-
   return (
     <Box
       css={{
@@ -157,7 +155,7 @@ const HooksEditor = () => {
               );
             }
 
-            // create the websocket
+            // create the web socket
             if (!subscriptionRef.current) {
               monaco.languages.register({
                 id: "c",
@@ -166,12 +164,11 @@ const HooksEditor = () => {
                 mimetypes: ["text/plain"],
               });
               MonacoServices.install(monaco);
-
-              const webSocket: ReconnectingWebSocket = createWebSocket(
+              const webSocket = createWebSocket(
                 process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ""
               );
               subscriptionRef.current = webSocket;
-              // listen when the websocket is opened
+              // listen when the web socket is opened
               listen({
                 webSocket: webSocket as WebSocket,
                 onConnection: (connection) => {
@@ -183,14 +180,9 @@ const HooksEditor = () => {
                       // disposable.stop();
                       disposable.dispose();
                     } catch (err) {
-                      toast.error('Connection to language server lost!')
-                      console.error("Couldn't dispose the language server connection! ", err);
+                      console.log("err", err);
                     }
                   });
-                  connection.onDispose(() => {
-                    toast.error('Connection to language server lost!')
-                  })
-                  // TODO: Check if we need to listen to more connection events
                 },
               });
             }
@@ -234,6 +226,22 @@ const HooksEditor = () => {
               }
             });
 
+            // Hacky way to hide Peek menu
+            editor.onContextMenu((e) => {
+              const host =
+                document.querySelector<HTMLElement>(".shadow-root-host");
+
+              const contextMenuItems =
+                host?.shadowRoot?.querySelectorAll("li.action-item");
+              contextMenuItems?.forEach((k) => {
+                // If menu item contains "Peek" lets hide it
+                if (k.querySelector(".action-label")?.textContent === "Peek") {
+                  // @ts-expect-error
+                  k["style"].display = "none";
+                }
+              });
+            });
+
             validateWritability(editor);
           }}
           theme={theme === "dark" ? "dark" : "light"}

components/Input.tsx

@@ -59,6 +59,8 @@ export const Input = styled("input", {
   },
   "&:read-only": {
     backgroundColor: "$mauve2",
+    color: "$text",
+    opacity: 0.8,
     "&:focus": {
       boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
     },

components/LogBox.tsx

@@ -1,17 +1,22 @@
-import NextLink from "next/link";
-import { Notepad, Prohibit } from "phosphor-react";
 import {
-  FC, ReactNode, useCallback, useLayoutEffect, useRef, useState
+  useRef,
+  useLayoutEffect,
+  ReactNode,
+  FC,
+  useState,
+  useCallback,
 } from "react";
+import { Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
-import regexifyString from "regexify-string";
-import { useSnapshot } from "valtio";
-import { Box, Button, Flex, Heading, Link, Pre, Text } from ".";
-import state, { ILog } from "../state";
-import { AccountDialog } from "./Accounts";
+import NextLink from "next/link";
+
 import Container from "./Container";
 import LogText from "./LogText";
-
+import state, { ILog } from "../state";
+import { Pre, Link, Heading, Button, Text, Flex, Box } from ".";
+import regexifyString from "regexify-string";
+import { useSnapshot } from "valtio";
+import { AccountDialog } from "./Accounts";
 
 interface ILogBox {
   title: string;
@@ -155,7 +160,7 @@ export const Log: FC<ILog> = ({
 
   const enrichAccounts = useCallback(
     (str?: string): ReactNode => {
-      if (!str) return null;
+      if (!str || !accounts.length) return null;
 
       const pattern = `(${accounts.map((acc) => acc.address).join("|")})`;
       const res = regexifyString({

components/SetHookDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Plus, Trash, X } from "phosphor-react";
 import Button from "./Button";
 import Box from "./Box";
@@ -25,6 +25,7 @@ import type { IAccount } from "../state";
 import { useSnapshot } from "valtio";
 import state from "../state";
 import toast from "react-hot-toast";
+import { sha256 } from "../state/actions/deployHook";
 
 const transactionOptions = Object.keys(tts).map((key) => ({
   label: key,
@@ -36,6 +37,7 @@ export type SetHookData = {
     value: keyof TTS;
     label: string;
   }[];
+  HookNamespace: string;
   HookParameters: {
     HookParameter: {
       HookParameterName: string;
@@ -57,8 +59,13 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     register,
     handleSubmit,
     control,
-    // formState: { errors },
-  } = useForm<SetHookData>();
+    watch,
+    formState: { errors },
+  } = useForm<SetHookData>({
+    defaultValues: {
+      HookNamespace: snap.files?.[snap.active]?.name?.split(".")?.[0] || "",
+    },
+  });
   const { fields, append, remove } = useFieldArray({
     control,
     name: "HookParameters", // unique name for your Field Array
@@ -71,6 +78,19 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
   //   control,
   //   name: "HookGrants", // unique name for your Field Array
   // });
+  const [hashedNamespace, setHashedNamespace] = useState("");
+  const namespace = watch(
+    "HookNamespace",
+    snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+  );
+  const calculateHashedValue = useCallback(async () => {
+    const hashedVal = await sha256(namespace);
+    setHashedNamespace(hashedVal.toUpperCase());
+  }, [namespace]);
+  useEffect(() => {
+    calculateHashedValue();
+  }, [namespace, calculateHashedValue]);
+
   if (!account) {
     return null;
   }
@@ -89,6 +109,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
     }
     toast.error(`Transaction failed! (${res?.engine_result_message})`);
   };
+
   return (
     <Dialog open={isSetHookDialogOpen} onOpenChange={setIsSetHookDialogOpen}>
       <DialogTrigger asChild>
@@ -129,6 +150,25 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                   )}
                 />
               </Box>
+              <Box css={{ width: "100%" }}>
+                <label>Hook Namespace Seed</label>
+                <Input
+                  {...register("HookNamespace", { required: true })}
+                  autoComplete={"off"}
+                  defaultValue={
+                    snap.files?.[snap.active]?.name?.split(".")?.[0] || ""
+                  }
+                />
+                {errors.HookNamespace?.type === "required" && (
+                  <Box css={{ display: "inline", color: "$red11" }}>
+                    Namespace is required
+                  </Box>
+                )}
+                <Box css={{ mt: "$3" }}>
+                  <label>Hook Namespace (sha256)</label>
+                  <Input readOnly value={hashedNamespace} />
+                </Box>
+              </Box>
               <Box css={{ width: "100%" }}>
                 <label style={{ marginBottom: "10px", display: "block" }}>
                   Hook parameters
@@ -144,7 +184,7 @@ export const SetHookDialog: React.FC<{ account: IAccount }> = ({ account }) => {
                         )}
                       />
                       <Input
-                        placeholder="Parameter value"
+                        placeholder="Value (hex-quoted)"
                         {...register(
                           `HookParameters.${index}.HookParameter.HookParameterValue`
                         )}

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@codingame/monaco-languageclient": "^0.17.0",
-    "@monaco-editor/react": "^4.3.1",
+    "@monaco-editor/react": "^4.4.1",
     "@octokit/core": "^3.5.1",
     "@radix-ui/colors": "^0.1.7",
     "@radix-ui/react-alert-dialog": "^0.1.1",
@@ -29,10 +29,10 @@
     "jszip": "^3.7.1",
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
-    "monaco-editor": "^0.30.1",
+    "monaco-editor": "^0.33.0",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",
-    "next-themes": "^0.0.15",
+    "next-themes": "^0.1.1",
     "normalize-url": "^7.0.2",
     "octokit": "^1.7.0",
     "pako": "^2.0.4",

pages/_app.tsx

@@ -18,7 +18,7 @@ import en from "javascript-time-ago/locale/en.json";
 import { useSnapshot } from "valtio";
 
 TimeAgo.setDefaultLocale(en.locale);
-TimeAgo.addLocale(en)
+TimeAgo.addLocale(en);
 
 function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();

state/actions/addFaucetAccount.ts

@@ -33,6 +33,8 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
     return toast.error("You can only have maximum 6 accounts");
   }
   if (typeof window !== 'undefined') {
+
+
     const toastId = showToast ? toast.loading("Creating account") : "";
     const res = await fetch(`${window.location.origin}/api/faucet`, {
       method: "POST",
@@ -90,4 +92,5 @@ export const addFunds = async (address: string) => {
       currAccount.xrp = (Number(currAccount.xrp) + (json.xrp * 1000000)).toString();
     }
   }
-}
+
+}

state/actions/compileCode.ts

@@ -1,10 +1,10 @@
-import Router from 'next/router';
 import toast from "react-hot-toast";
-import { ref } from "valtio";
-import { decodeBinary } from "../../utils/decodeBinary";
+import Router from 'next/router';
+
 import state from "../index";
 import { saveFile } from "./saveFile";
-
+import { decodeBinary } from "../../utils/decodeBinary";
+import { ref } from "valtio";
 
 /* compileCode sends the code of the active file to compile endpoint
  * If all goes well you will get base64 encoded wasm file back with
@@ -15,22 +15,17 @@ import { saveFile } from "./saveFile";
 export const compileCode = async (activeId: number) => {
   // Save the file to global state
   saveFile(false);
-  
   if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
     throw Error("Missing env!");
   }
-  
   // Bail out if we're already compiling
   if (state.compiling) {
     // if compiling is ongoing return
     return;
   }
-  
   // Set loading state to true
   state.compiling = true;
-  // Reset development log
   state.logs = []
-
   try {
     const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
       method: "POST",
@@ -51,7 +46,6 @@ export const compileCode = async (activeId: number) => {
     });
     const json = await res.json();
     state.compiling = false;
-    
     if (!json.success) {
       state.logs.push({ type: "error", message: json.message });
       if (json.tasks && json.tasks.length > 0) {
@@ -63,19 +57,16 @@ export const compileCode = async (activeId: number) => {
       }
       return toast.error(`Couldn't compile!`, { position: "bottom-center" });
     }
-
     state.logs.push({
       type: "success",
       message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
       link: Router.asPath.replace("develop", "deploy"),
       linkText: "Go to deploy",
     });
-
     // Decode base64 encoded wasm that is coming back from the endpoint
     const bufferData = await decodeBinary(json.output);
     state.files[state.active].compiledContent = ref(bufferData);
     state.files[state.active].lastCompiled = new Date();
-
     // Import wabt from and create human readable version of wasm file and
     // put it into state
     import("wabt").then((wabt) => {
@@ -89,22 +80,12 @@ export const compileCode = async (activeId: number) => {
       state.files[state.active].compiledWatContent = wast;
       toast.success("Compiled successfully!", { position: "bottom-center" });
     });
-  } catch (err: any) {
-    const error = err as Error
-
-    // TODO: Centralized error handling? Just a thought
-    if(error.message.includes("Failed to fetch")) {
-      state.logs.push({
-        type: "error",
-        message: "No connection to the compiler server!",
-      });
-    } else {
-      state.logs.push({
-        type: "error",
-        message: "Error occured while compiling!",
-      });
-    }
-    
+  } catch (err) {
+    console.log(err);
+    state.logs.push({
+      type: "error",
+      message: "Error occured while compiling!",
+    });
     state.compiling = false;
   }
 };

state/actions/deployHook.ts

@@ -1,12 +1,11 @@
-import toast from "react-hot-toast";
 import { derive, sign } from "xrpl-accountlib";
-import { AnyJson } from "xrpl-client";
-import { SetHookData } from "../../components/SetHookDialog";
-import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
+import toast from "react-hot-toast";
+
 import state, { IAccount } from "../index";
+import calculateHookOn, { TTS } from "../../utils/hookOnCalculator";
+import { SetHookData } from "../../components/SetHookDialog";
 
-
-const hash = async (string: string) => {
+export const sha256 = async (string: string) => {
   const utf8 = new TextEncoder().encode(string);
   const hashBuffer = await crypto.subtle.digest('SHA-256', utf8);
   const hashArray = Array.from(new Uint8Array(hashBuffer));
@@ -52,30 +51,25 @@ 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): Promise<AnyJson | undefined> => {
+export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData) => {
   if (
     !state.files ||
     state.files.length === 0 ||
     !state.files?.[state.active]?.compiledContent
   ) {
-    console.log("ebin1")
     return;
   }
 
   if (!state.files?.[state.active]?.compiledContent) {
-    console.log("ebin2")
     return;
   }
   if (!state.client) {
-    console.log("ebin3")
     return;
   }
-  const HookNamespace = await hash(arrayBufferToHex(
-    state.files?.[state.active]?.compiledContent
-  ).toUpperCase());
+  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: {
@@ -140,7 +134,6 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
         });
       }
     } catch (err) {
-      console.log("Ebin")
       console.log(err);
       state.deployLogs.push({
         type: "error",

state/actions/fetchFiles.ts

@@ -2,8 +2,6 @@ import { Octokit } from "@octokit/core";
 import Router from "next/router";
 import state from '../index';
 import { templateFileIds } from '../constants';
-import { hookapiH, hookmacroH, sfcodesH } from '../constants/headerTemplates';
-
 
 const octokit = new Octokit();
 
@@ -20,18 +18,30 @@ export const fetchFiles = (gistId: string) => {
 
     octokit
       .request("GET /gists/{gist_id}", { gist_id: gistId })
-      .then(res => {
+      .then(async res => {
         if (!Object.values(templateFileIds).includes(gistId)) {
           return res
         }
         // in case of templates, fetch header file(s) and append to res
-        const files = {
-          ...res.data.files,
-          'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: hookapiH, language: 'C' },
-          'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: hookmacroH, language: 'C' },
-          'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: sfcodesH, language: 'C' },
-        };
-        res.data.files = files;
+        let resHeaderJson;
+        try {
+          const resHeader = await fetch(`${process.env.NEXT_PUBLIC_COMPILE_API_BASE_URL}/api/header-files`);
+          if (resHeader.ok) {
+            resHeaderJson = await resHeader.json();
+            const files = {
+              ...res.data.files,
+              'hookapi.h': res.data.files?.['hookapi.h'] || { filename: 'hookapi.h', content: resHeaderJson.hookapi, language: 'C' },
+              'hookmacro.h': res.data.files?.['hookmacro.h'] || { filename: 'hookmacro.h', content: resHeaderJson.hookmacro, language: 'C' },
+              'sfcodes.h': res.data.files?.['sfcodes.h'] || { filename: 'sfcodes.h', content: resHeaderJson.sfcodes, language: 'C' },
+            };
+            res.data.files = files;
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
+
+
         return res;
         // If you want to load templates from GIST instad, uncomment the code below and comment the code above.
         // return octokit.request("GET /gists/{gist_id}", { gist_id: templateFileIds.headers }).then(({ data: { files: headerFiles } }) => {

state/actions/importAccount.ts

@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import { derive } from "xrpl-accountlib";
+import { derive, XRPL_Account } from "xrpl-accountlib";
 
 import state from '../index';
 import { names } from './addFaucetAccount';
@@ -12,8 +12,18 @@ export const importAccount = (secret: string) => {
   if (state.accounts.find((acc) => acc.secret === secret)) {
     return toast.error("Account already added!");
   }
-  const account = derive.familySeed(secret);
-  if (!account.secret.familySeed) {
+  let account: XRPL_Account | null = null;
+  try {
+    account = derive.familySeed(secret);
+  } catch (err: any) {
+    if (err?.message) {
+      toast.error(err.message)
+    } else {
+      toast.error('Error occured while importing account')
+    }
+    return;
+  }
+  if (!account || !account.secret.familySeed) {
     return toast.error(`Couldn't create account!`);
   }
   state.accounts.push({

utils/languageClient.ts

@@ -1,5 +1,5 @@
 import { MessageConnection } from "@codingame/monaco-jsonrpc";
-import { CloseAction, createConnection, ErrorAction, MonacoLanguageClient } from "@codingame/monaco-languageclient";
+import { MonacoLanguageClient, ErrorAction, CloseAction, createConnection } from "@codingame/monaco-languageclient";
 import Router from "next/router";
 import normalizeUrl from "normalize-url";
 import ReconnectingWebSocket from "reconnecting-websocket";
@@ -37,7 +37,7 @@ export function createUrl(path: string): string {
   return normalizeUrl(`${protocol}://${location.host}${location.pathname}${path}`);
 }
 
-export function createWebSocket(url: string): ReconnectingWebSocket {
+export function createWebSocket(url: string) {
   const socketOptions = {
     maxReconnectionDelay: 10000,
     minReconnectionDelay: 1000,
@@ -47,4 +47,4 @@ export function createWebSocket(url: string): ReconnectingWebSocket {
     debug: false
   };
   return new ReconnectingWebSocket(url, [], socketOptions);
-}
+}

yarn.lock

@@ -202,19 +202,19 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@monaco-editor/loader@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.2.0.tgz#373fad69973384624e3d9b60eefd786461a76acd"
-  integrity sha512-cJVCG/T/KxXgzYnjKqyAgsKDbH9mGLjcXxN6AmwumBwa2rVFkwvGcUj1RJtD0ko4XqLqJxwqsN/Z/KURB5f1OQ==
+"@monaco-editor/loader@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.0.tgz#659fbaf1d612ea67b2a0519a18612d1c4813e444"
+  integrity sha512-N3mGq1ktC3zh7WUx3NGO+PSDdNq9Vspk/41rEmRdrCqV9vNbBTRzAOplmUpNQsi+hmTs++ERMBobMERb8Kb+3g==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.3.1.tgz#d65bcbf174c39b6d4e7fec43d0cddda82b70a12a"
-  integrity sha512-f+0BK1PP/W5I50hHHmwf11+Ea92E5H1VZXs+wvKplWUWOfyMa1VVwqkJrXjRvbcqHL+XdIGYWhWNdi4McEvnZg==
+"@monaco-editor/react@^4.4.1":
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.1.tgz#2e2b9b369f3082b0e14f47cdbe35658fd56c7c7d"
+  integrity sha512-95E/XPC4dbm/7qdkhSsU/a1kRgcn2PYhRTVIc+/cixWCZrwRURW1DRPaIZ2lOawBJ6kAOLywxuD4A4UmbT0ZIw==
   dependencies:
-    "@monaco-editor/loader" "^1.2.0"
+    "@monaco-editor/loader" "^1.3.0"
     prop-types "^15.7.2"
 
 "@next/env@12.1.0":
@@ -2867,10 +2867,10 @@ minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-monaco-editor@^0.30.1:
-  version "0.30.1"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.30.1.tgz#47f8d18a0aa2264fc5654581741ab8d7bec01689"
-  integrity sha512-B/y4+b2O5G2gjuxIFtCE2EkM17R2NM7/3F8x0qcPsqy4V83bitJTIO4TIeZpYlzu/xy6INiY/+84BEm6+7Cmzg==
+monaco-editor@^0.33.0:
+  version "0.33.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af"
+  integrity sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==
 
 ms@2.0.0:
   version "2.0.0"
@@ -2917,10 +2917,10 @@ next-auth@^4.0.0-beta.5:
     preact-render-to-string "^5.1.19"
     uuid "^8.3.2"
 
-next-themes@^0.0.15:
-  version "0.0.15"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.0.15.tgz#ab0cee69cd763b77d41211f631e108beab39bf7d"
-  integrity sha512-LTmtqYi03c4gMTJmWwVK9XkHL7h0/+XrtR970Ujvtu3s0kZNeJN24aJsi4rkZOI8i19+qq6f8j+8Duwy5jqcrQ==
+next-themes@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
+  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==
 
 next-tick@^1.1.0:
   version "1.1.0"