New feature: Visual debugger for Truffle Dashboard

packages/dashboard/lib/DashboardServer.ts

@@ -2,9 +2,9 @@ import express, { Application, NextFunction, Request, Response } from "express";
 import path from "path";
 import getPort from "get-port";
 import open from "open";
+import { v4 as uuid } from "uuid";
 import { fetchAndCompile } from "@truffle/fetch-and-compile";
 import { sha1 } from "object-hash";
-import { v4 as uuid } from "uuid";
 import Config from "@truffle/config";
 import {
   dashboardProviderMessageType,

packages/dashboard/package.json

@@ -33,31 +33,40 @@
   "types": "dist/lib/index.d.ts",
   "dependencies": {
     "@emotion/react": "^11.9.3",
-    "@mantine/core": "^5.0.0",
-    "@mantine/hooks": "^5.0.0",
-    "@mantine/notifications": "^5.0.0",
-    "@mantine/prism": "^5.0.0",
     "@truffle/codec": "^0.17.0",
     "@truffle/config": "^1.3.58",
+    "@truffle/decoder": "^6.1.0",
+    "@truffle/fetch-and-compile": "^0.5.51",
+    "@truffle/codec-components": "^0.1.2",
     "@truffle/dashboard-message-bus": "^0.1.11",
     "@truffle/dashboard-message-bus-client": "^0.1.11",
     "@truffle/dashboard-message-bus-common": "^0.1.6",
-    "@truffle/decoder": "^6.1.0",
-    "@truffle/fetch-and-compile": "^0.5.51",
+    "@truffle/debugger": "^12.1.0",
+    "@truffle/debug-utils": "^6.0.54",
+    "@mantine/core": "^5.10.5",
+    "@mantine/hooks": "^5.10.5",
+    "@mantine/notifications": "^5.10.5",
+    "@mantine/prism": "^5.10.5",
     "cors": "^2.8.5",
+    "css-loader": "^6.8.1",
     "debug": "^4.3.2",
     "ethers": "^5.6.9",
     "express": "^4.17.1",
+    "ganache": "7.9.0",
     "get-port": "^5.1.1",
+    "highlightjs-solidity": "^2.0.6",
     "idb": "^7.1.1",
-    "isomorphic-ws": "^4.0.1",
+    "lowlight": "^2.8.1",
     "object-hash": "^3.0.0",
     "object-inspect": "^1.12.2",
     "open": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.10.0",
+    "rehype-stringify": "^9.0.3",
+    "style-loader": "^3.3.3",
+    "unified": "^10.1.2",
     "uuid": "^9.0.0",
     "wagmi": "^0.6.3",
     "ws": "^7.2.0"

packages/dashboard/src/App.tsx

@@ -9,6 +9,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 // Components
 import Layout from "src/components/composed/Layout";
 import RPCs from "src/components/composed/RPCs";
+import Debugger from "src/components/composed/Debugger";
 import Palette from "src/components/composed/Palette";
 import MantineGlobal from "src/components/MantineGlobal";
 
@@ -26,6 +27,7 @@ function App(): JSX.Element {
                     <Route path="/" element={<Layout />}>
                       <Route index element={<Navigate to="/rpcs" replace />} />
                       <Route path="rpcs" element={<RPCs />} />
+                      <Route path="debugger" element={<Debugger />} />
                     </Route>
                     {process.env.NODE_ENV === "development" && (
                       <Route path="colors" element={<Palette />} />

packages/dashboard/src/components/MantineGlobal.tsx

@@ -12,13 +12,22 @@ const fonts = [
   }
 ];
 
-const truffleBgColorSelectors = [".mantine-AppShell-root"].join(", ");
+const truffleBgColorSelectors = [".trfl-AppShell-root"].join(", ");
 
 const truffleOffBgColorSelectors = [
-  ".mantine-Navbar-root",
-  ".mantine-Paper-root"
+  ".trfl-Navbar-root",
+  ".trfl-Paper-root"
 ].join(", ");
 
+const watermelonHex = "#E86591";
+const orangeHex = "#E4A663";
+const orangeBrightHex = "#E78820";
+const redHex = "#D60000";
+const mintHex = "#3FE0C5";
+const mintDarkHex = "#0FBEA1";
+const greenHex = "#00D717";
+const greenDarkHex = "#00A412";
+
 function MantineGlobal(): JSX.Element {
   return (
     <Global
@@ -42,33 +51,84 @@ function MantineGlobal(): JSX.Element {
             [`${truffleBgColorSelectors}, ${truffleOffBgColorSelectors}`]: {
               transition: "background-color 0.1s"
             },
-            ".mantine-Alert-icon": {
+            // class for highlighting source material in debugger
+            ".truffle-debugger-text-highlighted": {
+              backgroundColor:
+                colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
+            },
+
+            ".trfl-Input-wrapper": {
+              flexGrow: 1
+            },
+            ".trfl-Alert-icon": {
               "width": 28,
               "height": "auto",
               "> svg": {
                 height: 28,
                 width: 28
               }
             },
-            ".mantine-Notification-root": {
+            ".trfl-Notification-root": {
               "backgroundColor":
                 colorScheme === "dark" ? colors["dark"][4] : white,
               "padding": "1rem 1rem 1rem 2rem",
-              ".mantine-Notification-title": {
+              ".trfl-Notification-title": {
                 fontSize: 15
               }
             },
-            ".mantine-Prism-code": {
+            ".trfl-Prism-code": {
               "backgroundColor":
                 colorScheme === "dark"
                   ? `${fn.darken(colors["truffle-brown"][9], 0.1)} !important`
                   : `${colors["truffle-beige"][0]} !important`,
-              ".mantine-Prism-lineNumber": {
+              ".trfl-Prism-lineNumber": {
                 color:
                   colorScheme === "dark"
                     ? colors["truffle-brown"][5]
                     : colors["truffle-beige"][5]
               }
+            },
+            ".codec-components-code-bracket": {
+              color: colors["truffle-beige"][8]
+            },
+            ".hljs-comment, .hljs-quote": {
+              color:
+                theme.colorScheme === "dark"
+                  ? colors["truffle-beige"][8]
+                  : colors["truffle-beige"][6],
+              fontStyle: "italic"
+            },
+            ".hljs-keyword": {
+              color: theme.colorScheme === "dark" ? mintHex : mintDarkHex,
+              fontWeight: "bold"
+            },
+            ".hljs-subst": {
+              color: colors.pink[7],
+              fontWeight: "normal"
+            },
+            ".hljs-number": {
+              color: redHex
+            },
+            ".hljs-string, .hljs-doctag": {
+              color: theme.colorScheme === "dark" ? greenHex : greenDarkHex
+            },
+            [[
+              ".hljs-type",
+              ".hljs-class",
+              ".hljs-title",
+              ".hljs-section",
+              ".hljs-selector-id",
+              ".codec-components-code-name"
+            ].join(", ")]: {
+              color: theme.colorScheme === "dark" ? orangeHex : orangeBrightHex,
+              fontWeight: "bold"
+            },
+            ".hljs-attribute": {
+              color: colors["truffle-teal"][8],
+              fontWeight: "normal"
+            },
+            ".hljs-literal, .hljs-built_in, .hljs-builtin-name": {
+              color: watermelonHex
             }
           }
         ];

packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx

@@ -0,0 +1,68 @@
+import type { BreakpointType } from "src/components/composed/Debugger/utils";
+import { createStyles } from "@mantine/core";
+
+const useStyles = createStyles(() => ({
+  breakpointGroup: {
+    display: "flex",
+    marginBottom: 5
+  },
+  breakpointDelete: {
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "borderRadius": 8,
+    "backgroundColor": "#FA5252",
+    "width": 16,
+    "height": 16,
+    "marginRight": 16
+  },
+  breakpoint: {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+}));
+
+type BreakpointProps = {
+  sourceName: string;
+  line: number;
+  sourceId: string;
+  handleBreakpointComponentClick: (arg: BreakpointType) => void;
+  handleBreakpointDeleteClick: (arg: BreakpointType) => void;
+};
+
+function Breakpoint({
+  sourceName,
+  line,
+  sourceId,
+  handleBreakpointComponentClick,
+  handleBreakpointDeleteClick
+}: BreakpointProps): JSX.Element | null {
+  const { classes } = useStyles();
+  return (
+    <div className={classes.breakpointGroup}>
+      <div
+        className={classes.breakpointDelete}
+        onClick={() =>
+          handleBreakpointDeleteClick({
+            sourceId,
+            line
+          })
+        }
+      ></div>
+      <div
+        className={classes.breakpoint}
+        onClick={() =>
+          handleBreakpointComponentClick({
+            sourceId,
+            line
+          })
+        }
+      >
+        {sourceName} - line {line}
+      </div>
+    </div>
+  );
+}
+
+export default Breakpoint;

packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx

@@ -0,0 +1,100 @@
+import { Source } from "src/components/composed/Debugger/utils";
+import { useDash } from "src/hooks";
+import * as path from "path";
+import { BreakpointType } from "src/components/composed/Debugger/utils";
+import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint";
+import { Flex, createStyles } from "@mantine/core";
+
+const useStyles = createStyles(theme => ({
+  breakpointsContainer: {
+    overflow: "hidden",
+    height: "30%",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: 4,
+    marginBottom: 20,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : `${theme.colors["truffle-beige"][5]}73`
+  },
+  sectionHeader: {
+    height: 42,
+    fontSize: 16,
+    paddingTop: 10,
+    paddingLeft: 16,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? `${theme.colors["truffle-beige"][8]}33`
+        : theme.colors["truffle-beige"][2],
+    borderBottom: "1px solid",
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : `${theme.colors["truffle-beige"][5]}73`
+  },
+  breakpoints: {
+    overflow: "scroll",
+    height: "100%",
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
+  },
+  breakpointsContent: {
+    paddingLeft: 10
+  }
+}));
+
+type BreakpointsArgs = {
+  sources: Source[];
+  handleBreakpointComponentClick: (breakpoint: BreakpointType) => void;
+  handleBreakpointDeleteClick: (breakpoint: BreakpointType) => void;
+};
+
+function Breakpoints({
+  sources,
+  handleBreakpointComponentClick,
+  handleBreakpointDeleteClick
+}: BreakpointsArgs): JSX.Element | null {
+  const { classes } = useStyles();
+  const {
+    state: {
+      debugger: { breakpoints }
+    }
+  } = useDash()!;
+  const breakpointsList: JSX.Element[] = [];
+  for (const source of sources) {
+    if (
+      breakpoints[source.id] === undefined ||
+      breakpoints[source.id].size === 0
+    ) {
+      continue;
+    }
+    if (!source?.sourcePath) {
+      continue;
+    }
+    const iterator = breakpoints[source.id].values();
+    const sourceName = path.basename(source.sourcePath);
+    for (const line of iterator) {
+      breakpointsList.push(
+        <Breakpoint
+          key={`${source.id}${line.toString()}`}
+          sourceName={sourceName}
+          line={line}
+          sourceId={source.id}
+          handleBreakpointComponentClick={handleBreakpointComponentClick}
+          handleBreakpointDeleteClick={handleBreakpointDeleteClick}
+        />
+      );
+    }
+  }
+  return (
+    <Flex direction="column" className={classes.breakpointsContainer}>
+      <div className={classes.sectionHeader}>Breakpoints</div>
+      <div className={classes.breakpoints}>
+        <pre className={classes.breakpointsContent}>{breakpointsList}</pre>
+      </div>
+    </Flex>
+  );
+}
+
+export default Breakpoints;