C-specific highlighting, w/ fewer MS extensions

Fetch header files from c2wasm api

.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
                 },
               });
             }

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({

highlight/c.ts

@@ -0,0 +1,356 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import type { languages } from '../../fillers/monaco-editor-core';
+
+export const conf: languages.LanguageConfiguration = {
+	comments: {
+		lineComment: '//',
+		blockComment: ['/*', '*/']
+	},
+	brackets: [
+		['{', '}'],
+		['[', ']'],
+		['(', ')']
+	],
+	autoClosingPairs: [
+		{ open: '[', close: ']' },
+		{ open: '{', close: '}' },
+		{ open: '(', close: ')' },
+		{ open: "'", close: "'", notIn: ['string', 'comment'] },
+		{ open: '"', close: '"', notIn: ['string'] }
+	],
+	surroundingPairs: [
+		{ open: '{', close: '}' },
+		{ open: '[', close: ']' },
+		{ open: '(', close: ')' },
+		{ open: '"', close: '"' },
+		{ open: "'", close: "'" }
+	],
+	folding: {
+		markers: {
+			start: new RegExp('^\\s*#pragma\\s+region\\b'),
+			end: new RegExp('^\\s*#pragma\\s+endregion\\b')
+		}
+	}
+};
+
+export const language = <languages.IMonarchLanguage>{
+	defaultToken: '',
+	tokenPostfix: '.c',
+
+	brackets: [
+		{ token: 'delimiter.curly', open: '{', close: '}' },
+		{ token: 'delimiter.parenthesis', open: '(', close: ')' },
+		{ token: 'delimiter.square', open: '[', close: ']' },
+		{ token: 'delimiter.angle', open: '<', close: '>' }
+	],
+
+	keywords: [
+		'abstract',
+		'amp',
+		'array',
+		'asm',
+		'auto',
+		'break',
+		'case',
+		'char',
+		'const',
+		'continue',
+		'default',
+		'do',
+		'double',
+		'dynamic_cast',
+		'else',
+		'enum',
+		'extern',
+		'float',
+		'for',
+		'goto',
+		'if',
+		'inline',
+		'int',
+		'long',
+		'register',
+		'restrict',
+		'return',
+		'short',
+		'signed',
+		'sizeof',
+		'static',
+		'struct',
+		'switch',
+		'typedef',
+		'union',
+		'unsigned',
+		'void',
+		'volatile',
+		'wchar_t',
+		'where',
+		'while',
+
+		'__abstract', // reserved word with two underscores
+		'__alignof',
+		'__asm',
+		'__assume',
+		'__based',
+		'__box',
+		'__builtin_alignof',
+		'__cdecl',
+		'__clrcall',
+		'__declspec',
+		'__delegate',
+		'__event',
+		'__except',
+		'__fastcall',
+		'__finally',
+		'__forceinline',
+		'__gc',
+		'__hook',
+		'__identifier',
+		'__if_exists',
+		'__if_not_exists',
+		'__inline',
+		'__int128',
+		'__int16',
+		'__int32',
+		'__int64',
+		'__int8',
+		'__interface',
+		'__leave',
+		'__m128',
+		'__m128d',
+		'__m128i',
+		'__m256',
+		'__m256d',
+		'__m256i',
+		'__m64',
+		'__multiple_inheritance',
+		'__newslot',
+		'__nogc',
+		'__noop',
+		'__nounwind',
+		'__novtordisp',
+		'__pascal',
+		'__pin',
+		'__pragma',
+		'__property',
+		'__ptr32',
+		'__ptr64',
+		'__raise',
+		'__restrict',
+		'__resume',
+		'__sealed',
+		'__single_inheritance',
+		'__stdcall',
+		'__super',
+		'__thiscall',
+		'__try',
+		'__try_cast',
+		'__typeof',
+		'__unaligned',
+		'__unhook',
+		'__uuidof',
+		'__value',
+		'__virtual_inheritance',
+		'__w64',
+		'__wchar_t'
+	],
+
+	operators: [
+		'=',
+		'>',
+		'<',
+		'!',
+		'~',
+		'?',
+		':',
+		'==',
+		'<=',
+		'>=',
+		'!=',
+		'&&',
+		'||',
+		'++',
+		'--',
+		'+',
+		'-',
+		'*',
+		'/',
+		'&',
+		'|',
+		'^',
+		'%',
+		'<<',
+		'>>',
+		'+=',
+		'-=',
+		'*=',
+		'/=',
+		'&=',
+		'|=',
+		'^=',
+		'%=',
+		'<<=',
+		'>>='
+	],
+
+	// we include these common regular expressions
+	symbols: /[=><!~?:&|+\-*\/\^%]+/,
+	escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+	integersuffix: /([uU](ll|LL|l|L)|(ll|LL|l|L)?[uU]?)/,
+	floatsuffix: /[fFlL]?/,
+	encoding: /u|u8|U|L/,
+
+	// The main tokenizer for our languages
+	tokenizer: {
+		root: [
+			// C++ 11 Raw String
+			[/@encoding?R\"(?:([^ ()\\\t]*))\(/, { token: 'string.raw.begin', next: '@raw.$1' }],
+
+			// identifiers and keywords
+			[
+				/[a-zA-Z_]\w*/,
+				{
+					cases: {
+						'@keywords': { token: 'keyword.$0' },
+						'@default': 'identifier'
+					}
+				}
+			],
+
+			// The preprocessor checks must be before whitespace as they check /^\s*#/ which
+			// otherwise fails to match later after other whitespace has been removed.
+
+			// Inclusion
+			[/^\s*#\s*include/, { token: 'keyword.directive.include', next: '@include' }],
+
+			// Preprocessor directive
+			[/^\s*#\s*\w+/, 'keyword.directive'],
+
+			// whitespace
+			{ include: '@whitespace' },
+
+			// [[ attributes ]].
+			[/\[\s*\[/, { token: 'annotation', next: '@annotation' }],
+			// delimiters and operators
+			[/[{}()\[\]]/, '@brackets'],
+			[/[<>](?!@symbols)/, '@brackets'],
+			[
+				/@symbols/,
+				{
+					cases: {
+						'@operators': 'delimiter',
+						'@default': ''
+					}
+				}
+			],
+
+			// numbers
+			[/\d*\d+[eE]([\-+]?\d+)?(@floatsuffix)/, 'number.float'],
+			[/\d*\.\d+([eE][\-+]?\d+)?(@floatsuffix)/, 'number.float'],
+			[/0[xX][0-9a-fA-F']*[0-9a-fA-F](@integersuffix)/, 'number.hex'],
+			[/0[0-7']*[0-7](@integersuffix)/, 'number.octal'],
+			[/0[bB][0-1']*[0-1](@integersuffix)/, 'number.binary'],
+			[/\d[\d']*\d(@integersuffix)/, 'number'],
+			[/\d(@integersuffix)/, 'number'],
+
+			// delimiter: after number because of .\d floats
+			[/[;,.]/, 'delimiter'],
+
+			// strings
+			[/"([^"\\]|\\.)*$/, 'string.invalid'], // non-teminated string
+			[/"/, 'string', '@string'],
+
+			// characters
+			[/'[^\\']'/, 'string'],
+			[/(')(@escapes)(')/, ['string', 'string.escape', 'string']],
+			[/'/, 'string.invalid']
+		],
+
+		whitespace: [
+			[/[ \t\r\n]+/, ''],
+			[/\/\*\*(?!\/)/, 'comment.doc', '@doccomment'],
+			[/\/\*/, 'comment', '@comment'],
+			[/\/\/.*\\$/, 'comment', '@linecomment'],
+			[/\/\/.*$/, 'comment']
+		],
+
+		comment: [
+			[/[^\/*]+/, 'comment'],
+			[/\*\//, 'comment', '@pop'],
+			[/[\/*]/, 'comment']
+		],
+
+		//For use with continuous line comments
+		linecomment: [
+			[/.*[^\\]$/, 'comment', '@pop'],
+			[/[^]+/, 'comment']
+		],
+
+		//Identical copy of comment above, except for the addition of .doc
+		doccomment: [
+			[/[^\/*]+/, 'comment.doc'],
+			[/\*\//, 'comment.doc', '@pop'],
+			[/[\/*]/, 'comment.doc']
+		],
+
+		string: [
+			[/[^\\"]+/, 'string'],
+			[/@escapes/, 'string.escape'],
+			[/\\./, 'string.escape.invalid'],
+			[/"/, 'string', '@pop']
+		],
+
+		raw: [
+			[
+				/(.*)(\))(?:([^ ()\\\t"]*))(\")/,
+				{
+					cases: {
+						'$3==$S2': [
+							'string.raw',
+							'string.raw.end',
+							'string.raw.end',
+							{ token: 'string.raw.end', next: '@pop' }
+						],
+						'@default': ['string.raw', 'string.raw', 'string.raw', 'string.raw']
+					}
+				}
+			],
+			[/.*/, 'string.raw']
+		],
+
+		annotation: [
+			{ include: '@whitespace' },
+			[/[a-zA-Z0-9_]+/, 'annotation'],
+			[/[,:]/, 'delimiter'],
+			[/[()]/, '@brackets'],
+			[/\]\s*\]/, { token: 'annotation', next: '@pop' }]
+		],
+
+		include: [
+			[
+				/(\s*)(<)([^<>]*)(>)/,
+				[
+					'',
+					'keyword.directive.include.begin',
+
+
+					'string.include.identifier',
+					{ token: 'keyword.directive.include.end', next: '@pop' }
+				]
+			],
+			[
+				/(\s*)(")([^"]*)(")/,
+				[
+					'',
+					'keyword.directive.include.begin',
+					'string.include.identifier',
+					{ token: 'keyword.directive.include.end', next: '@pop' }
+				]
+			]
+		]
+	}
+};

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,10 +1,9 @@
-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 state, { IAccount } from "../index";
+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) => {
   const utf8 = new TextEncoder().encode(string);
@@ -52,22 +51,19 @@ 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(
@@ -140,7 +136,6 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
         });
       }
     } catch (err) {
-      console.log("Ebin")
       console.log(err);
       state.deployLogs.push({
         type: "error",
@@ -225,4 +220,4 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
     }
     return submitRes;
   }
-};
+};

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,29 @@ 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
+        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();
+          }
+        } catch (err) {
+          console.log(err)
+        }
+
         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' },
+          '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;
+
         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 } }) => {

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);
-}
+}