From aad0afa3d7ff7b306a4b3e2bacb2ddde9d1d8ad4 Mon Sep 17 00:00:00 2001 From: Cliff Zhang Date: Thu, 2 Feb 2023 22:56:42 -0500 Subject: [PATCH 001/189] dashboard: Debugger WIP --- packages/dashboard/lib/DashboardServer.ts | 1 + packages/dashboard/package.json | 6 + packages/dashboard/src/App.tsx | 2 + .../src/components/MantineGlobal.tsx | 34 ++ .../Debugger/Controls/ControlButton.tsx | 39 ++ .../composed/Debugger/Controls/index.tsx | 82 +++++ .../Debugger/Sources/Source/SourceLine.tsx | 47 +++ .../Debugger/Sources/Source/index.tsx | 44 +++ .../composed/Debugger/Sources/index.tsx | 47 +++ .../components/composed/Debugger/index.tsx | 73 ++++ .../composed/Sidebar/Middle/index.tsx | 7 +- packages/dashboard/src/types/debugger.d.ts | 1 + .../src/types/highlightjs-solidity.d.ts | 1 + .../dashboard/src/utils/debugger/index.ts | 4 + .../dashboard/src/utils/debugger/session.ts | 67 ++++ .../dashboard/src/utils/debugger/source.ts | 36 ++ .../dashboard/src/utils/debugger/status.ts | 6 + .../dashboard/src/utils/debugger/types.ts | 48 +++ yarn.lock | 347 +++++++++++++++++- 19 files changed, 888 insertions(+), 4 deletions(-) create mode 100644 packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx create mode 100644 packages/dashboard/src/components/composed/Debugger/Controls/index.tsx create mode 100644 packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx create mode 100644 packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx create mode 100644 packages/dashboard/src/components/composed/Debugger/Sources/index.tsx create mode 100644 packages/dashboard/src/components/composed/Debugger/index.tsx create mode 100644 packages/dashboard/src/types/debugger.d.ts create mode 100644 packages/dashboard/src/types/highlightjs-solidity.d.ts create mode 100644 packages/dashboard/src/utils/debugger/index.ts create mode 100644 packages/dashboard/src/utils/debugger/session.ts create mode 100644 packages/dashboard/src/utils/debugger/source.ts create mode 100644 packages/dashboard/src/utils/debugger/status.ts create mode 100644 packages/dashboard/src/utils/debugger/types.ts diff --git a/packages/dashboard/lib/DashboardServer.ts b/packages/dashboard/lib/DashboardServer.ts index 51f80c3e73b..ae0b2770a19 100644 --- a/packages/dashboard/lib/DashboardServer.ts +++ b/packages/dashboard/lib/DashboardServer.ts @@ -5,6 +5,7 @@ import open from "open"; import { fetchAndCompile } from "@truffle/fetch-and-compile"; import { sha1 } from "object-hash"; import { v4 as uuid } from "uuid"; +import { fetchAndCompile } from "@truffle/fetch-and-compile"; import Config from "@truffle/config"; import { dashboardProviderMessageType, diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index 8b8ec12f15d..709689af14b 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -44,13 +44,17 @@ "@truffle/dashboard-message-bus-common": "^0.1.6", "@truffle/decoder": "^6.1.0", "@truffle/fetch-and-compile": "^0.5.51", + "@truffle/debugger": "^11.0.24", "cors": "^2.8.5", "debug": "^4.3.2", "ethers": "^5.6.9", "express": "^4.17.1", + "ganache": "^7.7.3", "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", @@ -58,6 +62,8 @@ "react-dom": "^18.2.0", "react-feather": "^2.0.10", "react-router-dom": "^6.3.0", + "rehype-stringify": "^9.0.3", + "unified": "^10.1.2", "uuid": "^9.0.0", "wagmi": "^0.6.3", "ws": "^7.2.0" diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx index 5d22b19b81e..d3c136ce57e 100644 --- a/packages/dashboard/src/App.tsx +++ b/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 { }> } /> } /> + } /> {process.env.NODE_ENV === "development" && ( } /> diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx index d3964915234..9f1d96144b6 100644 --- a/packages/dashboard/src/components/MantineGlobal.tsx +++ b/packages/dashboard/src/components/MantineGlobal.tsx @@ -69,6 +69,40 @@ function MantineGlobal(): JSX.Element { ? colors["truffle-brown"][5] : colors["truffle-beige"][5] } + }, + ".hljs-comment, .hljs-quote": { + color: colors["truffle-beige"][8], + fontStyle: "italic" + }, + ".hljs-keyword, .hljs-selector-tag": { + color: colors.pink[7], + fontWeight: "bold" + }, + ".hljs-subst": { + color: colors.pink[7], + fontWeight: "normal" + }, + ".hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag, .hljs-attr": + { + color: colors.violet[7] + }, + ".hljs-string, .hljs-doctag": { + color: colors.yellow[6] + }, + ".hljs-title, .hljs-section, .hljs-selector-id": { + color: colors["truffle-teal"][8], + fontWeight: "bold" + }, + ".hljs-type, .hljs-class, .hljs-title": { + color: colors["truffle-teal"][8], + fontWeight: "bold" + }, + ".hljs-tag, .hljs-name, .hljs-attribute": { + color: colors["truffle-teal"][8], + fontWeight: "normal" + }, + ".hljs-built_in, .hljs-builtin-name": { + color: colors["truffle-teal"][8] } } ]; diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx new file mode 100644 index 00000000000..8349ebac954 --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx @@ -0,0 +1,39 @@ +import { createElement } from "react"; +import type { Icon } from "react-feather"; +import { ActionIcon } from "@mantine/core"; +import type { ActionIconProps } from "@mantine/core"; + +interface ControlButtonProps extends ActionIconProps { + icon: Icon; + step: () => Promise; + stepEffect: () => void; + stepping: boolean; + setStepping: React.Dispatch>; +} + +function ControlButton({ + icon, + step, + stepEffect, + disabled, + stepping, + setStepping, + ...props +}: ControlButtonProps): JSX.Element { + return ( + { + setStepping(true); + await step(); + setStepping(false); + stepEffect(); + }} + > + {createElement(icon)} + + ); +} + +export default ControlButton; diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx new file mode 100644 index 00000000000..6cf951db52e --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx @@ -0,0 +1,82 @@ +import { useState } from "react"; +import { + Play, + SkipForward, + FastForward, + Download, + Upload, + RotateCcw +} from "react-feather"; +import { Group } from "@mantine/core"; +import { selectors as $ } from "@truffle/debugger"; +import ControlButton from "src/components/composed/Debugger/Controls/ControlButton"; +import type { Session } from "src/utils/debugger"; + +interface ControlsProps { + session: Session; + stepEffect: () => void; +} + +function Controls({ session, stepEffect }: ControlsProps): JSX.Element { + const [stepping, setStepping] = useState(false); + const atStart = session.view($.trace.index) === 0; + const atEnd = session.view($.trace.finished); + + const status = stepping + ? "stepping..." + : atStart + ? "transaction start" + : atEnd + ? "transaction end" + : "transaction in progress"; + + const controlButtonProps = { + stepEffect, + stepping, + setStepping + }; + + return ( + + session.continueUntilBreakpoint()} + disabled={atEnd} + /> + session.stepNext()} + disabled={atEnd} + /> + session.stepOver()} + disabled={atEnd} + /> + session.stepInto()} + disabled={atEnd} + /> + session.stepOut()} + disabled={atEnd} + /> + session.reset()} + disabled={atStart} + /> + {status} + + ); +} + +export default Controls; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx new file mode 100644 index 00000000000..224df39382e --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx @@ -0,0 +1,47 @@ +import { createStyles } from "@mantine/core"; + +const useStyles = createStyles((theme, _params, _getRef) => ({ + lineNumber: { + color: theme.colorScheme === "dark" ? "#59534c" : "#c4b08d" + }, + selected: { + backgroundColor: theme.colorScheme === "dark" ? "#4444aa60" : "#ffff0050" + } +})); + +interface SourceLineProps { + line: string; + lineNumber: number; + lineNumberGutterWidth: number; + lastLine: boolean; + multiline: boolean; + selected: boolean; +} + +function SourceLine({ + line, + lineNumber, + lineNumberGutterWidth, + lastLine, + // multiline, + selected +}: SourceLineProps): JSX.Element { + const { classes } = useStyles(); + + if (!lastLine) line += "\n"; + const lineNumberDisplay = + `` + + " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) + + lineNumber + + " " + + ""; + + return ( +
+ ); +} + +export default SourceLine; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx new file mode 100644 index 00000000000..849d0d279b2 --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx @@ -0,0 +1,44 @@ +import SourceLine from "src/components/composed/Debugger/Sources/Source/SourceLine"; +import { highlightSourceContent } from "src/utils/debugger"; +import type { Source as SourceType, SourceRange } from "src/utils/debugger"; + +interface SourceProps { + source: SourceType; + sourceRange: SourceRange; +} + +function Source({ source, sourceRange }: SourceProps): JSX.Element { + const lines = highlightSourceContent(source).split("\n"); + const { start, end } = sourceRange; + const lineNumberGutterWidth = lines.length.toString().length; + + return ( + 
+      {lines.map((line, index) => {
+        const key = `${source.id}-line-${index}`;
+        const selected =
+          source.id === sourceRange.source.id &&
+          index >= start.line &&
+          (end.line === null ||
+            end.column === null ||
+            (end.column === 0 && index < end.line) ||
+            (end.column > 0 && index <= end.line));
+        const multiline = start.line !== end.line;
+
+        const props = {
+          key,
+          line,
+          lineNumber: index + 1,
+          lineNumberGutterWidth,
+          lastLine: index === lines.length - 1,
+          multiline,
+          selected
+        };
+
+        return ;
+      })}
+
+ ); +} + +export default Source; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx new file mode 100644 index 00000000000..213ed9523d2 --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -0,0 +1,47 @@ +import { useEffect, useState, useRef } from "react"; +import { basename } from "path"; +import { Tabs } from "@mantine/core"; +import Source from "src/components/composed/Debugger/Sources/Source"; +import { getSources, getCurrentSourceRange } from "src/utils/debugger"; +import type { Session } from "src/utils/debugger"; + +interface SourcesProps { + session: Session; + sessionUpdated: any; +} + +function Sources({ session, sessionUpdated }: SourcesProps): JSX.Element { + const sources = getSources(session); + const sourceIds = sources.map(({ id }) => id); + const currentSourceRange = getCurrentSourceRange(session); + const [currentSourceId, setCurrentSourceId] = useState(sourceIds[0]); + const currentSourceIdRef = useRef(currentSourceId); + currentSourceIdRef.current = currentSourceId; + + useEffect(() => { + const sessionSourceId = currentSourceRange.source.id; + if (sessionSourceId !== currentSourceIdRef.current) { + setCurrentSourceId(sessionSourceId); + } + }, [session, sessionUpdated, currentSourceRange.source.id]); + + return ( + + + {sources.map(source => ( + + {basename(source.sourcePath)} + + ))} + + + {sources.map(source => ( + + + + ))} + + ); +} + +export default Sources; diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx new file mode 100644 index 00000000000..518eca04dd1 --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -0,0 +1,73 @@ +import { useState } from "react"; +import { Input, Select, Button } from "@mantine/core"; +import { useInputState, useCounter } from "@mantine/hooks"; +import Controls from "src/components/composed/Debugger/Controls"; +import Sources from "src/components/composed/Debugger/Sources"; +import { setupSession, SessionStatus } from "src/utils/debugger"; +import type { Session } from "src/utils/debugger"; + +function Debugger(): JSX.Element { + const [inputValue, setInputValue] = useInputState(""); + const [selectValue, setSelectValue] = useInputState(""); + const [session, setSession] = useState(); + const [sessionUpdated, { increment: sessionTick }] = useCounter(); + const [status, setStatus] = useState(); + const inputsDisabled = + status === SessionStatus.Initializing || + status === SessionStatus.Fetching || + status === SessionStatus.Starting; + const formDisabled = + !/0x[a-z0-9]{64}/i.test(inputValue) || !selectValue || inputsDisabled; + + const initDebugger = async () => { + setSession(undefined); + const session = await setupSession(inputValue, selectValue, { + onInit: () => setStatus(SessionStatus.Initializing), + onFetch: () => setStatus(SessionStatus.Fetching), + onStart: () => setStatus(SessionStatus.Starting), + onReady: () => setStatus(SessionStatus.Ready) + }); + setSession(session); + }; + + let content; + if (session) { + content = ( + <> + + + + ); + } else { + content = status; + } + + return ( + <> + + diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts index ad5af7f70d6..1e1e55617b8 100644 --- a/packages/dashboard/src/utils/debugger/session.ts +++ b/packages/dashboard/src/utils/debugger/session.ts @@ -1,13 +1,13 @@ -import { forTx } from "@truffle/debugger"; -import * as Codec from "@truffle/codec"; +import { forTx, selectors as $ } from "@truffle/debugger"; import { provider } from "ganache"; -import type { Session } from "src/utils/debugger"; +import * as Codec from "@truffle/codec"; +import type { Session, Source } from "src/utils/debugger"; import type { Compilation } from "@truffle/compile-common"; import { getTransactionSourcesBeforeStarting } from "@truffle/debug-utils"; export async function setupSession( transactionHash: string, - networkName: string, + providedProvider: any, compilations: Compilation[], callbacks?: { onInit?: () => void; @@ -15,11 +15,11 @@ export async function setupSession( onStart?: () => void; onReady?: () => void; } -): Promise<{ session: Session; relevantSources: any }> { +): Promise<{ session: Session; sources: Source[] }> { callbacks?.onInit?.(); - const { session, relevantSources } = await createSession( + const { session, sources } = await createSession( transactionHash, - networkName, + providedProvider, compilations ); @@ -30,19 +30,21 @@ export async function setupSession( await session.startFullMode(); callbacks?.onReady?.(); - return { session, relevantSources }; + return { session, sources }; } async function createSession( transactionHash: string, - networkName: any, + providedProvider: any, compilations: Compilation[] -): Promise<{ session: Session; relevantSources: any }> { +): Promise<{ session: Session; sources: Source[] }> { const bugger = await forTx(transactionHash, { - provider: provider({ fork: { network: networkName } }), + provider: provider({ fork: { provider: providedProvider } }), compilations: Codec.Compilations.Utils.shimCompilations(compilations), lightMode: true }); + const affectedInstances = bugger.view($.session.info.affectedInstances); + console.log("the instances -- %o", affectedInstances); const sources = await getTransactionSourcesBeforeStarting(bugger); // we need to transform these into the format dashboard uses const transformedSources = Object.values(sources).flatMap( @@ -51,7 +53,7 @@ async function createSession( ); await bugger.startFullMode(); return { - relevantSources: transformedSources, + sources: transformedSources, session: bugger }; } From e41bc513006d873f501c053e696fc05a09201ebf Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Mon, 27 Feb 2023 11:57:26 -0500 Subject: [PATCH 005/189] fetch verified source material after loading compilations from browser --- .../dashboard/src/utils/debugger/session.ts | 52 +++++++++++++------ 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts index 1e1e55617b8..4ba46460024 100644 --- a/packages/dashboard/src/utils/debugger/session.ts +++ b/packages/dashboard/src/utils/debugger/session.ts @@ -17,14 +17,14 @@ export async function setupSession( } ): Promise<{ session: Session; sources: Source[] }> { callbacks?.onInit?.(); - const { session, sources } = await createSession( + const { session, sources, networkId, unknownAddresses } = await createSession( transactionHash, providedProvider, compilations ); callbacks?.onFetch?.(); - // await fetchCompilationsAndAddToSession(session, networkName); + await fetchCompilationsAndAddToSession(session, networkId, unknownAddresses); callbacks?.onStart?.(); await session.startFullMode(); @@ -37,14 +37,37 @@ async function createSession( transactionHash: string, providedProvider: any, compilations: Compilation[] -): Promise<{ session: Session; sources: Source[] }> { +): Promise<{ + session: Session; + sources: Source[]; + networkId: string; + unknownAddresses: string[]; +}> { const bugger = await forTx(transactionHash, { provider: provider({ fork: { provider: providedProvider } }), compilations: Codec.Compilations.Utils.shimCompilations(compilations), lightMode: true }); - const affectedInstances = bugger.view($.session.info.affectedInstances); - console.log("the instances -- %o", affectedInstances); + const affectedInstances: { [address: string]: any } = bugger.view( + $.session.info.affectedInstances + ); + const networkId = await providedProvider.request({ + method: "net_version", + params: [] + }); + const unknownAddresses: string[] = Object.entries(affectedInstances).reduce( + (a, item) => { + if (item[1].contractName === undefined) { + // @ts-ignore + a.push(item[0]); + } + return a; + }, + [] + ); + if (unknownAddresses.length > 0 && networkId) { + await fetchCompilationsAndAddToSession(bugger, networkId, unknownAddresses); + } const sources = await getTransactionSourcesBeforeStarting(bugger); // we need to transform these into the format dashboard uses const transformedSources = Object.values(sources).flatMap( @@ -54,31 +77,30 @@ async function createSession( await bugger.startFullMode(); return { sources: transformedSources, - session: bugger + session: bugger, + networkId, + unknownAddresses }; } async function fetchCompilationsAndAddToSession( session: Session, - networkName: string + networkId: string, + addresses: string[] ) { - const $ = session.selectors; - const host = window.location.hostname; const port = process.env.NODE_ENV === "development" ? 24012 : window.location.port; const fetchAndCompileEndpoint = `http://${host}:${port}/fetch-and-compile`; - const instances = session.view($.session.info.affectedInstances); - // @ts-ignore - const addresses = Object.entries(instances) - .filter(([_, { contractName }]: any) => contractName === undefined) - .map(([address, _]) => address); for (const address of addresses) { const fetchResult = await fetch( - `${fetchAndCompileEndpoint}?address=${address}&network=${networkName}` + `${fetchAndCompileEndpoint}?address=${address}&networkId=${networkId}` ); const { compilations } = await fetchResult.json(); + if (compilations.length === 0) { + continue; + } const shimmedCompilations = Codec.Compilations.Utils.shimCompilations( compilations, `externalFor(${address})Via(Etherscan)` From f26863132d0192080767b4038657cae6bc052e8f Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Mon, 27 Feb 2023 12:12:35 -0500 Subject: [PATCH 006/189] use loop instead of reduce for finding unknown addresses affected --- packages/dashboard/src/utils/debugger/session.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts index 4ba46460024..9319f832e31 100644 --- a/packages/dashboard/src/utils/debugger/session.ts +++ b/packages/dashboard/src/utils/debugger/session.ts @@ -55,16 +55,12 @@ async function createSession( method: "net_version", params: [] }); - const unknownAddresses: string[] = Object.entries(affectedInstances).reduce( - (a, item) => { - if (item[1].contractName === undefined) { - // @ts-ignore - a.push(item[0]); - } - return a; - }, - [] - ); + let unknownAddresses: string[] = []; + for (const [address, value] of Object.entries(affectedInstances)) { + if (value.contractName === undefined) { + unknownAddresses.push(address); + } + } if (unknownAddresses.length > 0 && networkId) { await fetchCompilationsAndAddToSession(bugger, networkId, unknownAddresses); } From 23327f2b1b18c2297c6cf14c187d656cda2b59c2 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Mon, 27 Feb 2023 15:52:18 -0500 Subject: [PATCH 007/189] get scroll working crudely and provide error message when tx hash not recognized on network --- .../Debugger/Sources/Source/SourceLine.tsx | 17 +++++++---- .../Debugger/Sources/Source/index.tsx | 8 ++++-- .../composed/Debugger/Sources/index.tsx | 10 ++++++- .../components/composed/Debugger/index.tsx | 4 ++- .../dashboard/src/utils/debugger/session.ts | 28 +++++++++++++++---- 5 files changed, 51 insertions(+), 16 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx index 8e39c906ebc..70e22f98c97 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx @@ -16,8 +16,8 @@ interface SourceLineProps { lineNumberGutterWidth: number; lastLine: boolean; // multiline: boolean; - selected: boolean; - sourceRange: SourceRange; + scrollRef: any; + firstHighlightedLine: boolean; } function SourceLine({ @@ -26,8 +26,8 @@ function SourceLine({ lineNumberGutterWidth, lastLine, // multiline, - selected, - sourceRange + scrollRef, + firstHighlightedLine }: SourceLineProps): JSX.Element { const { classes } = useStyles(); @@ -39,7 +39,14 @@ function SourceLine({ " " + ""; - return
; + return firstHighlightedLine ? ( +
+ ) : ( +
+ ); } export default SourceLine; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx index 37c24b819c5..5c1a4627fa6 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx @@ -9,9 +9,10 @@ import type { Source as SourceType, SourceRange } from "src/utils/debugger"; interface SourceProps { source: SourceType; sourceRange: SourceRange; + scrollRef: any; } -function Source({ source, sourceRange }: SourceProps): JSX.Element { +function Source({ source, sourceRange, scrollRef }: SourceProps): JSX.Element { // add comment markers for where spans will go later designating debugger // highlighting - comments so lowlight doesn't choke on html const sourceWithHighlightedMarkings = addTextHighlightedClass( @@ -40,6 +41,7 @@ function Source({ source, sourceRange }: SourceProps): JSX.Element { (end.column === 0 && index < end.line) || (end.column > 0 && index <= end.line)); // const multiline = start.line !== end.line; + const firstHighlightedLine = selected && index === start.line; const props = { key, @@ -47,9 +49,9 @@ function Source({ source, sourceRange }: SourceProps): JSX.Element { lineNumber: index + 1, lineNumberGutterWidth, lastLine: index === finishedLines.length - 1, + firstHighlightedLine, // multiline, - selected, - sourceRange + scrollRef }; return ; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 1d3be733bdc..62602bc8c19 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { useEffect, useState, useRef } from "react"; import { basename } from "path"; import { Tabs } from "@mantine/core"; @@ -21,8 +22,11 @@ function Sources({ const [currentSourceId, setCurrentSourceId] = useState(sourceIds[0]); const currentSourceIdRef = useRef(currentSourceId); currentSourceIdRef.current = currentSourceId; + const scrollRef = React.createRef(); useEffect(() => { + // @ts-ignore + scrollRef.current.scrollIntoView(); const sessionSourceId = currentSourceRange.source.id; if (sessionSourceId !== currentSourceIdRef.current) { setCurrentSourceId(sessionSourceId); @@ -42,7 +46,11 @@ function Sources({ {sources.map((source: SourceType) => ( - + ))} diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index 41bbf64ef61..29b71b591cc 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -21,13 +21,15 @@ function Debugger(): JSX.Element { status === SessionStatus.Fetching || status === SessionStatus.Starting; const formDisabled = - // !/0x[a-z0-9]{64}/i.test(inputValue) || !selectValue || inputsDisabled; + // !/0x[a-z0-9]{64}/i.test(inputValue) || inputsDisabled; inputsDisabled; const initDebugger = async () => { const compilations = await operations.getCompilations(); const testTxHash = "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; + // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176" + const provider = window.ethereum; if (!provider) { throw new Error( diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts index 9319f832e31..880492a051b 100644 --- a/packages/dashboard/src/utils/debugger/session.ts +++ b/packages/dashboard/src/utils/debugger/session.ts @@ -1,4 +1,4 @@ -import { forTx, selectors as $ } from "@truffle/debugger"; +import { forTx } from "@truffle/debugger"; import { provider } from "ganache"; import * as Codec from "@truffle/codec"; import type { Session, Source } from "src/utils/debugger"; @@ -43,11 +43,26 @@ async function createSession( networkId: string; unknownAddresses: string[]; }> { - const bugger = await forTx(transactionHash, { - provider: provider({ fork: { provider: providedProvider } }), - compilations: Codec.Compilations.Utils.shimCompilations(compilations), - lightMode: true - }); + let bugger; + try { + bugger = await forTx(transactionHash, { + provider: provider({ fork: { provider: providedProvider } }), + compilations: Codec.Compilations.Utils.shimCompilations(compilations), + lightMode: true + }); + } catch (error) { + // @ts-ignore + if (!error.message.includes("Unknown transaction")) { + throw error; + } + throw new Error( + `The transaction hash isn't recognized on the network you are connected` + + `to. Please ensure you are on the appropriate network for ` + + `transaction hash ${transactionHash}.` + ); + } + + const $ = bugger.selectors; const affectedInstances: { [address: string]: any } = bugger.view( $.session.info.affectedInstances ); @@ -55,6 +70,7 @@ async function createSession( method: "net_version", params: [] }); + let unknownAddresses: string[] = []; for (const [address, value] of Object.entries(affectedInstances)) { if (value.contractName === undefined) { From 7efccc74dc1704d0ba5cd4a791a3159e6001cf41 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 1 Mar 2023 15:40:38 -0500 Subject: [PATCH 008/189] add new inspect lib, create Variables component, and update operations for setting debugger data --- packages/dashboard/package.json | 3 ++ .../Debugger/Sources/Source/SourceLine.tsx | 3 -- .../composed/Debugger/Sources/index.tsx | 12 ++++-- .../composed/Debugger/Variables.tsx | 41 +++++++++++++++++++ .../components/composed/Debugger/index.tsx | 15 ++++++- .../src/contexts/DashContext/DashContext.ts | 6 +-- .../src/contexts/DashContext/DashProvider.tsx | 8 ++-- .../src/contexts/DashContext/state.ts | 2 +- .../src/contexts/DashContext/types/Action.ts | 12 +++--- packages/dashboard/src/types/debugger.d.ts | 1 + .../dashboard/src/utils/debugger/session.ts | 11 +++-- yarn.lock | 5 +++ 12 files changed, 92 insertions(+), 27 deletions(-) create mode 100644 packages/dashboard/src/components/composed/Debugger/Variables.tsx diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index c6ce2b5aecd..1bff0c0f7ed 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -47,6 +47,9 @@ "@truffle/debugger": "^11.0.24", "@truffle/debug-utils": "^6.0.44", "@truffle/decoder": "^5.3.7", + "@truffle/debugger": "^11.0.27", + "@truffle/debug-utils": "^6.0.46", + "browser-util-inspect": "0.2.0", "cors": "^2.8.5", "debug": "^4.3.2", "ethers": "^5.6.9", diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx index 70e22f98c97..a964b6e95eb 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx @@ -1,5 +1,4 @@ import { createStyles } from "@mantine/core"; -import type { SourceRange } from "src/utils/debugger"; const useStyles = createStyles((theme, _params, _getRef) => ({ lineNumber: { @@ -15,7 +14,6 @@ interface SourceLineProps { lineNumber: number; lineNumberGutterWidth: number; lastLine: boolean; - // multiline: boolean; scrollRef: any; firstHighlightedLine: boolean; } @@ -25,7 +23,6 @@ function SourceLine({ lineNumber, lineNumberGutterWidth, lastLine, - // multiline, scrollRef, firstHighlightedLine }: SourceLineProps): JSX.Element { diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 62602bc8c19..322d9d3fd97 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -3,22 +3,26 @@ import { useEffect, useState, useRef } from "react"; import { basename } from "path"; import { Tabs } from "@mantine/core"; import Source from "src/components/composed/Debugger/Sources/Source"; -import { getCurrentSourceRange } from "src/utils/debugger"; -import type { Session, Source as SourceType } from "src/utils/debugger"; +import type { + SourceRange, + Session, + Source as SourceType +} from "src/utils/debugger"; interface SourcesProps { session: Session; sessionUpdated: any; sources: SourceType[]; + currentSourceRange: SourceRange; } function Sources({ sources, session, - sessionUpdated + sessionUpdated, + currentSourceRange }: SourcesProps): JSX.Element { const sourceIds = sources.map(({ id }) => id); - const currentSourceRange = getCurrentSourceRange(session); const [currentSourceId, setCurrentSourceId] = useState(sourceIds[0]); const currentSourceIdRef = useRef(currentSourceId); currentSourceIdRef.current = currentSourceId; diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx new file mode 100644 index 00000000000..6e1477a2fad --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx @@ -0,0 +1,41 @@ +import { useEffect, useState } from "react"; +import type { Session } from "src/utils/debugger"; +import inspect from "browser-util-inspect"; +import * as Codec from "@truffle/codec"; + +type VariablesArgs = { + session: Session; + currentStep: string; +}; + +function Variables({ + session, + currentStep +}: VariablesArgs): JSX.Element | null { + const [variables, setVariables] = useState({}); + // when the debugger step changes, update variables + useEffect(() => { + async function getVariables() { + const variables = await session!.variables(); + setVariables(variables); + } + getVariables(); + }, [currentStep]); + + return ( +
+ {Object.entries(variables).map(([name, result]) => { + return ( +
+ <> + {name} -{" "} + {inspect(new Codec.Export.ResultInspector(result as any))} + +
+ ); + })} +
+ ); +} + +export default Variables; diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index 29b71b591cc..cf5131d901f 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -3,8 +3,10 @@ import { Input, Button } from "@mantine/core"; import { useInputState, useCounter } from "@mantine/hooks"; import Controls from "src/components/composed/Debugger/Controls"; import Sources from "src/components/composed/Debugger/Sources"; +import Variables from "src/components/composed/Debugger/Variables"; import { setupSession, SessionStatus } from "src/utils/debugger"; import { useDash } from "src/hooks"; +import { getCurrentSourceRange } from "src/utils/debugger"; function Debugger(): JSX.Element { const [inputValue, setInputValue] = useInputState(""); @@ -48,11 +50,18 @@ function Debugger(): JSX.Element { onReady: () => setStatus(SessionStatus.Ready) } ); - operations.setDebuggerSourcesAndSession({ sources, session }); + operations.setDebuggerSessionData({ sources, session }); }; + let currentSourceRange, $, currentStep; + if (session) { + currentSourceRange = getCurrentSourceRange(session); + $ = session.selectors; + currentStep = session.view($.trace.index); + } + let content; - if (session && sources) { + if (session && sources && currentSourceRange) { content = ( <> @@ -60,7 +69,9 @@ function Debugger(): JSX.Element { sources={sources} session={session} sessionUpdated={sessionUpdated} + currentSourceRange={currentSourceRange} /> + ); } else { diff --git a/packages/dashboard/src/contexts/DashContext/DashContext.ts b/packages/dashboard/src/contexts/DashContext/DashContext.ts index 2407e8ae2e8..a2eec23281b 100644 --- a/packages/dashboard/src/contexts/DashContext/DashContext.ts +++ b/packages/dashboard/src/contexts/DashContext/DashContext.ts @@ -2,7 +2,7 @@ import { createContext } from "react"; import type { ReceivedMessageLifecycle } from "@truffle/dashboard-message-bus-client"; import type { DashboardProviderMessage } from "@truffle/dashboard-message-bus-common"; import type { State, Action } from "src/contexts/DashContext"; -import type { SetDebuggerSourcesAndSessionArgs } from "src/contexts/DashContext/types"; +import type { SetDebuggerSessionDataArgs } from "src/contexts/DashContext/types"; import type { Compilation } from "@truffle/compile-common"; export interface ContextValue { @@ -16,9 +16,7 @@ export interface ContextValue { ) => any; toggleNotice: () => void; updateAnalyticsConfig: (value: boolean) => void; - setDebuggerSourcesAndSession: ( - value: SetDebuggerSourcesAndSessionArgs - ) => void; + setDebuggerSessionData: (value: SetDebuggerSessionDataArgs) => void; getCompilations: () => Promise; }; dispatch?: React.Dispatch; diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx index b5f410c7a70..d4e556ec5ed 100644 --- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx +++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx @@ -24,7 +24,7 @@ import { rejectMessage, getChainNameByID } from "src/utils/dash"; -import type { SetDebuggerSourcesAndSessionArgs } from "src/contexts/DashContext/types"; +import type { SetDebuggerSessionDataArgs } from "src/contexts/DashContext/types"; const ARBITRARY_DB_MAX_BYTES = 500_000_000; const ARBITRARY_DB_MAX_PERCENT = 0.8; @@ -310,12 +310,12 @@ function DashProvider({ children }: DashProviderProps): JSX.Element { getCompilations: async (): Promise => { return await dbHelper.getAllCompilations(); }, - setDebuggerSourcesAndSession: ({ + setDebuggerSessionData: ({ sources, session - }: SetDebuggerSourcesAndSessionArgs) => { + }: SetDebuggerSessionDataArgs) => { dispatch({ - type: "set-debugger-sources-and-session", + type: "set-debugger-session-data", data: { sources, session diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts index 324942ca902..50fd437dba7 100644 --- a/packages/dashboard/src/contexts/DashContext/state.ts +++ b/packages/dashboard/src/contexts/DashContext/state.ts @@ -70,7 +70,7 @@ export const reducer = (state: State, action: Action): State => { return { ...state, notice: { ...state.notice, ...data } }; case "set-analytics-config": return { ...state, analyticsConfig: data }; - case "set-debugger-sources-and-session": + case "set-debugger-session-data": return { ...state, debugger: data }; case "handle-message": // Copy state, diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts index 99000d9bdae..100e672a8d1 100644 --- a/packages/dashboard/src/contexts/DashContext/types/Action.ts +++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts @@ -10,9 +10,9 @@ export type ActionType = | "set-analytics-config" | "handle-message" | "update-provider-message-sender" - | "set-debugger-sources-and-session"; + | "set-debugger-session-data"; -export type SetDebuggerSourcesAndSessionArgs = { +export type SetDebuggerSessionDataArgs = { sources: Source[]; session: Session; }; @@ -29,9 +29,9 @@ export interface SetDecoderAction extends BaseAction { >; } -export interface SetDebuggerSourcesAndSessionAction extends BaseAction { - type: "set-debugger-sources-and-session"; - data: SetDebuggerSourcesAndSessionArgs; +export interface SetDebuggerSessionDataAction extends BaseAction { + type: "set-debugger-session-data"; + data: SetDebuggerSessionDataArgs; } export interface SetChainInfoAction extends BaseAction { @@ -66,4 +66,4 @@ export type Action = | SetAnalyticsConfigAction | HandleMessageAction | UpdateProviderMessageSenderAction - | SetDebuggerSourcesAndSessionAction; + | SetDebuggerSessionDataAction; diff --git a/packages/dashboard/src/types/debugger.d.ts b/packages/dashboard/src/types/debugger.d.ts index 17487d4a27e..81d51e19317 100644 --- a/packages/dashboard/src/types/debugger.d.ts +++ b/packages/dashboard/src/types/debugger.d.ts @@ -1 +1,2 @@ declare module "@truffle/debugger"; +declare module "browser-util-inspect"; diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts index 880492a051b..482c935156b 100644 --- a/packages/dashboard/src/utils/debugger/session.ts +++ b/packages/dashboard/src/utils/debugger/session.ts @@ -15,7 +15,7 @@ export async function setupSession( onStart?: () => void; onReady?: () => void; } -): Promise<{ session: Session; sources: Source[] }> { +): Promise<{ session: Session; sources: Source[]; variables: any }> { callbacks?.onInit?.(); const { session, sources, networkId, unknownAddresses } = await createSession( transactionHash, @@ -29,8 +29,14 @@ export async function setupSession( callbacks?.onStart?.(); await session.startFullMode(); + const $ = session.selectors; + // @ts-ignore + window.dollar = $; + // @ts-ignore + window.bugger = session; + const variables = await session.variables(); callbacks?.onReady?.(); - return { session, sources }; + return { session, sources, variables }; } async function createSession( @@ -86,7 +92,6 @@ async function createSession( ({ id, sourcePath, source: contents, language }: any) => language === "Solidity" ? [{ id, sourcePath, contents, language }] : [] ); - await bugger.startFullMode(); return { sources: transformedSources, session: bugger, diff --git a/yarn.lock b/yarn.lock index e373180b0bc..68791b7e146 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10293,6 +10293,11 @@ browser-stdout@1.3.1: resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60" integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw== +browser-util-inspect@0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/browser-util-inspect/-/browser-util-inspect-0.2.0.tgz#cdda8ce1a4a07a4386035168a228c8777bff459c" + integrity sha512-R7WvAj0p9FtwS2Jbtc1HUd1+YZdeb5EEqjBSbbOK3owJtW1viWyJDeTPy43QZ7bZ8POtb1yMv++h844486jMsQ== + browserify-aes@^1.0.0, browserify-aes@^1.0.4, browserify-aes@^1.0.6, browserify-aes@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" From b7eead54530963e8f2cb5bb726dfe448ee6900ca Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 1 Mar 2023 15:42:03 -0500 Subject: [PATCH 009/189] get rid of $ assignment --- .../dashboard/src/components/composed/Debugger/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index cf5131d901f..0e99f03faf7 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -53,11 +53,10 @@ function Debugger(): JSX.Element { operations.setDebuggerSessionData({ sources, session }); }; - let currentSourceRange, $, currentStep; + let currentSourceRange, currentStep; if (session) { currentSourceRange = getCurrentSourceRange(session); - $ = session.selectors; - currentStep = session.view($.trace.index); + currentStep = session.view(session.selectors.trace.index); } let content; From c13218a8d2bdac269a79a247aab059f8b2d4e566 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Thu, 2 Mar 2023 11:18:40 -0500 Subject: [PATCH 010/189] only call scrollIntoView when the ref exists --- .../src/components/composed/Debugger/Sources/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 322d9d3fd97..d2e54a5389e 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -29,8 +29,10 @@ function Sources({ const scrollRef = React.createRef(); useEffect(() => { - // @ts-ignore - scrollRef.current.scrollIntoView(); + if (scrollRef) { + // @ts-ignore + scrollRef.current.scrollIntoView(); + } const sessionSourceId = currentSourceRange.source.id; if (sessionSourceId !== currentSourceIdRef.current) { setCurrentSourceId(sessionSourceId); From 32c47f07d7148b6653d76bb0db08f1edd8347255 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Thu, 2 Mar 2023 13:18:57 -0500 Subject: [PATCH 011/189] keep track of unknown sources so we can display something useful in the browser --- .../composed/Debugger/Sources/index.tsx | 27 ++++++++++-- .../components/composed/Debugger/index.tsx | 10 ++++- .../dashboard/src/utils/debugger/session.ts | 43 ++++++++++++------- 3 files changed, 59 insertions(+), 21 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index d2e54a5389e..90ffe21abf4 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -14,13 +14,15 @@ interface SourcesProps { sessionUpdated: any; sources: SourceType[]; currentSourceRange: SourceRange; + unknownAddresses: string[]; } function Sources({ sources, session, sessionUpdated, - currentSourceRange + currentSourceRange, + unknownAddresses }: SourcesProps): JSX.Element { const sourceIds = sources.map(({ id }) => id); const [currentSourceId, setCurrentSourceId] = useState(sourceIds[0]); @@ -29,7 +31,7 @@ function Sources({ const scrollRef = React.createRef(); useEffect(() => { - if (scrollRef) { + if (scrollRef?.current) { // @ts-ignore scrollRef.current.scrollIntoView(); } @@ -38,7 +40,12 @@ function Sources({ setCurrentSourceId(sessionSourceId); } }, [session, sessionUpdated, currentSourceRange.source.id]); - + const unknownSources = unknownAddresses.map(address => ({ + id: address, + sourcePath: "", + contents: `Could not locate source material for address ${address}.`, + language: "" + })); return ( // @ts-ignore @@ -48,6 +55,11 @@ function Sources({ {basename(source.sourcePath)} ))} + {unknownSources.map((source: SourceType) => ( + + Unknown Contract + + ))} {sources.map((source: SourceType) => ( @@ -59,6 +71,15 @@ function Sources({ /> ))} + {unknownSources.map((source: SourceType) => ( + + + + ))} ); } diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index 0e99f03faf7..8ac47e24c08 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -18,6 +18,7 @@ function Debugger(): JSX.Element { } } = useDash()!; const [status, setStatus] = useState(); + const [unknownAddresses, setUnknownAddresses] = useState([]); const inputsDisabled = status === SessionStatus.Initializing || status === SessionStatus.Fetching || @@ -29,7 +30,8 @@ function Debugger(): JSX.Element { const initDebugger = async () => { const compilations = await operations.getCompilations(); const testTxHash = - "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; + "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1"; + // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176" const provider = window.ethereum; @@ -39,7 +41,7 @@ function Debugger(): JSX.Element { "MetaMask connected to the current page." ); } - const { session, sources } = await setupSession( + const { session, sources, unknownAddresses } = await setupSession( testTxHash, provider, compilations, @@ -50,6 +52,9 @@ function Debugger(): JSX.Element { onReady: () => setStatus(SessionStatus.Ready) } ); + if (unknownAddresses.length > 0) { + setUnknownAddresses(unknownAddresses); + } operations.setDebuggerSessionData({ sources, session }); }; @@ -66,6 +71,7 @@ function Debugger(): JSX.Element { void; onReady?: () => void; } -): Promise<{ session: Session; sources: Source[]; variables: any }> { +): Promise<{ + session: Session; + sources: Source[]; + unknownAddresses: string[]; +}> { callbacks?.onInit?.(); - const { session, sources, networkId, unknownAddresses } = await createSession( - transactionHash, - providedProvider, - compilations - ); + const { session, sources, networkId, unrecognizedAddresses } = + await createSession(transactionHash, providedProvider, compilations); callbacks?.onFetch?.(); - await fetchCompilationsAndAddToSession(session, networkId, unknownAddresses); + const { unknownAddresses } = await fetchCompilationsAndAddToSession( + session, + networkId, + unrecognizedAddresses + ); callbacks?.onStart?.(); await session.startFullMode(); @@ -34,9 +39,8 @@ export async function setupSession( window.dollar = $; // @ts-ignore window.bugger = session; - const variables = await session.variables(); callbacks?.onReady?.(); - return { session, sources, variables }; + return { session, sources, unknownAddresses }; } async function createSession( @@ -47,7 +51,7 @@ async function createSession( session: Session; sources: Source[]; networkId: string; - unknownAddresses: string[]; + unrecognizedAddresses: string[]; }> { let bugger; try { @@ -77,14 +81,18 @@ async function createSession( params: [] }); - let unknownAddresses: string[] = []; + let unrecognizedAddresses: string[] = []; for (const [address, value] of Object.entries(affectedInstances)) { if (value.contractName === undefined) { - unknownAddresses.push(address); + unrecognizedAddresses.push(address); } } - if (unknownAddresses.length > 0 && networkId) { - await fetchCompilationsAndAddToSession(bugger, networkId, unknownAddresses); + if (unrecognizedAddresses.length > 0 && networkId) { + await fetchCompilationsAndAddToSession( + bugger, + networkId, + unrecognizedAddresses + ); } const sources = await getTransactionSourcesBeforeStarting(bugger); // we need to transform these into the format dashboard uses @@ -96,7 +104,7 @@ async function createSession( sources: transformedSources, session: bugger, networkId, - unknownAddresses + unrecognizedAddresses }; } @@ -104,18 +112,20 @@ async function fetchCompilationsAndAddToSession( session: Session, networkId: string, addresses: string[] -) { +): Promise<{ unknownAddresses: string[] }> { const host = window.location.hostname; const port = process.env.NODE_ENV === "development" ? 24012 : window.location.port; const fetchAndCompileEndpoint = `http://${host}:${port}/fetch-and-compile`; + let unknownAddresses = []; for (const address of addresses) { const fetchResult = await fetch( `${fetchAndCompileEndpoint}?address=${address}&networkId=${networkId}` ); const { compilations } = await fetchResult.json(); if (compilations.length === 0) { + unknownAddresses.push(address); continue; } const shimmedCompilations = Codec.Compilations.Utils.shimCompilations( @@ -125,4 +135,5 @@ async function fetchCompilationsAndAddToSession( await session.addExternalCompilations(shimmedCompilations); } + return { unknownAddresses }; } From 59d9685e07c8581f8d61f4d0d19865506ceba38a Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Mon, 6 Mar 2023 12:40:05 -0500 Subject: [PATCH 012/189] add a couple of deps to useEffect callback to make React happy --- .../src/components/composed/Debugger/Sources/index.tsx | 2 +- .../src/components/composed/Debugger/Variables.tsx | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 90ffe21abf4..5688554c6d3 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -39,7 +39,7 @@ function Sources({ if (sessionSourceId !== currentSourceIdRef.current) { setCurrentSourceId(sessionSourceId); } - }, [session, sessionUpdated, currentSourceRange.source.id]); + }, [session, sessionUpdated, currentSourceRange.source.id, scrollRef]); const unknownSources = unknownAddresses.map(address => ({ id: address, sourcePath: "", diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx index 6e1477a2fad..112e839a6fe 100644 --- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import type { Session } from "src/utils/debugger"; import inspect from "browser-util-inspect"; +import { Container } from "@mantine/core"; import * as Codec from "@truffle/codec"; type VariablesArgs = { @@ -20,10 +21,10 @@ function Variables({ setVariables(variables); } getVariables(); - }, [currentStep]); + }, [currentStep, session]); return ( -
+ {Object.entries(variables).map(([name, result]) => { return (
@@ -34,7 +35,7 @@ function Variables({
); })} -
+ ); } From 5db2df35afd0a1a4674fb8130708e5c95d93e345 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Tue, 7 Mar 2023 13:20:49 -0500 Subject: [PATCH 013/189] add plumbing for keeping track of debugger breakpoints --- .../src/contexts/DashContext/DashContext.ts | 6 +++- .../src/contexts/DashContext/DashProvider.tsx | 14 ++++++++- .../src/contexts/DashContext/state.ts | 29 +++++++++++++++++-- .../src/contexts/DashContext/types/Action.ts | 19 ++++++++++-- .../src/contexts/DashContext/types/State.ts | 5 ++++ 5 files changed, 67 insertions(+), 6 deletions(-) diff --git a/packages/dashboard/src/contexts/DashContext/DashContext.ts b/packages/dashboard/src/contexts/DashContext/DashContext.ts index a2eec23281b..422839b121f 100644 --- a/packages/dashboard/src/contexts/DashContext/DashContext.ts +++ b/packages/dashboard/src/contexts/DashContext/DashContext.ts @@ -2,7 +2,10 @@ import { createContext } from "react"; import type { ReceivedMessageLifecycle } from "@truffle/dashboard-message-bus-client"; import type { DashboardProviderMessage } from "@truffle/dashboard-message-bus-common"; import type { State, Action } from "src/contexts/DashContext"; -import type { SetDebuggerSessionDataArgs } from "src/contexts/DashContext/types"; +import type { + SetDebuggerSessionDataArgs, + ToggleDebuggerBreakpointArgs +} from "src/contexts/DashContext/types"; import type { Compilation } from "@truffle/compile-common"; export interface ContextValue { @@ -18,6 +21,7 @@ export interface ContextValue { updateAnalyticsConfig: (value: boolean) => void; setDebuggerSessionData: (value: SetDebuggerSessionDataArgs) => void; getCompilations: () => Promise; + toggleDebuggerBreakpoint: (value: ToggleDebuggerBreakpointArgs) => void; }; dispatch?: React.Dispatch; } diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx index d4e556ec5ed..322cb490387 100644 --- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx +++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx @@ -24,7 +24,10 @@ import { rejectMessage, getChainNameByID } from "src/utils/dash"; -import type { SetDebuggerSessionDataArgs } from "src/contexts/DashContext/types"; +import type { + SetDebuggerSessionDataArgs, + ToggleDebuggerBreakpointArgs +} from "src/contexts/DashContext/types"; const ARBITRARY_DB_MAX_BYTES = 500_000_000; const ARBITRARY_DB_MAX_PERCENT = 0.8; @@ -321,6 +324,15 @@ function DashProvider({ children }: DashProviderProps): JSX.Element { session } }); + }, + toggleDebuggerBreakpoint({ line, sourceId }: ToggleDebuggerBreakpointArgs) { + dispatch({ + type: "toggle-debugger-breakpoint", + data: { + line, + sourceId + } + }); } }; diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts index 50fd437dba7..d685e8d20d1 100644 --- a/packages/dashboard/src/contexts/DashContext/state.ts +++ b/packages/dashboard/src/contexts/DashContext/state.ts @@ -38,7 +38,8 @@ export const initialState: State = { }), debugger: { sources: null, - session: null + session: null, + breakpoints: null }, decoder: null, decoderCompilations: null, @@ -70,8 +71,32 @@ export const reducer = (state: State, action: Action): State => { return { ...state, notice: { ...state.notice, ...data } }; case "set-analytics-config": return { ...state, analyticsConfig: data }; + case "toggle-debugger-breakpoint": + const { line, sourceId } = data; + const newBreakpointStateForSource = new Set( + state.debugger.breakpoints![sourceId] + ); + state.debugger.breakpoints![sourceId].has(line) + ? newBreakpointStateForSource.delete(line) + : newBreakpointStateForSource.add(line); + return { + ...state, + debugger: { + ...state.debugger, + breakpoints: { + ...state.debugger.breakpoints, + [sourceId]: newBreakpointStateForSource + } + } + }; case "set-debugger-session-data": - return { ...state, debugger: data }; + return { + ...state, + debugger: { + ...data, + breakpoints: null + } + }; case "handle-message": // Copy state, // modify it depending on message type, diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts index 100e672a8d1..f58cb5ed159 100644 --- a/packages/dashboard/src/contexts/DashContext/types/Action.ts +++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts @@ -10,13 +10,19 @@ export type ActionType = | "set-analytics-config" | "handle-message" | "update-provider-message-sender" - | "set-debugger-session-data"; + | "set-debugger-session-data" + | "toggle-debugger-breakpoint"; export type SetDebuggerSessionDataArgs = { sources: Source[]; session: Session; }; +export type ToggleDebuggerBreakpointArgs = { + line: number; + sourceId: string; +}; + export interface BaseAction { type: ActionType; } @@ -59,6 +65,14 @@ export interface UpdateProviderMessageSenderAction extends BaseAction { data: string; } +export interface ToggleDebuggerBreakpointAction extends BaseAction { + type: "toggle-debugger-breakpoint"; + data: { + line: number; + sourceId: string; + }; +} + export type Action = | SetDecoderAction | SetChainInfoAction @@ -66,4 +80,5 @@ export type Action = | SetAnalyticsConfigAction | HandleMessageAction | UpdateProviderMessageSenderAction - | SetDebuggerSessionDataAction; + | SetDebuggerSessionDataAction + | ToggleDebuggerBreakpointAction; diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts index f73a23fb049..4860cbc2d26 100644 --- a/packages/dashboard/src/contexts/DashContext/types/State.ts +++ b/packages/dashboard/src/contexts/DashContext/types/State.ts @@ -9,12 +9,17 @@ import type { Schema } from "src/contexts/DashContext"; import type { NoticeContent } from "src/components/composed/Notice/content/types"; import type { Source, Session } from "src/utils/debugger"; +type BreakpointState = { + [sourceId: string]: Set; +}; + export interface State { busClient: DashboardMessageBusClient; dbPromise: Promise>; debugger: { sources: Source[] | null; session: Session | null; + breakpoints: BreakpointState | null; }; decoder: ProjectDecoder | null; decoderCompilations: Array | null; From e382389522a35bf650a48d941f1e495feec2be98 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Tue, 7 Mar 2023 14:45:17 -0500 Subject: [PATCH 014/189] add click handler on source lines to handle breakpoints and create UnknownSource component --- .../Debugger/Sources/Source/SourceLine.tsx | 23 +++++++++++++++++-- .../Debugger/Sources/Source/index.tsx | 11 ++++++--- .../Debugger/Sources/UnknownSource.tsx | 9 ++++++++ .../composed/Debugger/Sources/index.tsx | 8 +++---- .../src/contexts/DashContext/state.ts | 7 +++++- 5 files changed, 47 insertions(+), 11 deletions(-) create mode 100644 packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx index a964b6e95eb..8ebc2667ba1 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx @@ -1,4 +1,5 @@ import { createStyles } from "@mantine/core"; +import { useDash } from "src/hooks"; const useStyles = createStyles((theme, _params, _getRef) => ({ lineNumber: { @@ -16,6 +17,7 @@ interface SourceLineProps { lastLine: boolean; scrollRef: any; firstHighlightedLine: boolean; + sourceId: string; } function SourceLine({ @@ -24,9 +26,13 @@ function SourceLine({ lineNumberGutterWidth, lastLine, scrollRef, - firstHighlightedLine + firstHighlightedLine, + sourceId }: SourceLineProps): JSX.Element { const { classes } = useStyles(); + const { + operations: { toggleDebuggerBreakpoint } + } = useDash()!; if (!lastLine) line += "\n"; const lineNumberDisplay = @@ -35,14 +41,27 @@ function SourceLine({ lineNumber + " " + ""; + const handleClick = (({ + line, + sourceId + }: { + line: number; + sourceId: string; + }) => { + toggleDebuggerBreakpoint({ line, sourceId }); + }).bind(undefined, { line: lineNumber, sourceId }); return firstHighlightedLine ? (
) : ( -
+
); } diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx index 5c1a4627fa6..74015268884 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx @@ -10,9 +10,15 @@ interface SourceProps { source: SourceType; sourceRange: SourceRange; scrollRef: any; + sourceId: string; } -function Source({ source, sourceRange, scrollRef }: SourceProps): JSX.Element { +function Source({ + source, + sourceRange, + scrollRef, + sourceId +}: SourceProps): JSX.Element { // add comment markers for where spans will go later designating debugger // highlighting - comments so lowlight doesn't choke on html const sourceWithHighlightedMarkings = addTextHighlightedClass( @@ -40,7 +46,6 @@ function Source({ source, sourceRange, scrollRef }: SourceProps): JSX.Element { end.column === null || (end.column === 0 && index < end.line) || (end.column > 0 && index <= end.line)); - // const multiline = start.line !== end.line; const firstHighlightedLine = selected && index === start.line; const props = { @@ -50,7 +55,7 @@ function Source({ source, sourceRange, scrollRef }: SourceProps): JSX.Element { lineNumberGutterWidth, lastLine: index === finishedLines.length - 1, firstHighlightedLine, - // multiline, + sourceId, scrollRef }; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx new file mode 100644 index 00000000000..8abb849b726 --- /dev/null +++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx @@ -0,0 +1,9 @@ +interface UnknownSourceProps { + sourceId: string; +} + +function UnknownSource({ sourceId }: UnknownSourceProps): JSX.Element { + return 
Could not locate source material for {sourceId}.
; +} + +export default UnknownSource; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 5688554c6d3..9a133bf3f0d 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useState, useRef } from "react"; import { basename } from "path"; import { Tabs } from "@mantine/core"; import Source from "src/components/composed/Debugger/Sources/Source"; +import UnknownSource from "src/components/composed/Debugger/Sources/UnknownSource"; import type { SourceRange, Session, @@ -68,16 +69,13 @@ function Sources({ scrollRef={scrollRef} source={source} sourceRange={currentSourceRange} + sourceId={currentSourceId} /> ))} {unknownSources.map((source: SourceType) => ( - + ))} diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts index d685e8d20d1..7712251a9ee 100644 --- a/packages/dashboard/src/contexts/DashContext/state.ts +++ b/packages/dashboard/src/contexts/DashContext/state.ts @@ -90,11 +90,16 @@ export const reducer = (state: State, action: Action): State => { } }; case "set-debugger-session-data": + const breakpointsInitialState: { [sourceId: string]: Set } = {}; + for (const source of data.sources) { + breakpointsInitialState[source.id] = new Set(); + } return { ...state, debugger: { + // @ts-ignore ...data, - breakpoints: null + breakpoints: breakpointsInitialState } }; case "handle-message": From b73374289dc8399b80ea31c9bb4c80c258483096 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Tue, 7 Mar 2023 15:12:08 -0500 Subject: [PATCH 015/189] update UI when the user clicks on a line to set a breakpoint --- .../composed/Debugger/Sources/Source/SourceLine.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx index 8ebc2667ba1..af63a2072c7 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx @@ -31,16 +31,26 @@ function SourceLine({ }: SourceLineProps): JSX.Element { const { classes } = useStyles(); const { + state: { + debugger: { breakpoints } + }, operations: { toggleDebuggerBreakpoint } } = useDash()!; if (!lastLine) line += "\n"; - const lineNumberDisplay = + let lineNumberDisplay = `` + " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) + lineNumber + " " + ""; + + if (breakpoints && breakpoints[sourceId].has(lineNumber)) { + lineNumberDisplay = lineNumberDisplay.replace( + `${lineNumber.toString()} `, + `${lineNumber}*` + ); + } const handleClick = (({ line, sourceId From ee50336fc70764c186e3b8dfd005258ada6a3728 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 8 Mar 2023 16:19:24 -0500 Subject: [PATCH 016/189] update debugger when setting breakpoints --- .../Debugger/Sources/UnknownSource.tsx | 8 ++------ .../composed/Debugger/Sources/index.tsx | 19 ++++++------------- .../src/contexts/DashContext/state.ts | 18 +++++++++++++++--- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx index 8abb849b726..4a297864778 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx @@ -1,9 +1,5 @@ -interface UnknownSourceProps { - sourceId: string; -} - -function UnknownSource({ sourceId }: UnknownSourceProps): JSX.Element { - return 
Could not locate source material for {sourceId}.
; +function UnknownSource({ address }: { address: string }): JSX.Element { + return 
Could not locate source material for {address}.
; } export default UnknownSource; diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 9a133bf3f0d..f3e3bd62473 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { useEffect, useState, useRef } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { basename } from "path"; import { Tabs } from "@mantine/core"; import Source from "src/components/composed/Debugger/Sources/Source"; @@ -41,12 +40,6 @@ function Sources({ setCurrentSourceId(sessionSourceId); } }, [session, sessionUpdated, currentSourceRange.source.id, scrollRef]); - const unknownSources = unknownAddresses.map(address => ({ - id: address, - sourcePath: "", - contents: `Could not locate source material for address ${address}.`, - language: "" - })); return ( // @ts-ignore @@ -56,8 +49,8 @@ function Sources({ {basename(source.sourcePath)} ))} - {unknownSources.map((source: SourceType) => ( - + {unknownAddresses.map((address: string) => ( + Unknown Contract ))} @@ -73,9 +66,9 @@ function Sources({ /> ))} - {unknownSources.map((source: SourceType) => ( - - + {unknownAddresses.map((address: string) => ( + + ))} diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts index 7712251a9ee..ab26a42377f 100644 --- a/packages/dashboard/src/contexts/DashContext/state.ts +++ b/packages/dashboard/src/contexts/DashContext/state.ts @@ -15,6 +15,11 @@ import { import type { InteractiveRpcMethod } from "src/utils/constants"; import type { State, Action, Schema } from "src/contexts/DashContext"; +type Breakpoint = { + line: number; + sourceId: string; +}; + const DB_NAME = "TruffleDashboard"; const DB_VERSION = 1; @@ -73,12 +78,19 @@ export const reducer = (state: State, action: Action): State => { return { ...state, analyticsConfig: data }; case "toggle-debugger-breakpoint": const { line, sourceId } = data; + const breakpointExists = state.debugger.breakpoints![sourceId].has(line); const newBreakpointStateForSource = new Set( state.debugger.breakpoints![sourceId] ); - state.debugger.breakpoints![sourceId].has(line) - ? newBreakpointStateForSource.delete(line) - : newBreakpointStateForSource.add(line); + if (breakpointExists) { + // @ts-ignore + state.debugger.session!.removeBreakpoint({ line, sourceId }); + newBreakpointStateForSource.delete(line); + } else { + // @ts-ignore + state.debugger.session!.addBreakpoint({ line, sourceId }); + newBreakpointStateForSource.add(line); + } return { ...state, debugger: { From d7440475adc74150ffdac55f559e01a86ce52b15 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 8 Mar 2023 18:31:19 -0500 Subject: [PATCH 017/189] improve rendering of variables --- .../composed/Debugger/Variables.tsx | 49 +++++++++++++------ 1 file changed, 33 insertions(+), 16 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx index 112e839a6fe..f59fae73819 100644 --- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx @@ -13,30 +13,47 @@ function Variables({ session, currentStep }: VariablesArgs): JSX.Element | null { - const [variables, setVariables] = useState({}); + const [output, setOutput] = useState(null as any); // when the debugger step changes, update variables useEffect(() => { async function getVariables() { + const sections = session.view( + session.selectors.data.current.identifiers.sections + ); const variables = await session!.variables(); - setVariables(variables); + const entries = []; + for (const section in sections) { + const list: Array = sections[section].map( + (variableName: keyof typeof variables) => { + if (variables) + return ( + <> +
{variableName}
+
+ {inspect( + new Codec.Export.ResultInspector(variables[variableName]) + )} +
+ + ); + } + ); + if (list.length > 0) { + entries.push( +
+

{section}

+ {...list} +
+ ); + } + } + + setOutput(entries); } getVariables(); }, [currentStep, session]); - return ( - - {Object.entries(variables).map(([name, result]) => { - return ( -
- <> - {name} -{" "} - {inspect(new Codec.Export.ResultInspector(result as any))} - -
- ); - })} - - ); + return output ? {output} : null; } export default Variables; From 619173658bf1997da2a4ed65e0590d444c93626c Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Thu, 9 Mar 2023 14:58:50 -0500 Subject: [PATCH 018/189] update mantine packages to latest of version 5 --- packages/dashboard/package.json | 11 +-- yarn.lock | 136 ++++++++++++++++---------------- 2 files changed, 74 insertions(+), 73 deletions(-) diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json index 1bff0c0f7ed..aff964cb8a8 100644 --- a/packages/dashboard/package.json +++ b/packages/dashboard/package.json @@ -33,10 +33,6 @@ "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/dashboard-message-bus": "^0.1.11", @@ -44,9 +40,10 @@ "@truffle/dashboard-message-bus-common": "^0.1.6", "@truffle/decoder": "^6.1.0", "@truffle/fetch-and-compile": "^0.5.51", - "@truffle/debugger": "^11.0.24", - "@truffle/debug-utils": "^6.0.44", - "@truffle/decoder": "^5.3.7", + "@mantine/core": "^5.10.5", + "@mantine/hooks": "^5.10.5", + "@mantine/notifications": "^5.10.5", + "@mantine/prism": "^5.10.5", "@truffle/debugger": "^11.0.27", "@truffle/debug-utils": "^6.0.46", "browser-util-inspect": "0.2.0", diff --git a/yarn.lock b/yarn.lock index 68791b7e146..8596241114f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3989,34 +3989,33 @@ dependencies: fast-check "^3.0.0" -"@floating-ui/core@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86" - integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg== +"@floating-ui/core@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.2.tgz#66f62cf1b7de2ed23a09c101808536e68caffaec" + integrity sha512-FaO9KVLFnxknZaGWGmNtjD2CVFuc0u4yeGEofoyXO2wgRA7fLtkngT6UB0vtWQWuhH3iMTZZ/Y89CMeyGfn8pA== -"@floating-ui/dom@^0.5.3": - version "0.5.4" - resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1" - integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg== +"@floating-ui/dom@^1.2.1": + version "1.2.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.3.tgz#8dc6fbf799fbb5c29f705b54bdd51f3ab0ee03a2" + integrity sha512-lK9cZUrHSJLMVAdCvDqs6Ug8gr0wmqksYiaoj/bxj2gweRQkSuhg2/V6Jswz2KiQ0RAULbqw1oQDJIMpQ5GfGA== dependencies: - "@floating-ui/core" "^0.7.3" + "@floating-ui/core" "^1.2.2" -"@floating-ui/react-dom-interactions@0.6.6": - version "0.6.6" - resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.6.6.tgz#8542e8c4bcbee2cd0d512de676c6a493e0a2d168" - integrity sha512-qnao6UPjSZNHnXrF+u4/n92qVroQkx0Umlhy3Avk1oIebm/5ee6yvDm4xbHob0OjY7ya8WmUnV3rQlPwX3Atwg== +"@floating-ui/react-dom@^1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3" + integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g== dependencies: - "@floating-ui/react-dom" "^0.7.2" - aria-hidden "^1.1.3" - use-isomorphic-layout-effect "^1.1.1" + "@floating-ui/dom" "^1.2.1" -"@floating-ui/react-dom@^0.7.2": - version "0.7.2" - resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864" - integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg== +"@floating-ui/react@^0.19.1": + version "0.19.2" + resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412" + integrity sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w== dependencies: - "@floating-ui/dom" "^0.5.3" - use-isomorphic-layout-effect "^1.1.1" + "@floating-ui/react-dom" "^1.3.0" + aria-hidden "^1.1.3" + tabbable "^6.0.1" "@ganache/console.log@0.3.0": version "0.3.0" @@ -5460,50 +5459,50 @@ npmlog "^6.0.2" write-file-atomic "^4.0.1" -"@mantine/core@^5.0.0": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/core/-/core-5.1.6.tgz#98c984bf08ceeb8684a8dc7146034c85e35de9f7" - integrity sha512-ZG/ccTc+LcxcUahxMu4m3hOkAss8LetETFbZ5zsDotJTvij2lzMzNcuPebLeyxNt714VEWIXNzIUotNtGXDSGg== +"@mantine/core@^5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/core/-/core-5.10.5.tgz#071e14dcf8b94a36d0243f1f4b30305ac0074afd" + integrity sha512-F4tqHSEVM9D6/iSqHfPda+Xl5XgSEPHAAkT01Zwzj4Jnbd10qGrlqr/SFUop2CIcuKYnmra9XltUahUPXBC2BQ== dependencies: - "@floating-ui/react-dom-interactions" "0.6.6" - "@mantine/styles" "5.1.6" - "@mantine/utils" "5.1.6" - "@radix-ui/react-scroll-area" "1.0.0" + "@floating-ui/react" "^0.19.1" + "@mantine/styles" "5.10.5" + "@mantine/utils" "5.10.5" + "@radix-ui/react-scroll-area" "1.0.2" react-textarea-autosize "8.3.4" -"@mantine/hooks@^5.0.0": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.1.6.tgz#07d4850d3444526268a749c965ce64eea8cb7583" - integrity sha512-wD+Cx9W00YQchudIvkiEy52e/UCB0EhTkJs2fr2JbTlfKCWfWSilE/CPbLz6NWmK58bbyB/qjdKUDwXV6qyasw== +"@mantine/hooks@^5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.10.5.tgz#568586a0fa649be46f057ddc920bf98761017ffb" + integrity sha512-hFQp71QZDfivPzfIUOQZfMKLiOL/Cn2EnzacRlbUr55myteTfzYN8YMt+nzniE/6c4IRopFHEAdbKEtfyQc6kg== -"@mantine/notifications@^5.0.0": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-5.1.6.tgz#6311c928e821fdee6963048a698fce465482a589" - integrity sha512-JT0nLOoNO/NDuB2Xn4kVOSo+4Y4F+ogrWLN7qHgpmZlRsxc/8S1DFwgubTMwvJR38AHrOVaqp1hFsqdHDww0Ow== +"@mantine/notifications@^5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-5.10.5.tgz#2f3f2d013ce4637e64e935aa5dd8c1df1a7acec0" + integrity sha512-IzTAXA7Zb9DcI94Mv5O2OinhLmI7fvs/VutDw9uCpp6OHtLuF/XN1d262jrsGhMZT0c4nuUsotSLFZF3GWZwXg== dependencies: - "@mantine/utils" "5.1.6" + "@mantine/utils" "5.10.5" react-transition-group "4.4.2" -"@mantine/prism@^5.0.0": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/prism/-/prism-5.1.6.tgz#efa46e5d8d8466b0111dbdc40415aa896b82aca1" - integrity sha512-13y8Ri4GxwdFcnan5WDzHDvN9LxzdnHLi+KDYfC5FM34SDp1//IuA5EQk3TZ9Jb9FD0rLwOX/vePE+1oEcrh9w== +"@mantine/prism@^5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/prism/-/prism-5.10.5.tgz#3e42e89a46b7f8d4d8953814f62785c3b5fcc81c" + integrity sha512-xwe3RE6wg0/KuCBH/MTTQIOltBLTELSfUzHa5/66q4aPdgRPnbzOVxiH/ytndDuqJd8MKpyo25M+3nPAtq2O4A== dependencies: - "@mantine/utils" "5.1.6" + "@mantine/utils" "5.10.5" prism-react-renderer "^1.2.1" -"@mantine/styles@5.1.6": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-5.1.6.tgz#cfb4a33d4c38ffb499d51cd0af35abd436ebe831" - integrity sha512-7d112DIHauP+X0JaVh0uzlpVndWqw/muaz77C5hLlA8yP7gVuRWOhEqJDuTnZzNtj/utIJJDAyVM2+DHFqtQtg== +"@mantine/styles@5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-5.10.5.tgz#ace82a71b4fe3d14ee14638f1735d5680d93d36d" + integrity sha512-0NXk8c/XGzuTUkZc6KceF2NaTCMEu5mHR4ru0x+ttb9DGnLpHuGWduTHjSfr4hl6eAJgedD0zauO+VAhDzO9zA== dependencies: clsx "1.1.1" csstype "3.0.9" -"@mantine/utils@5.1.6": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.1.6.tgz#992cd1e8850467533aa88dc5fd933650674abf5e" - integrity sha512-y7va2keQ+TPwn2j668r889NhQWO0OhSvaxT5P8n2iBaTyPg+Xp5Jm2IE5UjI+OrZErrgmQq1sxbfg6v5vdK+0A== +"@mantine/utils@5.10.5": + version "5.10.5" + resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.10.5.tgz#ad620d714e545c6efb7f69d94ce46e3fd2fe01fb" + integrity sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA== "@metamask/eth-sig-util@4.0.1", "@metamask/eth-sig-util@^4.0.0": version "4.0.1" @@ -6198,18 +6197,18 @@ "@radix-ui/react-compose-refs" "1.0.0" "@radix-ui/react-use-layout-effect" "1.0.0" -"@radix-ui/react-primitive@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0" - integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ== +"@radix-ui/react-primitive@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a" + integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA== dependencies: "@babel/runtime" "^7.13.10" - "@radix-ui/react-slot" "1.0.0" + "@radix-ui/react-slot" "1.0.1" -"@radix-ui/react-scroll-area@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.0.tgz#10d0262a52266af528798f36947145f7e3a3a52c" - integrity sha512-3SNFukAjS5remgtpAVR9m3Zgo23ZojBZ8V3TCyR3A+56x2mtVqKlPV4+e8rScZUFMuvtbjIdQCmsJBFBazKZig== +"@radix-ui/react-scroll-area@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b" + integrity sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/number" "1.0.0" @@ -6218,14 +6217,14 @@ "@radix-ui/react-context" "1.0.0" "@radix-ui/react-direction" "1.0.0" "@radix-ui/react-presence" "1.0.0" - "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-primitive" "1.0.1" "@radix-ui/react-use-callback-ref" "1.0.0" "@radix-ui/react-use-layout-effect" "1.0.0" -"@radix-ui/react-slot@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698" - integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ== +"@radix-ui/react-slot@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81" + integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.0" @@ -24769,6 +24768,11 @@ symbol-observable@^1.0.3, symbol-observable@^1.2.0: resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== +tabbable@^6.0.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0" + integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg== + tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" From 4ba3e3879c16bb45685c3a7781a0336e29ede53a Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Mon, 13 Mar 2023 12:59:30 -0400 Subject: [PATCH 019/189] WIP - work on the css for debugger view --- .../src/components/MantineGlobal.tsx | 41 ++++++++++++++ .../composed/Debugger/Controls/index.tsx | 25 ++++++--- .../Debugger/Sources/Source/index.tsx | 2 +- .../composed/Debugger/Sources/index.tsx | 11 +++- .../composed/Debugger/Variables.tsx | 17 +++--- .../components/composed/Debugger/index.tsx | 56 +++++++++++-------- .../src/contexts/DashContext/state.ts | 5 -- 7 files changed, 109 insertions(+), 48 deletions(-) diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx index 41e7776a105..3bf6cdde559 100644 --- a/packages/dashboard/src/components/MantineGlobal.tsx +++ b/packages/dashboard/src/components/MantineGlobal.tsx @@ -42,11 +42,52 @@ function MantineGlobal(): JSX.Element { [`${truffleBgColorSelectors}, ${truffleOffBgColorSelectors}`]: { transition: "background-color 0.1s" }, + ".trfl-AppShell-main": { + width: "auto" + }, // class for highlighting source material in debugger ".truffle-debugger-text-highlighted": { backgroundColor: theme.colorScheme === "dark" ? "#4444aa60" : "#ffff0050" }, + ".truffle-debugger": { + height: "100vh", + overflowY: "hidden" + }, + ".truffle-debugger-input": { + display: "flex", + backgroundColor: "#1A1B1E" + }, + ".truffle-debugger-input-group": { + display: "flex", + flexGrow: 1 + }, + ".trfl-Input-wrapper": { + flexGrow: 1 + }, + ".trfl-Tabs-root": { + overflow: "hidden", + height: "calc(100vh - 72px)", + paddingTop: 36, + zIndex: 1 + }, + ".trfl-Tabs-list": { + position: "fixed", + top: 36, + backgroundColor: "#1A1B1E", + width: "100%" + }, + ".truffle-debugger-sources-variables": { + display: "flex" + }, + ".truffle-debugger-sources": { + height: "100%", + overflow: "scroll" + }, + ".truffle-debugger-source": {}, + ".truffle-debugger-variables": { + overflowY: "scroll" + }, ".mantine-Alert-icon": { "width": 28, "height": "auto", diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx index 6cf951db52e..f95bce506e4 100644 --- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx @@ -13,14 +13,15 @@ import ControlButton from "src/components/composed/Debugger/Controls/ControlButt import type { Session } from "src/utils/debugger"; interface ControlsProps { - session: Session; + session: Session | null; stepEffect: () => void; } function Controls({ session, stepEffect }: ControlsProps): JSX.Element { const [stepping, setStepping] = useState(false); - const atStart = session.view($.trace.index) === 0; - const atEnd = session.view($.trace.finished); + const atStart = session?.view($.trace.index) === 0; + const atEnd = session?.view($.trace.finished); + const disabled = atEnd || !session; const status = stepping ? "stepping..." @@ -37,40 +38,46 @@ function Controls({ session, stepEffect }: ControlsProps): JSX.Element { }; return ( - + session.continueUntilBreakpoint()} - disabled={atEnd} + disabled={disabled} /> session.stepNext()} - disabled={atEnd} + disabled={disabled} /> session.stepOver()} - disabled={atEnd} + disabled={disabled} /> session.stepInto()} - disabled={atEnd} + disabled={disabled} /> session.stepOut()} - disabled={atEnd} + disabled={disabled} /> session.reset()} disabled={atStart} /> diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx index 74015268884..13ac57a1c12 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx @@ -36,7 +36,7 @@ function Source({ const lineNumberGutterWidth = finishedLines.length.toString().length; return ( - 
+    
       {finishedLines.map((line, index) => {
         const key = `${source.id}-line-${index}`;
         const selected =
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index f3e3bd62473..a89059bf7cd 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -35,11 +35,14 @@ function Sources({
       // @ts-ignore
       scrollRef.current.scrollIntoView();
     }
+  }, [scrollRef, session]);
+
+  useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);
     }
-  }, [session, sessionUpdated, currentSourceRange.source.id, scrollRef]);
+  }, [session, sessionUpdated, currentSourceRange.source.id]);
   return (
     // @ts-ignore
     
@@ -57,7 +60,11 @@ function Sources({
       
 
       {sources.map((source: SourceType) => (
-        
+        
           (null);
   // when the debugger step changes, update variables
   useEffect(() => {
     async function getVariables() {
@@ -22,8 +21,10 @@ function Variables({
       );
       const variables = await session!.variables();
       const entries = [];
+      // section here is a variable category such as a Solidity built-in
+      // or contract variable
       for (const section in sections) {
-        const list: Array = sections[section].map(
+        const variableValues: Array = sections[section].map(
           (variableName: keyof typeof variables) => {
             if (variables)
               return (
@@ -38,11 +39,11 @@ function Variables({
               );
           }
         );
-        if (list.length > 0) {
+        if (variableValues.length > 0) {
           entries.push(
             

-              
{section}

-              {...list}
+              
{section}

+              {...variableValues}
             

           );
         }
@@ -53,7 +54,9 @@ function Variables({
     getVariables();
   }, [currentStep, session]);
 
-  return output ? {output} : null;
+  return output ? (
+    
{output}

+  ) : null;
 }
 
 export default Variables;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 8ac47e24c08..3d30ffa6e38 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -30,10 +30,12 @@ function Debugger(): JSX.Element {
   const initDebugger = async () => {
     const compilations = await operations.getCompilations();
     const testTxHash =
-      "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
-    // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389";
+      // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+      // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
+      // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
+      "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
     // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
-
+    // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
     const provider = window.ethereum;
     if (!provider) {
       throw new Error(
@@ -68,15 +70,16 @@ function Debugger(): JSX.Element {
   if (session && sources && currentSourceRange) {
     content = (
       <>
-        
-        
-        
+        

+          
+          
+        

       
     );
   } else {
@@ -84,20 +87,25 @@ function Debugger(): JSX.Element {
   }
 
   return (
-    <>
-      
-      
+    

+      

+        
+        

+          
+          
+        

+      

 
       {content}
-    
+    

   );
 }
 
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index ab26a42377f..0b7db42abab 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -15,11 +15,6 @@ import {
 import type { InteractiveRpcMethod } from "src/utils/constants";
 import type { State, Action, Schema } from "src/contexts/DashContext";
 
-type Breakpoint = {
-  line: number;
-  sourceId: string;
-};
-
 const DB_NAME = "TruffleDashboard";
 const DB_VERSION = 1;
 

From 7264e07a7492fb950a1c72c2a4cfe1ada3cad597 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 13 Mar 2023 15:33:59 -0400
Subject: [PATCH 020/189] when stepping, make content center in the scrollable
 container

---
 .../src/components/composed/Debugger/Sources/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index a89059bf7cd..32a18d072fe 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -33,7 +33,7 @@ function Sources({
   useEffect(() => {
     if (scrollRef?.current) {
       // @ts-ignore
-      scrollRef.current.scrollIntoView();
+      scrollRef.current.scrollIntoView({ block: "center" });
     }
   }, [scrollRef, session]);
 

From 33bfe44a6684241c43025d31127f9d3edde0c38c Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 15 Mar 2023 12:40:11 -0400
Subject: [PATCH 021/189] edit styles and component structure a little bit

---
 .../src/components/MantineGlobal.tsx          |  8 ++++++-
 .../composed/Debugger/Variables.tsx           |  9 +++++---
 .../components/composed/Debugger/index.tsx    | 22 ++++++++++---------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 3bf6cdde559..2c704634447 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -69,7 +69,8 @@ function MantineGlobal(): JSX.Element {
               overflow: "hidden",
               height: "calc(100vh - 72px)",
               paddingTop: 36,
-              zIndex: 1
+              zIndex: 1,
+              width: "65%"
             },
             ".trfl-Tabs-list": {
               position: "fixed",
@@ -85,6 +86,11 @@ function MantineGlobal(): JSX.Element {
               overflow: "scroll"
             },
             ".truffle-debugger-source": {},
+            ".truffle-debugger-variables-breakpoints": {
+              display: "flex",
+              flexDirection: "column",
+              width: "35%"
+            },
             ".truffle-debugger-variables": {
               overflowY: "scroll"
             },
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 22019f60660..be482f41ffa 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -54,9 +54,12 @@ function Variables({
     getVariables();
   }, [currentStep, session]);
 
-  return output ? (
-    
{output}

-  ) : null;
+  return (
+    

+      
variables

+      
{output ? output : ""}

+    

+  );
 }
 
 export default Variables;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 3d30ffa6e38..ade8c17c762 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -4,6 +4,7 @@ import { useInputState, useCounter } from "@mantine/hooks";
 import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
 import Variables from "src/components/composed/Debugger/Variables";
+import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import { setupSession, SessionStatus } from "src/utils/debugger";
 import { useDash } from "src/hooks";
 import { getCurrentSourceRange } from "src/utils/debugger";
@@ -69,18 +70,19 @@ function Debugger(): JSX.Element {
   let content;
   if (session && sources && currentSourceRange) {
     content = (
-      <>
-        

-          
+      

+        
+        

           
+          
         

-      
+      

     );
   } else {
     content = status;

From f5f38fca8d82dbbd88f2a7eee5c18e642b519aee Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 16 Mar 2023 10:59:05 -0400
Subject: [PATCH 022/189] start work on arranging for a way to set the current
 source manually

---
 .../Debugger/Breakpoints/Breakpoint.tsx       | 39 ++++++++++++
 .../composed/Debugger/Breakpoints/index.tsx   | 54 ++++++++++++++++
 .../Debugger/Sources/Source/SourceLine.tsx    |  6 +-
 .../composed/Debugger/Sources/index.tsx       | 61 ++++++++++++-------
 .../components/composed/Debugger/index.tsx    | 28 ++++++++-
 .../src/contexts/DashContext/state.ts         |  2 +-
 .../src/contexts/DashContext/types/State.ts   |  2 +-
 7 files changed, 164 insertions(+), 28 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
new file mode 100644
index 00000000000..b22f2f8bbed
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -0,0 +1,39 @@
+import type { SourceRange } from "src/utils/debugger";
+type BreakpointProps = {
+  sourceName: string;
+  line: number;
+  sourceId: string;
+  handleBreakpointComponentClick: (sourceRange: SourceRange) => void;
+};
+
+function Breakpoint({
+  sourceName,
+  line,
+  sourceId,
+  handleBreakpointComponentClick
+}: BreakpointProps): JSX.Element | null {
+  return (
+    

+        handleBreakpointComponentClick({
+          start: {
+            line,
+            column: 0
+          },
+          end: {
+            line,
+            column: 0
+          },
+          // I don't know what trace index is but we don't need it for this
+          traceIndex: 1,
+          source: { id: sourceId }
+        })
+      }
+    >
+      {sourceName} - line {line}
+    

+  );
+}
+
+export default Breakpoint;
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
new file mode 100644
index 00000000000..ed5dc069550
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -0,0 +1,54 @@
+import { Source } from "src/utils/debugger";
+import { useDash } from "src/hooks";
+import * as path from "path";
+import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint";
+import type { SourceRange } from "src/utils/debugger";
+
+type BreakpointsArgs = {
+  sources: Source[];
+  handleBreakpointComponentClick: (sourceRange: SourceRange) => void;
+};
+
+function Breakpoints({
+  sources,
+  handleBreakpointComponentClick
+}: BreakpointsArgs): JSX.Element | null {
+  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(
+        
+      );
+    }
+  }
+  return (
+    

+      
breakpoints

+      
{breakpointsList}

+    

+  );
+}
+
+export default Breakpoints;
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index af63a2072c7..e3030ca7629 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -45,7 +45,11 @@ function SourceLine({
     "  " +
     "";
 
-  if (breakpoints && breakpoints[sourceId].has(lineNumber)) {
+  if (
+    breakpoints &&
+    breakpoints[sourceId] &&
+    breakpoints[sourceId].has(lineNumber)
+  ) {
     lineNumberDisplay = lineNumberDisplay.replace(
       `${lineNumber.toString()} `,
       `${lineNumber}*`
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 32a18d072fe..2f0a191224b 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -15,6 +15,8 @@ interface SourcesProps {
   sources: SourceType[];
   currentSourceRange: SourceRange;
   unknownAddresses: string[];
+  currentSourceId: string | null;
+  setCurrentSourceId: (sourceId: string) => void;
 }
 
 function Sources({
@@ -22,14 +24,21 @@ function Sources({
   session,
   sessionUpdated,
   currentSourceRange,
-  unknownAddresses
+  unknownAddresses,
+  currentSourceId,
+  setCurrentSourceId
 }: SourcesProps): JSX.Element {
-  const sourceIds = sources.map(({ id }) => id);
-  const [currentSourceId, setCurrentSourceId] = useState(sourceIds[0]);
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
   const scrollRef = React.createRef();
 
+  useEffect(() => {
+    if (currentSourceId === null) {
+      const sourceIds = sources.map(({ id }) => id);
+      setCurrentSourceId(sourceIds[0]);
+    }
+  });
+
   useEffect(() => {
     if (scrollRef?.current) {
       // @ts-ignore
@@ -43,6 +52,30 @@ function Sources({
       setCurrentSourceId(sessionSourceId);
     }
   }, [session, sessionUpdated, currentSourceRange.source.id]);
+
+  let sourcesContent, unknownSourcesContent;
+  if (currentSourceId !== null) {
+    sourcesContent = sources.map((source: SourceType) => (
+      
+        
+      
+    ));
+    unknownSourcesContent = unknownAddresses.map((address: string) => (
+      
+        
+      
+    ));
+  }
+
   return (
     // @ts-ignore
     
@@ -58,26 +91,8 @@ function Sources({
           
         ))}
       
-
-      {sources.map((source: SourceType) => (
-        
-          
-        
-      ))}
-      {unknownAddresses.map((address: string) => (
-        
-          
-        
-      ))}
+      {sourcesContent}
+      {unknownSourcesContent}
     
   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index ade8c17c762..374e0bf3fb9 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -8,6 +8,7 @@ import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import { setupSession, SessionStatus } from "src/utils/debugger";
 import { useDash } from "src/hooks";
 import { getCurrentSourceRange } from "src/utils/debugger";
+import type { SourceRange } from "src/utils/debugger";
 
 function Debugger(): JSX.Element {
   const [inputValue, setInputValue] = useInputState("");
@@ -20,6 +21,10 @@ function Debugger(): JSX.Element {
   } = useDash()!;
   const [status, setStatus] = useState();
   const [unknownAddresses, setUnknownAddresses] = useState([]);
+  const [manualSourceRange, setManualSourceRange] = useState<{
+    set: boolean;
+    sourceRange: SourceRange | null;
+  }>({ set: false, sourceRange: null });
   const inputsDisabled =
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
@@ -28,6 +33,14 @@ function Debugger(): JSX.Element {
     // !/0x[a-z0-9]{64}/i.test(inputValue) || inputsDisabled;
     inputsDisabled;
 
+  const [currentSourceId, setCurrentSourceId] = useState(null);
+
+  const handleBreakpointComponentClick = (sourceRange: SourceRange) => {
+    setManualSourceRange({
+      set: true,
+      sourceRange
+    });
+  };
   const initDebugger = async () => {
     const compilations = await operations.getCompilations();
     const testTxHash =
@@ -62,7 +75,13 @@ function Debugger(): JSX.Element {
   };
 
   let currentSourceRange, currentStep;
-  if (session) {
+  if (manualSourceRange.set && session) {
+    currentSourceRange = manualSourceRange.sourceRange;
+    setManualSourceRange({
+      set: false,
+      sourceRange: manualSourceRange.sourceRange
+    });
+  } else if (session) {
     currentSourceRange = getCurrentSourceRange(session);
     currentStep = session.view(session.selectors.trace.index);
   }
@@ -77,10 +96,15 @@ function Debugger(): JSX.Element {
           session={session}
           sessionUpdated={sessionUpdated}
           currentSourceRange={currentSourceRange}
+          currentSourceId={currentSourceId}
+          setCurrentSourceId={setCurrentSourceId}
         />
         

           
-          
+          
         

       

     );
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index 0b7db42abab..32a2a95e533 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -39,7 +39,7 @@ export const initialState: State = {
   debugger: {
     sources: null,
     session: null,
-    breakpoints: null
+    breakpoints: {}
   },
   decoder: null,
   decoderCompilations: null,
diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts
index 4860cbc2d26..2892d89cbc0 100644
--- a/packages/dashboard/src/contexts/DashContext/types/State.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/State.ts
@@ -19,7 +19,7 @@ export interface State {
   debugger: {
     sources: Source[] | null;
     session: Session | null;
-    breakpoints: BreakpointState | null;
+    breakpoints: BreakpointState;
   };
   decoder: ProjectDecoder | null;
   decoderCompilations: Array | null;

From 5c19ab7535a42ad6ccdd5a55b182dbce2526cbd3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 16 Mar 2023 11:12:07 -0400
Subject: [PATCH 023/189] move initDebugger into the utils folder

---
 .../components/composed/Debugger/index.tsx    | 58 ++++++-------------
 .../dashboard/src/utils/debugger/session.ts   | 38 ++++++++++++
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 374e0bf3fb9..87e48b340c3 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -5,7 +5,7 @@ import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
 import Variables from "src/components/composed/Debugger/Variables";
 import Breakpoints from "src/components/composed/Debugger/Breakpoints";
-import { setupSession, SessionStatus } from "src/utils/debugger";
+import { initDebugger, SessionStatus } from "src/utils/debugger";
 import { useDash } from "src/hooks";
 import { getCurrentSourceRange } from "src/utils/debugger";
 import type { SourceRange } from "src/utils/debugger";
@@ -35,45 +35,6 @@ function Debugger(): JSX.Element {
 
   const [currentSourceId, setCurrentSourceId] = useState(null);
 
-  const handleBreakpointComponentClick = (sourceRange: SourceRange) => {
-    setManualSourceRange({
-      set: true,
-      sourceRange
-    });
-  };
-  const initDebugger = async () => {
-    const compilations = await operations.getCompilations();
-    const testTxHash =
-      // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
-      // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
-      // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
-      "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
-    // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
-    // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
-    const provider = window.ethereum;
-    if (!provider) {
-      throw new Error(
-        "There was no provider found in the browser. Ensure you have " +
-          "MetaMask connected to the current page."
-      );
-    }
-    const { session, sources, unknownAddresses } = await setupSession(
-      testTxHash,
-      provider,
-      compilations,
-      {
-        onInit: () => setStatus(SessionStatus.Initializing),
-        onFetch: () => setStatus(SessionStatus.Fetching),
-        onStart: () => setStatus(SessionStatus.Starting),
-        onReady: () => setStatus(SessionStatus.Ready)
-      }
-    );
-    if (unknownAddresses.length > 0) {
-      setUnknownAddresses(unknownAddresses);
-    }
-    operations.setDebuggerSessionData({ sources, session });
-  };
-
   let currentSourceRange, currentStep;
   if (manualSourceRange.set && session) {
     currentSourceRange = manualSourceRange.sourceRange;
@@ -86,6 +47,13 @@ function Debugger(): JSX.Element {
     currentStep = session.view(session.selectors.trace.index);
   }
 
+  const handleBreakpointComponentClick = (sourceRange: SourceRange) => {
+    setManualSourceRange({
+      set: true,
+      sourceRange
+    });
+  };
+
   let content;
   if (session && sources && currentSourceRange) {
     content = (
@@ -112,6 +80,14 @@ function Debugger(): JSX.Element {
     content = status;
   }
 
+  const onButtonClick = () => {
+    initDebugger({
+      operations,
+      setUnknownAddresses,
+      setStatus
+    });
+  };
+
   return (
     

       

@@ -124,7 +100,7 @@ function Debugger(): JSX.Element {
             type="text"
             placeholder="Transaction hash"
           />
-          
         

diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index fee3a8c203d..d71929b3f03 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -2,9 +2,47 @@ import { forTx } from "@truffle/debugger";
 import { provider } from "ganache";
 import * as Codec from "@truffle/codec";
 import type { Session, Source } from "src/utils/debugger";
+import { SessionStatus } from "src/utils/debugger";
 import type { Compilation } from "@truffle/compile-common";
 import { getTransactionSourcesBeforeStarting } from "@truffle/debug-utils";
 
+export async function initDebugger({
+  operations,
+  setUnknownAddresses,
+  setStatus
+}: any) {
+  const compilations = await operations.getCompilations();
+  const testTxHash =
+    // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+    // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
+    // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
+    "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
+  // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
+  // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
+  const provider = window.ethereum;
+  if (!provider) {
+    throw new Error(
+      "There was no provider found in the browser. Ensure you have " +
+        "MetaMask connected to the current page."
+    );
+  }
+  const { session, sources, unknownAddresses } = await setupSession(
+    testTxHash,
+    provider,
+    compilations,
+    {
+      onInit: () => setStatus(SessionStatus.Initializing),
+      onFetch: () => setStatus(SessionStatus.Fetching),
+      onStart: () => setStatus(SessionStatus.Starting),
+      onReady: () => setStatus(SessionStatus.Ready)
+    }
+  );
+  if (unknownAddresses.length > 0) {
+    setUnknownAddresses(unknownAddresses);
+  }
+  operations.setDebuggerSessionData({ sources, session });
+}
+
 export async function setupSession(
   transactionHash: string,
   providedProvider: any,

From 7f36977726c5439a9bdef47c6998a63187545292 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 17 Mar 2023 11:37:57 -0400
Subject: [PATCH 024/189] use generic html element dom manipulation for jumping
 to source line

---
 .../Debugger/Breakpoints/Breakpoint.tsx       | 17 ++----
 .../composed/Debugger/Breakpoints/index.tsx   |  4 +-
 .../Debugger/Sources/Source/SourceLine.tsx    | 15 ++----
 .../Debugger/Sources/Source/index.tsx         | 11 +---
 .../composed/Debugger/Sources/index.tsx       | 11 +---
 .../components/composed/Debugger/index.tsx    | 52 ++++++++++++-------
 .../dashboard/src/utils/debugger/types.ts     |  5 ++
 7 files changed, 51 insertions(+), 64 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index b22f2f8bbed..0164cb7e370 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -1,9 +1,9 @@
-import type { SourceRange } from "src/utils/debugger";
+import type { BreakpointType } from "src/utils/debugger";
 type BreakpointProps = {
   sourceName: string;
   line: number;
   sourceId: string;
-  handleBreakpointComponentClick: (sourceRange: SourceRange) => void;
+  handleBreakpointComponentClick: (arg: BreakpointType) => void;
 };
 
 function Breakpoint({
@@ -17,17 +17,8 @@ function Breakpoint({
       className="truffle-debugger-breakpoint"
       onClick={() =>
         handleBreakpointComponentClick({
-          start: {
-            line,
-            column: 0
-          },
-          end: {
-            line,
-            column: 0
-          },
-          // I don't know what trace index is but we don't need it for this
-          traceIndex: 1,
-          source: { id: sourceId }
+          sourceId,
+          line: line.toString()
         })
       }
     >
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index ed5dc069550..8991a1246e7 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -1,12 +1,12 @@
 import { Source } from "src/utils/debugger";
 import { useDash } from "src/hooks";
 import * as path from "path";
+import { BreakpointType } from "src/utils/debugger";
 import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint";
-import type { SourceRange } from "src/utils/debugger";
 
 type BreakpointsArgs = {
   sources: Source[];
-  handleBreakpointComponentClick: (sourceRange: SourceRange) => void;
+  handleBreakpointComponentClick: (breakpoint: BreakpointType) => void;
 };
 
 function Breakpoints({
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index e3030ca7629..9e940eb314f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -15,7 +15,6 @@ interface SourceLineProps {
   lineNumber: number;
   lineNumberGutterWidth: number;
   lastLine: boolean;
-  scrollRef: any;
   firstHighlightedLine: boolean;
   sourceId: string;
 }
@@ -25,8 +24,6 @@ function SourceLine({
   lineNumber,
   lineNumberGutterWidth,
   lastLine,
-  scrollRef,
-  firstHighlightedLine,
   sourceId
 }: SourceLineProps): JSX.Element {
   const { classes } = useStyles();
@@ -43,7 +40,7 @@ function SourceLine({
     " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
     lineNumber +
     "  " +
-    "";
+    ``;
 
   if (
     breakpoints &&
@@ -65,14 +62,10 @@ function SourceLine({
     toggleDebuggerBreakpoint({ line, sourceId });
   }).bind(undefined, { line: lineNumber, sourceId });
 
-  return firstHighlightedLine ? (
-    

-  ) : (
+  const lineClassName = `${sourceId.slice(-10)}-${lineNumber}`;
+  return (
     

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index 13ac57a1c12..7a2a6c4efa0 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -9,16 +9,10 @@ import type { Source as SourceType, SourceRange } from "src/utils/debugger";
 interface SourceProps {
   source: SourceType;
   sourceRange: SourceRange;
-  scrollRef: any;
   sourceId: string;
 }
 
-function Source({
-  source,
-  sourceRange,
-  scrollRef,
-  sourceId
-}: SourceProps): JSX.Element {
+function Source({ source, sourceRange, sourceId }: SourceProps): JSX.Element {
   // add comment markers for where spans will go later designating debugger
   // highlighting - comments so lowlight doesn't choke on html
   const sourceWithHighlightedMarkings = addTextHighlightedClass(
@@ -55,8 +49,7 @@ function Source({
           lineNumberGutterWidth,
           lastLine: index === finishedLines.length - 1,
           firstHighlightedLine,
-          sourceId,
-          scrollRef
+          sourceId
         };
 
         return ;
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 2f0a191224b..deef61e9161 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { basename } from "path";
 import { Tabs } from "@mantine/core";
 import Source from "src/components/composed/Debugger/Sources/Source";
@@ -30,7 +30,6 @@ function Sources({
 }: SourcesProps): JSX.Element {
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
-  const scrollRef = React.createRef();
 
   useEffect(() => {
     if (currentSourceId === null) {
@@ -39,13 +38,6 @@ function Sources({
     }
   });
 
-  useEffect(() => {
-    if (scrollRef?.current) {
-      // @ts-ignore
-      scrollRef.current.scrollIntoView({ block: "center" });
-    }
-  }, [scrollRef, session]);
-
   useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
@@ -62,7 +54,6 @@ function Sources({
         className="truffle-debugger-sources"
       >
         ();
   const [unknownAddresses, setUnknownAddresses] = useState([]);
-  const [manualSourceRange, setManualSourceRange] = useState<{
-    set: boolean;
-    sourceRange: SourceRange | null;
-  }>({ set: false, sourceRange: null });
   const inputsDisabled =
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
@@ -35,23 +31,41 @@ function Debugger(): JSX.Element {
 
   const [currentSourceId, setCurrentSourceId] = useState(null);
 
-  let currentSourceRange, currentStep;
-  if (manualSourceRange.set && session) {
-    currentSourceRange = manualSourceRange.sourceRange;
-    setManualSourceRange({
-      set: false,
-      sourceRange: manualSourceRange.sourceRange
-    });
-  } else if (session) {
+  let currentSourceRange: SourceRange | undefined, currentStep;
+  if (session) {
     currentSourceRange = getCurrentSourceRange(session);
     currentStep = session.view(session.selectors.trace.index);
   }
 
-  const handleBreakpointComponentClick = (sourceRange: SourceRange) => {
-    setManualSourceRange({
-      set: true,
-      sourceRange
-    });
+  const scrollToLineForSource = ({
+    sourceId,
+    line
+  }: {
+    sourceId: string;
+    line: number;
+  }) => {
+    const scrollTarget = document.getElementsByClassName(
+      `${sourceId.slice(-10)}-${line + 1}`
+    );
+    if (scrollTarget[0]) {
+      scrollTarget[0].scrollIntoView({ block: "center" });
+    }
+  };
+
+  useEffect(() => {
+    if (currentSourceRange) {
+      const { source, start } = currentSourceRange!;
+      scrollToLineForSource({ sourceId: source.id, line: start.line });
+    }
+  }, [currentSourceRange]);
+
+  const handleBreakpointComponentClick = ({
+    sourceId,
+    line
+  }: BreakpointType) => {
+    setCurrentSourceId(sourceId);
+    // @ts-ignore
+    scrollToLineForSource({ sourceId, line });
   };
 
   let content;
diff --git a/packages/dashboard/src/utils/debugger/types.ts b/packages/dashboard/src/utils/debugger/types.ts
index 5fb1e479537..5630ff7abf9 100644
--- a/packages/dashboard/src/utils/debugger/types.ts
+++ b/packages/dashboard/src/utils/debugger/types.ts
@@ -2,6 +2,11 @@ import type * as Codec from "@truffle/codec";
 
 export type Selector = any;
 
+export type BreakpointType = {
+  sourceId: string;
+  line: string;
+};
+
 export interface Source {
   id: string;
   sourcePath: string;

From d37df9a978a5d4129e760103af4d0fb59e0d7ac3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 17 Mar 2023 16:36:58 -0400
Subject: [PATCH 025/189] remove unnecessary stuff from callback

---
 .../composed/Debugger/Sources/Source/SourceLine.tsx  | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 9e940eb314f..f595593099d 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -52,15 +52,9 @@ function SourceLine({
       `${lineNumber}*`
     );
   }
-  const handleClick = (({
-    line,
-    sourceId
-  }: {
-    line: number;
-    sourceId: string;
-  }) => {
-    toggleDebuggerBreakpoint({ line, sourceId });
-  }).bind(undefined, { line: lineNumber, sourceId });
+  const handleClick = () => {
+    toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
+  };
 
   const lineClassName = `${sourceId.slice(-10)}-${lineNumber}`;
   return (

From a3a38f9994946697c1e6af18dbe97f29ebbdc9a4 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 17 Mar 2023 16:58:09 -0400
Subject: [PATCH 026/189] correct bug with class construction and rename method

---
 .../dashboard/src/components/composed/Debugger/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index a07a03027a1..262bbda0f11 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -37,15 +37,16 @@ function Debugger(): JSX.Element {
     currentStep = session.view(session.selectors.trace.index);
   }
 
-  const scrollToLineForSource = ({
+  const scrollToLine = ({
     sourceId,
     line
   }: {
     sourceId: string;
     line: number;
   }) => {
+    const lineNumber = line + 1;
     const scrollTarget = document.getElementsByClassName(
-      `${sourceId.slice(-10)}-${line + 1}`
+      `${sourceId.slice(-10)}-${lineNumber}`
     );
     if (scrollTarget[0]) {
       scrollTarget[0].scrollIntoView({ block: "center" });
@@ -55,7 +56,7 @@ function Debugger(): JSX.Element {
   useEffect(() => {
     if (currentSourceRange) {
       const { source, start } = currentSourceRange!;
-      scrollToLineForSource({ sourceId: source.id, line: start.line });
+      scrollToLine({ sourceId: source.id, line: start.line });
     }
   }, [currentSourceRange]);
 
@@ -65,7 +66,7 @@ function Debugger(): JSX.Element {
   }: BreakpointType) => {
     setCurrentSourceId(sourceId);
     // @ts-ignore
-    scrollToLineForSource({ sourceId, line });
+    scrollToLine({ sourceId, line });
   };
 
   let content;

From 03eaeacb0f0fd0c21ec4d32ecea560aafae65e36 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 20 Mar 2023 15:59:49 -0400
Subject: [PATCH 027/189] create delete breakpoint method and use it in
 breakpoint section

---
 .../src/components/MantineGlobal.tsx          | 13 +++++++
 .../Debugger/Breakpoints/Breakpoint.tsx       | 37 +++++++++++++------
 .../composed/Debugger/Breakpoints/index.tsx   |  5 ++-
 .../components/composed/Debugger/index.tsx    |  8 ++++
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 2c704634447..51a2097ffeb 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -94,6 +94,19 @@ function MantineGlobal(): JSX.Element {
             ".truffle-debugger-variables": {
               overflowY: "scroll"
             },
+            ".truffle-debugger-breakpoint-group": {
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            ".truffle-debugger-breakpoint-delete": {
+              borderRadius: 25,
+              textAlign: "center",
+              width: 25
+            },
+            ".truffle-debugger-breakpoint-delete:hover": {
+              cursor: "pointer",
+              backgroundColor: "red"
+            },
             ".mantine-Alert-icon": {
               "width": 28,
               "height": "auto",
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index 0164cb7e370..7fcd96ffc54 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -4,25 +4,40 @@ type BreakpointProps = {
   line: number;
   sourceId: string;
   handleBreakpointComponentClick: (arg: BreakpointType) => void;
+  handleBreakpointDeleteClick: (arg: BreakpointType) => void;
 };
 
 function Breakpoint({
   sourceName,
   line,
   sourceId,
-  handleBreakpointComponentClick
+  handleBreakpointComponentClick,
+  handleBreakpointDeleteClick
 }: BreakpointProps): JSX.Element | null {
   return (
-    

-        handleBreakpointComponentClick({
-          sourceId,
-          line: line.toString()
-        })
-      }
-    >
-      {sourceName} - line {line}
+    

+      

+          handleBreakpointComponentClick({
+            sourceId,
+            line: line.toString()
+          })
+        }
+      >
+        {sourceName} - line {line}
+      

+      

+          handleBreakpointDeleteClick({
+            sourceId,
+            line: line.toString()
+          })
+        }
+      >
+        X
+      

     

   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index 8991a1246e7..f73aeb2e26f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -7,11 +7,13 @@ import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint"
 type BreakpointsArgs = {
   sources: Source[];
   handleBreakpointComponentClick: (breakpoint: BreakpointType) => void;
+  handleBreakpointDeleteClick: (breakpoint: BreakpointType) => void;
 };
 
 function Breakpoints({
   sources,
-  handleBreakpointComponentClick
+  handleBreakpointComponentClick,
+  handleBreakpointDeleteClick
 }: BreakpointsArgs): JSX.Element | null {
   const {
     state: {
@@ -39,6 +41,7 @@ function Breakpoints({
           line={line}
           sourceId={source.id}
           handleBreakpointComponentClick={handleBreakpointComponentClick}
+          handleBreakpointDeleteClick={handleBreakpointDeleteClick}
         />
       );
     }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 262bbda0f11..635e28e84cb 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -69,6 +69,13 @@ function Debugger(): JSX.Element {
     scrollToLine({ sourceId, line });
   };
 
+  const handleBreakpointDeleteClick = ({ sourceId, line }: BreakpointType) => {
+    operations.toggleDebuggerBreakpoint({
+      sourceId,
+      line: parseInt(line)
+    });
+  };
+
   let content;
   if (session && sources && currentSourceRange) {
     content = (
@@ -87,6 +94,7 @@ function Debugger(): JSX.Element {
           
         

       


From dc9d283d4bab83b1c62b3863b69639cca24c87d6 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 21 Mar 2023 14:46:27 -0400
Subject: [PATCH 028/189] give mouse pointer a hover state while over
 breakpoints

---
 packages/dashboard/src/components/MantineGlobal.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 51a2097ffeb..66f1b1ae7d3 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -85,7 +85,9 @@ function MantineGlobal(): JSX.Element {
               height: "100%",
               overflow: "scroll"
             },
-            ".truffle-debugger-source": {},
+            ".truffle-debugger-source:hover": {
+              cursor: "pointer"
+            },
             ".truffle-debugger-variables-breakpoints": {
               display: "flex",
               flexDirection: "column",
@@ -103,6 +105,9 @@ function MantineGlobal(): JSX.Element {
               textAlign: "center",
               width: 25
             },
+            ".truffle-debugger-breakpoint:hover": {
+              cursor: "pointer"
+            },
             ".truffle-debugger-breakpoint-delete:hover": {
               cursor: "pointer",
               backgroundColor: "red"

From 30f7937c0adc7f7e35a3ff3741aac6e0a218d21b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 14:25:23 -0400
Subject: [PATCH 029/189] add source text processing fully into the utils

---
 .../Debugger/Sources/Source/index.tsx         | 25 ++++--------------
 .../dashboard/src/utils/debugger/source.ts    | 26 +++++++++++++++++--
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index 7a2a6c4efa0..77ea56ceac2 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -1,10 +1,6 @@
 import SourceLine from "src/components/composed/Debugger/Sources/Source/SourceLine";
-import {
-  highlightSourceContent,
-  addTextHighlightedClass,
-  finalizeSource
-} from "src/utils/debugger";
 import type { Source as SourceType, SourceRange } from "src/utils/debugger";
+import { convertSourceToHtml } from "src/utils/debugger";
 
 interface SourceProps {
   source: SourceType;
@@ -13,25 +9,14 @@ interface SourceProps {
 }
 
 function Source({ source, sourceRange, sourceId }: SourceProps): JSX.Element {
-  // add comment markers for where spans will go later designating debugger
-  // highlighting - comments so lowlight doesn't choke on html
-  const sourceWithHighlightedMarkings = addTextHighlightedClass(
-    source,
-    sourceRange
-  );
-  // run the source through lowlight for syntax highlighting
-  const highlightedLines = highlightSourceContent(
-    sourceWithHighlightedMarkings
-  ).split("\n");
-  // replace comment markers with spans denoting the debugger's highlighted text
-  const finishedLines = finalizeSource(highlightedLines);
+  const sourceLines = convertSourceToHtml({ source, sourceRange });
 
   const { start, end } = sourceRange;
-  const lineNumberGutterWidth = finishedLines.length.toString().length;
+  const lineNumberGutterWidth = sourceLines.length.toString().length;
 
   return (
     
-      {finishedLines.map((line, index) => {
+      {sourceLines.map((line: string, index: number) => {
         const key = `${source.id}-line-${index}`;
         const selected =
           source.id === sourceRange.source.id &&
@@ -47,7 +32,7 @@ function Source({ source, sourceRange, sourceId }: SourceProps): JSX.Element {
           line,
           lineNumber: index + 1,
           lineNumberGutterWidth,
-          lastLine: index === finishedLines.length - 1,
+          lastLine: index === sourceLines.length - 1,
           firstHighlightedLine,
           sourceId
         };
diff --git a/packages/dashboard/src/utils/debugger/source.ts b/packages/dashboard/src/utils/debugger/source.ts
index 9018fa6922b..b647a6da07e 100644
--- a/packages/dashboard/src/utils/debugger/source.ts
+++ b/packages/dashboard/src/utils/debugger/source.ts
@@ -5,6 +5,28 @@ import { solidity } from "highlightjs-solidity";
 import { selectors as $ } from "@truffle/debugger";
 import type { Session, Source, SourceRange } from "src/utils/debugger";
 
+export function convertSourceToHtml({
+  source,
+  sourceRange
+}: {
+  source: Source;
+  sourceRange: SourceRange;
+}) {
+  // add comment markers for where spans will go later designating debugger
+  // highlighting - comments so lowlight doesn't choke on html
+  const sourceWithHighlightedMarkings = addTextHighlightedClass(
+    source,
+    sourceRange
+  );
+
+  // run the source through lowlight for syntax highlighting
+  const sourceWithSyntaxHighlighting = addSyntaxHighlighting(
+    sourceWithHighlightedMarkings
+  ).split("\n");
+  // replace comment markers with spans denoting the debugger's highlighted text
+  return replaceTextHighlightedMarkings(sourceWithSyntaxHighlighting);
+}
+
 export function getCurrentSourceRange(session: Session) {
   const traceIndex = session.view($.trace.index);
   const { id } = session.view($.sourcemapping.current.source);
@@ -22,7 +44,7 @@ export function getCurrentSourceRange(session: Session) {
 lowlight.registerLanguage("solidity", solidity);
 const processor = unified().use(rehypeStringify);
 
-export function highlightSourceContent(source: Source) {
+export function addSyntaxHighlighting(source: Source) {
   const highlighted = lowlight.highlight("solidity", source.contents);
   return processor.stringify(highlighted);
 }
@@ -123,7 +145,7 @@ const indexOfFirstNonWhitespaceChar = (str: string) => {
   return str.split("").findIndex(letter => letter !== " " && letter !== "\t");
 };
 
-export function finalizeSource(lines: string[]) {
+export function replaceTextHighlightedMarkings(lines: string[]) {
   return lines.map(line => {
     // we need to add the space to make lowlight parse the comment correctly
     // as a comment as there are some cases where it marks it incorrectly

From dc49deafe8253936ade1d153a8e85396dbb9d71e Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 16:46:15 -0400
Subject: [PATCH 030/189] add hacky method for fully supporting multiline
 comments

---
 .../dashboard/src/utils/debugger/source.ts    | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/utils/debugger/source.ts b/packages/dashboard/src/utils/debugger/source.ts
index b647a6da07e..44c70a623e2 100644
--- a/packages/dashboard/src/utils/debugger/source.ts
+++ b/packages/dashboard/src/utils/debugger/source.ts
@@ -23,8 +23,44 @@ export function convertSourceToHtml({
   const sourceWithSyntaxHighlighting = addSyntaxHighlighting(
     sourceWithHighlightedMarkings
   ).split("\n");
+
+  // HACK: we need to detect where lowlight added spans for multiline comments
+  // and add more because we break the source into lines
+  const sourceWithAddedSpans = addMultilineCommentSpans(
+    sourceWithSyntaxHighlighting
+  );
+
   // replace comment markers with spans denoting the debugger's highlighted text
-  return replaceTextHighlightedMarkings(sourceWithSyntaxHighlighting);
+  return replaceTextHighlightedMarkings(sourceWithAddedSpans);
+}
+
+export function addMultilineCommentSpans(sourceLines: string[]) {
+  let inMultilineComment: boolean = false;
+  const lowlightCommentSpan = ``;
+  const closingSpan = ``;
+  const sourceWithSpans: string[] = [];
+  for (const line of sourceLines) {
+    if (
+      !inMultilineComment &&
+      line.includes(lowlightCommentSpan) &&
+      !line.slice(line.indexOf(lowlightCommentSpan)).includes(closingSpan)
+    ) {
+      // line where a multiline comment begins with no closing span
+      inMultilineComment = true;
+      sourceWithSpans.push(line + closingSpan);
+    } else if (inMultilineComment && !line.includes(closingSpan)) {
+      // line in the middle of a multiline comment without closing span
+      sourceWithSpans.push(lowlightCommentSpan + line + closingSpan);
+    } else if (inMultilineComment && line.includes(closingSpan)) {
+      // line where a multiline comment begins
+      sourceWithSpans.push(lowlightCommentSpan + line);
+      inMultilineComment = false;
+    } else {
+      // line of code not in a multiline comment
+      sourceWithSpans.push(line);
+    }
+  }
+  return sourceWithSpans;
 }
 
 export function getCurrentSourceRange(session: Session) {

From d7edebab3e2d6d1e29cb24700d8e7be23c2b6451 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 16:46:52 -0400
Subject: [PATCH 031/189] update useEffects to better deal with autoscrolling
 as debugger steps

---
 .../composed/Debugger/Sources/index.tsx        |  3 ++-
 .../src/components/composed/Debugger/index.tsx | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index deef61e9161..199843d6e2c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -31,12 +31,13 @@ function Sources({
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
 
+  // initialize sources after we get all of them
   useEffect(() => {
     if (currentSourceId === null) {
       const sourceIds = sources.map(({ id }) => id);
       setCurrentSourceId(sourceIds[0]);
     }
-  });
+  }, [sources]);
 
   useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 635e28e84cb..e5b6013a832 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -21,6 +21,9 @@ function Debugger(): JSX.Element {
   } = useDash()!;
   const [status, setStatus] = useState();
   const [unknownAddresses, setUnknownAddresses] = useState([]);
+  const [goToBreakpoint, setGoToBreakpoint] = useState(
+    null
+  );
   const inputsDisabled =
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
@@ -53,6 +56,7 @@ function Debugger(): JSX.Element {
     }
   };
 
+  // scroll to highlighted source as debugger steps
   useEffect(() => {
     if (currentSourceRange) {
       const { source, start } = currentSourceRange!;
@@ -60,13 +64,23 @@ function Debugger(): JSX.Element {
     }
   }, [currentSourceRange]);
 
+  // check whether we need to scroll to a breakpoint
+  // this is to ensure the source has fully rendered before scrolling
+  useEffect(() => {
+    if (goToBreakpoint !== null) {
+      const { sourceId, line } = goToBreakpoint;
+      // @ts-ignore
+      scrollToLine({ sourceId, line });
+      setGoToBreakpoint(null);
+    }
+  }, [goToBreakpoint]);
+
   const handleBreakpointComponentClick = ({
     sourceId,
     line
   }: BreakpointType) => {
     setCurrentSourceId(sourceId);
-    // @ts-ignore
-    scrollToLine({ sourceId, line });
+    setGoToBreakpoint({ sourceId, line });
   };
 
   const handleBreakpointDeleteClick = ({ sourceId, line }: BreakpointType) => {

From 71141c41d20c9ebe9388fb37b0218c1837ee4730 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 17:04:27 -0400
Subject: [PATCH 032/189] optimize renders and add type predicate

---
 .../components/composed/Debugger/index.tsx    | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index e5b6013a832..13cf911b2f1 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -34,7 +34,10 @@ function Debugger(): JSX.Element {
 
   const [currentSourceId, setCurrentSourceId] = useState(null);
 
-  let currentSourceRange: SourceRange | undefined, currentStep;
+  let currentSourceRange: SourceRange | Partial = {
+    traceIndex: -1
+  };
+  let currentStep;
   if (session) {
     currentSourceRange = getCurrentSourceRange(session);
     currentStep = session.view(session.selectors.trace.index);
@@ -58,11 +61,12 @@ function Debugger(): JSX.Element {
 
   // scroll to highlighted source as debugger steps
   useEffect(() => {
-    if (currentSourceRange) {
+    // if the source property exists it means we have a full SourceRange
+    if (isSourceRange(currentSourceRange)) {
       const { source, start } = currentSourceRange!;
-      scrollToLine({ sourceId: source.id, line: start.line });
+      scrollToLine({ sourceId: source!.id, line: start!.line });
     }
-  }, [currentSourceRange]);
+  }, [currentSourceRange.traceIndex]);
 
   // check whether we need to scroll to a breakpoint
   // this is to ensure the source has fully rendered before scrolling
@@ -90,8 +94,13 @@ function Debugger(): JSX.Element {
     });
   };
 
+  const isSourceRange = (item: any): item is SourceRange => {
+    // when source exists, that means it should be a full SourceRange
+    return item.source !== undefined;
+  };
+
   let content;
-  if (session && sources && currentSourceRange) {
+  if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
       

         
Date: Wed, 29 Mar 2023 14:36:44 -0400
Subject: [PATCH 033/189] add some comments and pass etherscan api key to
 source-fetcher if it is in truffle-config.js

---
 packages/dashboard/lib/DashboardServer.ts          |  1 +
 .../src/components/composed/Debugger/index.tsx     | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/lib/DashboardServer.ts b/packages/dashboard/lib/DashboardServer.ts
index ae0b2770a19..cb98376ed90 100644
--- a/packages/dashboard/lib/DashboardServer.ts
+++ b/packages/dashboard/lib/DashboardServer.ts
@@ -100,6 +100,7 @@ export class DashboardServer {
     }
 
     this.expressApp.get("/fetch-and-compile", async (req, res) => {
+<<<<<<< HEAD
       const { address, networkId, etherscanApiKey } = req.query as Record<
         string,
         string
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 13cf911b2f1..083b39ba011 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -19,8 +19,14 @@ function Debugger(): JSX.Element {
       debugger: { sources, session }
     }
   } = useDash()!;
+
   const [status, setStatus] = useState();
+
+  // keep track of addresses for which we can't obtain source material
   const [unknownAddresses, setUnknownAddresses] = useState([]);
+
+  // goToBreakpoint stores breakpoint info when a user clicks on one
+  // so we can jump to it in Sources
   const [goToBreakpoint, setGoToBreakpoint] = useState(
     null
   );
@@ -28,16 +34,20 @@ function Debugger(): JSX.Element {
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
     status === SessionStatus.Starting;
+
+  // currentSourceId is the "active" source displayed in Sources
+  const [currentSourceId, setCurrentSourceId] = useState(null);
+
   const formDisabled =
     // !/0x[a-z0-9]{64}/i.test(inputValue) || inputsDisabled;
     inputsDisabled;
 
-  const [currentSourceId, setCurrentSourceId] = useState(null);
-
   let currentSourceRange: SourceRange | Partial = {
     traceIndex: -1
   };
   let currentStep;
+
+  // wait until the debugger has been initialized and then get source info
   if (session) {
     currentSourceRange = getCurrentSourceRange(session);
     currentStep = session.view(session.selectors.trace.index);

From 3e34868cd9a7ab3f8136e8a501aafaf072a32223 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 31 Mar 2023 11:00:39 -0400
Subject: [PATCH 034/189] bump react-dom-router to ^6.10.0

---
 packages/dashboard/package.json |  2 +-
 yarn.lock                       | 36 ++++++++++++++++-----------------
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index aff964cb8a8..3cb01a6528f 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -63,7 +63,7 @@
     "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",
     "unified": "^10.1.2",
     "uuid": "^9.0.0",
diff --git a/yarn.lock b/yarn.lock
index 8596241114f..4a59fae54b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2029,7 +2029,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.7":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -6287,6 +6287,11 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
+"@remix-run/router@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
+  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
+
 "@rushstack/eslint-patch@^1.1.0":
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
@@ -16043,13 +16048,6 @@ highlightjs-solidity@^2.0.6:
   resolved "https://registry.yarnpkg.com/highlightjs-solidity/-/highlightjs-solidity-2.0.6.tgz#e7a702a2b05e0a97f185e6ba39fd4846ad23a990"
   integrity sha512-DySXWfQghjm2l6a/flF+cteroJqD4gI8GSdL4PtvxZSsAHie8m3yVe2JFoRg03ROKT6hp2Lc/BxXkqerNmtQYg==
 
-history@^5.2.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
-  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hkts@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/hkts/-/hkts-0.3.1.tgz#444e33ae89138b46cbdd669d4cfed358ec0dd7db"
@@ -22493,20 +22491,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+react-router-dom@^6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
+  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
   dependencies:
-    history "^5.2.0"
-    react-router "6.3.0"
+    "@remix-run/router" "1.5.0"
+    react-router "6.10.0"
 
-react-router@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
-  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+react-router@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
+  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
   dependencies:
-    history "^5.2.0"
+    "@remix-run/router" "1.5.0"
 
 react-textarea-autosize@8.3.4:
   version "8.3.4"

From 8120bedfd42748aff6de5bbff4870ad5b71834d7 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 31 Mar 2023 11:02:33 -0400
Subject: [PATCH 035/189] create simulate tx button and adjust some method
 signatures in session utils

---
 .../components/composed/Debugger/index.tsx    |  27 +++-
 .../components/composed/RPCs/RPC/Overview.tsx |  23 +++-
 .../components/composed/RPCs/RPC/index.tsx    |   7 +-
 .../src/contexts/DashContext/DashContext.ts   |   3 +
 .../src/contexts/DashContext/DashProvider.tsx |  13 +-
 .../src/contexts/DashContext/state.ts         |   9 ++
 .../src/contexts/DashContext/types/Action.ts  |  12 +-
 .../src/contexts/DashContext/types/State.ts   |   1 +
 .../dashboard/src/utils/debugger/session.ts   | 117 +++++++++++++-----
 9 files changed, 174 insertions(+), 38 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 083b39ba011..3375a80fadc 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -5,7 +5,11 @@ import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
 import Variables from "src/components/composed/Debugger/Variables";
 import Breakpoints from "src/components/composed/Debugger/Breakpoints";
-import { initDebugger, SessionStatus } from "src/utils/debugger";
+import {
+  forkNetworkWithTxAndInitDebugger,
+  initDebugger,
+  SessionStatus
+} from "src/utils/debugger";
 import { useDash } from "src/hooks";
 import { getCurrentSourceRange } from "src/utils/debugger";
 import type { BreakpointType, SourceRange } from "src/utils/debugger";
@@ -16,7 +20,7 @@ function Debugger(): JSX.Element {
   const {
     operations,
     state: {
-      debugger: { sources, session }
+      debugger: { sources, session, txToRun }
     }
   } = useDash()!;
 
@@ -144,6 +148,17 @@ function Debugger(): JSX.Element {
     });
   };
 
+  useEffect(() => {
+    if (txToRun) {
+      forkNetworkWithTxAndInitDebugger({
+        tx: txToRun,
+        operations,
+        setUnknownAddresses,
+        setStatus
+      });
+    }
+  }, [txToRun]);
+
   return (
     

       

@@ -156,9 +171,11 @@ function Debugger(): JSX.Element {
             type="text"
             placeholder="Transaction hash"
           />
-          
+          {txToRun ? null : (
+            
+          )}
         

       

 
diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
index bfdbd58321f..b15e545a1d0 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
@@ -5,6 +5,7 @@ import { useDash } from "src/hooks";
 import { inspectDecoding } from "src/utils/dash";
 import type { Decoding } from "src/utils/dash";
 import ChainIcon from "src/components/common/ChainIcon";
+import { useNavigate } from "react-router-dom";
 
 const useStyles = createStyles((theme, _params, getRef) => {
   const {
@@ -106,6 +107,8 @@ type OverviewProps = {
   onRejectButtonLeave: React.MouseEventHandler;
   onConfirmButtonEnter: React.MouseEventHandler;
   onConfirmButtonLeave: React.MouseEventHandler;
+  onSimulateButtonEnter: React.MouseEventHandler;
+  onSimulateButtonLeave: React.MouseEventHandler;
 };
 
 function Overview({
@@ -121,18 +124,25 @@ function Overview({
   onRejectButtonEnter,
   onRejectButtonLeave,
   onConfirmButtonEnter,
-  onConfirmButtonLeave
+  onConfirmButtonLeave,
+  onSimulateButtonEnter,
+  onSimulateButtonLeave
 }: OverviewProps): JSX.Element {
   const { method } = lifecycle.message.payload;
   const decodingInspected = inspectDecoding(decoding);
   const {
     state: { chainInfo },
-    operations: { userConfirmMessage, userRejectMessage }
+    operations: { userConfirmMessage, userRejectMessage, setTxToRun }
   } = useDash()!;
   const { classes } = useStyles();
 
+  const navigate = useNavigate();
   const onConfirmButtonClick = () => void userConfirmMessage(lifecycle);
   const onRejectButtonClick = () => void userRejectMessage(lifecycle);
+  const onSimulateButtonClick = () => {
+    setTxToRun(lifecycle);
+    navigate("/debugger");
+  };
 
   return (
     
           Confirm
         
+        
       
     
   );
diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
index cfc7a5447a5..d67fe7f7644 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
@@ -45,6 +45,8 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
     useDisclosure(false);
   const [confirmButtonHovered, confirmButtonHoveredHandlers] =
     useDisclosure(false);
+  const [simulateButtonHovered, simulateButtonHoveredHandlers] =
+    useDisclosure(false);
   const [collapsedDetailsHovered, collapsedDetailsHoveredHandlers] =
     useDisclosure(false);
   const { classes } = useStyles();
@@ -94,7 +96,8 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
           clicked ||
           overviewBackHovered ||
           rejectButtonHovered ||
-          confirmButtonHovered
+          confirmButtonHovered ||
+          simulateButtonHovered
         }
         onBackClick={clickedHandlers.toggle}
         onBackEnter={overviewBackHoveredHandlers.open}
@@ -103,6 +106,8 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
         onRejectButtonLeave={rejectButtonHoveredHandlers.close}
         onConfirmButtonEnter={confirmButtonHoveredHandlers.open}
         onConfirmButtonLeave={confirmButtonHoveredHandlers.close}
+        onSimulateButtonEnter={simulateButtonHoveredHandlers.open}
+        onSimulateButtonLeave={simulateButtonHoveredHandlers.close}
       />
       
 void;
     getCompilations: () => Promise;
     toggleDebuggerBreakpoint: (value: ToggleDebuggerBreakpointArgs) => void;
+    setTxToRun: (
+      lifecycle: ReceivedMessageLifecycle | null
+    ) => void;
   };
   dispatch?: React.Dispatch;
 }
diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index 322cb490387..397edda72cc 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -325,7 +325,18 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
         }
       });
     },
-    toggleDebuggerBreakpoint({ line, sourceId }: ToggleDebuggerBreakpointArgs) {
+    setTxToRun: (
+      lifecycle: ReceivedMessageLifecycle | null
+    ) => {
+      dispatch({
+        type: "set-tx-to-run",
+        data: lifecycle
+      });
+    },
+    toggleDebuggerBreakpoint: ({
+      line,
+      sourceId
+    }: ToggleDebuggerBreakpointArgs) => {
       dispatch({
         type: "toggle-debugger-breakpoint",
         data: {
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index 32a2a95e533..636b1c29108 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -39,6 +39,7 @@ export const initialState: State = {
   debugger: {
     sources: null,
     session: null,
+    txToRun: null,
     breakpoints: {}
   },
   decoder: null,
@@ -143,6 +144,14 @@ export const reducer = (state: State, action: Action): State => {
       }
 
       return newState;
+    case "set-tx-to-run":
+      return {
+        ...state,
+        debugger: {
+          ...state.debugger,
+          txToRun: data
+        }
+      };
     case "update-provider-message-sender":
       const newProviderMessages = new Map(state.providerMessages);
       const newSender = data;
diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts
index f58cb5ed159..95d764d4020 100644
--- a/packages/dashboard/src/contexts/DashContext/types/Action.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts
@@ -1,5 +1,8 @@
 import type { ReceivedMessageLifecycle } from "@truffle/dashboard-message-bus-client";
-import type { Message } from "@truffle/dashboard-message-bus-common";
+import type {
+  Message,
+  DashboardProviderMessage
+} from "@truffle/dashboard-message-bus-common";
 import type { State } from "src/contexts/DashContext/types";
 import type { Source, Session } from "src/utils/debugger";
 
@@ -8,6 +11,7 @@ export type ActionType =
   | "set-chain-info"
   | "set-notice"
   | "set-analytics-config"
+  | "set-tx-to-run"
   | "handle-message"
   | "update-provider-message-sender"
   | "set-debugger-session-data"
@@ -60,6 +64,11 @@ export interface HandleMessageAction extends BaseAction {
   data: ReceivedMessageLifecycle;
 }
 
+export interface SetTxToRunAction extends BaseAction {
+  type: "set-tx-to-run";
+  data: ReceivedMessageLifecycle | null;
+}
+
 export interface UpdateProviderMessageSenderAction extends BaseAction {
   type: "update-provider-message-sender";
   data: string;
@@ -81,4 +90,5 @@ export type Action =
   | HandleMessageAction
   | UpdateProviderMessageSenderAction
   | SetDebuggerSessionDataAction
+  | SetTxToRunAction
   | ToggleDebuggerBreakpointAction;
diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts
index 2892d89cbc0..8a0a9344685 100644
--- a/packages/dashboard/src/contexts/DashContext/types/State.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/State.ts
@@ -20,6 +20,7 @@ export interface State {
     sources: Source[] | null;
     session: Session | null;
     breakpoints: BreakpointState;
+    txToRun: ReceivedMessageLifecycle | null;
   };
   decoder: ProjectDecoder | null;
   decoderCompilations: Array | null;
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index d71929b3f03..2801d6b70c0 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -1,66 +1,111 @@
 import { forTx } from "@truffle/debugger";
-import { provider } from "ganache";
+import { provider as ganacheProvider } from "ganache";
 import * as Codec from "@truffle/codec";
 import type { Session, Source } from "src/utils/debugger";
 import { SessionStatus } from "src/utils/debugger";
 import type { Compilation } from "@truffle/compile-common";
 import { getTransactionSourcesBeforeStarting } from "@truffle/debug-utils";
 
-export async function initDebugger({
+export async function forkNetworkWithTxAndInitDebugger({
+  tx,
   operations,
   setUnknownAddresses,
   setStatus
+}: any) {
+  const { method, params } = tx.message.payload;
+  const forkedProvider = ganacheProvider({
+    fork: {
+      // @ts-ignore
+      provider: window.ethereum
+    },
+    wallet: {
+      unlockedAccounts: [params[0].from]
+    }
+  });
+  const result = await forkedProvider.request({ method, params });
+  return initDebugger({
+    chainOptions: {
+      unlockedAccounts: [params[0].from],
+      provider: forkedProvider
+    },
+    operations,
+    setUnknownAddresses,
+    setStatus,
+    txHash: result
+  });
+}
+
+export async function initDebugger({
+  chainOptions: { unlockedAccounts, provider },
+  operations,
+  setUnknownAddresses,
+  setStatus,
+  txHash
 }: any) {
   const compilations = await operations.getCompilations();
-  const testTxHash =
-    // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
-    // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
-    // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
-    "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
+  const testTxHash = txHash
+    ? txHash
+    : // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+      // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
+      // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
+      "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
   // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
   // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
-  const provider = window.ethereum;
-  if (!provider) {
+  const pro = provider ? provider : window.ethereum;
+  if (!pro) {
     throw new Error(
       "There was no provider found in the browser. Ensure you have " +
         "MetaMask connected to the current page."
     );
   }
-  const { session, sources, unknownAddresses } = await setupSession(
-    testTxHash,
-    provider,
+  const { session, sources, unknownAddresses } = await setupSession({
+    chainOptions: {
+      unlockedAccounts,
+      provider
+    },
+    txHash: testTxHash,
     compilations,
-    {
+    callbacks: {
       onInit: () => setStatus(SessionStatus.Initializing),
       onFetch: () => setStatus(SessionStatus.Fetching),
       onStart: () => setStatus(SessionStatus.Starting),
       onReady: () => setStatus(SessionStatus.Ready)
     }
-  );
+  });
   if (unknownAddresses.length > 0) {
     setUnknownAddresses(unknownAddresses);
   }
   operations.setDebuggerSessionData({ sources, session });
 }
 
-export async function setupSession(
-  transactionHash: string,
-  providedProvider: any,
-  compilations: Compilation[],
+type SetupSessionArgs = {
+  txHash: string;
+  chainOptions: {
+    provider: any;
+    unlockedAccounts: string[];
+  };
+  compilations: Compilation[];
   callbacks?: {
     onInit?: () => void;
     onFetch?: () => void;
     onStart?: () => void;
     onReady?: () => void;
-  }
-): Promise<{
+  };
+};
+
+export async function setupSession({
+  txHash,
+  chainOptions: { provider, unlockedAccounts },
+  compilations,
+  callbacks
+}: SetupSessionArgs): Promise<{
   session: Session;
   sources: Source[];
   unknownAddresses: string[];
 }> {
   callbacks?.onInit?.();
   const { session, sources, networkId, unrecognizedAddresses } =
-    await createSession(transactionHash, providedProvider, compilations);
+    await createSession(txHash, provider, compilations, unlockedAccounts);
 
   callbacks?.onFetch?.();
   const { unknownAddresses } = await fetchCompilationsAndAddToSession(
@@ -81,10 +126,20 @@ export async function setupSession(
   return { session, sources, unknownAddresses };
 }
 
+type ProviderOptions = {
+  fork: {
+    provider: any;
+  };
+  wallet?: {
+    unlockedAccounts: string[];
+  };
+};
+
 async function createSession(
-  transactionHash: string,
-  providedProvider: any,
-  compilations: Compilation[]
+  txHash: string,
+  provider: any,
+  compilations: Compilation[],
+  unlockedAccounts: string[]
 ): Promise<{
   session: Session;
   sources: Source[];
@@ -92,9 +147,15 @@ async function createSession(
   unrecognizedAddresses: string[];
 }> {
   let bugger;
+  const providerOptions: ProviderOptions = {
+    fork: { provider }
+  };
+  if (unlockedAccounts && unlockedAccounts.length > 0) {
+    providerOptions.wallet = { unlockedAccounts };
+  }
   try {
-    bugger = await forTx(transactionHash, {
-      provider: provider({ fork: { provider: providedProvider } }),
+    bugger = await forTx(txHash, {
+      provider: ganacheProvider(providerOptions),
       compilations: Codec.Compilations.Utils.shimCompilations(compilations),
       lightMode: true
     });
@@ -106,7 +167,7 @@ async function createSession(
     throw new Error(
       `The transaction hash isn't recognized on the network you are connected` +
         `to. Please ensure you are on the appropriate network for ` +
-        `transaction hash ${transactionHash}.`
+        `transaction hash ${txHash}.`
     );
   }
 
@@ -114,7 +175,7 @@ async function createSession(
   const affectedInstances: { [address: string]: any } = bugger.view(
     $.session.info.affectedInstances
   );
-  const networkId = await providedProvider.request({
+  const networkId = await provider.request({
     method: "net_version",
     params: []
   });

From 1693b4fc7b6297c4a61ceda2013277ee7c1f2f81 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 31 Mar 2023 12:01:30 -0400
Subject: [PATCH 036/189] edit some css and fix a bug involving passing the
 provider

---
 packages/dashboard/src/components/MantineGlobal.tsx    |  3 ++-
 .../src/components/composed/Debugger/index.tsx         |  1 +
 packages/dashboard/src/utils/debugger/session.ts       | 10 +++++-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 66f1b1ae7d3..52b732b1da6 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -94,7 +94,8 @@ function MantineGlobal(): JSX.Element {
               width: "35%"
             },
             ".truffle-debugger-variables": {
-              overflowY: "scroll"
+              overflowY: "scroll",
+              height: "50%"
             },
             ".truffle-debugger-breakpoint-group": {
               display: "flex",
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 3375a80fadc..5050f9c4b3f 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -142,6 +142,7 @@ function Debugger(): JSX.Element {
 
   const onButtonClick = () => {
     initDebugger({
+      chainOptions: {},
       operations,
       setUnknownAddresses,
       setStatus
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index 2801d6b70c0..ac0d0f4184b 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -45,10 +45,10 @@ export async function initDebugger({
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
     ? txHash
-    : // "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
-      // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
-      // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
-      "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
+    : "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+  // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
+  // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
+  // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
   // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
   // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
   const pro = provider ? provider : window.ethereum;
@@ -61,7 +61,7 @@ export async function initDebugger({
   const { session, sources, unknownAddresses } = await setupSession({
     chainOptions: {
       unlockedAccounts,
-      provider
+      provider: pro
     },
     txHash: testTxHash,
     compilations,

From 6cf7f7efc3e65e2048a06b0cccbb5edfe0b97d0f Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 4 Apr 2023 11:42:52 -0400
Subject: [PATCH 037/189] add stack component, update useEffects, and start
 working on notification component for errors

---
 .../src/components/MantineGlobal.tsx          |  3 +
 .../composed/Debugger/Sources/index.tsx       |  9 ++-
 .../components/composed/Debugger/Stack.tsx    | 39 +++++++++
 .../components/composed/Debugger/index.tsx    | 81 ++++++++++++-------
 .../dashboard/src/utils/debugger/session.ts   |  2 +-
 5 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Stack.tsx

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 52b732b1da6..ed4c1f336a5 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -113,6 +113,9 @@ function MantineGlobal(): JSX.Element {
               cursor: "pointer",
               backgroundColor: "red"
             },
+            ".truffle-debugger-error": {
+              width: "50%"
+            },
             ".mantine-Alert-icon": {
               "width": 28,
               "height": "auto",
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 199843d6e2c..845fbcc3fc1 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -37,14 +37,19 @@ function Sources({
       const sourceIds = sources.map(({ id }) => id);
       setCurrentSourceId(sourceIds[0]);
     }
-  }, [sources]);
+  }, [sources, currentSourceId, setCurrentSourceId]);
 
   useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);
     }
-  }, [session, sessionUpdated, currentSourceRange.source.id]);
+  }, [
+    session,
+    sessionUpdated,
+    currentSourceRange.source.id,
+    setCurrentSourceId
+  ]);
 
   let sourcesContent, unknownSourcesContent;
   if (currentSourceId !== null) {
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
new file mode 100644
index 00000000000..9afd41088c5
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import type { Session } from "src/utils/debugger";
+
+type StackArgs = {
+  session: Session;
+  currentStep: string;
+};
+
+function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
+  const [output, setOutput] = useState(null);
+  // when the debugger step changes, update variables
+  useEffect(() => {
+    async function getStack() {
+      const stack = session.view(
+        session.selectors.stacktrace.current.callstack
+      );
+      if (!stack) return;
+      const entries = stack.map((stackItem: any, index: number) => {
+        return (
+          

+            {stackItem.contractName} at {stackItem.functionName} (address{" "}
+            {stackItem.address})
+          

+        );
+      });
+      setOutput(entries);
+    }
+    getStack();
+  }, [currentStep, session]);
+
+  return (
+    

+      
stack

+      
{output ? output : ""}

+    

+  );
+}
+
+export default Stack;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 5050f9c4b3f..4883d20f8d3 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -1,10 +1,11 @@
 import { useState, useEffect } from "react";
-import { Input, Button } from "@mantine/core";
+import { Input, Button, Notification } from "@mantine/core";
 import { useInputState, useCounter } from "@mantine/hooks";
 import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
 import Variables from "src/components/composed/Debugger/Variables";
 import Breakpoints from "src/components/composed/Debugger/Breakpoints";
+import Stack from "src/components/composed/Debugger/Stack";
 import {
   forkNetworkWithTxAndInitDebugger,
   initDebugger,
@@ -24,6 +25,7 @@ function Debugger(): JSX.Element {
     }
   } = useDash()!;
 
+  const [error, setError] = useState(null);
   const [status, setStatus] = useState();
 
   // keep track of addresses for which we can't obtain source material
@@ -75,7 +77,6 @@ function Debugger(): JSX.Element {
 
   // scroll to highlighted source as debugger steps
   useEffect(() => {
-    // if the source property exists it means we have a full SourceRange
     if (isSourceRange(currentSourceRange)) {
       const { source, start } = currentSourceRange!;
       scrollToLine({ sourceId: source!.id, line: start!.line });
@@ -133,6 +134,7 @@ function Debugger(): JSX.Element {
             handleBreakpointComponentClick={handleBreakpointComponentClick}
             handleBreakpointDeleteClick={handleBreakpointDeleteClick}
           />
+          
         

       

     );
@@ -140,15 +142,20 @@ function Debugger(): JSX.Element {
     content = status;
   }
 
-  const onButtonClick = () => {
-    initDebugger({
-      chainOptions: {},
-      operations,
-      setUnknownAddresses,
-      setStatus
-    });
+  const onButtonClick = async () => {
+    try {
+      await initDebugger({
+        chainOptions: {},
+        operations,
+        setUnknownAddresses,
+        setStatus
+      });
+    } catch (err: any) {
+      setError(err);
+    }
   };
 
+  // tx simulation - forks, runs the tx, and opens the debugger to step through
   useEffect(() => {
     if (txToRun) {
       forkNetworkWithTxAndInitDebugger({
@@ -160,29 +167,43 @@ function Debugger(): JSX.Element {
     }
   }, [txToRun]);
 
-  return (
-    

-      

-        
-        

-          
-          {txToRun ? null : (
-            
-          )}
-        

+  if (error) {
+    return (
+      

+        
+          An error occurred while initializing the debugger.
+          {`Error: ${error.message}`}
+        
       

+    );
+  } else {
+    return (
+      

+        

+          
+          

+            
+            {txToRun ? null : (
+              
+            )}
+          

+        

 
-      {content}
-    

-  );
+        {content}
+      

+    );
+  }
 }
 
 export default Debugger;
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index ac0d0f4184b..af8c8aaab2e 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -166,7 +166,7 @@ async function createSession(
     }
     throw new Error(
       `The transaction hash isn't recognized on the network you are connected` +
-        `to. Please ensure you are on the appropriate network for ` +
+        ` to. Please ensure you are on the appropriate network for ` +
         `transaction hash ${txHash}.`
     );
   }

From d813e0559f58b177143eccd00632bc4b6dfb3b42 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 7 Apr 2023 18:24:37 -0400
Subject: [PATCH 038/189] rework layout leveraging mantine more

---
 .../src/components/MantineGlobal.tsx          | 40 +++++--------------
 .../composed/Debugger/Sources/index.tsx       | 27 +++++++++++--
 .../components/composed/Debugger/Stack.tsx    |  2 +-
 .../components/composed/Debugger/index.tsx    | 35 ++++++++--------
 4 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index ed4c1f336a5..f8380acb16f 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -52,6 +52,7 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger": {
               height: "100vh",
+              width: "calc(100vh-964px)",
               overflowY: "hidden"
             },
             ".truffle-debugger-input": {
@@ -65,41 +66,20 @@ function MantineGlobal(): JSX.Element {
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
-            ".trfl-Tabs-root": {
-              overflow: "hidden",
-              height: "calc(100vh - 72px)",
-              paddingTop: 36,
-              zIndex: 1,
-              width: "65%"
-            },
-            ".trfl-Tabs-list": {
-              position: "fixed",
-              top: 36,
-              backgroundColor: "#1A1B1E",
-              width: "100%"
-            },
-            ".truffle-debugger-sources-variables": {
-              display: "flex"
-            },
-            ".truffle-debugger-sources": {
-              height: "100%",
-              overflow: "scroll"
-            },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
-            ".truffle-debugger-variables-breakpoints": {
-              display: "flex",
-              flexDirection: "column",
-              width: "35%"
-            },
             ".truffle-debugger-variables": {
-              overflowY: "scroll",
-              height: "50%"
+              overflow: "scroll",
+              height: "40%"
             },
-            ".truffle-debugger-breakpoint-group": {
-              display: "flex",
-              justifyContent: "space-between"
+            ".truffle-debugger-breakpoints": {
+              overflow: "scroll",
+              height: "30%"
+            },
+            ".truffle-debugger-stack": {
+              overflow: "scroll",
+              height: "30%"
             },
             ".truffle-debugger-breakpoint-delete": {
               borderRadius: 25,
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 845fbcc3fc1..ffbaeb71127 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { basename } from "path";
-import { Tabs } from "@mantine/core";
+import { createStyles, Tabs } from "@mantine/core";
 import Source from "src/components/composed/Debugger/Sources/Source";
 import UnknownSource from "src/components/composed/Debugger/Sources/UnknownSource";
 import type {
@@ -9,6 +9,16 @@ import type {
   Source as SourceType
 } from "src/utils/debugger";
 
+const useStyles = createStyles((_theme, _params, _getRef) => ({
+  maxHeight: {
+    height: "100%"
+  },
+  sourceContent: {
+    height: "100%",
+    overflow: "scroll"
+  }
+}));
+
 interface SourcesProps {
   session: Session;
   sessionUpdated: any;
@@ -28,6 +38,7 @@ function Sources({
   currentSourceId,
   setCurrentSourceId
 }: SourcesProps): JSX.Element {
+  const { classes } = useStyles();
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
 
@@ -57,7 +68,7 @@ function Sources({
       
         
     ));
     unknownSourcesContent = unknownAddresses.map((address: string) => (
-      
+      
         
       
     ));
@@ -75,7 +90,11 @@ function Sources({
 
   return (
     // @ts-ignore
-    
+    
       
         {sources.map((source: SourceType) => (
           
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 9afd41088c5..416584e2512 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -29,7 +29,7 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
   }, [currentStep, session]);
 
   return (
-    

+    

       
stack

       
{output ? output : ""}

     

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 4883d20f8d3..521f8511928 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Input, Button, Notification } from "@mantine/core";
+import { Input, Button, Notification, Header, Grid } from "@mantine/core";
 import { useInputState, useCounter } from "@mantine/hooks";
 import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
@@ -117,17 +117,19 @@ function Debugger(): JSX.Element {
   let content;
   if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
-      

-        
-        

+      
+        
+          
+        
+        
           
           
           
-        

-      

+        
+      
     );
   } else {
     content = status;
@@ -182,7 +184,7 @@ function Debugger(): JSX.Element {
   } else {
     return (
       

-        

+        

           
           

             
             )}
           

-        

-
+        
         {content}
       

     );

From 5d6ba2fa8c1872cefa9bcfaf8b44100322a5e449 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Apr 2023 15:54:08 -0400
Subject: [PATCH 039/189] update html a bit and the scrolling algorithm

---
 .../src/components/MantineGlobal.tsx          |  7 +++
 .../Debugger/Sources/Source/SourceLine.tsx    | 15 +++--
 .../Debugger/Sources/Source/index.tsx         | 55 ++++++++++---------
 .../Debugger/Sources/UnknownSource.tsx        |  6 +-
 .../composed/Debugger/Sources/index.tsx       | 10 +---
 .../components/composed/Debugger/index.tsx    | 20 ++++---
 6 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index f8380acb16f..b6e256e8f13 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -66,6 +66,13 @@ function MantineGlobal(): JSX.Element {
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
+            ".truffle-debugger-source-line": {
+              height: 25
+            },
+            ".truffle-debugger-source-container": {
+              overflow: "scroll",
+              height: "100%"
+            },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index f595593099d..dfd03d11958 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -56,13 +56,16 @@ function SourceLine({
     toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
   };
 
-  const lineClassName = `${sourceId.slice(-10)}-${lineNumber}`;
+  const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
+
   return (
-    

+    

+      

+    

   );
 }
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index 77ea56ceac2..01fe92e67b3 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -5,41 +5,44 @@ import { convertSourceToHtml } from "src/utils/debugger";
 interface SourceProps {
   source: SourceType;
   sourceRange: SourceRange;
-  sourceId: string;
 }
 
-function Source({ source, sourceRange, sourceId }: SourceProps): JSX.Element {
+function Source({ source, sourceRange }: SourceProps): JSX.Element {
   const sourceLines = convertSourceToHtml({ source, sourceRange });
 
   const { start, end } = sourceRange;
   const lineNumberGutterWidth = sourceLines.length.toString().length;
-
   return (
-    
-      {sourceLines.map((line: string, index: number) => {
-        const key = `${source.id}-line-${index}`;
-        const selected =
-          source.id === sourceRange.source.id &&
-          index >= start.line &&
-          (end.line === null ||
-            end.column === null ||
-            (end.column === 0 && index < end.line) ||
-            (end.column > 0 && index <= end.line));
-        const firstHighlightedLine = selected && index === start.line;
+    

+      
+        {sourceLines.map((line: string, index: number) => {
+          const key = `${source.id}-line-${index}`;
+          const selected =
+            source.id === sourceRange.source.id &&
+            index >= start.line &&
+            (end.line === null ||
+              end.column === null ||
+              (end.column === 0 && index < end.line) ||
+              (end.column > 0 && index <= end.line));
+          const firstHighlightedLine = selected && index === start.line;
 
-        const props = {
-          key,
-          line,
-          lineNumber: index + 1,
-          lineNumberGutterWidth,
-          lastLine: index === sourceLines.length - 1,
-          firstHighlightedLine,
-          sourceId
-        };
+          const props = {
+            key,
+            line,
+            lineNumber: index + 1,
+            lineNumberGutterWidth,
+            lastLine: index === sourceLines.length - 1,
+            firstHighlightedLine,
+            sourceId: source.id
+          };
 
-        return ;
-      })}
-    

+          return ;
+        })}
+      

+    

   );
 }
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
index 4a297864778..efac866391b 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
@@ -1,5 +1,9 @@
 function UnknownSource({ address }: { address: string }): JSX.Element {
-  return 
Could not locate source material for {address}.
;
+  return (
+    

+      
Could not locate source material for {address}.

+    

+  );
 }
 
 export default UnknownSource;
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index ffbaeb71127..41f6f9592fc 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -14,8 +14,8 @@ const useStyles = createStyles((_theme, _params, _getRef) => ({
     height: "100%"
   },
   sourceContent: {
-    height: "100%",
-    overflow: "scroll"
+    height: "100%"
+    // overflow: "scroll"
   }
 }));
 
@@ -70,11 +70,7 @@ function Sources({
         value={source.id}
         className={classes.sourceContent}
       >
-        
+        
       
     ));
     unknownSourcesContent = unknownAddresses.map((address: string) => (
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 521f8511928..257535a81ff 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -67,21 +67,25 @@ function Debugger(): JSX.Element {
     line: number;
   }) => {
     const lineNumber = line + 1;
-    const scrollTarget = document.getElementsByClassName(
-      `${sourceId.slice(-10)}-${lineNumber}`
-    );
-    if (scrollTarget[0]) {
-      scrollTarget[0].scrollIntoView({ block: "center" });
+    const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
+    const targetLine: any = document.getElementById(lineId);
+    if (targetLine) {
+      const offsetTop = targetLine.offsetTop;
+      // @ts-ignore
+      const scroller = document.getElementById(`source-${sourceId.slice(-10)}`);
+      const browserViewHeight = window.innerHeight;
+      // @ts-ignore
+      scroller.scrollTop = offsetTop - browserViewHeight / 2;
     }
   };
 
   // scroll to highlighted source as debugger steps
   useEffect(() => {
-    if (isSourceRange(currentSourceRange)) {
+    if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
       const { source, start } = currentSourceRange!;
-      scrollToLine({ sourceId: source!.id, line: start!.line });
+      scrollToLine({ sourceId: source.id, line: start.line });
     }
-  }, [currentSourceRange.traceIndex]);
+  });
 
   // check whether we need to scroll to a breakpoint
   // this is to ensure the source has fully rendered before scrolling

From 243342ee46ad3effcc881c08e7eb7afa451449a3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Apr 2023 16:23:57 -0400
Subject: [PATCH 040/189] remove contracts module from dashboard

---
 .../src/components/composed/Contracts.tsx     |  5 -----
 .../composed/Sidebar/Middle/index.tsx         | 21 ++-----------------
 2 files changed, 2 insertions(+), 24 deletions(-)
 delete mode 100644 packages/dashboard/src/components/composed/Contracts.tsx

diff --git a/packages/dashboard/src/components/composed/Contracts.tsx b/packages/dashboard/src/components/composed/Contracts.tsx
deleted file mode 100644
index 42a851739af..00000000000
--- a/packages/dashboard/src/components/composed/Contracts.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function Contracts(): JSX.Element {
-  return 
interact with contracts
;
-}
-
-export default Contracts;
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
index 957ca8e6887..1bcd7c2baf5 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
@@ -1,5 +1,5 @@
-import { Navbar, Badge, Indicator } from "@mantine/core";
-import { Zap, Crosshair, Archive, Aperture } from "react-feather";
+import { Navbar, Indicator } from "@mantine/core";
+import { Zap, Crosshair, Aperture } from "react-feather";
 import NavButton from "src/components/composed/Sidebar/Middle/NavButton";
 import { useDash } from "src/hooks";
 
@@ -10,16 +10,6 @@ function Middle(): JSX.Element {
   const numRequests = providerMessages.size;
   const featherIconProps = { size: 18 };
 
-  const comingSoonBadge = (
-    
-      coming soon
-    
-  );
-
   return (
     
       }
       />
-      }
-        badge={comingSoonBadge}
-        disabled={true}
-      />
       {process.env.NODE_ENV === "development" && (
         
Date: Thu, 2 Feb 2023 22:56:42 -0500
Subject: [PATCH 041/189] dashboard: Debugger WIP

---
 packages/dashboard/package.json               |  1 +
 .../composed/Debugger/Sources/index.tsx       |  1 -
 .../src/types/browser-util-inspect.d.ts       |  1 +
 packages/dashboard/src/types/debugger.d.ts    |  1 -
 yarn.lock                                     | 20 +++++++++++++++++++
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 packages/dashboard/src/types/browser-util-inspect.d.ts

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 3cb01a6528f..b4b5a6ae036 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -47,6 +47,7 @@
     "@truffle/debugger": "^11.0.27",
     "@truffle/debug-utils": "^6.0.46",
     "browser-util-inspect": "0.2.0",
+    "@truffle/debugger": "^11.0.32",
     "cors": "^2.8.5",
     "debug": "^4.3.2",
     "ethers": "^5.6.9",
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 41f6f9592fc..5f6463b5ec1 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -15,7 +15,6 @@ const useStyles = createStyles((_theme, _params, _getRef) => ({
   },
   sourceContent: {
     height: "100%"
-    // overflow: "scroll"
   }
 }));
 
diff --git a/packages/dashboard/src/types/browser-util-inspect.d.ts b/packages/dashboard/src/types/browser-util-inspect.d.ts
new file mode 100644
index 00000000000..a8ab96efb78
--- /dev/null
+++ b/packages/dashboard/src/types/browser-util-inspect.d.ts
@@ -0,0 +1 @@
+declare module "browser-util-inspect";
diff --git a/packages/dashboard/src/types/debugger.d.ts b/packages/dashboard/src/types/debugger.d.ts
index 81d51e19317..17487d4a27e 100644
--- a/packages/dashboard/src/types/debugger.d.ts
+++ b/packages/dashboard/src/types/debugger.d.ts
@@ -1,2 +1 @@
 declare module "@truffle/debugger";
-declare module "browser-util-inspect";
diff --git a/yarn.lock b/yarn.lock
index 4a59fae54b5..16ea334e751 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15069,6 +15069,26 @@ ganache@^7.7.3:
     bufferutil "4.0.5"
     utf-8-validate "5.0.7"
 
+ganache@^7.7.3:
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/ganache/-/ganache-7.7.3.tgz#c36f982166239a3cf8ae040942c08a4ba6e62dc3"
+  integrity sha512-dZTUHjzSuvDTMUpKaBTWJnpcWpsBUtqciA8ttdmC/r/XRXJhDa0EpypisYULhoV8tx76G08mOuM/B1vhPbh20A==
+  dependencies:
+    "@trufflesuite/bigint-buffer" "1.1.10"
+    "@types/bn.js" "^5.1.0"
+    "@types/lru-cache" "5.1.1"
+    "@types/seedrandom" "3.0.1"
+    abstract-level "1.0.3"
+    abstract-leveldown "7.2.0"
+    async-eventemitter "0.2.4"
+    emittery "0.10.0"
+    keccak "3.0.2"
+    leveldown "6.1.0"
+    secp256k1 "4.0.3"
+  optionalDependencies:
+    bufferutil "4.0.5"
+    utf-8-validate "5.0.7"
+
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"

From 309bccc0957fbf0a2015dd5893b31cd13613d7de Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Feb 2023 15:50:20 -0500
Subject: [PATCH 042/189] hack out the state for keeping track of sources and
 debugger session

---
 packages/dashboard/package.json                                  | 1 +
 .../dashboard/src/components/composed/Debugger/Sources/index.tsx | 1 -
 packages/dashboard/src/contexts/DashContext/DashProvider.tsx     | 1 +
 3 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index b4b5a6ae036..0775a8b751e 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -47,6 +47,7 @@
     "@truffle/debugger": "^11.0.27",
     "@truffle/debug-utils": "^6.0.46",
     "browser-util-inspect": "0.2.0",
+    "@truffle/debug-utils": "^6.0.48",
     "@truffle/debugger": "^11.0.32",
     "cors": "^2.8.5",
     "debug": "^4.3.2",
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 5f6463b5ec1..c25ae73a70d 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -84,7 +84,6 @@ function Sources({
   }
 
   return (
-    // @ts-ignore
     
Date: Mon, 27 Feb 2023 15:52:18 -0500
Subject: [PATCH 043/189] get scroll working crudely and provide error message
 when tx hash not recognized on network

---
 .../src/components/composed/Debugger/Sources/index.tsx        | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index c25ae73a70d..63ea9f84950 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { basename } from "path";
+import React from "react";
 import { createStyles, Tabs } from "@mantine/core";
 import Source from "src/components/composed/Debugger/Sources/Source";
 import UnknownSource from "src/components/composed/Debugger/Sources/UnknownSource";
@@ -40,6 +41,7 @@ function Sources({
   const { classes } = useStyles();
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
+  const scrollRef = React.createRef();
 
   // initialize sources after we get all of them
   useEffect(() => {
@@ -50,6 +52,8 @@ function Sources({
   }, [sources, currentSourceId, setCurrentSourceId]);
 
   useEffect(() => {
+    // @ts-ignore
+    scrollRef.current.scrollIntoView();
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);

From b85dc48341d2d29d53d8c4f923155172a98d6a51 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 1 Mar 2023 15:40:38 -0500
Subject: [PATCH 044/189] add new inspect lib, create Variables component, and
 update operations for setting debugger data

---
 packages/dashboard/package.json                              | 2 ++
 .../dashboard/src/components/composed/Debugger/index.tsx     | 5 +++++
 packages/dashboard/src/types/debugger.d.ts                   | 1 +
 3 files changed, 8 insertions(+)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 0775a8b751e..ee3a26783f9 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -49,6 +49,8 @@
     "browser-util-inspect": "0.2.0",
     "@truffle/debug-utils": "^6.0.48",
     "@truffle/debugger": "^11.0.32",
+    "@truffle/debug-utils": "^6.0.48",
+    "browser-util-inspect": "0.2.0",
     "cors": "^2.8.5",
     "debug": "^4.3.2",
     "ethers": "^5.6.9",
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 257535a81ff..7208f0915ae 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -118,6 +118,11 @@ function Debugger(): JSX.Element {
     return item.source !== undefined;
   };
 
+  if (session) {
+    currentSourceRange = getCurrentSourceRange(session);
+    currentStep = session.view(session.selectors.trace.index);
+  }
+
   let content;
   if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
diff --git a/packages/dashboard/src/types/debugger.d.ts b/packages/dashboard/src/types/debugger.d.ts
index 17487d4a27e..81d51e19317 100644
--- a/packages/dashboard/src/types/debugger.d.ts
+++ b/packages/dashboard/src/types/debugger.d.ts
@@ -1 +1,2 @@
 declare module "@truffle/debugger";
+declare module "browser-util-inspect";

From 986277806656fe444895557d70375412fdb102b0 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 2 Mar 2023 11:18:40 -0500
Subject: [PATCH 045/189] only call scrollIntoView when the ref exists

---
 .../src/components/composed/Debugger/Sources/index.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 63ea9f84950..457d213569d 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -52,8 +52,10 @@ function Sources({
   }, [sources, currentSourceId, setCurrentSourceId]);
 
   useEffect(() => {
-    // @ts-ignore
-    scrollRef.current.scrollIntoView();
+    if (scrollRef) {
+      // @ts-ignore
+      scrollRef.current.scrollIntoView();
+    }
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);

From 3bbcd1daae6247e728a1d5c8a4c91eb2259e931e Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 2 Mar 2023 13:18:57 -0500
Subject: [PATCH 046/189] keep track of unknown sources so we can display
 something useful in the browser

---
 .../src/components/composed/Debugger/Sources/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 457d213569d..78ea061eec9 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -52,7 +52,7 @@ function Sources({
   }, [sources, currentSourceId, setCurrentSourceId]);
 
   useEffect(() => {
-    if (scrollRef) {
+    if (scrollRef?.current) {
       // @ts-ignore
       scrollRef.current.scrollIntoView();
     }

From 13a306ce5a53105614fceb61a4fc81ba6cd64194 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 7 Mar 2023 13:20:49 -0500
Subject: [PATCH 047/189] add plumbing for keeping track of debugger
 breakpoints

---
 packages/dashboard/src/contexts/DashContext/DashProvider.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index e648983baae..397edda72cc 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -29,7 +29,6 @@ import type {
   ToggleDebuggerBreakpointArgs
 } from "src/contexts/DashContext/types";
 
-
 const ARBITRARY_DB_MAX_BYTES = 500_000_000;
 const ARBITRARY_DB_MAX_PERCENT = 0.8;
 

From 25034613c52e02e0cc80dcd787a66984f9c4dd1a Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 8 Mar 2023 16:19:24 -0500
Subject: [PATCH 048/189] update debugger when setting breakpoints

---
 packages/dashboard/src/contexts/DashContext/state.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index 636b1c29108..c16e4df14df 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -15,6 +15,11 @@ import {
 import type { InteractiveRpcMethod } from "src/utils/constants";
 import type { State, Action, Schema } from "src/contexts/DashContext";
 
+type Breakpoint = {
+  line: number;
+  sourceId: string;
+};
+
 const DB_NAME = "TruffleDashboard";
 const DB_VERSION = 1;
 

From 7285d1ae8c2586e2332a946401883544c0461717 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 13 Mar 2023 12:59:30 -0400
Subject: [PATCH 049/189] WIP - work on the css for debugger view

---
 .../src/components/composed/Debugger/Sources/index.tsx       | 3 +++
 packages/dashboard/src/contexts/DashContext/state.ts         | 5 -----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 78ea061eec9..73edaa3f365 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -56,6 +56,9 @@ function Sources({
       // @ts-ignore
       scrollRef.current.scrollIntoView();
     }
+  }, [scrollRef, session]);
+
+  useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index c16e4df14df..636b1c29108 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -15,11 +15,6 @@ import {
 import type { InteractiveRpcMethod } from "src/utils/constants";
 import type { State, Action, Schema } from "src/contexts/DashContext";
 
-type Breakpoint = {
-  line: number;
-  sourceId: string;
-};
-
 const DB_NAME = "TruffleDashboard";
 const DB_VERSION = 1;
 

From ba31acb67ef7606259f290058805edf0c8cde5da Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 13 Mar 2023 15:33:59 -0400
Subject: [PATCH 050/189] when stepping, make content center in the scrollable
 container

---
 .../src/components/composed/Debugger/Sources/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 73edaa3f365..c763e65798f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -54,7 +54,7 @@ function Sources({
   useEffect(() => {
     if (scrollRef?.current) {
       // @ts-ignore
-      scrollRef.current.scrollIntoView();
+      scrollRef.current.scrollIntoView({ block: "center" });
     }
   }, [scrollRef, session]);
 

From 1f94e9dac98857718e0283ac49c866dc055c2cc3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 16 Mar 2023 10:59:05 -0400
Subject: [PATCH 051/189] start work on arranging for a way to set the current
 source manually

---
 .../src/components/composed/Debugger/Sources/index.tsx     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index c763e65798f..0b0fbeb83bc 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -51,6 +51,13 @@ function Sources({
     }
   }, [sources, currentSourceId, setCurrentSourceId]);
 
+  useEffect(() => {
+    if (currentSourceId === null) {
+      const sourceIds = sources.map(({ id }) => id);
+      setCurrentSourceId(sourceIds[0]);
+    }
+  });
+
   useEffect(() => {
     if (scrollRef?.current) {
       // @ts-ignore

From 56e8ee82bb30aafa1d62abae00b50b74e1ff7fcf Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 17 Mar 2023 11:37:57 -0400
Subject: [PATCH 052/189] use generic html element dom manipulation for jumping
 to source line and rename method

---
 .../src/components/composed/Debugger/Sources/index.tsx   | 9 ---------
 .../dashboard/src/components/composed/Debugger/index.tsx | 1 +
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 0b0fbeb83bc..73794c96140 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef } from "react";
 import { basename } from "path";
-import React from "react";
 import { createStyles, Tabs } from "@mantine/core";
 import Source from "src/components/composed/Debugger/Sources/Source";
 import UnknownSource from "src/components/composed/Debugger/Sources/UnknownSource";
@@ -41,7 +40,6 @@ function Sources({
   const { classes } = useStyles();
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
-  const scrollRef = React.createRef();
 
   // initialize sources after we get all of them
   useEffect(() => {
@@ -58,13 +56,6 @@ function Sources({
     }
   });
 
-  useEffect(() => {
-    if (scrollRef?.current) {
-      // @ts-ignore
-      scrollRef.current.scrollIntoView({ block: "center" });
-    }
-  }, [scrollRef, session]);
-
   useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 7208f0915ae..89f87e78038 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -104,6 +104,7 @@ function Debugger(): JSX.Element {
   }: BreakpointType) => {
     setCurrentSourceId(sourceId);
     setGoToBreakpoint({ sourceId, line });
+
   };
 
   const handleBreakpointDeleteClick = ({ sourceId, line }: BreakpointType) => {

From 9468597b8ff2496ef65f1576520b383ffcf7d7da Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 20 Mar 2023 15:59:49 -0400
Subject: [PATCH 053/189] create delete breakpoint method and use it in
 breakpoint section

---
 packages/dashboard/src/components/MantineGlobal.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index b6e256e8f13..384e0d2036e 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -103,6 +103,19 @@ function MantineGlobal(): JSX.Element {
             ".truffle-debugger-error": {
               width: "50%"
             },
+            ".truffle-debugger-breakpoint-group": {
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            ".truffle-debugger-breakpoint-delete": {
+              borderRadius: 25,
+              textAlign: "center",
+              width: 25
+            },
+            ".truffle-debugger-breakpoint-delete:hover": {
+              cursor: "pointer",
+              backgroundColor: "red"
+            },
             ".mantine-Alert-icon": {
               "width": 28,
               "height": "auto",

From c5900958f7ae598e9613c35b30427473f31f0914 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 21 Mar 2023 14:46:27 -0400
Subject: [PATCH 054/189] give mouse pointer a hover state while over
 breakpoints

---
 packages/dashboard/src/components/MantineGlobal.tsx | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 384e0d2036e..ccb6bdb8943 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -107,15 +107,6 @@ function MantineGlobal(): JSX.Element {
               display: "flex",
               justifyContent: "space-between"
             },
-            ".truffle-debugger-breakpoint-delete": {
-              borderRadius: 25,
-              textAlign: "center",
-              width: 25
-            },
-            ".truffle-debugger-breakpoint-delete:hover": {
-              cursor: "pointer",
-              backgroundColor: "red"
-            },
             ".mantine-Alert-icon": {
               "width": 28,
               "height": "auto",

From 883fc67f2b9f99436bd5a0966c64de11902b9ad6 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 16:46:52 -0400
Subject: [PATCH 055/189] update useEffects to better deal with autoscrolling
 as debugger steps

---
 .../components/composed/Debugger/Sources/index.tsx   |  2 +-
 .../src/components/composed/Debugger/index.tsx       | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 73794c96140..0ba601c61ff 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -54,7 +54,7 @@ function Sources({
       const sourceIds = sources.map(({ id }) => id);
       setCurrentSourceId(sourceIds[0]);
     }
-  });
+  }, [sources]);
 
   useEffect(() => {
     const sessionSourceId = currentSourceRange.source.id;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 89f87e78038..41b5f5722e7 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -98,13 +98,23 @@ function Debugger(): JSX.Element {
     }
   }, [goToBreakpoint]);
 
+  // check whether we need to scroll to a breakpoint
+  // this is to ensure the source has fully rendered before scrolling
+  useEffect(() => {
+    if (goToBreakpoint !== null) {
+      const { sourceId, line } = goToBreakpoint;
+      // @ts-ignore
+      scrollToLine({ sourceId, line });
+      setGoToBreakpoint(null);
+    }
+  }, [goToBreakpoint]);
+
   const handleBreakpointComponentClick = ({
     sourceId,
     line
   }: BreakpointType) => {
     setCurrentSourceId(sourceId);
     setGoToBreakpoint({ sourceId, line });
-
   };
 
   const handleBreakpointDeleteClick = ({ sourceId, line }: BreakpointType) => {

From 10d9d68f3893a9250d296593668c07ac21cb494b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 22 Mar 2023 17:04:27 -0400
Subject: [PATCH 056/189] optimize renders

---
 packages/dashboard/src/components/composed/Debugger/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 41b5f5722e7..5de46659b0c 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -83,7 +83,7 @@ function Debugger(): JSX.Element {
   useEffect(() => {
     if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
       const { source, start } = currentSourceRange!;
-      scrollToLine({ sourceId: source.id, line: start.line });
+      scrollToLine({ sourceId: source!.id, line: start!.line });
     }
   });
 

From 8e3bf27b1290076d1da640fc17681bf0b8eab9f4 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Apr 2023 15:54:08 -0400
Subject: [PATCH 057/189] update html a bit, some styles, and the scrolling
 algorithm

more css
---
 .../src/components/MantineGlobal.tsx          | 20 ++++++--
 .../composed/Debugger/Breakpoints/index.tsx   |  2 +-
 .../Debugger/Controls/ControlButton.tsx       | 13 ++++-
 .../composed/Debugger/Controls/index.tsx      |  4 +-
 .../composed/Debugger/Sources/index.tsx       | 44 ++++++++++++-----
 .../components/composed/Debugger/Stack.tsx    |  2 +-
 .../composed/Debugger/Variables.tsx           |  2 +-
 .../components/composed/Debugger/index.tsx    | 48 ++++++++++---------
 .../src/components/composed/Sidebar/index.tsx | 12 +++--
 .../dashboard/src/utils/debugger/session.ts   |  3 +-
 10 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index ccb6bdb8943..f698e2311d5 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -48,21 +48,31 @@ function MantineGlobal(): JSX.Element {
             // class for highlighting source material in debugger
             ".truffle-debugger-text-highlighted": {
               backgroundColor:
-                theme.colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
+                colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
             },
             ".truffle-debugger": {
               height: "100vh",
               width: "calc(100vh-964px)",
-              overflowY: "hidden"
+              overflowY: "hidden",
+              backgroundColor:
+                colorScheme === "dark"
+                  ? colors["truffle-brown"][8]
+                  : colors["truffle-beige"][3]
             },
             ".truffle-debugger-input": {
               display: "flex",
-              backgroundColor: "#1A1B1E"
+              backgroundColor:
+                colorScheme === "dark"
+                  ? colors["truffle-brown"][8]
+                  : colors["truffle-beige"][3]
             },
             ".truffle-debugger-input-group": {
               display: "flex",
               flexGrow: 1
             },
+            ".truffle-debugger-content-group": {
+              margin: 32
+            },
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
@@ -84,6 +94,10 @@ function MantineGlobal(): JSX.Element {
               overflow: "scroll",
               height: "30%"
             },
+            ".truffle-debugger-section-header": {
+              height: 42,
+              fontSize: 16
+            },
             ".truffle-debugger-stack": {
               overflow: "scroll",
               height: "30%"
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index f73aeb2e26f..e8ceaf05603 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -48,7 +48,7 @@ function Breakpoints({
   }
   return (
     

-      
breakpoints

+      
breakpoints

       
{breakpointsList}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
index 8349ebac954..7007dce4e85 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
@@ -1,6 +1,6 @@
 import { createElement } from "react";
 import type { Icon } from "react-feather";
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, createStyles } from "@mantine/core";
 import type { ActionIconProps } from "@mantine/core";
 
 interface ControlButtonProps extends ActionIconProps {
@@ -20,9 +20,20 @@ function ControlButton({
   setStepping,
   ...props
 }: ControlButtonProps): JSX.Element {
+  const useStyles = createStyles(theme => ({
+    button: {
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors["truffle-brown"][5]
+          : theme.colors["truffle-beige"][5]
+    }
+  }));
+  const { classes } = useStyles();
+
   return (
      {
         setStepping(true);
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
index f95bce506e4..9a3f3863f5a 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
@@ -19,7 +19,9 @@ interface ControlsProps {
 
 function Controls({ session, stepEffect }: ControlsProps): JSX.Element {
   const [stepping, setStepping] = useState(false);
-  const atStart = session?.view($.trace.index) === 0;
+  const atStart =
+    session?.view($.trace.index) === 0 ||
+    session?.view($.trace.index) === undefined;
   const atEnd = session?.view($.trace.finished);
   const disabled = atEnd || !session;
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 0ba601c61ff..11ccca3cc7c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -9,12 +9,34 @@ import type {
   Source as SourceType
 } from "src/utils/debugger";
 
-const useStyles = createStyles((_theme, _params, _getRef) => ({
+const useStyles = createStyles((theme, _params, _getRef) => ({
   maxHeight: {
     height: "100%"
   },
   sourceContent: {
-    height: "100%"
+    height: "100%",
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-beige"][3]
+        : theme.colors["truffle-brown"][3]
+  },
+  tabs: {
+    fontSize: 16,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : theme.colors["truffle-beige"][3],
+    borderStyle: "solid",
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : theme.colors["truffle-beige"][3]
   }
 }));
 
@@ -74,17 +96,13 @@ function Sources({
       
         
       
     ));
     unknownSourcesContent = unknownAddresses.map((address: string) => (
-      
+      
         
       
     ));
@@ -98,18 +116,20 @@ function Sources({
     >
       
         {sources.map((source: SourceType) => (
-          
+          
             {basename(source.sourcePath)}
           
         ))}
         {unknownAddresses.map((address: string) => (
-          
+          
             Unknown Contract
           
         ))}
       
-      {sourcesContent}
-      {unknownSourcesContent}
+      

+        {sourcesContent}
+        {unknownSourcesContent}
+      

     
   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 416584e2512..5b0e09f03a7 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -30,7 +30,7 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
 
   return (
     

-      
stack

+      
stack

       
{output ? output : ""}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index be482f41ffa..3aef0432b76 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -56,7 +56,7 @@ function Variables({
 
   return (
     

-      
variables

+      
variables

       
{output ? output : ""}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 5de46659b0c..cd30203d6d8 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -83,7 +83,7 @@ function Debugger(): JSX.Element {
   useEffect(() => {
     if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
       const { source, start } = currentSourceRange!;
-      scrollToLine({ sourceId: source!.id, line: start!.line });
+      scrollToLine({ sourceId: source.id, line: start.line });
     }
   });
 
@@ -137,28 +137,30 @@ function Debugger(): JSX.Element {
   let content;
   if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
-      
-        
-          
-        
-        
-          
-          
-          
-        
-      
+      

+        
+          
+            
+          
+          
+            
+            
+            
+          
+        
+      

     );
   } else {
     content = status;
diff --git a/packages/dashboard/src/components/composed/Sidebar/index.tsx b/packages/dashboard/src/components/composed/Sidebar/index.tsx
index 467fafca847..95f51f02ed9 100644
--- a/packages/dashboard/src/components/composed/Sidebar/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/index.tsx
@@ -4,11 +4,15 @@ import Middle from "src/components/composed/Sidebar/Middle";
 import Bottom from "src/components/composed/Sidebar/Bottom";
 import Divider from "src/components/composed/Sidebar/Divider";
 
-const useStyles = createStyles((_theme, _params, _getRef) => ({
+const useStyles = createStyles((theme, _params, _getRef) => ({
   sideBar: {
-    minWidth: 370,
-    maxWidth: 370,
-    borderRight: "none"
+    height: "100vh",
+    width: 370,
+    borderRight: "none",
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][8]
+        : theme.colors["truffle-beige"][3]
   }
 }));
 
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index af8c8aaab2e..d6e4743c4bc 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -45,7 +45,8 @@ export async function initDebugger({
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
     ? txHash
-    : "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+    : // : "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
+      "0x888e35de86e3a6484eb56136f32230fd53d0ce83c81278e7b589a828f182afb7"; // local MetaCoin deployment
   // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
   // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
   // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx

From ea8b4007a1e85038974d7dcb58d4544b555dfc94 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 14 Apr 2023 12:23:15 -0400
Subject: [PATCH 058/189] keep werkin that design

---
 .../src/components/MantineGlobal.tsx          | 45 ++++++++++++++++---
 .../composed/Debugger/Breakpoints/index.tsx   |  2 +-
 .../composed/Debugger/Sources/index.tsx       |  8 ++--
 .../components/composed/Debugger/Stack.tsx    |  2 +-
 .../composed/Debugger/Variables.tsx           |  4 +-
 .../components/composed/Debugger/index.tsx    | 13 ++++--
 6 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index f698e2311d5..0eb09db75db 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -52,7 +52,6 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger": {
               height: "100vh",
-              width: "calc(100vh-964px)",
               overflowY: "hidden",
               backgroundColor:
                 colorScheme === "dark"
@@ -71,7 +70,10 @@ function MantineGlobal(): JSX.Element {
               flexGrow: 1
             },
             ".truffle-debugger-content-group": {
-              margin: 32
+              height: "calc(100vh - 36px)",
+              paddingBottom: 36,
+              margin: 32,
+              fontSize: 12
             },
             ".trfl-Input-wrapper": {
               flexGrow: 1
@@ -81,18 +83,41 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger-source-container": {
               overflow: "scroll",
-              height: "100%"
+              height: "100%",
+              padding: 15
             },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
             ".truffle-debugger-variables": {
               overflow: "scroll",
-              height: "40%"
+              height: "40%",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: 4,
+              padding: 16,
+              marginBottom: 20,
+              borderColor:
+                theme.colorScheme === "dark"
+                  ? theme.colors["truffle-brown"][5]
+                  : `${theme.colors["truffle-beige"][5]}73`
+            },
+            ".truffle-debugger-variables-types": {
+              fontSize: 12,
+              fontWeight: 800
             },
             ".truffle-debugger-breakpoints": {
               overflow: "scroll",
-              height: "30%"
+              height: "30%",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: 4,
+              padding: 16,
+              marginBottom: 20,
+              borderColor:
+                theme.colorScheme === "dark"
+                  ? theme.colors["truffle-brown"][5]
+                  : `${theme.colors["truffle-beige"][5]}73`
             },
             ".truffle-debugger-section-header": {
               height: 42,
@@ -100,7 +125,15 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger-stack": {
               overflow: "scroll",
-              height: "30%"
+              height: "30%",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderRadius: 4,
+              padding: 16,
+              borderColor:
+                theme.colorScheme === "dark"
+                  ? theme.colors["truffle-brown"][5]
+                  : `${theme.colors["truffle-beige"][5]}73`
             },
             ".truffle-debugger-breakpoint-delete": {
               borderRadius: 25,
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index e8ceaf05603..987618f6023 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -48,7 +48,7 @@ function Breakpoints({
   }
   return (
     

-      
breakpoints

+      
Breakpoints

       
{breakpointsList}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 11ccca3cc7c..7f2584ee383 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -19,8 +19,8 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     borderWidth: 1,
     borderColor:
       theme.colorScheme === "dark"
-        ? theme.colors["truffle-beige"][3]
-        : theme.colors["truffle-brown"][3]
+        ? theme.colors["truffle-brown"][3]
+        : `${theme.colors["truffle-beige"][5]}73`
   },
   tabs: {
     fontSize: 16,
@@ -36,7 +36,7 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     borderColor:
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][5]
-        : theme.colors["truffle-beige"][3]
+        : `${theme.colors["truffle-beige"][5]}73`
   }
 }));
 
@@ -112,7 +112,7 @@ function Sources({
     
       
         {sources.map((source: SourceType) => (
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 5b0e09f03a7..5e807a66223 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -30,7 +30,7 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
 
   return (
     

-      
stack

+      
Stack

       
{output ? output : ""}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 3aef0432b76..39bea519860 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -42,7 +42,7 @@ function Variables({
         if (variableValues.length > 0) {
           entries.push(
             

-              
{section}

+              
{section}

               {...variableValues}
             

           );
@@ -56,7 +56,7 @@ function Variables({
 
   return (
     

-      
variables

+      
Variables

       
{output ? output : ""}

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index cd30203d6d8..7331fd92b9b 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -138,8 +138,15 @@ function Debugger(): JSX.Element {
   if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
       

-        
-          
+        
+          
             
           
-          
+          
             
             
Date: Fri, 14 Apr 2023 15:18:27 -0400
Subject: [PATCH 059/189] give individual panes nice, curvy corners and update
 stack

---
 .../src/components/MantineGlobal.tsx          | 29 +++++++++++++------
 .../composed/Debugger/Breakpoints/index.tsx   |  8 +++--
 .../composed/Debugger/Sources/index.tsx       |  2 ++
 .../components/composed/Debugger/Stack.tsx    | 14 ++++++---
 .../composed/Debugger/Variables.tsx           |  8 +++--
 5 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 0eb09db75db..6827e5d0c02 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -89,52 +89,63 @@ function MantineGlobal(): JSX.Element {
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
-            ".truffle-debugger-variables": {
-              overflow: "scroll",
+            ".truffle-debugger-variables-container": {
+              overflow: "hidden",
               height: "40%",
               borderWidth: 1,
               borderStyle: "solid",
               borderRadius: 4,
-              padding: 16,
               marginBottom: 20,
               borderColor:
                 theme.colorScheme === "dark"
                   ? theme.colors["truffle-brown"][5]
                   : `${theme.colors["truffle-beige"][5]}73`
             },
+            ".truffle-debugger-variables": {
+              overflow: "scroll",
+              padding: 16,
+              height: "100%"
+            },
             ".truffle-debugger-variables-types": {
               fontSize: 12,
               fontWeight: 800
             },
-            ".truffle-debugger-breakpoints": {
-              overflow: "scroll",
+            ".truffle-debugger-breakpoints-container": {
+              overflow: "hidden",
               height: "30%",
               borderWidth: 1,
               borderStyle: "solid",
               borderRadius: 4,
-              padding: 16,
               marginBottom: 20,
               borderColor:
                 theme.colorScheme === "dark"
                   ? theme.colors["truffle-brown"][5]
                   : `${theme.colors["truffle-beige"][5]}73`
             },
+            ".truffle-debugger-breakpoints": {
+              overflow: "scroll",
+              padding: 16,
+              height: "100%"
+            },
             ".truffle-debugger-section-header": {
               height: 42,
               fontSize: 16
             },
-            ".truffle-debugger-stack": {
-              overflow: "scroll",
+            ".truffle-debugger-stack-container": {
               height: "30%",
               borderWidth: 1,
               borderStyle: "solid",
               borderRadius: 4,
-              padding: 16,
               borderColor:
                 theme.colorScheme === "dark"
                   ? theme.colors["truffle-brown"][5]
                   : `${theme.colors["truffle-beige"][5]}73`
             },
+            ".truffle-debugger-stack": {
+              overflow: "scroll",
+              padding: 16,
+              height: "100%"
+            },
             ".truffle-debugger-breakpoint-delete": {
               borderRadius: 25,
               textAlign: "center",
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index 987618f6023..c866d945fc8 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -47,9 +47,11 @@ function Breakpoints({
     }
   }
   return (
-    

-      
Breakpoints

-      
{breakpointsList}

+    

+      

+        
Breakpoints

+        
{breakpointsList}

+      

     

   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 7f2584ee383..678aa72d65b 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -15,8 +15,10 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
   },
   sourceContent: {
     height: "100%",
+    overflow: "hidden",
     borderStyle: "solid",
     borderWidth: 1,
+    borderRadius: 4,
     borderColor:
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][3]
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 5e807a66223..a7cff2b2d66 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -16,9 +16,13 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
       );
       if (!stack) return;
       const entries = stack.map((stackItem: any, index: number) => {
+        const functionNameDisplay =
+          stackItem.functionName === undefined
+            ? "unknown function"
+            : stackItem.functionName;
         return (
           

-            {stackItem.contractName} at {stackItem.functionName} (address{" "}
+            {stackItem.contractName} at {functionNameDisplay} (address{" "}
             {stackItem.address})
           

         );
@@ -29,9 +33,11 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
   }, [currentStep, session]);
 
   return (
-    

-      
Stack

-      
{output ? output : ""}

+    

+      

+        
Stack

+        
{output ? output : ""}

+      

     

   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 39bea519860..64c81fac135 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -55,9 +55,11 @@ function Variables({
   }, [currentStep, session]);
 
   return (
-    

-      
Variables

-      
{output ? output : ""}

+    

+      

+        
Variables

+        
{output ? output : ""}

+      

     

   );
 }

From 299864dcd3891969e6944dc2ee477998995da188 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 17 Apr 2023 15:24:30 -0400
Subject: [PATCH 060/189] update unknown source display, add more css, and try
 a different display method for sources

---
 packages/dashboard/src/components/MantineGlobal.tsx      | 8 ++++++++
 .../composed/Debugger/Sources/Source/SourceLine.tsx      | 4 ++--
 .../composed/Debugger/Sources/UnknownSource.tsx          | 9 +++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 6827e5d0c02..a8b2180712f 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -86,6 +86,14 @@ function MantineGlobal(): JSX.Element {
               height: "100%",
               padding: 15
             },
+            ".truffle-debugger-unknown-source-container": {
+              height: "100%",
+              padding: 15,
+              backgroundColor: "#FFF3BF"
+            },
+            ".truffle-debugger-unknown-title": {
+              fontSize: 18
+            },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index dfd03d11958..03a7753c954 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -37,9 +37,9 @@ function SourceLine({
   if (!lastLine) line += "\n";
   let lineNumberDisplay =
     `` +
-    " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
     lineNumber +
-    "  " +
+    " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
+    "| " +
     ``;
 
   if (
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
index efac866391b..c97796486e1 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
@@ -1,7 +1,12 @@
 function UnknownSource({ address }: { address: string }): JSX.Element {
   return (
-    

-      
Could not locate source material for {address}.

+    

+      
Unknown Source

+      

+        We're unable to locate the source material for the contract at the
+        following address: {address}. Please consider recompiling with Truffle
+        Dashboard running if you have the compilations locally.
+      

     

   );
 }

From 6ea2853c7b28e93f06d7e62b4324677f0c42da8b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 17 Apr 2023 16:03:30 -0400
Subject: [PATCH 061/189] update background color for uknown source in dark
 mode and update breakpoint display

---
 .../dashboard/src/components/MantineGlobal.tsx     | 13 ++++++++++---
 .../composed/Debugger/Breakpoints/Breakpoint.tsx   | 14 ++++++--------
 .../Debugger/Sources/Source/SourceLine.tsx         |  4 ++--
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index a8b2180712f..b93299cf431 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -89,7 +89,10 @@ function MantineGlobal(): JSX.Element {
             ".truffle-debugger-unknown-source-container": {
               height: "100%",
               padding: 15,
-              backgroundColor: "#FFF3BF"
+              backgroundColor:
+                theme.colorScheme === "dark"
+                  ? theme.colors["truffle-beige"][9]
+                  : "#FFF3BF"
             },
             ".truffle-debugger-unknown-title": {
               fontSize: 18
@@ -154,10 +157,14 @@ function MantineGlobal(): JSX.Element {
               padding: 16,
               height: "100%"
             },
+            ".truffle-debugger-breakpoint-group": {
+              display: "flex"
+            },
             ".truffle-debugger-breakpoint-delete": {
               borderRadius: 25,
-              textAlign: "center",
-              width: 25
+              backgroundColor: "#FA5252",
+              width: 18,
+              marginRight: 16
             },
             ".truffle-debugger-breakpoint:hover": {
               cursor: "pointer"
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index 7fcd96ffc54..6ccbeb178b5 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -17,26 +17,24 @@ function Breakpoint({
   return (
     

       

-          handleBreakpointComponentClick({
+          handleBreakpointDeleteClick({
             sourceId,
             line: line.toString()
           })
         }
-      >
-        {sourceName} - line {line}
-      

+      >

       

-          handleBreakpointDeleteClick({
+          handleBreakpointComponentClick({
             sourceId,
             line: line.toString()
           })
         }
       >
-        X
+        {sourceName} - line {line}
       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 03a7753c954..dfd03d11958 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -37,9 +37,9 @@ function SourceLine({
   if (!lastLine) line += "\n";
   let lineNumberDisplay =
     `` +
-    lineNumber +
     " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
-    "| " +
+    lineNumber +
+    "  " +
     ``;
 
   if (

From 5025c931ad8ed15a26a19de0d30ad84beb4ac411 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 17 Apr 2023 16:34:46 -0400
Subject: [PATCH 062/189] reword message

---
 .../src/components/composed/Debugger/Sources/UnknownSource.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
index c97796486e1..584898778c7 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
@@ -5,7 +5,7 @@ function UnknownSource({ address }: { address: string }): JSX.Element {
       

         We're unable to locate the source material for the contract at the
         following address: {address}. Please consider recompiling with Truffle
-        Dashboard running if you have the compilations locally.
+        Dashboard running if you have the sources locally.
       

     

   );

From 0f125dee4ebe47b81fead6c6d7bddfc9934d1984 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 17 Apr 2023 16:47:14 -0400
Subject: [PATCH 063/189] set reasonable scroll amount

---
 packages/dashboard/src/components/composed/Debugger/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 7331fd92b9b..c3089765477 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -73,9 +73,8 @@ function Debugger(): JSX.Element {
       const offsetTop = targetLine.offsetTop;
       // @ts-ignore
       const scroller = document.getElementById(`source-${sourceId.slice(-10)}`);
-      const browserViewHeight = window.innerHeight;
       // @ts-ignore
-      scroller.scrollTop = offsetTop - browserViewHeight / 2;
+      scroller.scrollTop = offsetTop - 300;
     }
   };
 

From f41863a21d47512f1bf3605b04af296d6bf0b425 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 18 Apr 2023 16:17:39 -0400
Subject: [PATCH 064/189] refine breakpoint design

---
 .../src/components/MantineGlobal.tsx          | 62 +++++++++++++++----
 .../composed/Debugger/Breakpoints/index.tsx   |  2 +-
 .../Debugger/Sources/Source/SourceLine.tsx    | 15 ++---
 .../composed/Debugger/Sources/index.tsx       |  1 +
 .../components/composed/Debugger/Stack.tsx    |  6 +-
 .../composed/Debugger/Variables.tsx           |  6 +-
 .../src/components/composed/Sidebar/index.tsx |  2 +-
 .../dashboard/src/utils/debugger/session.ts   |  2 +-
 8 files changed, 69 insertions(+), 27 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index b93299cf431..343bf4795ff 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -70,7 +70,7 @@ function MantineGlobal(): JSX.Element {
               flexGrow: 1
             },
             ".truffle-debugger-content-group": {
-              height: "calc(100vh - 36px)",
+              height: "calc(100vh - 72px)",
               paddingBottom: 36,
               margin: 32,
               fontSize: 12
@@ -78,13 +78,32 @@ function MantineGlobal(): JSX.Element {
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
-            ".truffle-debugger-source-line": {
-              height: 25
+            ".source-line": {
+              height: 20,
+              marginBottom: 2,
+              display: "flex"
+            },
+            ".source-line-spacer-breakpoint": {
+              // these max's and min's are so the spacer doesn't get crushed
+              // when you resize the window
+              minHeight: 16,
+              minWidth: 16,
+              height: 16,
+              width: 16,
+              backgroundColor: "#FA5252",
+              borderRadius: 25,
+              marginRight: 5
+            },
+            ".source-line-spacer": {
+              minHeight: 16,
+              minWidth: 16,
+              height: 16,
+              width: 16,
+              marginRight: 5
             },
             ".truffle-debugger-source-container": {
               overflow: "scroll",
-              height: "100%",
-              padding: 15
+              height: "100%"
             },
             ".truffle-debugger-unknown-source-container": {
               height: "100%",
@@ -97,6 +116,10 @@ function MantineGlobal(): JSX.Element {
             ".truffle-debugger-unknown-title": {
               fontSize: 18
             },
+            ".truffle-debugger-source": {
+              paddingTop: 15,
+              paddingLeft: 15
+            },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
@@ -114,13 +137,18 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger-variables": {
               overflow: "scroll",
-              padding: 16,
               height: "100%"
             },
+            ".truffle-debugger-variables-content": {
+              paddingLeft: 10
+            },
             ".truffle-debugger-variables-types": {
               fontSize: 12,
               fontWeight: 800
             },
+            ".truffle-debugger-stack-content": {
+              paddingLeft: 10
+            },
             ".truffle-debugger-breakpoints-container": {
               overflow: "hidden",
               height: "30%",
@@ -135,14 +163,25 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger-breakpoints": {
               overflow: "scroll",
-              padding: 16,
               height: "100%"
             },
             ".truffle-debugger-section-header": {
               height: 42,
-              fontSize: 16
+              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`
             },
             ".truffle-debugger-stack-container": {
+              overflow: "hidden",
               height: "30%",
               borderWidth: 1,
               borderStyle: "solid",
@@ -154,16 +193,17 @@ function MantineGlobal(): JSX.Element {
             },
             ".truffle-debugger-stack": {
               overflow: "scroll",
-              padding: 16,
               height: "100%"
             },
             ".truffle-debugger-breakpoint-group": {
-              display: "flex"
+              display: "flex",
+              marginBottom: 5
             },
             ".truffle-debugger-breakpoint-delete": {
               borderRadius: 25,
               backgroundColor: "#FA5252",
-              width: 18,
+              width: 16,
+              height: 16,
               marginRight: 16
             },
             ".truffle-debugger-breakpoint:hover": {
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index c866d945fc8..127433032b7 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -48,8 +48,8 @@ function Breakpoints({
   }
   return (
     

+      
Breakpoints

       

-        
Breakpoints

         
{breakpointsList}

       

     

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index dfd03d11958..b360b8dc543 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -42,16 +42,13 @@ function SourceLine({
     "  " +
     ``;
 
-  if (
+  const spacerClass =
     breakpoints &&
     breakpoints[sourceId] &&
     breakpoints[sourceId].has(lineNumber)
-  ) {
-    lineNumberDisplay = lineNumberDisplay.replace(
-      `${lineNumber.toString()} `,
-      `${lineNumber}*`
-    );
-  }
+      ? "source-line-spacer-breakpoint"
+      : "source-line-spacer";
+
   const handleClick = () => {
     toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
   };
@@ -59,10 +56,10 @@ function SourceLine({
   const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
 
   return (
-    

+    

+      

       

     

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 678aa72d65b..c87048fc607 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -31,6 +31,7 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
         ? theme.colors["truffle-brown"][5]
         : theme.colors["truffle-beige"][3],
     borderStyle: "solid",
+    height: 42,
     borderTopWidth: 1,
     borderLeftWidth: 1,
     borderRightWidth: 1,
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index a7cff2b2d66..5241f4aab0f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -34,9 +34,11 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
 
   return (
     

+      
Stack

       

-        
Stack

-        
{output ? output : ""}

+        
+          {output ? output : ""}
+        

       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 64c81fac135..5579e18aefc 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -56,9 +56,11 @@ function Variables({
 
   return (
     

+      
Variables

       

-        
Variables

-        
{output ? output : ""}

+        
+          {output ? output : ""}
+        

       

     

   );
diff --git a/packages/dashboard/src/components/composed/Sidebar/index.tsx b/packages/dashboard/src/components/composed/Sidebar/index.tsx
index 95f51f02ed9..6b0e4386d64 100644
--- a/packages/dashboard/src/components/composed/Sidebar/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/index.tsx
@@ -12,7 +12,7 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     backgroundColor:
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][8]
-        : theme.colors["truffle-beige"][3]
+        : theme.colors["truffle-beige"][4]
   }
 }));
 
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/utils/debugger/session.ts
index d6e4743c4bc..c97c88c40e5 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/utils/debugger/session.ts
@@ -46,7 +46,7 @@ export async function initDebugger({
   const testTxHash = txHash
     ? txHash
     : // : "0xf5ad7387297428dd152997aab72c190954bcce692daf022bb63ab9aa5f199c33"; // cross contract goerli text tx hash (link verified)
-      "0x888e35de86e3a6484eb56136f32230fd53d0ce83c81278e7b589a828f182afb7"; // local MetaCoin deployment
+      "0x667c69bc27c0e26cf1133b954bdccd2648afcae34dbebfbf5c45e4b62a32e422"; // local MetaCoin deployment
   // "0xfb09532437064597ac2a07f62440dd45e3806d6299e4fc86da6231ab2856f021"; // cross contract goerli test tx hash (dai unverified)
   // "0x8d093f67b6501ff576f259a683ac3ac0a0adb3280b66e272ebbaf691242d99b1";
   // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx

From 785c61bfb4fb07cc47dd622856bf5212e7587540 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 19 Apr 2023 14:20:22 -0400
Subject: [PATCH 065/189] remove notification on error, text in header, and
 style header

---
 .../src/components/MantineGlobal.tsx          |  3 +
 .../composed/Debugger/Controls/index.tsx      |  9 ---
 .../components/composed/Debugger/index.tsx    | 77 +++++++------------
 3 files changed, 32 insertions(+), 57 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 343bf4795ff..5c917f54113 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -59,6 +59,9 @@ function MantineGlobal(): JSX.Element {
                   : colors["truffle-beige"][3]
             },
             ".truffle-debugger-input": {
+              paddingTop: 26,
+              paddingLeft: 32,
+              paddingRight: 32,
               display: "flex",
               backgroundColor:
                 colorScheme === "dark"
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
index 9a3f3863f5a..dbd257da254 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
@@ -25,14 +25,6 @@ function Controls({ session, stepEffect }: ControlsProps): JSX.Element {
   const atEnd = session?.view($.trace.finished);
   const disabled = atEnd || !session;
 
-  const status = stepping
-    ? "stepping..."
-    : atStart
-    ? "transaction start"
-    : atEnd
-    ? "transaction end"
-    : "transaction in progress";
-
   const controlButtonProps = {
     stepEffect,
     stepping,
@@ -83,7 +75,6 @@ function Controls({ session, stepEffect }: ControlsProps): JSX.Element {
         step={() => session.reset()}
         disabled={atStart}
       />
-      {status}
     
   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index c3089765477..166487f059c 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Input, Button, Notification, Header, Grid } from "@mantine/core";
+import { Input, Button, Header, Grid } from "@mantine/core";
 import { useInputState, useCounter } from "@mantine/hooks";
 import Controls from "src/components/composed/Debugger/Controls";
 import Sources from "src/components/composed/Debugger/Sources";
@@ -25,7 +25,6 @@ function Debugger(): JSX.Element {
     }
   } = useDash()!;
 
-  const [error, setError] = useState(null);
   const [status, setStatus] = useState();
 
   // keep track of addresses for which we can't obtain source material
@@ -173,16 +172,12 @@ function Debugger(): JSX.Element {
   }
 
   const onButtonClick = async () => {
-    try {
-      await initDebugger({
-        chainOptions: {},
-        operations,
-        setUnknownAddresses,
-        setStatus
-      });
-    } catch (err: any) {
-      setError(err);
-    }
+    await initDebugger({
+      chainOptions: {},
+      operations,
+      setUnknownAddresses,
+      setStatus
+    });
   };
 
   // tx simulation - forks, runs the tx, and opens the debugger to step through
@@ -197,42 +192,28 @@ function Debugger(): JSX.Element {
     }
   }, [txToRun]);
 
-  if (error) {
-    return (
-      

-        
-          An error occurred while initializing the debugger.
-          {`Error: ${error.message}`}
-        
-      

-    );
-  } else {
-    return (
-      

-        

-          
-          

-            
-            {txToRun ? null : (
-              
-            )}
-          

-        

-        {content}
-      

-    );
-  }
+  return (
+    

+      

+        
+        

+          
+          {txToRun ? null : (
+            
+          )}
+        

+      

+      {content}
+    

+  );
 }
 
 export default Debugger;

From fc997f40bcdae493ad97bdffd280574a1a041c65 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 19 Apr 2023 14:50:26 -0400
Subject: [PATCH 066/189] move some css into component and tweak input stuff

---
 .../src/components/MantineGlobal.tsx          | 27 ++++--------
 .../Debugger/Controls/ControlButton.tsx       |  2 +
 .../composed/Debugger/Controls/index.tsx      |  2 +-
 .../components/composed/Debugger/index.tsx    | 42 ++++++++++++++++---
 4 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 5c917f54113..5842ddf26b5 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -50,28 +50,17 @@ function MantineGlobal(): JSX.Element {
               backgroundColor:
                 colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
             },
-            ".truffle-debugger": {
-              height: "100vh",
-              overflowY: "hidden",
-              backgroundColor:
-                colorScheme === "dark"
-                  ? colors["truffle-brown"][8]
-                  : colors["truffle-beige"][3]
-            },
-            ".truffle-debugger-input": {
-              paddingTop: 26,
-              paddingLeft: 32,
-              paddingRight: 32,
-              display: "flex",
-              backgroundColor:
-                colorScheme === "dark"
-                  ? colors["truffle-brown"][8]
-                  : colors["truffle-beige"][3]
-            },
-            ".truffle-debugger-input-group": {
+
+            ".truffle-debugger-input-and-button": {
               display: "flex",
               flexGrow: 1
             },
+            ".truffle-debugger-input-and-button > div > input": {
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+              border: 0,
+              height: 42
+            },
             ".truffle-debugger-content-group": {
               height: "calc(100vh - 72px)",
               paddingBottom: 36,
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
index 7007dce4e85..aa84e40354a 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
@@ -22,6 +22,8 @@ function ControlButton({
 }: ControlButtonProps): JSX.Element {
   const useStyles = createStyles(theme => ({
     button: {
+      height: 42,
+      width: 42,
       backgroundColor:
         theme.colorScheme === "dark"
           ? theme.colors["truffle-brown"][5]
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
index dbd257da254..9e52294a77d 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
@@ -32,7 +32,7 @@ function Controls({ session, stepEffect }: ControlsProps): JSX.Element {
   };
 
   return (
-    
+    
        ({
+    debugger: {
+      height: "100vh",
+      overflowY: "hidden",
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors["truffle-brown"][8]
+          : theme.colors["truffle-beige"][3]
+    },
+    inputGroup: {
+      paddingTop: 26,
+      paddingLeft: 32,
+      paddingRight: 32,
+      display: "flex",
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors["truffle-brown"][8]
+          : theme.colors["truffle-beige"][3]
+    }
+  }));
+  const { classes } = useStyles();
   const [inputValue, setInputValue] = useInputState("");
   const [sessionUpdated, { increment: sessionTick }] = useCounter();
   const {
@@ -192,12 +213,19 @@ function Debugger(): JSX.Element {
     }
   }, [txToRun]);
 
+  const buttonStyles = {
+    height: "42px",
+    borderTopLeftRadius: "0px",
+    borderBottomLeftRadius: "0px"
+  };
+
   return (
-    

-      

+    

+      

         
-        

+        

           
           {txToRun ? null : (
-            
           )}

From ca84e66ee1a0cf3563e3c48b4c1124d910557276 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 19 Apr 2023 15:42:17 -0400
Subject: [PATCH 067/189] continue moving css to component files

more
---
 .../src/components/MantineGlobal.tsx          | 121 +-----------------
 .../Debugger/Breakpoints/Breakpoint.tsx       |  31 ++++-
 .../composed/Debugger/Breakpoints/index.tsx   |  42 +++++-
 .../Debugger/Sources/Source/SourceLine.tsx    |  35 ++++-
 .../Debugger/Sources/Source/index.tsx         |  20 ++-
 .../Debugger/Sources/UnknownSource.tsx        |  23 +++-
 .../components/composed/Debugger/Stack.tsx    |  48 ++++++-
 .../composed/Debugger/Variables.tsx           |  55 +++++++-
 .../components/composed/Debugger/index.tsx    |  49 ++++---
 9 files changed, 253 insertions(+), 171 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 5842ddf26b5..d66ef3703a9 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -61,132 +61,13 @@ function MantineGlobal(): JSX.Element {
               border: 0,
               height: 42
             },
-            ".truffle-debugger-content-group": {
-              height: "calc(100vh - 72px)",
-              paddingBottom: 36,
-              margin: 32,
-              fontSize: 12
-            },
+
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
-            ".source-line": {
-              height: 20,
-              marginBottom: 2,
-              display: "flex"
-            },
-            ".source-line-spacer-breakpoint": {
-              // these max's and min's are so the spacer doesn't get crushed
-              // when you resize the window
-              minHeight: 16,
-              minWidth: 16,
-              height: 16,
-              width: 16,
-              backgroundColor: "#FA5252",
-              borderRadius: 25,
-              marginRight: 5
-            },
-            ".source-line-spacer": {
-              minHeight: 16,
-              minWidth: 16,
-              height: 16,
-              width: 16,
-              marginRight: 5
-            },
-            ".truffle-debugger-source-container": {
-              overflow: "scroll",
-              height: "100%"
-            },
-            ".truffle-debugger-unknown-source-container": {
-              height: "100%",
-              padding: 15,
-              backgroundColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors["truffle-beige"][9]
-                  : "#FFF3BF"
-            },
-            ".truffle-debugger-unknown-title": {
-              fontSize: 18
-            },
-            ".truffle-debugger-source": {
-              paddingTop: 15,
-              paddingLeft: 15
-            },
             ".truffle-debugger-source:hover": {
               cursor: "pointer"
             },
-            ".truffle-debugger-variables-container": {
-              overflow: "hidden",
-              height: "40%",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderRadius: 4,
-              marginBottom: 20,
-              borderColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors["truffle-brown"][5]
-                  : `${theme.colors["truffle-beige"][5]}73`
-            },
-            ".truffle-debugger-variables": {
-              overflow: "scroll",
-              height: "100%"
-            },
-            ".truffle-debugger-variables-content": {
-              paddingLeft: 10
-            },
-            ".truffle-debugger-variables-types": {
-              fontSize: 12,
-              fontWeight: 800
-            },
-            ".truffle-debugger-stack-content": {
-              paddingLeft: 10
-            },
-            ".truffle-debugger-breakpoints-container": {
-              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`
-            },
-            ".truffle-debugger-breakpoints": {
-              overflow: "scroll",
-              height: "100%"
-            },
-            ".truffle-debugger-section-header": {
-              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`
-            },
-            ".truffle-debugger-stack-container": {
-              overflow: "hidden",
-              height: "30%",
-              borderWidth: 1,
-              borderStyle: "solid",
-              borderRadius: 4,
-              borderColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors["truffle-brown"][5]
-                  : `${theme.colors["truffle-beige"][5]}73`
-            },
-            ".truffle-debugger-stack": {
-              overflow: "scroll",
-              height: "100%"
-            },
             ".truffle-debugger-breakpoint-group": {
               display: "flex",
               marginBottom: 5
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index 6ccbeb178b5..98a2dac2913 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -1,4 +1,28 @@
 import type { BreakpointType } from "src/utils/debugger";
+import { createStyles } from "@mantine/core";
+
+const useStyles = createStyles(() => ({
+  breakpointGroup: {
+    display: "flex",
+    marginBottom: 5
+  },
+  breakpointDelete: {
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "borderRadius": 25,
+    "backgroundColor": "#FA5252",
+    "width": 16,
+    "height": 16,
+    "marginRight": 16
+  },
+  breakpoint: {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+}));
+
 type BreakpointProps = {
   sourceName: string;
   line: number;
@@ -14,10 +38,11 @@ function Breakpoint({
   handleBreakpointComponentClick,
   handleBreakpointDeleteClick
 }: BreakpointProps): JSX.Element | null {
+  const { classes } = useStyles();
   return (
-    

+    

       

           handleBreakpointDeleteClick({
             sourceId,
@@ -26,7 +51,7 @@ function Breakpoint({
         }
       >

       

           handleBreakpointComponentClick({
             sourceId,
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index 127433032b7..35d25be9b9e 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -3,6 +3,41 @@ import { useDash } from "src/hooks";
 import * as path from "path";
 import { BreakpointType } from "src/utils/debugger";
 import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint";
+import { 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%"
+  }
+}));
 
 type BreakpointsArgs = {
   sources: Source[];
@@ -15,6 +50,7 @@ function Breakpoints({
   handleBreakpointComponentClick,
   handleBreakpointDeleteClick
 }: BreakpointsArgs): JSX.Element | null {
+  const { classes } = useStyles();
   const {
     state: {
       debugger: { breakpoints }
@@ -47,9 +83,9 @@ function Breakpoints({
     }
   }
   return (
-    

-      
Breakpoints

-      

+    

+      
Breakpoints

+      

         
{breakpointsList}

       

     

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index b360b8dc543..824b3f86f50 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -7,6 +7,27 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
   },
   selected: {
     backgroundColor: theme.colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
+  },
+  sourceLine: {
+    height: 20,
+    marginBottom: 2,
+    display: "flex"
+  },
+  spacer: {
+    minHeight: 16,
+    minWidth: 16,
+    height: 16,
+    width: 16,
+    marginRight: 5
+  },
+  breakpointSpacer: {
+    minHeight: 16,
+    minWidth: 16,
+    height: 16,
+    width: 16,
+    backgroundColor: "#FA5252",
+    borderRadius: 25,
+    marginRight: 5
   }
 }));
 
@@ -42,12 +63,14 @@ function SourceLine({
     "  " +
     ``;
 
-  const spacerClass =
+  const spacer =
     breakpoints &&
     breakpoints[sourceId] &&
-    breakpoints[sourceId].has(lineNumber)
-      ? "source-line-spacer-breakpoint"
-      : "source-line-spacer";
+    breakpoints[sourceId].has(lineNumber) ? (
+      

+    ) : (
+      

+    );
 
   const handleClick = () => {
     toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
@@ -56,8 +79,8 @@ function SourceLine({
   const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
 
   return (
-    

-      

+    

+      {spacer}
       
 ({
+  sourceContainer: {
+    overflow: "scroll",
+    height: "100%"
+  },
+  source: {
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "paddingTop": 15,
+    "paddingLeft": 15
+  }
+}));
 
 interface SourceProps {
   source: SourceType;
@@ -8,16 +23,17 @@ interface SourceProps {
 }
 
 function Source({ source, sourceRange }: SourceProps): JSX.Element {
+  const { classes } = useStyles();
   const sourceLines = convertSourceToHtml({ source, sourceRange });
 
   const { start, end } = sourceRange;
   const lineNumberGutterWidth = sourceLines.length.toString().length;
   return (
     

-      
+      
         {sourceLines.map((line: string, index: number) => {
           const key = `${source.id}-line-${index}`;
           const selected =
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
index 584898778c7..802b0c7f4fb 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/UnknownSource.tsx
@@ -1,8 +1,25 @@
+import { createStyles } from "@mantine/core";
+
+const useStyles = createStyles(theme => ({
+  unknownSourceContainer: {
+    height: "100%",
+    padding: 15,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-beige"][9]
+        : "#FFF3BF"
+  },
+  unknownSourceTitle: {
+    fontSize: 18
+  }
+}));
+
 function UnknownSource({ address }: { address: string }): JSX.Element {
+  const { classes } = useStyles();
   return (
-    

-      
Unknown Source

-      

+    

+      
Unknown Source

+      

         We're unable to locate the source material for the contract at the
         following address: {address}. Please consider recompiling with Truffle
         Dashboard running if you have the sources locally.
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 5241f4aab0f..752e9c9f2c4 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -1,5 +1,42 @@
 import { useEffect, useState } from "react";
 import type { Session } from "src/utils/debugger";
+import { createStyles } from "@mantine/core";
+
+const useStyles = createStyles(theme => ({
+  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`
+  },
+  stackContainer: {
+    overflow: "hidden",
+    height: "30%",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: 4,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : `${theme.colors["truffle-beige"][5]}73`
+  },
+  stack: {
+    overflow: "scroll",
+    height: "100%"
+  },
+  stackContent: {
+    paddingLeft: 10
+  }
+}));
 
 type StackArgs = {
   session: Session;
@@ -7,6 +44,7 @@ type StackArgs = {
 };
 
 function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
+  const { classes } = useStyles();
   const [output, setOutput] = useState(null);
   // when the debugger step changes, update variables
   useEffect(() => {
@@ -33,12 +71,10 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
   }, [currentStep, session]);
 
   return (
-    

-      
Stack

-      

-        
-          {output ? output : ""}
-        

+    

+      
Stack

+      

+        
{output ? output : ""}

       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 5579e18aefc..6ff9d57baeb 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -2,6 +2,48 @@ import { useEffect, useState } from "react";
 import type { Session } from "src/utils/debugger";
 import inspect from "browser-util-inspect";
 import * as Codec from "@truffle/codec";
+import { createStyles } from "@mantine/core";
+
+const useStyles = createStyles(theme => ({
+  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`
+  },
+  variablesContainer: {
+    overflow: "hidden",
+    height: "40%",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: 4,
+    marginBottom: 20,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : `${theme.colors["truffle-beige"][5]}73`
+  },
+  variables: {
+    overflow: "scroll",
+    height: "100%"
+  },
+  variablesContent: {
+    paddingLeft: 10
+  },
+  variablesTypes: {
+    fontSize: 12,
+    fontWeight: 800
+  }
+}));
 
 type VariablesArgs = {
   session: Session;
@@ -12,6 +54,7 @@ function Variables({
   session,
   currentStep
 }: VariablesArgs): JSX.Element | null {
+  const { classes } = useStyles();
   const [output, setOutput] = useState(null);
   // when the debugger step changes, update variables
   useEffect(() => {
@@ -42,7 +85,7 @@ function Variables({
         if (variableValues.length > 0) {
           entries.push(
             

-              
{section}

+              
{section}

               {...variableValues}
             

           );
@@ -55,12 +98,10 @@ function Variables({
   }, [currentStep, session]);
 
   return (
-    

-      
Variables

-      

-        
-          {output ? output : ""}
-        

+    

+      
Variables

+      

+        
{output ? output : ""}

       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index f4662abe550..6cd1994a588 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -15,27 +15,34 @@ import { useDash } from "src/hooks";
 import { getCurrentSourceRange } from "src/utils/debugger";
 import type { BreakpointType, SourceRange } from "src/utils/debugger";
 
+const useStyles = createStyles(theme => ({
+  debugger: {
+    height: "100vh",
+    overflowY: "hidden",
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][8]
+        : theme.colors["truffle-beige"][3]
+  },
+  inputGroup: {
+    paddingTop: 26,
+    paddingLeft: 32,
+    paddingRight: 32,
+    display: "flex",
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][8]
+        : theme.colors["truffle-beige"][3]
+  },
+  mainContent: {
+    height: "calc(100vh - 108px)",
+    paddingBottom: 36,
+    margin: 32,
+    fontSize: 12
+  }
+}));
+
 function Debugger(): JSX.Element {
-  const useStyles = createStyles(theme => ({
-    debugger: {
-      height: "100vh",
-      overflowY: "hidden",
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors["truffle-brown"][8]
-          : theme.colors["truffle-beige"][3]
-    },
-    inputGroup: {
-      paddingTop: 26,
-      paddingLeft: 32,
-      paddingRight: 32,
-      display: "flex",
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors["truffle-brown"][8]
-          : theme.colors["truffle-beige"][3]
-    }
-  }));
   const { classes } = useStyles();
   const [inputValue, setInputValue] = useInputState("");
   const [sessionUpdated, { increment: sessionTick }] = useCounter();
@@ -156,7 +163,7 @@ function Debugger(): JSX.Element {
   let content;
   if (session && sources && isSourceRange(currentSourceRange)) {
     content = (
-      

+      

         
Date: Thu, 20 Apr 2023 17:06:30 -0400
Subject: [PATCH 068/189] move all debugger logic into the Debugger folder

---
 .../Debugger/Breakpoints/Breakpoint.tsx       |  2 +-
 .../composed/Debugger/Breakpoints/index.tsx   |  4 ++--
 .../composed/Debugger/Controls/index.tsx      |  2 +-
 .../Debugger/Sources/Source/index.tsx         |  7 +++++--
 .../composed/Debugger/Sources/index.tsx       |  2 +-
 .../components/composed/Debugger/Stack.tsx    |  2 +-
 .../composed/Debugger/Variables.tsx           |  2 +-
 .../components/composed/Debugger/index.tsx    |  9 ++++++---
 .../composed/Debugger/utils/index.ts          |  4 ++++
 .../composed/Debugger/utils}/session.ts       |  4 ++--
 .../composed/Debugger/utils}/source.ts        |  6 +++++-
 .../composed/Debugger/utils}/status.ts        |  0
 .../composed/Debugger/utils}/types.ts         |  0
 .../src/contexts/DashContext/types/Action.ts  |  2 +-
 .../src/contexts/DashContext/types/State.ts   |  2 +-
 .../dashboard/src/utils/debugger/index.ts     |  4 ----
 yarn.lock                                     | 20 -------------------
 17 files changed, 31 insertions(+), 41 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/utils/index.ts
 rename packages/dashboard/src/{utils/debugger => components/composed/Debugger/utils}/session.ts (97%)
 rename packages/dashboard/src/{utils/debugger => components/composed/Debugger/utils}/source.ts (98%)
 rename packages/dashboard/src/{utils/debugger => components/composed/Debugger/utils}/status.ts (100%)
 rename packages/dashboard/src/{utils/debugger => components/composed/Debugger/utils}/types.ts (100%)
 delete mode 100644 packages/dashboard/src/utils/debugger/index.ts

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index 98a2dac2913..166779368e6 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -1,4 +1,4 @@
-import type { BreakpointType } from "src/utils/debugger";
+import type { BreakpointType } from "src/components/composed/Debugger/utils";
 import { createStyles } from "@mantine/core";
 
 const useStyles = createStyles(() => ({
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index 35d25be9b9e..e458164b800 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -1,7 +1,7 @@
-import { Source } from "src/utils/debugger";
+import { Source } from "src/components/composed/Debugger/utils";
 import { useDash } from "src/hooks";
 import * as path from "path";
-import { BreakpointType } from "src/utils/debugger";
+import { BreakpointType } from "src/components/composed/Debugger/utils";
 import Breakpoint from "src/components/composed/Debugger/Breakpoints/Breakpoint";
 import { createStyles } from "@mantine/core";
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
index 9e52294a77d..153fe9aeae1 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
@@ -10,7 +10,7 @@ import {
 import { Group } from "@mantine/core";
 import { selectors as $ } from "@truffle/debugger";
 import ControlButton from "src/components/composed/Debugger/Controls/ControlButton";
-import type { Session } from "src/utils/debugger";
+import type { Session } from "src/components/composed/Debugger/utils";
 
 interface ControlsProps {
   session: Session | null;
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index f968e5e0342..77e172358e4 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -1,6 +1,9 @@
 import SourceLine from "src/components/composed/Debugger/Sources/Source/SourceLine";
-import type { Source as SourceType, SourceRange } from "src/utils/debugger";
-import { convertSourceToHtml } from "src/utils/debugger";
+import type {
+  Source as SourceType,
+  SourceRange
+} from "src/components/composed/Debugger/utils";
+import { convertSourceToHtml } from "src/components/composed/Debugger/utils";
 import { createStyles } from "@mantine/core";
 
 const useStyles = createStyles(() => ({
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index c87048fc607..c96f8329cc6 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -7,7 +7,7 @@ import type {
   SourceRange,
   Session,
   Source as SourceType
-} from "src/utils/debugger";
+} from "src/components/composed/Debugger/utils";
 
 const useStyles = createStyles((theme, _params, _getRef) => ({
   maxHeight: {
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 752e9c9f2c4..0e64c90adab 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { Session } from "src/utils/debugger";
+import type { Session } from "src/components/composed/Debugger/utils";
 import { createStyles } from "@mantine/core";
 
 const useStyles = createStyles(theme => ({
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 6ff9d57baeb..cb959d86565 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import type { Session } from "src/utils/debugger";
+import type { Session } from "src/components/composed/Debugger/utils";
 import inspect from "browser-util-inspect";
 import * as Codec from "@truffle/codec";
 import { createStyles } from "@mantine/core";
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 6cd1994a588..929ec99d194 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -10,10 +10,13 @@ import {
   forkNetworkWithTxAndInitDebugger,
   initDebugger,
   SessionStatus
-} from "src/utils/debugger";
+} from "src/components/composed/Debugger/utils";
 import { useDash } from "src/hooks";
-import { getCurrentSourceRange } from "src/utils/debugger";
-import type { BreakpointType, SourceRange } from "src/utils/debugger";
+import { getCurrentSourceRange } from "src/components/composed/Debugger/utils";
+import type {
+  BreakpointType,
+  SourceRange
+} from "src/components/composed/Debugger/utils";
 
 const useStyles = createStyles(theme => ({
   debugger: {
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/index.ts b/packages/dashboard/src/components/composed/Debugger/utils/index.ts
new file mode 100644
index 00000000000..4edb7886486
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/utils/index.ts
@@ -0,0 +1,4 @@
+export * from "src/components/composed/Debugger/utils/session";
+export * from "src/components/composed/Debugger/utils/source";
+export * from "src/components/composed/Debugger/utils/status";
+export * from "src/components/composed/Debugger/utils/types";
diff --git a/packages/dashboard/src/utils/debugger/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
similarity index 97%
rename from packages/dashboard/src/utils/debugger/session.ts
rename to packages/dashboard/src/components/composed/Debugger/utils/session.ts
index c97c88c40e5..fcbe540c258 100644
--- a/packages/dashboard/src/utils/debugger/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -1,8 +1,8 @@
 import { forTx } from "@truffle/debugger";
 import { provider as ganacheProvider } from "ganache";
 import * as Codec from "@truffle/codec";
-import type { Session, Source } from "src/utils/debugger";
-import { SessionStatus } from "src/utils/debugger";
+import type { Session, Source } from "src/components/composed/Debugger/utils";
+import { SessionStatus } from "src/components/composed/Debugger/utils";
 import type { Compilation } from "@truffle/compile-common";
 import { getTransactionSourcesBeforeStarting } from "@truffle/debug-utils";
 
diff --git a/packages/dashboard/src/utils/debugger/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source.ts
similarity index 98%
rename from packages/dashboard/src/utils/debugger/source.ts
rename to packages/dashboard/src/components/composed/Debugger/utils/source.ts
index 44c70a623e2..37975649410 100644
--- a/packages/dashboard/src/utils/debugger/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source.ts
@@ -3,7 +3,11 @@ import rehypeStringify from "rehype-stringify";
 import { lowlight } from "lowlight/lib/core";
 import { solidity } from "highlightjs-solidity";
 import { selectors as $ } from "@truffle/debugger";
-import type { Session, Source, SourceRange } from "src/utils/debugger";
+import type {
+  Session,
+  Source,
+  SourceRange
+} from "src/components/composed/Debugger/utils";
 
 export function convertSourceToHtml({
   source,
diff --git a/packages/dashboard/src/utils/debugger/status.ts b/packages/dashboard/src/components/composed/Debugger/utils/status.ts
similarity index 100%
rename from packages/dashboard/src/utils/debugger/status.ts
rename to packages/dashboard/src/components/composed/Debugger/utils/status.ts
diff --git a/packages/dashboard/src/utils/debugger/types.ts b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
similarity index 100%
rename from packages/dashboard/src/utils/debugger/types.ts
rename to packages/dashboard/src/components/composed/Debugger/utils/types.ts
diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts
index 95d764d4020..0004cc17c62 100644
--- a/packages/dashboard/src/contexts/DashContext/types/Action.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts
@@ -4,7 +4,7 @@ import type {
   DashboardProviderMessage
 } from "@truffle/dashboard-message-bus-common";
 import type { State } from "src/contexts/DashContext/types";
-import type { Source, Session } from "src/utils/debugger";
+import type { Source, Session } from "src/components/composed/Debugger/utils";
 
 export type ActionType =
   | "set-decoder"
diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts
index 8a0a9344685..bdbe5859f61 100644
--- a/packages/dashboard/src/contexts/DashContext/types/State.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/State.ts
@@ -7,7 +7,7 @@ import type {
 import type { DashboardProviderMessage } from "@truffle/dashboard-message-bus-common";
 import type { Schema } from "src/contexts/DashContext";
 import type { NoticeContent } from "src/components/composed/Notice/content/types";
-import type { Source, Session } from "src/utils/debugger";
+import type { Source, Session } from "src/components/composed/Debugger/utils";
 
 type BreakpointState = {
   [sourceId: string]: Set;
diff --git a/packages/dashboard/src/utils/debugger/index.ts b/packages/dashboard/src/utils/debugger/index.ts
deleted file mode 100644
index cdf53379096..00000000000
--- a/packages/dashboard/src/utils/debugger/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "src/utils/debugger/session";
-export * from "src/utils/debugger/source";
-export * from "src/utils/debugger/status";
-export * from "src/utils/debugger/types";
diff --git a/yarn.lock b/yarn.lock
index 16ea334e751..4a59fae54b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15069,26 +15069,6 @@ ganache@^7.7.3:
     bufferutil "4.0.5"
     utf-8-validate "5.0.7"
 
-ganache@^7.7.3:
-  version "7.7.3"
-  resolved "https://registry.yarnpkg.com/ganache/-/ganache-7.7.3.tgz#c36f982166239a3cf8ae040942c08a4ba6e62dc3"
-  integrity sha512-dZTUHjzSuvDTMUpKaBTWJnpcWpsBUtqciA8ttdmC/r/XRXJhDa0EpypisYULhoV8tx76G08mOuM/B1vhPbh20A==
-  dependencies:
-    "@trufflesuite/bigint-buffer" "1.1.10"
-    "@types/bn.js" "^5.1.0"
-    "@types/lru-cache" "5.1.1"
-    "@types/seedrandom" "3.0.1"
-    abstract-level "1.0.3"
-    abstract-leveldown "7.2.0"
-    async-eventemitter "0.2.4"
-    emittery "0.10.0"
-    keccak "3.0.2"
-    leveldown "6.1.0"
-    secp256k1 "4.0.3"
-  optionalDependencies:
-    bufferutil "4.0.5"
-    utf-8-validate "5.0.7"
-
 gauge@^4.0.3:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"

From fbadf0b170fcd34a64c83aa8da9226fbe34a1131 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 21 Apr 2023 11:09:51 -0400
Subject: [PATCH 069/189] add padding to breakpoints and tweak border radius
 for sources

---
 .../src/components/composed/Debugger/Breakpoints/index.tsx   | 5 ++++-
 .../src/components/composed/Debugger/Sources/index.tsx       | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index e458164b800..0958ba41917 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -36,6 +36,9 @@ const useStyles = createStyles(theme => ({
   breakpoints: {
     overflow: "scroll",
     height: "100%"
+  },
+  breakpointsContent: {
+    paddingLeft: 10
   }
 }));
 
@@ -86,7 +89,7 @@ function Breakpoints({
     

       
Breakpoints

       

-        
{breakpointsList}

+        
{breakpointsList}

       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index c96f8329cc6..716b254d653 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -17,8 +17,8 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     height: "100%",
     overflow: "hidden",
     borderStyle: "solid",
+    borderRadius: "0px 0px 4px 4px",
     borderWidth: 1,
-    borderRadius: 4,
     borderColor:
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][3]

From e5bd0172b6af77bcafbb5861226be490ee3762b9 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 21 Apr 2023 12:04:25 -0400
Subject: [PATCH 070/189] add component for displaying preparation progress

---
 .../composed/Debugger/PreparingSession.tsx    | 26 +++++++++++++++++++
 .../components/composed/Debugger/index.tsx    |  9 ++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
new file mode 100644
index 00000000000..fa592efc2ae
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -0,0 +1,26 @@
+import { createStyles, Flex } from "@mantine/core";
+
+const useStyles = createStyles(() => ({
+  title: {
+    fontSize: 18
+  }
+}));
+
+function PreparingSession(): JSX.Element {
+  const { classes } = useStyles();
+  return (
+    
+      

+        
Preparing debugger session...

+        
some other content

+      

+    
+  );
+}
+
+export default PreparingSession;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 929ec99d194..1383274c2f9 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -6,6 +6,7 @@ import Sources from "src/components/composed/Debugger/Sources";
 import Variables from "src/components/composed/Debugger/Variables";
 import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import Stack from "src/components/composed/Debugger/Stack";
+import PreparingSession from "src/components/composed/Debugger/PreparingSession";
 import {
   forkNetworkWithTxAndInitDebugger,
   initDebugger,
@@ -253,7 +254,13 @@ function Debugger(): JSX.Element {
           )}
         

       

-      {content}
+      {status === SessionStatus.Initializing ||
+      status === SessionStatus.Fetching ||
+      status === SessionStatus.Starting ? (
+        
+      ) : (
+        content
+      )}
     

   );
 }

From 949318ee34ab8d360ff9828eab541bc5f3ba44f4 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 21 Apr 2023 16:15:05 -0400
Subject: [PATCH 071/189] keep unknown addresses in the global state

---
 .../composed/Debugger/PreparingSession.tsx    |  2 +-
 .../composed/Debugger/Sources/index.tsx       | 35 ++++++++++++-------
 .../components/composed/Debugger/index.tsx    |  8 ++---
 .../composed/Debugger/utils/session.ts        |  7 ++--
 .../composed/Debugger/utils/types.ts          |  2 ++
 .../src/contexts/DashContext/DashProvider.tsx |  2 ++
 .../src/contexts/DashContext/state.ts         |  7 ++--
 .../src/contexts/DashContext/types/Action.ts  |  9 +++--
 .../src/contexts/DashContext/types/State.ts   |  7 +++-
 9 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index fa592efc2ae..7cbd75e158c 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -16,7 +16,7 @@ function PreparingSession(): JSX.Element {
       style={{ height: "calc(100vh - 108px)" }}
     >
       

-        
Preparing debugger session...

+        
Preparing your debugger session...

         
some other content

       

     
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 716b254d653..ce70cbf26a4 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -6,7 +6,8 @@ import UnknownSource from "src/components/composed/Debugger/Sources/UnknownSourc
 import type {
   SourceRange,
   Session,
-  Source as SourceType
+  Source as SourceType,
+  UnknownAddress
 } from "src/components/composed/Debugger/utils";
 
 const useStyles = createStyles((theme, _params, _getRef) => ({
@@ -48,7 +49,7 @@ interface SourcesProps {
   sessionUpdated: any;
   sources: SourceType[];
   currentSourceRange: SourceRange;
-  unknownAddresses: string[];
+  unknownAddresses: UnknownAddress[] | null;
   currentSourceId: string | null;
   setCurrentSourceId: (sourceId: string) => void;
 }
@@ -93,6 +94,8 @@ function Sources({
     setCurrentSourceId
   ]);
 
+  const unknownSourcesExist = unknownAddresses && unknownAddresses.length > 0;
+
   let sourcesContent, unknownSourcesContent;
   if (currentSourceId !== null) {
     sourcesContent = sources.map((source: SourceType) => (
@@ -104,11 +107,17 @@ function Sources({
         
       
     ));
-    unknownSourcesContent = unknownAddresses.map((address: string) => (
-      
-        
-      
-    ));
+    unknownSourcesContent = !unknownSourcesExist
+      ? []
+      : unknownAddresses!.map((address: string) => (
+          
+            
+          
+        ));
   }
 
   return (
@@ -123,11 +132,13 @@ function Sources({
             {basename(source.sourcePath)}
           
         ))}
-        {unknownAddresses.map((address: string) => (
-          
-            Unknown Contract
-          
-        ))}
+        {!unknownSourcesExist
+          ? null
+          : unknownAddresses!.map((address: string) => (
+              
+                Unknown Contract
+              
+            ))}
       
       

         {sourcesContent}
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 1383274c2f9..73c4ac5b5c8 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -53,15 +53,13 @@ function Debugger(): JSX.Element {
   const {
     operations,
     state: {
-      debugger: { sources, session, txToRun }
+      debugger: { sources, unknownAddresses, session, txToRun }
     }
   } = useDash()!;
 
+  const [loggingOutput, setLoggingOutput] = useState("");
   const [status, setStatus] = useState();
 
-  // keep track of addresses for which we can't obtain source material
-  const [unknownAddresses, setUnknownAddresses] = useState([]);
-
   // goToBreakpoint stores breakpoint info when a user clicks on one
   // so we can jump to it in Sources
   const [goToBreakpoint, setGoToBreakpoint] = useState(
@@ -207,7 +205,6 @@ function Debugger(): JSX.Element {
     await initDebugger({
       chainOptions: {},
       operations,
-      setUnknownAddresses,
       setStatus
     });
   };
@@ -218,7 +215,6 @@ function Debugger(): JSX.Element {
       forkNetworkWithTxAndInitDebugger({
         tx: txToRun,
         operations,
-        setUnknownAddresses,
         setStatus
       });
     }
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index fcbe540c258..4799997ee1f 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -38,7 +38,6 @@ export async function forkNetworkWithTxAndInitDebugger({
 export async function initDebugger({
   chainOptions: { unlockedAccounts, provider },
   operations,
-  setUnknownAddresses,
   setStatus,
   txHash
 }: any) {
@@ -73,10 +72,7 @@ export async function initDebugger({
       onReady: () => setStatus(SessionStatus.Ready)
     }
   });
-  if (unknownAddresses.length > 0) {
-    setUnknownAddresses(unknownAddresses);
-  }
-  operations.setDebuggerSessionData({ sources, session });
+  operations.setDebuggerSessionData({ sources, unknownAddresses, session });
 }
 
 type SetupSessionArgs = {
@@ -124,6 +120,7 @@ export async function setupSession({
   // @ts-ignore
   window.bugger = session;
   callbacks?.onReady?.();
+
   return { session, sources, unknownAddresses };
 }
 
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/types.ts b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
index 5630ff7abf9..ee6c6debb4e 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/types.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
@@ -7,6 +7,8 @@ export type BreakpointType = {
   line: string;
 };
 
+export type UnknownAddress = string;
+
 export interface Source {
   id: string;
   sourcePath: string;
diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index 397edda72cc..5e10f80e222 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -314,6 +314,7 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
       return await dbHelper.getAllCompilations();
     },
     setDebuggerSessionData: ({
+      unknownAddresses,
       sources,
       session
     }: SetDebuggerSessionDataArgs) => {
@@ -321,6 +322,7 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
         type: "set-debugger-session-data",
         data: {
           sources,
+          unknownAddresses,
           session
         }
       });
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index 636b1c29108..bf9a697fe46 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -38,6 +38,7 @@ export const initialState: State = {
   }),
   debugger: {
     sources: null,
+    unknownAddresses: null,
     session: null,
     txToRun: null,
     breakpoints: {}
@@ -99,8 +100,10 @@ export const reducer = (state: State, action: Action): State => {
       };
     case "set-debugger-session-data":
       const breakpointsInitialState: { [sourceId: string]: Set } = {};
-      for (const source of data.sources) {
-        breakpointsInitialState[source.id] = new Set();
+      if (data.sources !== null) {
+        for (const source of data.sources) {
+          breakpointsInitialState[source.id] = new Set();
+        }
       }
       return {
         ...state,
diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts
index 0004cc17c62..62340ffd612 100644
--- a/packages/dashboard/src/contexts/DashContext/types/Action.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts
@@ -4,7 +4,11 @@ import type {
   DashboardProviderMessage
 } from "@truffle/dashboard-message-bus-common";
 import type { State } from "src/contexts/DashContext/types";
-import type { Source, Session } from "src/components/composed/Debugger/utils";
+import type {
+  Source,
+  Session,
+  UnknownAddress
+} from "src/components/composed/Debugger/utils";
 
 export type ActionType =
   | "set-decoder"
@@ -18,7 +22,8 @@ export type ActionType =
   | "toggle-debugger-breakpoint";
 
 export type SetDebuggerSessionDataArgs = {
-  sources: Source[];
+  sources: Source[] | null;
+  unknownAddresses: UnknownAddress[] | null;
   session: Session;
 };
 
diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts
index bdbe5859f61..70cee72008c 100644
--- a/packages/dashboard/src/contexts/DashContext/types/State.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/State.ts
@@ -7,7 +7,11 @@ import type {
 import type { DashboardProviderMessage } from "@truffle/dashboard-message-bus-common";
 import type { Schema } from "src/contexts/DashContext";
 import type { NoticeContent } from "src/components/composed/Notice/content/types";
-import type { Source, Session } from "src/components/composed/Debugger/utils";
+import type {
+  Source,
+  Session,
+  UnknownAddress
+} from "src/components/composed/Debugger/utils";
 
 type BreakpointState = {
   [sourceId: string]: Set;
@@ -18,6 +22,7 @@ export interface State {
   dbPromise: Promise>;
   debugger: {
     sources: Source[] | null;
+    unknownAddresses: UnknownAddress[] | null;
     session: Session | null;
     breakpoints: BreakpointState;
     txToRun: ReceivedMessageLifecycle | null;

From c858b28c4dbb11373c124aea6f024d811ae0a42b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 24 Apr 2023 11:33:27 -0400
Subject: [PATCH 072/189] tighten up some more styling and add naive
 implementation of preparing session notification

---
 .../src/components/MantineGlobal.tsx          |  4 +--
 .../composed/Debugger/Breakpoints/index.tsx   |  4 ++-
 .../composed/Debugger/PreparingSession.tsx    | 19 +++++++++++--
 .../Debugger/Sources/Source/index.tsx         |  6 +++--
 .../components/composed/Debugger/Stack.tsx    |  4 ++-
 .../composed/Debugger/Variables.tsx           |  4 ++-
 .../components/composed/Debugger/index.tsx    |  8 +++---
 .../composed/Debugger/utils/session.ts        | 27 ++++++++++++++++---
 8 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index d66ef3703a9..83a211a7343 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -126,7 +126,7 @@ function MantineGlobal(): JSX.Element {
               fontStyle: "italic"
             },
             ".hljs-keyword, .hljs-selector-tag": {
-              color: colors.pink[7],
+              color: colors.pink[8],
               fontWeight: "bold"
             },
             ".hljs-subst": {
@@ -138,7 +138,7 @@ function MantineGlobal(): JSX.Element {
                 color: colors.violet[7]
               },
             ".hljs-string, .hljs-doctag": {
-              color: colors.yellow[6]
+              color: colors.orange[4]
             },
             ".hljs-title, .hljs-section, .hljs-selector-id": {
               color: colors["truffle-teal"][8],
diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index 0958ba41917..daff33feec3 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -38,7 +38,9 @@ const useStyles = createStyles(theme => ({
     height: "100%"
   },
   breakpointsContent: {
-    paddingLeft: 10
+    paddingLeft: 10,
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 7cbd75e158c..d42cccade12 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import { createStyles, Flex } from "@mantine/core";
 
 const useStyles = createStyles(() => ({
@@ -6,8 +7,20 @@ const useStyles = createStyles(() => ({
   }
 }));
 
-function PreparingSession(): JSX.Element {
+function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
   const { classes } = useStyles();
+  const [ganacheOutput, setGanacheOutput] = useState("");
+
+  useEffect(() => {
+    if (ganacheLoggingOutput.length > 0) {
+      if (ganacheOutput.length === 0) {
+        setGanacheOutput(ganacheLoggingOutput);
+      } else {
+        setGanacheOutput(ganacheOutput + "
" + ganacheLoggingOutput);
+      }
+    }
+  }, [ganacheLoggingOutput]);
+
   return (
     
       

         
Preparing your debugger session...

-        
some other content

+        {ganacheOutput ? (
+          

+        ) : null}
       

     
   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index 77e172358e4..6df5d7b2a0e 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -6,7 +6,7 @@ import type {
 import { convertSourceToHtml } from "src/components/composed/Debugger/utils";
 import { createStyles } from "@mantine/core";
 
-const useStyles = createStyles(() => ({
+const useStyles = createStyles(theme => ({
   sourceContainer: {
     overflow: "scroll",
     height: "100%"
@@ -16,7 +16,9 @@ const useStyles = createStyles(() => ({
       cursor: "pointer"
     },
     "paddingTop": 15,
-    "paddingLeft": 15
+    "paddingLeft": 15,
+    "backgroundColor":
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 0e64c90adab..5317992917c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -34,7 +34,9 @@ const useStyles = createStyles(theme => ({
     height: "100%"
   },
   stackContent: {
-    paddingLeft: 10
+    paddingLeft: 10,
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index cb959d86565..a6be02ce988 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -37,7 +37,9 @@ const useStyles = createStyles(theme => ({
     height: "100%"
   },
   variablesContent: {
-    paddingLeft: 10
+    paddingLeft: 10,
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   },
   variablesTypes: {
     fontSize: 12,
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 73c4ac5b5c8..4ee4c151b93 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -42,7 +42,8 @@ const useStyles = createStyles(theme => ({
     height: "calc(100vh - 108px)",
     paddingBottom: 36,
     margin: 32,
-    fontSize: 12
+    fontSize: 12,
+    fontWeight: 700
   }
 }));
 
@@ -205,7 +206,8 @@ function Debugger(): JSX.Element {
     await initDebugger({
       chainOptions: {},
       operations,
-      setStatus
+      setStatus,
+      setLoggingOutput
     });
   };
 
@@ -253,7 +255,7 @@ function Debugger(): JSX.Element {
       {status === SessionStatus.Initializing ||
       status === SessionStatus.Fetching ||
       status === SessionStatus.Starting ? (
-        
+        
       ) : (
         content
       )}
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index 4799997ee1f..01f408b67a3 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -39,7 +39,8 @@ export async function initDebugger({
   chainOptions: { unlockedAccounts, provider },
   operations,
   setStatus,
-  txHash
+  txHash,
+  setLoggingOutput
 }: any) {
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
@@ -63,6 +64,7 @@ export async function initDebugger({
       unlockedAccounts,
       provider: pro
     },
+    setLoggingOutput,
     txHash: testTxHash,
     compilations,
     callbacks: {
@@ -82,6 +84,7 @@ type SetupSessionArgs = {
     unlockedAccounts: string[];
   };
   compilations: Compilation[];
+  setLoggingOutput: any;
   callbacks?: {
     onInit?: () => void;
     onFetch?: () => void;
@@ -94,6 +97,7 @@ export async function setupSession({
   txHash,
   chainOptions: { provider, unlockedAccounts },
   compilations,
+  setLoggingOutput,
   callbacks
 }: SetupSessionArgs): Promise<{
   session: Session;
@@ -102,7 +106,13 @@ export async function setupSession({
 }> {
   callbacks?.onInit?.();
   const { session, sources, networkId, unrecognizedAddresses } =
-    await createSession(txHash, provider, compilations, unlockedAccounts);
+    await createSession(
+      txHash,
+      provider,
+      compilations,
+      unlockedAccounts,
+      setLoggingOutput
+    );
 
   callbacks?.onFetch?.();
   const { unknownAddresses } = await fetchCompilationsAndAddToSession(
@@ -128,6 +138,7 @@ type ProviderOptions = {
   fork: {
     provider: any;
   };
+  logging: any;
   wallet?: {
     unlockedAccounts: string[];
   };
@@ -137,7 +148,8 @@ async function createSession(
   txHash: string,
   provider: any,
   compilations: Compilation[],
-  unlockedAccounts: string[]
+  unlockedAccounts: string[],
+  setLoggingOutput: (input: string) => void
 ): Promise<{
   session: Session;
   sources: Source[];
@@ -146,7 +158,14 @@ async function createSession(
 }> {
   let bugger;
   const providerOptions: ProviderOptions = {
-    fork: { provider }
+    fork: { provider },
+    logging: {
+      logger: {
+        log: (message: string) => {
+          setLoggingOutput(message);
+        }
+      }
+    }
   };
   if (unlockedAccounts && unlockedAccounts.length > 0) {
     providerOptions.wallet = { unlockedAccounts };

From 6314ac5aec66697dab340abc9e63287b28d807c2 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 24 Apr 2023 15:54:36 -0400
Subject: [PATCH 073/189] rearrange some code and make active source tab a
 different color

---
 .../composed/Debugger/Breakpoints/index.tsx   |  8 ++--
 .../Debugger/Sources/Source/index.tsx         |  8 ++--
 .../composed/Debugger/Sources/index.tsx       | 48 ++++++++++++++-----
 .../components/composed/Debugger/Stack.tsx    |  4 +-
 .../composed/Debugger/Variables.tsx           |  4 +-
 .../components/composed/Debugger/index.tsx    | 42 ++++++----------
 6 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
index daff33feec3..6a6b33e0d33 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/index.tsx
@@ -35,12 +35,12 @@ const useStyles = createStyles(theme => ({
   },
   breakpoints: {
     overflow: "scroll",
-    height: "100%"
-  },
-  breakpointsContent: {
-    paddingLeft: 10,
+    height: "100%",
     backgroundColor:
       theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
+  },
+  breakpointsContent: {
+    paddingLeft: 10
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index 6df5d7b2a0e..2fc9294ea2e 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -9,16 +9,16 @@ import { createStyles } from "@mantine/core";
 const useStyles = createStyles(theme => ({
   sourceContainer: {
     overflow: "scroll",
-    height: "100%"
+    height: "100%",
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   },
   source: {
     "&:hover": {
       cursor: "pointer"
     },
     "paddingTop": 15,
-    "paddingLeft": 15,
-    "backgroundColor":
-      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
+    "paddingLeft": 15
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index ce70cbf26a4..2d8b0b02b38 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -25,7 +25,7 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
         ? theme.colors["truffle-brown"][3]
         : `${theme.colors["truffle-beige"][5]}73`
   },
-  tabs: {
+  tab: {
     fontSize: 16,
     backgroundColor:
       theme.colorScheme === "dark"
@@ -41,6 +41,23 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][5]
         : `${theme.colors["truffle-beige"][5]}73`
+  },
+  activeTab: {
+    fontSize: 16,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][8]
+        : theme.colors["truffle-beige"][4],
+    borderStyle: "solid",
+    height: 42,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 0,
+    borderColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][5]
+        : `${theme.colors["truffle-beige"][5]}73`
   }
 }));
 
@@ -120,6 +137,7 @@ function Sources({
         ));
   }
 
+  console.log("the current source id -- %o", currentSourceId);
   return (
     
       
-        {sources.map((source: SourceType) => (
-          
-            {basename(source.sourcePath)}
-          
-        ))}
+        {sources.map((source: SourceType) => {
+          const tabClass =
+            currentSourceId === source.id ? classes.activeTab : classes.tab;
+          return (
+            
+              {basename(source.sourcePath)}
+            
+          );
+        })}
         {!unknownSourcesExist
           ? null
-          : unknownAddresses!.map((address: string) => (
-              
-                Unknown Contract
-              
-            ))}
+          : unknownAddresses!.map((address: string) => {
+              const tabClass = (currentSourceId =
+                currentSourceId === address ? classes.activeTab : classes.tab);
+              return (
+                
+                  Unknown Contract
+                
+              );
+            })}
       
       

         {sourcesContent}
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 5317992917c..4b2e735cb07 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -31,7 +31,9 @@ const useStyles = createStyles(theme => ({
   },
   stack: {
     overflow: "scroll",
-    height: "100%"
+    height: "100%",
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   },
   stackContent: {
     paddingLeft: 10,
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index a6be02ce988..97b94e7aeb8 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -34,7 +34,9 @@ const useStyles = createStyles(theme => ({
   },
   variables: {
     overflow: "scroll",
-    height: "100%"
+    height: "100%",
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   },
   variablesContent: {
     paddingLeft: 10,
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 4ee4c151b93..6ef67136aa4 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -8,7 +8,6 @@ import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import Stack from "src/components/composed/Debugger/Stack";
 import PreparingSession from "src/components/composed/Debugger/PreparingSession";
 import {
-  forkNetworkWithTxAndInitDebugger,
   initDebugger,
   SessionStatus
 } from "src/components/composed/Debugger/utils";
@@ -108,6 +107,21 @@ function Debugger(): JSX.Element {
     }
   };
 
+  const onButtonClick = async () => {
+    await initDebugger({
+      chainOptions: {},
+      operations,
+      setStatus,
+      setLoggingOutput
+    });
+  };
+
+  const buttonStyles = {
+    height: "42px",
+    borderTopLeftRadius: "0px",
+    borderBottomLeftRadius: "0px"
+  };
+
   // scroll to highlighted source as debugger steps
   useEffect(() => {
     if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
@@ -202,32 +216,6 @@ function Debugger(): JSX.Element {
     content = status;
   }
 
-  const onButtonClick = async () => {
-    await initDebugger({
-      chainOptions: {},
-      operations,
-      setStatus,
-      setLoggingOutput
-    });
-  };
-
-  // tx simulation - forks, runs the tx, and opens the debugger to step through
-  useEffect(() => {
-    if (txToRun) {
-      forkNetworkWithTxAndInitDebugger({
-        tx: txToRun,
-        operations,
-        setStatus
-      });
-    }
-  }, [txToRun]);
-
-  const buttonStyles = {
-    height: "42px",
-    borderTopLeftRadius: "0px",
-    borderBottomLeftRadius: "0px"
-  };
-
   return (
     

       


From acb0f22ba06819d8db36035242dffc24ea8b41f3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 24 Apr 2023 18:20:01 -0400
Subject: [PATCH 074/189] fix issue with debugger line numbering and breakpoint
 system

---
 .../composed/Debugger/Sources/Source/SourceLine.tsx    |  2 +-
 .../src/components/composed/Debugger/Sources/index.tsx |  1 -
 .../src/components/composed/Debugger/index.tsx         |  2 --
 packages/dashboard/src/contexts/DashContext/state.ts   | 10 ++++++++--
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 824b3f86f50..62c06f713f5 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -56,7 +56,7 @@ function SourceLine({
   } = useDash()!;
 
   if (!lastLine) line += "\n";
-  let lineNumberDisplay =
+  const lineNumberDisplay =
     `` +
     " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
     lineNumber +
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 2d8b0b02b38..1f1646a263d 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -137,7 +137,6 @@ function Sources({
         ));
   }
 
-  console.log("the current source id -- %o", currentSourceId);
   return (
     
       

     );
-  } else {
-    content = status;
   }
 
   return (
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index bf9a697fe46..fae8539d7eb 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -75,17 +75,23 @@ export const reducer = (state: State, action: Action): State => {
       return { ...state, analyticsConfig: data };
     case "toggle-debugger-breakpoint":
       const { line, sourceId } = data;
+      // the front-end starts line numbering at 1 while the debugger
+      // starts them at 0
+      const debuggerLine = line - 1;
       const breakpointExists = state.debugger.breakpoints![sourceId].has(line);
       const newBreakpointStateForSource = new Set(
         state.debugger.breakpoints![sourceId]
       );
       if (breakpointExists) {
         // @ts-ignore
-        state.debugger.session!.removeBreakpoint({ line, sourceId });
+        state.debugger.session!.removeBreakpoint({
+          line: debuggerLine,
+          sourceId
+        });
         newBreakpointStateForSource.delete(line);
       } else {
         // @ts-ignore
-        state.debugger.session!.addBreakpoint({ line, sourceId });
+        state.debugger.session!.addBreakpoint({ line: debuggerLine, sourceId });
         newBreakpointStateForSource.add(line);
       }
       return {

From e7006ef5b2cda3e0408108900f644129cec9be98 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 25 Apr 2023 10:39:43 -0400
Subject: [PATCH 075/189] tweak colors for active/inactive tabs on sources

---
 packages/dashboard/src/components/MantineGlobal.tsx         | 6 +++++-
 .../src/components/composed/Debugger/Sources/index.tsx      | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 83a211a7343..cfb986af979 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -59,7 +59,11 @@ function MantineGlobal(): JSX.Element {
               borderTopRightRadius: 0,
               borderBottomRightRadius: 0,
               border: 0,
-              height: 42
+              height: 42,
+              backgroundColor:
+                theme.colorScheme === "dark"
+                  ? theme.colors["truffle-brown"][5]
+                  : "#FFFFFF"
             },
 
             ".trfl-Input-wrapper": {
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 1f1646a263d..b532e40f8d2 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -40,7 +40,8 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     borderColor:
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][5]
-        : `${theme.colors["truffle-beige"][5]}73`
+        : `${theme.colors["truffle-beige"][5]}73`,
+    color: theme.colors["truffle-beige"][7]
   },
   activeTab: {
     fontSize: 16,
@@ -48,6 +49,7 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
       theme.colorScheme === "dark"
         ? theme.colors["truffle-brown"][8]
         : theme.colors["truffle-beige"][4],
+    color: theme.colorScheme === "dark" ? "white" : "black",
     borderStyle: "solid",
     height: 42,
     borderTopWidth: 1,

From e17c8809695a8c15103990939c876101356a0ed8 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 25 Apr 2023 15:17:26 -0400
Subject: [PATCH 076/189] add tooltips to control buttons

---
 .../Debugger/Controls/ControlButton.tsx       | 32 +++++++++++--------
 .../composed/Debugger/Controls/index.tsx      |  6 ++++
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
index aa84e40354a..b41a7b2883e 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
@@ -1,6 +1,6 @@
 import { createElement } from "react";
 import type { Icon } from "react-feather";
-import { ActionIcon, createStyles } from "@mantine/core";
+import { ActionIcon, createStyles, Tooltip } from "@mantine/core";
 import type { ActionIconProps } from "@mantine/core";
 
 interface ControlButtonProps extends ActionIconProps {
@@ -9,6 +9,7 @@ interface ControlButtonProps extends ActionIconProps {
   stepEffect: () => void;
   stepping: boolean;
   setStepping: React.Dispatch>;
+  tooltipLabel: string;
 }
 
 function ControlButton({
@@ -18,6 +19,7 @@ function ControlButton({
   disabled,
   stepping,
   setStepping,
+  tooltipLabel,
   ...props
 }: ControlButtonProps): JSX.Element {
   const useStyles = createStyles(theme => ({
@@ -33,19 +35,21 @@ function ControlButton({
   const { classes } = useStyles();
 
   return (
-     {
-        setStepping(true);
-        await step();
-        setStepping(false);
-        stepEffect();
-      }}
-    >
-      {createElement(icon)}
-    
+    
+       {
+          setStepping(true);
+          await step();
+          setStepping(false);
+          stepEffect();
+        }}
+      >
+        {createElement(icon)}
+      
+    
   );
 }
 
diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
index 153fe9aeae1..8872345076c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/index.tsx
@@ -39,6 +39,7 @@ function Controls({ session, stepEffect }: ControlsProps): JSX.Element {
         // @ts-ignore
         step={() => session.continueUntilBreakpoint()}
         disabled={disabled}
+        tooltipLabel="continue until breakpoint"
       />
        session.stepNext()}
         disabled={disabled}
+        tooltipLabel="step next"
       />
        session.stepOver()}
         disabled={disabled}
+        tooltipLabel="step over"
       />
        session.stepInto()}
         disabled={disabled}
+        tooltipLabel="step into"
       />
        session.stepOut()}
         disabled={disabled}
+        tooltipLabel="step out"
       />
        session.reset()}
         disabled={atStart}
+        tooltipLabel="reset"
       />
     
   );

From 0ffeaf1bcdcd3357eeb3ac07e9b92a8d3d2d4c68 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 25 Apr 2023 16:06:25 -0400
Subject: [PATCH 077/189] add new inactive status for welcome page and add
 loading spinner

---
 .../composed/Debugger/PreparingSession.tsx    | 16 ++++++-----
 .../components/composed/Debugger/index.tsx    | 27 +++++++++++++------
 .../composed/Debugger/utils/status.ts         |  1 +
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index d42cccade12..088dba3321e 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
-import { createStyles, Flex } from "@mantine/core";
+import { createStyles, Flex, Loader } from "@mantine/core";
 
 const useStyles = createStyles(() => ({
   title: {
-    fontSize: 18
+    fontSize: 18,
+    marginLeft: 20
   }
 }));
 
@@ -28,12 +29,13 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
       align="center"
       style={{ height: "calc(100vh - 108px)" }}
     >
-      

+      
+        
         
Preparing your debugger session...

-        {ganacheOutput ? (
-          

-        ) : null}
-      

+      
+      {ganacheOutput ? (
+        

+      ) : null}
     
   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 359d071003d..a3b92af1d96 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -58,7 +58,7 @@ function Debugger(): JSX.Element {
   } = useDash()!;
 
   const [loggingOutput, setLoggingOutput] = useState("");
-  const [status, setStatus] = useState();
+  const [status, setStatus] = useState(SessionStatus.Inactive);
 
   // goToBreakpoint stores breakpoint info when a user clicks on one
   // so we can jump to it in Sources
@@ -214,6 +214,23 @@ function Debugger(): JSX.Element {
     );
   }
 
+  const preparingSession =
+    status === SessionStatus.Initializing ||
+    status === SessionStatus.Fetching ||
+    status === SessionStatus.Starting;
+  let mainBody;
+  if (status === SessionStatus.Inactive) {
+    mainBody = "Welcome";
+  } else if (preparingSession) {
+    mainBody = (
+      <>
+        
+      
+    );
+  } else {
+    mainBody = content;
+  }
+
   return (
     

       

@@ -238,13 +255,7 @@ function Debugger(): JSX.Element {
           )}
         

       

-      {status === SessionStatus.Initializing ||
-      status === SessionStatus.Fetching ||
-      status === SessionStatus.Starting ? (
-        
-      ) : (
-        content
-      )}
+      {mainBody}
     

   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/status.ts b/packages/dashboard/src/components/composed/Debugger/utils/status.ts
index b749a2a05b5..f5edf7606d8 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/status.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/status.ts
@@ -1,4 +1,5 @@
 export enum SessionStatus {
+  Inactive = "inactive",
   Initializing = "initializing",
   Fetching = "fetching",
   Starting = "starting",

From 8a2cfa13cfab93dfd1ca0dd45688c964a589b4cb Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 26 Apr 2023 11:41:36 -0400
Subject: [PATCH 078/189] create home page for debugger and store etherscan api
 key in global state

---
 .../Debugger/Home/EtherscanApiKeyPrompt.tsx   | 80 +++++++++++++++++++
 .../composed/Debugger/Home/index.tsx          | 42 ++++++++++
 .../components/composed/Debugger/index.tsx    |  3 +-
 .../src/contexts/DashContext/DashContext.ts   |  1 +
 .../src/contexts/DashContext/DashProvider.tsx |  6 ++
 .../src/contexts/DashContext/state.ts         | 11 ++-
 .../src/contexts/DashContext/types/Action.ts  |  7 ++
 .../src/contexts/DashContext/types/State.ts   |  1 +
 8 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Home/index.tsx

diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
new file mode 100644
index 00000000000..485b1711702
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -0,0 +1,80 @@
+import { Flex, Text, Button, Input, createStyles } from "@mantine/core";
+import { useInputState } from "@mantine/hooks";
+import { useDash } from "src/hooks";
+
+const useStyles = createStyles(() => ({
+  halfWidth: {
+    width: "50%"
+  },
+  inputGroup: {
+    width: "50%",
+    input: {
+      height: 42,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  },
+  reset: {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+}));
+
+function EtherScanApiKeyPrompt() {
+  const { classes } = useStyles();
+  const {
+    operations: { setEtherscanApiKey },
+    state: {
+      debugger: { etherscanApiKey }
+    }
+  } = useDash()!;
+
+  const [inputValue, setInputValue] = useInputState("");
+
+  const buttonStyles = {
+    height: "42px",
+    borderTopLeftRadius: "0px",
+    borderBottomLeftRadius: "0px"
+  };
+
+  if (etherscanApiKey === "" || etherscanApiKey === undefined) {
+    const onButtonClick = () => {
+      localStorage.etherscanApiKey = inputValue;
+      setEtherscanApiKey(localStorage.etherscanApiKey);
+    };
+
+    return (
+      <>
+        
+          Would you like a faster experience? Truffle will sometimes download
+          source material from Etherscan when it is missing. Enter your
+          Etherscan API key in the box below to speed up your downloads.
+        
+        
+          
+          
+        
+      
+    );
+  } else {
+    const onElementClick = () => {
+      localStorage.etherscanApiKey = "";
+      setEtherscanApiKey(localStorage.etherscanApiKey);
+    };
+    return (
+      

+        "reset your api key"
+      

+    );
+  }
+}
+
+export default EtherScanApiKeyPrompt;
diff --git a/packages/dashboard/src/components/composed/Debugger/Home/index.tsx b/packages/dashboard/src/components/composed/Debugger/Home/index.tsx
new file mode 100644
index 00000000000..89f6cccecca
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Home/index.tsx
@@ -0,0 +1,42 @@
+import { Stack, Text, createStyles } from "@mantine/core";
+import EtherscanApiKeyPrompt from "src/components/composed/Debugger/Home/EtherscanApiKeyPrompt";
+
+const useStyles = createStyles(theme => ({
+  welcomeMessage: {
+    textAlign: "left",
+    width: "100%",
+    height: "80%",
+    color:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-beige"][2]
+        : theme.colors["truffle-beige"][9]
+  },
+  halfWidth: {
+    width: "50%"
+  }
+}));
+
+function Home(): JSX.Element {
+  const { classes } = useStyles();
+
+  return (
+    
+      
+        Welcome!
+      
+      
+        Here you can paste a transaction hash to begin debugging it. You can
+        also start the debugger by clicking on the "Debug" button on a signature
+        request.
+      
+      
+    
+  );
+}
+
+export default Home;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index a3b92af1d96..bbe278be1af 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -7,6 +7,7 @@ import Variables from "src/components/composed/Debugger/Variables";
 import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import Stack from "src/components/composed/Debugger/Stack";
 import PreparingSession from "src/components/composed/Debugger/PreparingSession";
+import Home from "src/components/composed/Debugger/Home";
 import {
   initDebugger,
   SessionStatus
@@ -220,7 +221,7 @@ function Debugger(): JSX.Element {
     status === SessionStatus.Starting;
   let mainBody;
   if (status === SessionStatus.Inactive) {
-    mainBody = "Welcome";
+    mainBody = ;
   } else if (preparingSession) {
     mainBody = (
       <>
diff --git a/packages/dashboard/src/contexts/DashContext/DashContext.ts b/packages/dashboard/src/contexts/DashContext/DashContext.ts
index 2743c69b7c2..d26dcbcfd7c 100644
--- a/packages/dashboard/src/contexts/DashContext/DashContext.ts
+++ b/packages/dashboard/src/contexts/DashContext/DashContext.ts
@@ -22,6 +22,7 @@ export interface ContextValue {
     setDebuggerSessionData: (value: SetDebuggerSessionDataArgs) => void;
     getCompilations: () => Promise;
     toggleDebuggerBreakpoint: (value: ToggleDebuggerBreakpointArgs) => void;
+    setEtherscanApiKey: (key: string) => void;
     setTxToRun: (
       lifecycle: ReceivedMessageLifecycle | null
     ) => void;
diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index 5e10f80e222..dc079db2159 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -327,6 +327,12 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
         }
       });
     },
+    setEtherscanApiKey: (key: string) => {
+      dispatch({
+        type: "set-etherscan-api-key",
+        data: key
+      });
+    },
     setTxToRun: (
       lifecycle: ReceivedMessageLifecycle | null
     ) => {
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index fae8539d7eb..7e4e423c6ef 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -41,7 +41,8 @@ export const initialState: State = {
     unknownAddresses: null,
     session: null,
     txToRun: null,
-    breakpoints: {}
+    breakpoints: {},
+    etherscanApiKey: ""
   },
   decoder: null,
   decoderCompilations: null,
@@ -153,6 +154,14 @@ export const reducer = (state: State, action: Action): State => {
       }
 
       return newState;
+    case "set-etherscan-api-key":
+      return {
+        ...state,
+        debugger: {
+          ...state.debugger,
+          etherscanApiKey: data
+        }
+      };
     case "set-tx-to-run":
       return {
         ...state,
diff --git a/packages/dashboard/src/contexts/DashContext/types/Action.ts b/packages/dashboard/src/contexts/DashContext/types/Action.ts
index 62340ffd612..86cf708a062 100644
--- a/packages/dashboard/src/contexts/DashContext/types/Action.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/Action.ts
@@ -16,6 +16,7 @@ export type ActionType =
   | "set-notice"
   | "set-analytics-config"
   | "set-tx-to-run"
+  | "set-etherscan-api-key"
   | "handle-message"
   | "update-provider-message-sender"
   | "set-debugger-session-data"
@@ -49,6 +50,11 @@ export interface SetDebuggerSessionDataAction extends BaseAction {
   data: SetDebuggerSessionDataArgs;
 }
 
+export interface SetEtherscanApiKeyAction extends BaseAction {
+  type: "set-etherscan-api-key";
+  data: string;
+}
+
 export interface SetChainInfoAction extends BaseAction {
   type: "set-chain-info";
   data: State["chainInfo"];
@@ -96,4 +102,5 @@ export type Action =
   | UpdateProviderMessageSenderAction
   | SetDebuggerSessionDataAction
   | SetTxToRunAction
+  | SetEtherscanApiKeyAction
   | ToggleDebuggerBreakpointAction;
diff --git a/packages/dashboard/src/contexts/DashContext/types/State.ts b/packages/dashboard/src/contexts/DashContext/types/State.ts
index 70cee72008c..b032ea242fe 100644
--- a/packages/dashboard/src/contexts/DashContext/types/State.ts
+++ b/packages/dashboard/src/contexts/DashContext/types/State.ts
@@ -26,6 +26,7 @@ export interface State {
     session: Session | null;
     breakpoints: BreakpointState;
     txToRun: ReceivedMessageLifecycle | null;
+    etherscanApiKey: string;
   };
   decoder: ProjectDecoder | null;
   decoderCompilations: Array | null;

From 188751334ecb36c9879114bf775821fe385cefe4 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 26 Apr 2023 16:01:46 -0400
Subject: [PATCH 079/189] use mantine hook for interacting with local storage
 and remove unnecessary call to fetch

---
 packages/dashboard/lib/DashboardServer.ts     |   1 -
 .../Debugger/Home/EtherscanApiKeyPrompt.tsx   |  23 ++--
 .../components/composed/Debugger/index.tsx    |   6 +-
 .../composed/Debugger/utils/session.ts        | 113 +++++++++++-------
 .../src/contexts/DashContext/DashContext.ts   |   1 -
 .../src/contexts/DashContext/DashProvider.tsx |   6 -
 .../src/contexts/DashContext/state.ts         |  11 +-
 .../src/contexts/DashContext/types/Action.ts  |   7 --
 .../src/contexts/DashContext/types/State.ts   |   1 -
 9 files changed, 82 insertions(+), 87 deletions(-)

diff --git a/packages/dashboard/lib/DashboardServer.ts b/packages/dashboard/lib/DashboardServer.ts
index cb98376ed90..ae0b2770a19 100644
--- a/packages/dashboard/lib/DashboardServer.ts
+++ b/packages/dashboard/lib/DashboardServer.ts
@@ -100,7 +100,6 @@ export class DashboardServer {
     }
 
     this.expressApp.get("/fetch-and-compile", async (req, res) => {
-<<<<<<< HEAD
       const { address, networkId, etherscanApiKey } = req.query as Record<
         string,
         string
diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
index 485b1711702..f04f24bb4a4 100644
--- a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -1,6 +1,5 @@
 import { Flex, Text, Button, Input, createStyles } from "@mantine/core";
-import { useInputState } from "@mantine/hooks";
-import { useDash } from "src/hooks";
+import { useInputState, useLocalStorage } from "@mantine/hooks";
 
 const useStyles = createStyles(() => ({
   halfWidth: {
@@ -23,13 +22,11 @@ const useStyles = createStyles(() => ({
 
 function EtherScanApiKeyPrompt() {
   const { classes } = useStyles();
-  const {
-    operations: { setEtherscanApiKey },
-    state: {
-      debugger: { etherscanApiKey }
-    }
-  } = useDash()!;
 
+  const [etherscanApiKey, setEtherscanApiKey, removeEtherscanApiKey] =
+    useLocalStorage({
+      key: "etherscan-api-key"
+    });
   const [inputValue, setInputValue] = useInputState("");
 
   const buttonStyles = {
@@ -38,10 +35,9 @@ function EtherScanApiKeyPrompt() {
     borderBottomLeftRadius: "0px"
   };
 
-  if (etherscanApiKey === "" || etherscanApiKey === undefined) {
+  if (etherscanApiKey === undefined) {
     const onButtonClick = () => {
-      localStorage.etherscanApiKey = inputValue;
-      setEtherscanApiKey(localStorage.etherscanApiKey);
+      setEtherscanApiKey(inputValue);
     };
 
     return (
@@ -56,7 +52,7 @@ function EtherScanApiKeyPrompt() {
             value={inputValue}
             onChange={setInputValue}
             type="text"
-            placeholder="Etherscan API Key"
+            placeholder="Etherscan api key"
           />
           
         
-      
+      
     );
   } else {
     const onElementClick = () => removeEtherscanApiKey();
     return (
       <>
-        
+        
           We have found an Etherscan API key that you previously entered in your
           browser. To delete this from browser storage, click the link below.
         

From b66d22ae526b1cb3034b0afe028dfab47d719cd9 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 26 Apr 2023 17:11:18 -0400
Subject: [PATCH 083/189] adjust color of prompt container for dark mode

---
 .../composed/Debugger/Home/EtherscanApiKeyPrompt.tsx         | 5 ++++-
 .../src/components/composed/Debugger/PreparingSession.tsx    | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
index ee67d001812..30588f9d2ad 100644
--- a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -29,7 +29,10 @@ const useStyles = createStyles(theme => ({
   promptContainer: {
     width: "50%",
     borderRadius: 4,
-    backgroundColor: theme.colors["truffle-teal"][0],
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? "#082720"
+        : theme.colors["truffle-teal"][0],
     border: `solid ${theme.colors["truffle-teal"][7]}`,
     padding: 15
   }
diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 088dba3321e..77268b6c84e 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -27,7 +27,7 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
       direction="column"
       justify="center"
       align="center"
-      style={{ height: "calc(100vh - 108px)" }}
+      style={{ height: "calc(100vh - 108px)", width: "50%" }}
     >
       
         

From 46aa95c5ca63b9d339a7540e3bdbd39a5b224cb8 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 27 Apr 2023 11:30:54 -0400
Subject: [PATCH 084/189] add background color change for active navbar item
 and update css for preparing dialogue

---
 .../Debugger/Home/EtherscanApiKeyPrompt.tsx   |  9 +++++----
 .../composed/Debugger/PreparingSession.tsx    | 20 +++++++++++--------
 .../composed/Sidebar/Middle/NavButton.tsx     | 18 +++++++++--------
 .../composed/Sidebar/Middle/index.tsx         |  1 -
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
index 30588f9d2ad..2ae051ca229 100644
--- a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -63,10 +63,11 @@ function EtherScanApiKeyPrompt() {
         
           Would you like a faster experience? Truffle will sometimes download
           source material from Etherscan when it is missing. Enter your
-          Etherscan API key in the box below to speed up your downloads.
-          Alternatively you may set an API key in your Truffle config file in
-          the directory where you are running `truffle dashboard`. To do this,
-          set `etherscan.apiKey` in your `truffle-config.js`.
+          Etherscan API key in the box below to save it in the browser and speed
+          up your downloads. Alternatively you may set an API key in your
+          Truffle config file in the directory where you are running `truffle
+          dashboard`. To do this, set `etherscan.apiKey` in your
+          `truffle-config.js`.
         
         
           
-      
-        
-        
Preparing your debugger session...

-      
-      {ganacheOutput ? (
-        

-      ) : null}
+      

+        
+          
+          

+            Preparing your debugger session...
+          

+        
+        {ganacheOutput ? (
+          
+        ) : null}
+      

     
   );
 }
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
index 0a6f7d00f92..0b56942dcfc 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { UnstyledButton, Group, Text, createStyles } from "@mantine/core";
+import { useLocation } from "react-router-dom";
 
 const useStyles = createStyles((theme, _params, _getRef) => {
   const { colors, colorScheme, radius, fn } = theme;
@@ -23,6 +24,12 @@ const useStyles = createStyles((theme, _params, _getRef) => {
         colorScheme === "dark"
           ? colors["truffle-brown"][4]
           : colors["truffle-beige"][5]
+    },
+    active: {
+      backgroundColor:
+        colorScheme === "dark"
+          ? colors["truffle-brown"][6]
+          : colors["truffle-beige"][3]
     }
   };
 });
@@ -35,14 +42,9 @@ type NavButtonProps = {
   disabled?: boolean;
 };
 
-function NavButton({
-  to,
-  label,
-  icon,
-  badge,
-  disabled
-}: NavButtonProps): JSX.Element {
+function NavButton({ to, label, icon, badge }: NavButtonProps): JSX.Element {
   const { classes } = useStyles();
+  const location = useLocation();
 
   return (
     
       
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
index 1bcd7c2baf5..08a17d52c7d 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
@@ -18,7 +18,6 @@ function Middle(): JSX.Element {
         icon={
            99 ? "99+" : numRequests}
-            disabled={numRequests === 0}
             radius="sm"
             size={16}
             offset={-5}

From c29d4ab4bd7693589d6e698881866df97c690db1 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 27 Apr 2023 14:17:38 -0400
Subject: [PATCH 085/189] re-add disabled prop to nav buttons and make
 background color consistent between debugger and tx signer

---
 .../src/components/composed/Layout.tsx        |  8 +++++--
 .../composed/Sidebar/Middle/NavButton.tsx     | 22 +++++++++----------
 .../composed/Sidebar/Middle/index.tsx         |  1 +
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Layout.tsx b/packages/dashboard/src/components/composed/Layout.tsx
index b79c211a684..4a56ea2c570 100644
--- a/packages/dashboard/src/components/composed/Layout.tsx
+++ b/packages/dashboard/src/components/composed/Layout.tsx
@@ -16,10 +16,14 @@ import {
 
 const ARBITRARY_ANALYTICS_NEXT_ASK_THRESHOLD_IN_DAYS = 365;
 
-const useStyles = createStyles((_theme, _params, _getRef) => ({
+const useStyles = createStyles((theme, _params, _getRef) => ({
   main: {
     maxHeight: "100vh",
-    overflow: "auto"
+    overflow: "auto",
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? theme.colors["truffle-brown"][8]
+        : theme.colors["truffle-beige"][3]
   }
 }));
 
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
index 0b56942dcfc..38fa38ea103 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
@@ -3,20 +3,12 @@ import { UnstyledButton, Group, Text, createStyles } from "@mantine/core";
 import { useLocation } from "react-router-dom";
 
 const useStyles = createStyles((theme, _params, _getRef) => {
-  const { colors, colorScheme, radius, fn } = theme;
+  const { colors, colorScheme, radius } = theme;
   return {
     button: {
       display: "block",
       borderRadius: radius.sm
     },
-    enabled: {
-      "&:hover": {
-        backgroundColor:
-          colorScheme === "dark"
-            ? fn.darken(colors["truffle-brown"][8], 0.08)
-            : fn.darken(colors["truffle-beige"][4], 0.08)
-      }
-    },
     disabled: {
       cursor: "default",
       pointerEvents: "none",
@@ -42,7 +34,13 @@ type NavButtonProps = {
   disabled?: boolean;
 };
 
-function NavButton({ to, label, icon, badge }: NavButtonProps): JSX.Element {
+function NavButton({
+  to,
+  label,
+  icon,
+  badge,
+  disabled
+}: NavButtonProps): JSX.Element {
   const { classes } = useStyles();
   const location = useLocation();
 
@@ -52,8 +50,8 @@ function NavButton({ to, label, icon, badge }: NavButtonProps): JSX.Element {
       to={to}
       p="xl"
       className={`${classes.button} ${
-        location.pathname.startsWith(to) ? classes.active : undefined
-      }`}
+        disabled ? classes.disabled : undefined
+      } ${location.pathname.startsWith(to) ? classes.active : undefined}`}
     >
       
         
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
index 08a17d52c7d..1bcd7c2baf5 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/index.tsx
@@ -18,6 +18,7 @@ function Middle(): JSX.Element {
         icon={
            99 ? "99+" : numRequests}
+            disabled={numRequests === 0}
             radius="sm"
             size={16}
             offset={-5}

From af95494de820289fd07c23a338721c28b0944185 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 27 Apr 2023 16:05:43 -0400
Subject: [PATCH 086/189] rework how ganache/provider options are passed
 through init functions

---
 .../composed/Debugger/PreparingSession.tsx    |  16 +--
 .../components/composed/Debugger/index.tsx    |  21 +++-
 .../composed/Debugger/utils/session.ts        | 104 ++++++------------
 .../components/composed/RPCs/RPC/Overview.tsx |   8 +-
 4 files changed, 64 insertions(+), 85 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 4513feb84df..867e5b5e52e 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -10,16 +10,10 @@ const useStyles = createStyles(() => ({
 
 function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
   const { classes } = useStyles();
-  const [ganacheOutput, setGanacheOutput] = useState("");
+  const [ganacheOutput, setGanacheOutput] = useState([]);
 
   useEffect(() => {
-    if (ganacheLoggingOutput.length > 0) {
-      if (ganacheOutput.length === 0) {
-        setGanacheOutput(ganacheLoggingOutput);
-      } else {
-        setGanacheOutput(ganacheOutput + "
" + ganacheLoggingOutput);
-      }
-    }
+    setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
   }, [ganacheLoggingOutput]);
 
   return (
@@ -36,8 +30,10 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
             Preparing your debugger session...
           

         
-        {ganacheOutput ? (
-          
+        {ganacheLoggingOutput.length > 0 ? (
+          
") }}
+          />
         ) : null}
       

     
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 7bed3a87d69..0ee8b423c24 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -110,11 +110,28 @@ function Debugger(): JSX.Element {
   };
 
   const onButtonClick = async () => {
+    const provider = window.ethereum;
+    if (!provider) {
+      throw new Error(
+        "There was no provider found in the browser. Ensure you have " +
+          "MetaMask connected to the current page."
+      );
+    }
+    const ganacheOptions = {
+      fork: { provider },
+      logging: {
+        logger: {
+          log: (message: string) => {
+            setLoggingOutput(message);
+          }
+        }
+      }
+    };
     await initDebugger({
-      chainOptions: {},
+      ganacheOptions,
       operations,
       setStatus,
-      setLoggingOutput,
+      provider,
       etherscanApiKey
     });
   };
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index 5510164ee04..a32ace48171 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -9,12 +9,11 @@ import { getTransactionSourcesBeforeStarting } from "@truffle/debug-utils";
 export async function forkNetworkWithTxAndInitDebugger({
   tx,
   operations,
-  setUnknownAddresses,
   setStatus,
   etherscanApiKey
 }: any) {
   const { method, params } = tx.message.payload;
-  const forkedProvider = ganacheProvider({
+  const ganacheOptions = {
     fork: {
       // @ts-ignore
       provider: window.ethereum
@@ -22,28 +21,32 @@ export async function forkNetworkWithTxAndInitDebugger({
     wallet: {
       unlockedAccounts: [params[0].from]
     }
-  });
+  };
+  // @ts-ignore
+  const forkedProvider = ganacheProvider(ganacheOptions);
   const result = await forkedProvider.request({ method, params });
   return initDebugger({
-    chainOptions: {
-      unlockedAccounts: [params[0].from],
-      provider: forkedProvider
+    ganacheOptions: {
+      ...ganacheOptions,
+      fork: {
+        provider: forkedProvider
+      }
     },
     operations,
-    setUnknownAddresses,
     setStatus,
     txHash: result,
-    etherscanApiKey
+    etherscanApiKey,
+    provider: forkedProvider
   });
 }
 
 export async function initDebugger({
-  chainOptions: { unlockedAccounts, provider },
+  ganacheOptions,
   operations,
   setStatus,
   txHash,
-  setLoggingOutput,
-  etherscanApiKey
+  etherscanApiKey,
+  provider
 }: any) {
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
@@ -55,19 +58,9 @@ export async function initDebugger({
   // "0xdadd2f626c81322ec8a2a20dec71c780f630ef1fab7393c675a8843365477389"; //goerli tx
   // "0x2650974eb6390dc787df16ab86308822855f907e7463107248cfd5e424923176"
   // "0xab2cba8e3e57a173a125d3f77a9a0a485809b8a7098b540a13593631909ccf00"; //dai tx
-  const pro = provider ? provider : window.ethereum;
-  if (!pro) {
-    throw new Error(
-      "There was no provider found in the browser. Ensure you have " +
-        "MetaMask connected to the current page."
-    );
-  }
+
   const { session, sources, unknownAddresses } = await setupSession({
-    chainOptions: {
-      unlockedAccounts,
-      provider: pro
-    },
-    setLoggingOutput,
+    ganacheOptions,
     txHash: testTxHash,
     compilations,
     callbacks: {
@@ -76,19 +69,16 @@ export async function initDebugger({
       onStart: () => setStatus(SessionStatus.Starting),
       onReady: () => setStatus(SessionStatus.Ready)
     },
-    etherscanApiKey
+    etherscanApiKey,
+    provider
   });
   operations.setDebuggerSessionData({ sources, unknownAddresses, session });
 }
 
 type SetupSessionArgs = {
   txHash: string;
-  chainOptions: {
-    provider: any;
-    unlockedAccounts: string[];
-  };
   compilations: Compilation[];
-  setLoggingOutput: any;
+  ganacheOptions: any;
   callbacks?: {
     onInit?: () => void;
     onFetch?: () => void;
@@ -96,15 +86,16 @@ type SetupSessionArgs = {
     onReady?: () => void;
   };
   etherscanApiKey: string;
+  provider: any;
 };
 
 export async function setupSession({
   txHash,
-  chainOptions: { provider, unlockedAccounts },
+  ganacheOptions,
   compilations,
-  setLoggingOutput,
   callbacks,
-  etherscanApiKey
+  etherscanApiKey,
+  provider
 }: SetupSessionArgs): Promise<{
   session: Session;
   sources: Source[];
@@ -113,53 +104,35 @@ export async function setupSession({
   callbacks?.onInit?.();
   const { session, sources, unrecognizedAddresses } = await createSession({
     txHash,
-    provider,
+    ganacheOptions,
     compilations,
-    unlockedAccounts,
-    setLoggingOutput,
-    etherscanApiKey
+    etherscanApiKey,
+    provider
   });
 
   callbacks?.onFetch?.();
   callbacks?.onStart?.();
   await session.startFullMode();
 
-  const $ = session.selectors;
-  // @ts-ignore
-  window.dollar = $;
-  // @ts-ignore
-  window.bugger = session;
   callbacks?.onReady?.();
 
   return { session, sources, unknownAddresses: unrecognizedAddresses };
 }
 
-type ProviderOptions = {
-  fork: {
-    provider: any;
-  };
-  logging: any;
-  wallet?: {
-    unlockedAccounts: string[];
-  };
-};
-
 type CreateSessionArgs = {
   txHash: string;
-  provider: any;
   compilations: Compilation[];
-  unlockedAccounts: string[];
-  setLoggingOutput: (input: string) => void;
+  ganacheOptions: any;
   etherscanApiKey?: string;
+  provider: any;
 };
 
 async function createSession({
   txHash,
-  provider,
   compilations,
-  unlockedAccounts,
-  setLoggingOutput,
-  etherscanApiKey
+  ganacheOptions,
+  etherscanApiKey,
+  provider
 }: CreateSessionArgs): Promise<{
   session: Session;
   sources: Source[];
@@ -167,22 +140,9 @@ async function createSession({
   unrecognizedAddresses: string[];
 }> {
   let session;
-  const providerOptions: ProviderOptions = {
-    fork: { provider },
-    logging: {
-      logger: {
-        log: (message: string) => {
-          setLoggingOutput(message);
-        }
-      }
-    }
-  };
-  if (unlockedAccounts && unlockedAccounts.length > 0) {
-    providerOptions.wallet = { unlockedAccounts };
-  }
   try {
     session = await forTx(txHash, {
-      provider: ganacheProvider(providerOptions),
+      provider: ganacheProvider(ganacheOptions),
       compilations: Codec.Compilations.Utils.shimCompilations(compilations),
       lightMode: true
     });
diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
index b15e545a1d0..7cf32a3fa76 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
@@ -86,6 +86,12 @@ const useStyles = createStyles((theme, _params, getRef) => {
     },
     rejectButton: { ref: getRef("rejectButton") },
     confirmButton: { ref: getRef("confirmButton") },
+    simulateTxButton: {
+      backgroundColor:
+        colorScheme === "dark"
+          ? colors["truffle-teal"][6]
+          : colors["truffle-teal"][4]
+    },
     confirmButtonRightIcon: {
       marginLeft: 4,
       marginRight: 6
@@ -202,7 +208,7 @@ function Overview({
           onClick={onSimulateButtonClick}
           onMouseEnter={onSimulateButtonEnter}
           onMouseLeave={onSimulateButtonLeave}
-          className={`${classes.button} ${classes.confirmButton}`}
+          className={`${classes.button} ${classes.simulateTxButton}`}
         >
           SimulateTx
         

From 98a83909f01bdf19287e4c601bccf2d461591792 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 27 Apr 2023 16:13:08 -0400
Subject: [PATCH 087/189] instead of passing provider, pass network id through
 init functions

---
 .../components/composed/Debugger/index.tsx    |  7 ++++++
 .../composed/Debugger/utils/session.ts        | 25 ++++++++++---------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 0ee8b423c24..f717ce84219 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -117,6 +117,12 @@ function Debugger(): JSX.Element {
           "MetaMask connected to the current page."
       );
     }
+    const networkId = await provider.request({
+      // @ts-ignore
+      method: "net_version",
+      // @ts-ignore
+      params: []
+    });
     const ganacheOptions = {
       fork: { provider },
       logging: {
@@ -128,6 +134,7 @@ function Debugger(): JSX.Element {
       }
     };
     await initDebugger({
+      networkId,
       ganacheOptions,
       operations,
       setStatus,
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index a32ace48171..0b025e2c08d 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -24,6 +24,11 @@ export async function forkNetworkWithTxAndInitDebugger({
   };
   // @ts-ignore
   const forkedProvider = ganacheProvider(ganacheOptions);
+  const networkId = await forkedProvider.request({
+    method: "net_version",
+    params: []
+  });
+
   const result = await forkedProvider.request({ method, params });
   return initDebugger({
     ganacheOptions: {
@@ -36,7 +41,7 @@ export async function forkNetworkWithTxAndInitDebugger({
     setStatus,
     txHash: result,
     etherscanApiKey,
-    provider: forkedProvider
+    networkId
   });
 }
 
@@ -46,7 +51,7 @@ export async function initDebugger({
   setStatus,
   txHash,
   etherscanApiKey,
-  provider
+  networkId
 }: any) {
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
@@ -70,7 +75,7 @@ export async function initDebugger({
       onReady: () => setStatus(SessionStatus.Ready)
     },
     etherscanApiKey,
-    provider
+    networkId
   });
   operations.setDebuggerSessionData({ sources, unknownAddresses, session });
 }
@@ -86,7 +91,7 @@ type SetupSessionArgs = {
     onReady?: () => void;
   };
   etherscanApiKey: string;
-  provider: any;
+  networkId: string;
 };
 
 export async function setupSession({
@@ -95,7 +100,7 @@ export async function setupSession({
   compilations,
   callbacks,
   etherscanApiKey,
-  provider
+  networkId
 }: SetupSessionArgs): Promise<{
   session: Session;
   sources: Source[];
@@ -107,7 +112,7 @@ export async function setupSession({
     ganacheOptions,
     compilations,
     etherscanApiKey,
-    provider
+    networkId
   });
 
   callbacks?.onFetch?.();
@@ -124,7 +129,7 @@ type CreateSessionArgs = {
   compilations: Compilation[];
   ganacheOptions: any;
   etherscanApiKey?: string;
-  provider: any;
+  networkId: string;
 };
 
 async function createSession({
@@ -132,7 +137,7 @@ async function createSession({
   compilations,
   ganacheOptions,
   etherscanApiKey,
-  provider
+  networkId
 }: CreateSessionArgs): Promise<{
   session: Session;
   sources: Source[];
@@ -162,10 +167,6 @@ async function createSession({
   const affectedInstances: { [address: string]: any } = session.view(
     $.session.info.affectedInstances
   );
-  const networkId = await provider.request({
-    method: "net_version",
-    params: []
-  });
 
   let unrecognizedAddresses: string[] = [];
   for (const [address, value] of Object.entries(affectedInstances)) {

From a66762799c5ceb5c552f25bc701d9c75ff0a9bd3 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 27 Apr 2023 17:04:46 -0400
Subject: [PATCH 088/189] group network id and etherscan key under one
 parameter named fetchingOptions

---
 .../composed/Debugger/ErrorNotification.tsx   | 51 +++++++++++++++++++
 .../components/composed/Debugger/index.tsx    |  7 ++-
 .../composed/Debugger/utils/session.ts        | 41 ++++++++-------
 3 files changed, 76 insertions(+), 23 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx

diff --git a/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx b/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx
new file mode 100644
index 00000000000..9dc9a359941
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx
@@ -0,0 +1,51 @@
+import {
+  Container,
+  Flex,
+  Text,
+  Button,
+  Input,
+  createStyles
+} from "@mantine/core";
+import { useInputState, useLocalStorage } from "@mantine/hooks";
+
+const useStyles = createStyles(theme => ({
+  inputGroup: {
+    marginTop: 10,
+    input: {
+      height: 42,
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      border: 0
+    }
+  },
+  reset: {
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "color": "blue",
+    "textAlign": "right",
+    "fontSize": 14
+  },
+  promptContainer: {
+    width: "50%",
+    borderRadius: 4,
+    backgroundColor:
+      theme.colorScheme === "dark"
+        ? "#082720"
+        : theme.colors["truffle-teal"][0],
+    border: `solid ${theme.colors["red"]}`,
+    padding: 15
+  }
+}));
+
+function ErrorNotification({ error }: { error: Error }): JSX.Element {
+  const { classes } = useStyles();
+
+  return (
+    
+      An error occurred while initializing the debugger.
+    
+  );
+}
+
+export default ErrorNotification;
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index f717ce84219..4be7cc19e48 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -133,13 +133,16 @@ function Debugger(): JSX.Element {
         }
       }
     };
-    await initDebugger({
+    const fetchingOptions = {
       networkId,
+      etherscanApiKey
+    };
+    await initDebugger({
       ganacheOptions,
       operations,
       setStatus,
       provider,
-      etherscanApiKey
+      fetchingOptions
     });
   };
 
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index 0b025e2c08d..1ffa5b2b348 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -37,11 +37,13 @@ export async function forkNetworkWithTxAndInitDebugger({
         provider: forkedProvider
       }
     },
+    fetchingOptions: {
+      etherscanApiKey,
+      networkId
+    },
     operations,
     setStatus,
-    txHash: result,
-    etherscanApiKey,
-    networkId
+    txHash: result
   });
 }
 
@@ -50,8 +52,7 @@ export async function initDebugger({
   operations,
   setStatus,
   txHash,
-  etherscanApiKey,
-  networkId
+  fetchingOptions
 }: any) {
   const compilations = await operations.getCompilations();
   const testTxHash = txHash
@@ -66,6 +67,7 @@ export async function initDebugger({
 
   const { session, sources, unknownAddresses } = await setupSession({
     ganacheOptions,
+    fetchingOptions,
     txHash: testTxHash,
     compilations,
     callbacks: {
@@ -73,13 +75,16 @@ export async function initDebugger({
       onFetch: () => setStatus(SessionStatus.Fetching),
       onStart: () => setStatus(SessionStatus.Starting),
       onReady: () => setStatus(SessionStatus.Ready)
-    },
-    etherscanApiKey,
-    networkId
+    }
   });
   operations.setDebuggerSessionData({ sources, unknownAddresses, session });
 }
 
+type FetchingOptions = {
+  etherscanApiKey?: string;
+  networkId: string;
+};
+
 type SetupSessionArgs = {
   txHash: string;
   compilations: Compilation[];
@@ -90,8 +95,7 @@ type SetupSessionArgs = {
     onStart?: () => void;
     onReady?: () => void;
   };
-  etherscanApiKey: string;
-  networkId: string;
+  fetchingOptions: FetchingOptions;
 };
 
 export async function setupSession({
@@ -99,8 +103,7 @@ export async function setupSession({
   ganacheOptions,
   compilations,
   callbacks,
-  etherscanApiKey,
-  networkId
+  fetchingOptions
 }: SetupSessionArgs): Promise<{
   session: Session;
   sources: Source[];
@@ -111,8 +114,7 @@ export async function setupSession({
     txHash,
     ganacheOptions,
     compilations,
-    etherscanApiKey,
-    networkId
+    fetchingOptions
   });
 
   callbacks?.onFetch?.();
@@ -128,20 +130,17 @@ type CreateSessionArgs = {
   txHash: string;
   compilations: Compilation[];
   ganacheOptions: any;
-  etherscanApiKey?: string;
-  networkId: string;
+  fetchingOptions: FetchingOptions;
 };
 
 async function createSession({
   txHash,
   compilations,
   ganacheOptions,
-  etherscanApiKey,
-  networkId
+  fetchingOptions
 }: CreateSessionArgs): Promise<{
   session: Session;
   sources: Source[];
-  networkId: string;
   unrecognizedAddresses: string[];
 }> {
   let session;
@@ -174,7 +173,8 @@ async function createSession({
       unrecognizedAddresses.push(address);
     }
   }
-  if (unrecognizedAddresses.length > 0 && networkId) {
+  if (unrecognizedAddresses.length > 0) {
+    const { networkId, etherscanApiKey } = fetchingOptions;
     await fetchCompilationsAndAddToSession({
       session,
       networkId,
@@ -191,7 +191,6 @@ async function createSession({
   return {
     sources: transformedSources,
     session,
-    networkId,
     unrecognizedAddresses
   };
 }

From c12be50fa875bed520bd29b6a6258b6cd2f98327 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 28 Apr 2023 11:18:03 -0400
Subject: [PATCH 089/189] add simple error notification when there is an issue
 with debugger initialization

---
 .../composed/Debugger/ErrorNotification.tsx   | 53 +++++-------
 .../components/composed/Debugger/index.tsx    | 84 ++++++++++---------
 2 files changed, 65 insertions(+), 72 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx b/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx
index 9dc9a359941..ab1caa9e715 100644
--- a/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/ErrorNotification.tsx
@@ -1,40 +1,19 @@
-import {
-  Container,
-  Flex,
-  Text,
-  Button,
-  Input,
-  createStyles
-} from "@mantine/core";
-import { useInputState, useLocalStorage } from "@mantine/hooks";
+import { Flex, Text, createStyles } from "@mantine/core";
 
 const useStyles = createStyles(theme => ({
-  inputGroup: {
-    marginTop: 10,
-    input: {
-      height: 42,
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-      border: 0
-    }
+  notificationContainer: {
+    width: "100%",
+    height: "100%"
   },
-  reset: {
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "color": "blue",
-    "textAlign": "right",
-    "fontSize": 14
-  },
-  promptContainer: {
-    width: "50%",
-    borderRadius: 4,
+  notification: {
+    maxWidth: "75%",
     backgroundColor:
       theme.colorScheme === "dark"
         ? "#082720"
         : theme.colors["truffle-teal"][0],
-    border: `solid ${theme.colors["red"]}`,
-    padding: 15
+    padding: 15,
+    border: `solid red`,
+    borderRadius: 4
   }
 }));
 
@@ -42,9 +21,17 @@ function ErrorNotification({ error }: { error: Error }): JSX.Element {
   const { classes } = useStyles();
 
   return (
-    
-      An error occurred while initializing the debugger.
-    
+    
+      
+        An error occurred while initializing the debugger. See the error below
+        for more information.
+        {error.message}
+      
+    
   );
 }
 
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 4be7cc19e48..e8584ccef06 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -8,6 +8,7 @@ import Breakpoints from "src/components/composed/Debugger/Breakpoints";
 import Stack from "src/components/composed/Debugger/Stack";
 import PreparingSession from "src/components/composed/Debugger/PreparingSession";
 import Home from "src/components/composed/Debugger/Home";
+import ErrorNotification from "src/components/composed/Debugger/ErrorNotification";
 import {
   initDebugger,
   SessionStatus
@@ -59,6 +60,7 @@ function Debugger(): JSX.Element {
   } = useDash()!;
 
   const [etherscanApiKey] = useLocalStorage({ key: "etherscan-api-key" });
+  const [error, setError] = useState();
   const [loggingOutput, setLoggingOutput] = useState("");
   const [status, setStatus] = useState(SessionStatus.Inactive);
 
@@ -137,13 +139,17 @@ function Debugger(): JSX.Element {
       networkId,
       etherscanApiKey
     };
-    await initDebugger({
-      ganacheOptions,
-      operations,
-      setStatus,
-      provider,
-      fetchingOptions
-    });
+    try {
+      await initDebugger({
+        ganacheOptions,
+        operations,
+        setStatus,
+        provider,
+        fetchingOptions
+      });
+    } catch (error) {
+      setError(error as Error);
+    }
   };
 
   const buttonStyles = {
@@ -252,42 +258,42 @@ function Debugger(): JSX.Element {
   if (status === SessionStatus.Inactive) {
     mainBody = ;
   } else if (preparingSession) {
-    mainBody = (
-      <>
-        
-      
-    );
+    mainBody = ;
   } else {
     mainBody = content;
   }
 
-  return (
-    

-      

-        
-        

-          
-          {txToRun ? null : (
-            
-          )}
-        

-      

-      {mainBody}
-    

-  );
+  if (error) {
+    return ;
+  } else {
+    return (
+      

+        

+          
+          

+            
+            {txToRun ? null : (
+              
+            )}
+          

+        

+        {mainBody}
+      

+    );
+  }
 }
 
 export default Debugger;

From 43d411b1ffea3f147aee2218a41899e679366002 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 28 Apr 2023 12:38:38 -0400
Subject: [PATCH 090/189] slightly re-work design for tx signer dialogue

---
 .../components/composed/RPCs/RPC/Overview.tsx | 51 ++++++++++---------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
index 7cf32a3fa76..9b0ece45bd2 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
@@ -75,7 +75,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
           ? colors["truffle-beige"][3]
           : colors["truffle-beige"][8]
     },
-    buttons: {
+    buttonsContainer: {
       minWidth: buttonsWidth
     },
     button: {
@@ -151,11 +151,10 @@ function Overview({
   };
 
   return (
-    
         )}
       
-      
-        
-        
+      
+        
+          
+          
+        
         
-            )}
+            
           

         
         {mainBody}
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index 0f9983d6eb8..b46e611b880 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -10,7 +10,8 @@ export async function forkNetworkWithTxAndInitDebugger({
   tx,
   operations,
   setStatus,
-  etherscanApiKey
+  etherscanApiKey,
+  setLoggingOutput
 }: any) {
   const { method, params } = tx.message.payload;
   const ganacheOptions = {
@@ -20,8 +21,16 @@ export async function forkNetworkWithTxAndInitDebugger({
     },
     wallet: {
       unlockedAccounts: [params[0].from]
+    },
+    logging: {
+      logger: {
+        log: (message: string) => {
+          setLoggingOutput(message);
+        }
+      }
     }
   };
+
   // @ts-ignore
   const forkedProvider = ganacheProvider(ganacheOptions);
   const networkId = await forkedProvider.request({

From ed054c2d4a745bef1a3d8ef8873aef1e541b1776 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 13 Jun 2023 11:42:17 -0400
Subject: [PATCH 129/189] clean up another rebase mistake

---
 .../src/components/composed/Debugger/index.tsx        | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 71c3000ce93..b8c17da0753 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -205,17 +205,6 @@ function Debugger(): JSX.Element {
     }
   }, [goToBreakpoint]);
 
-  // check whether we need to scroll to a breakpoint
-  // this is to ensure the source has fully rendered before scrolling
-  useEffect(() => {
-    if (goToBreakpoint !== null) {
-      const { sourceId, line } = goToBreakpoint;
-      // @ts-ignore
-      scrollToLine({ sourceId, line });
-      setGoToBreakpoint(null);
-    }
-  }, [goToBreakpoint]);
-
   const handleBreakpointComponentClick = ({
     sourceId,
     line

From d6d909497321552e7afa090b226a86c78dc3d89d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 13 Jun 2023 14:38:59 -0400
Subject: [PATCH 130/189] add emojis to the etherscan api key message

---
 .../composed/Debugger/Home/EtherscanApiKeyPrompt.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
index 3268cbcb88d..b2ba3444df3 100644
--- a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -67,8 +67,8 @@ function EtherScanApiKeyPrompt() {
     return (
       
         
-          Want a speedier experience? Add your EtherScan API key to more
-          quickly download external contract sources.
+          ️🏎 Want a speedier experience? Add your EtherScan API key to
+          more quickly download external contract sources.
         
         
           
         
           
-            We found an EtherScan API key that you've previously entered via
+            🕵️‍♀️ We found an EtherScan API key that you've previously entered via
             your browser.
           {" "}
           Delete it from browser storage to use another key.

From 34dfa6eb94642186022112bcf36402e77579d471 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 13 Jun 2023 15:43:00 -0400
Subject: [PATCH 131/189] make button icons larger

---
 .../components/composed/Debugger/Controls/icons/Continue.tsx  | 4 ++--
 .../src/components/composed/Debugger/Controls/icons/Into.tsx  | 4 ++--
 .../src/components/composed/Debugger/Controls/icons/Next.tsx  | 4 ++--
 .../src/components/composed/Debugger/Controls/icons/Out.tsx   | 4 ++--
 .../src/components/composed/Debugger/Controls/icons/Over.tsx  | 4 ++--
 .../src/components/composed/Debugger/Controls/icons/Reset.tsx | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/icons/Continue.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/icons/Continue.tsx
index 26abb14a08d..6dbae3fdf4b 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/icons/Continue.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/icons/Continue.tsx
@@ -1,8 +1,8 @@
 export const Continue = () => {
   return (
      {
   return (
      {
   return (
      {
   return (
      {
   return (
      {
   return (
     
Date: Tue, 13 Jun 2023 16:47:05 -0400
Subject: [PATCH 132/189] add a check to make sure the source id is defined
 before setting

---
 .../dashboard/src/components/composed/Debugger/index.tsx     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index b8c17da0753..ba7935751c1 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -110,7 +110,10 @@ function Debugger(): JSX.Element {
         session.selectors.stacktrace.current.report
       )[0].address;
       // when the contract is "unknown", the source id will be the address
-      setCurrentSourceId(currentContractAddress);
+      // we need this if check so that no loop occurs when the value is falsy
+      if (currentContractAddress) {
+        setCurrentSourceId(currentContractAddress);
+      }
     }
     currentStep = session.view(session.selectors.trace.index);
   }

From 9696257c83d3e958e01b706d4a80c5b4db55b17e Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 14 Jun 2023 10:50:53 -0400
Subject: [PATCH 133/189] limit ganache output in preparing screen to 6 lines

---
 .../components/composed/Debugger/PreparingSession.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 827f3b4ae7f..a31c539b826 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -5,6 +5,9 @@ const useStyles = createStyles(() => ({
   title: {
     fontSize: 18,
     marginLeft: 20
+  },
+  container: {
+    height: "40%"
   }
 }));
 
@@ -13,7 +16,11 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
   const [ganacheOutput, setGanacheOutput] = useState([]);
 
   useEffect(() => {
-    setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
+    if (ganacheOutput.length === 6) {
+      setGanacheOutput(ganacheOutput.slice(1).concat(ganacheLoggingOutput));
+    } else {
+      setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
+    }
   }, [ganacheLoggingOutput]);
 
   return (
@@ -23,7 +30,7 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
       align="center"
       style={{ height: "calc(100vh - 108px)" }}
     >
-      

+      

         
           
           


From c24e46950575c9e14765738ad745794e9d773d7d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 14 Jun 2023 11:49:59 -0400
Subject: [PATCH 134/189] fix some spacing issues related to source material

---
 .../src/components/MantineGlobal.tsx          |  4 +--
 .../Debugger/Sources/Source/SourceLine.tsx    | 30 ++++++++++++-------
 .../composed/Debugger/utils/source.ts         |  3 ++
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 739c4e59534..9f9e10ddf7a 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -48,9 +48,7 @@ function MantineGlobal(): JSX.Element {
             // class for highlighting source material in debugger
             ".truffle-debugger-text-highlighted": {
               backgroundColor:
-                colorScheme === "dark" ? "#4444aa60" : "#ffff0050",
-              display: "inline-block",
-              height: "100%"
+                colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
             },
 
             ".truffle-debugger-input-and-button": {
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 8eb0ded5bc9..9994bc00780 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -17,20 +17,27 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     display: "flex"
   },
   spacer: {
-    minHeight: 16,
-    minWidth: 16,
-    height: 16,
-    width: 16,
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
     marginRight: 5
   },
+  breakpointSpacerContainer: {
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
+    display: "flex",
+    marginRight: 5,
+    alignItems: "center"
+  },
   breakpointSpacer: {
-    minHeight: 16,
-    minWidth: 16,
-    height: 16,
     width: 16,
+    height: 16,
     backgroundColor: "#FA5252",
-    borderRadius: 25,
-    marginRight: 5
+    borderRadius: 25
+  },
+  content: {
+    display: "flex"
   }
 }));
 
@@ -80,7 +87,9 @@ function SourceLine({
     breakpoints &&
     breakpoints[sourceId] &&
     breakpoints[sourceId].has(lineNumber) ? (
-      

+      

+        

+      

     ) : (
       

     );
@@ -95,6 +104,7 @@ function SourceLine({
     

       {spacer}
       

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source.ts
index 62ad64d67dd..af4a20404f0 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source.ts
@@ -57,6 +57,9 @@ export function addTextHighlightedClass(
   sourceRange: SourceRange
 ) {
   const editedLines = source.contents.split("\n").map((line, index) => {
+    if (line.length === 0) {
+      return line;
+    }
     const { start, end } = sourceRange;
     const lineHasHighlighting =
       source.id === sourceRange.source.id &&

From cc6f5d398cb0e7b759588571e7ccb94ba61db8a2 Mon Sep 17 00:00:00 2001
From: "g. nicholas d'andrea" 
Date: Wed, 14 Jun 2023 16:35:44 -0400
Subject: [PATCH 135/189] Use codec-components inside Dashboard Debugger

---
 packages/dashboard/package.json                        | 10 ++--------
 .../src/components/composed/Debugger/Variables.tsx     |  8 ++------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 8e9e3955faa..0e81fae257d 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -35,25 +35,19 @@
     "@emotion/react": "^11.9.3",
     "@truffle/codec": "^0.17.0",
     "@truffle/config": "^1.3.58",
+    "@truffle/codec-components": "^0.1.0-canary-8",
     "@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": "^11.1.4",
     "@mantine/core": "^5.10.5",
     "@mantine/hooks": "^5.10.5",
     "@mantine/notifications": "^5.10.5",
     "@mantine/prism": "^5.10.5",
-    "@truffle/debugger": "^11.0.27",
     "browser-util-inspect": "0.2.0",
-    "@truffle/debug-utils": "^6.0.48",
-    "@truffle/debugger": "^11.0.32",
-    "@truffle/debug-utils": "^6.0.48",
-    "@truffle/fetch-and-compile": "^0.5.41",
     "@truffle/debug-utils": "^6.0.50",
-    "browser-util-inspect": "0.2.0",
-    "@truffle/debugger": "^11.1.1",
-    "@truffle/fetch-and-compile": "^0.5.45",
     "cors": "^2.8.5",
     "debug": "^4.3.2",
     "ethers": "^5.6.9",
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 80090d17e82..94fa0a93c55 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { Session } from "src/components/composed/Debugger/utils";
 import inspect from "browser-util-inspect";
 import * as Codec from "@truffle/codec";
+import * as CodecComponents from "@truffle/codec-components/react";
 import { createStyles, Flex } from "@mantine/core";
 
 const useStyles = createStyles(theme => ({
@@ -78,12 +79,7 @@ function Variables({
                 <>
                   
{"  " + variableName}

                   

-                    {inspect(
-                      new Codec.Export.ResultInspector(
-                        variables[variableName],
-                        { renderMappingsViaObjects: true }
-                      )
-                    )}
+                    
                   

                 
               );

From 583f6fe5bca42828570fc37f71f160db88bdf693 Mon Sep 17 00:00:00 2001
From: cliffoo <41348973+cliffoo@users.noreply.github.com>
Date: Wed, 14 Jun 2023 17:20:10 -0400
Subject: [PATCH 136/189] dashboard: Import codec components styles

---
 packages/dashboard/package.json               |  2 +
 .../composed/Debugger/Variables.tsx           |  1 +
 packages/dashboard/webpack.config.ts          |  4 +
 yarn.lock                                     | 90 ++++++++++++++++++-
 4 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 0e81fae257d..e5e08b5d69e 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -49,6 +49,7 @@
     "browser-util-inspect": "0.2.0",
     "@truffle/debug-utils": "^6.0.50",
     "cors": "^2.8.5",
+    "css-loader": "^6.8.1",
     "debug": "^4.3.2",
     "ethers": "^5.6.9",
     "express": "^4.17.1",
@@ -65,6 +66,7 @@
     "react-feather": "^2.0.10",
     "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",
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 94fa0a93c55..3c43a76563f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -3,6 +3,7 @@ import type { Session } from "src/components/composed/Debugger/utils";
 import inspect from "browser-util-inspect";
 import * as Codec from "@truffle/codec";
 import * as CodecComponents from "@truffle/codec-components/react";
+import "@truffle/codec-components/react-styles";
 import { createStyles, Flex } from "@mantine/core";
 
 const useStyles = createStyles(theme => ({
diff --git a/packages/dashboard/webpack.config.ts b/packages/dashboard/webpack.config.ts
index 66a02efbc00..29a8bff0fae 100644
--- a/packages/dashboard/webpack.config.ts
+++ b/packages/dashboard/webpack.config.ts
@@ -79,6 +79,10 @@ const config: webpack.Configuration = {
       {
         test: /\.(png|ttf)$/,
         type: "asset/resource"
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"]
       }
     ]
   },
diff --git a/yarn.lock b/yarn.lock
index 818f0253720..326efdbb069 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11861,6 +11861,20 @@ crypto-browserify@^3.12.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-loader@^6.8.1:
+  version "6.8.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.8.1.tgz#0f8f52699f60f5e679eab4ec0fcd68b8e8a50a88"
+  integrity sha512-xDAXtEVGlD0gJ07iclwWVkLoZOpEvAWaSyf6W18S2pOC//K8+qUDIx8IIT3D+HjnmkJPQeesOPv5aiUaJsCM2g==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.21"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.3"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.3.8"
+
 css-select@^4.1.3:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@@ -11892,6 +11906,11 @@ css-what@^6.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssfilter@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
@@ -16362,6 +16381,11 @@ iconv-lite@^0.6.2:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 idb@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@@ -21663,6 +21687,47 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz#b08eb4f083050708998ba2c6061b50c2870ca524"
+  integrity sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-values-parser@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@@ -21690,7 +21755,7 @@ postcss@^8.1.7, postcss@^8.2.13:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.23:
+postcss@^8.4.21, postcss@^8.4.23:
   version "8.4.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
   integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
@@ -23549,7 +23614,7 @@ semver@7.5.2:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.2:
+semver@7.x, semver@^7.0.0, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.7, semver@^7.5.2:
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e"
   integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==
@@ -23561,6 +23626,20 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.1, semver@^7.3.5:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  dependencies:
+    lru-cache "^6.0.0"
+
+semver@^7.3.8:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+  dependencies:
+    lru-cache "^6.0.0"
+
 semver@~5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
@@ -24645,6 +24724,11 @@ strong-log-transformer@^2.1.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
+style-loader@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.3.tgz#bba8daac19930169c0c9c96706749a597ae3acff"
+  integrity sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==
+
 stylis@4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
@@ -25780,7 +25864,7 @@ utf8@3.0.0, utf8@^3.0.0:
   resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
   integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=

From bc697dd7b20959b19605af5127a84eda54229b98 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 20 Jun 2023 16:55:30 -0400
Subject: [PATCH 137/189] complete html broken when we chop up the source code
 and use   for spaces in source code

---
 .../utils/{constants.tsx => constants.ts}     |   0
 .../utils/source/getCurrentSourceRange.ts     |  16 +++
 .../Debugger/utils/source/htmlUtils.ts        |  47 +++++++
 .../composed/Debugger/utils/source/index.ts   |   3 +
 .../Debugger/utils/{ => source}/source.ts     | 126 ++++++++++--------
 5 files changed, 134 insertions(+), 58 deletions(-)
 rename packages/dashboard/src/components/composed/Debugger/utils/{constants.tsx => constants.ts} (100%)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/utils/source/getCurrentSourceRange.ts
 create mode 100644 packages/dashboard/src/components/composed/Debugger/utils/source/htmlUtils.ts
 create mode 100644 packages/dashboard/src/components/composed/Debugger/utils/source/index.ts
 rename packages/dashboard/src/components/composed/Debugger/utils/{ => source}/source.ts (70%)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/constants.tsx b/packages/dashboard/src/components/composed/Debugger/utils/constants.ts
similarity index 100%
rename from packages/dashboard/src/components/composed/Debugger/utils/constants.tsx
rename to packages/dashboard/src/components/composed/Debugger/utils/constants.ts
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/getCurrentSourceRange.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/getCurrentSourceRange.ts
new file mode 100644
index 00000000000..9a63f5c096e
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/getCurrentSourceRange.ts
@@ -0,0 +1,16 @@
+import type { Session } from "src/components/composed/Debugger/utils";
+
+export function getCurrentSourceRange(session: Session) {
+  const { selectors: $ } = session;
+  const traceIndex = session.view($.trace.index);
+  const { id } = session.view($.sourcemapping.current.source);
+  const {
+    lines: { start, end }
+  } = session.view($.sourcemapping.current.sourceRange);
+  return {
+    traceIndex,
+    source: { id },
+    start,
+    end
+  };
+}
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/htmlUtils.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/htmlUtils.ts
new file mode 100644
index 00000000000..f4c80d0ca7a
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/htmlUtils.ts
@@ -0,0 +1,47 @@
+export function removeCompleteSpanPairs(spanTags: string[] | null) {
+  if (spanTags === null) return [];
+  let stillNeedsProcessing: boolean = true;
+  while (stillNeedsProcessing) {
+    let spanPairRemovedThisPass: boolean = false;
+    for (let index = 0; index < spanTags.length - 1; index++) {
+      if (
+        spanTags[index].startsWith(""
+      ) {
+        spanTags.splice(index, 2); //remove the pair
+        spanPairRemovedThisPass = true;
+        break;
+      }
+    }
+    // when we don't remove anything else it means we've gotten all pairs
+    if (!spanPairRemovedThisPass) {
+      stillNeedsProcessing = false;
+    }
+  }
+  return spanTags;
+}
+
+export function completeMultilineSpans(sourceLines: string[]) {
+  let openTags: string[] = [];
+  return sourceLines.reduce((a, line) => {
+    let processedLine: string = "";
+    let numberOfOpenTags: number = openTags.length;
+    const spanTags = line.match(/(]+>|<\/span>)/g);
+
+    const incompleteSpanTags = removeCompleteSpanPairs(spanTags);
+    // start the line with all open tags
+    processedLine = openTags.join("");
+    for (const incompleteTag of incompleteSpanTags) {
+      if (incompleteTag === "") {
+        openTags.pop();
+        numberOfOpenTags = numberOfOpenTags - 1;
+      } else {
+        openTags.push(incompleteTag);
+        numberOfOpenTags = numberOfOpenTags + 1;
+      }
+    }
+    processedLine = processedLine + line + "".repeat(numberOfOpenTags);
+    a.push(processedLine);
+    return a;
+  }, [] as string[]);
+}
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/index.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/index.ts
new file mode 100644
index 00000000000..d45677d0c0c
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/index.ts
@@ -0,0 +1,3 @@
+export * from "src/components/composed/Debugger/utils/source/getCurrentSourceRange";
+export * from "src/components/composed/Debugger/utils/source/htmlUtils";
+export * from "src/components/composed/Debugger/utils/source/source";
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
similarity index 70%
rename from packages/dashboard/src/components/composed/Debugger/utils/source.ts
rename to packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index af4a20404f0..8e72305a0af 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -2,13 +2,12 @@ import { unified } from "unified";
 import rehypeStringify from "rehype-stringify";
 import { lowlight } from "lowlight/lib/core";
 import { solidity } from "highlightjs-solidity";
-import { selectors as $ } from "@truffle/debugger";
 import {
   highlightedTextTag,
   closingHighlightedTextTag
 } from "src/components/composed/Debugger/utils";
+import { completeMultilineSpans } from "src/components/composed/Debugger/utils/source/htmlUtils";
 import type {
-  Session,
   Source,
   SourceRange
 } from "src/components/composed/Debugger/utils";
@@ -20,13 +19,13 @@ export function convertSourceToHtml({
   source: Source;
   sourceRange: SourceRange;
 }) {
-  // DETERMINE WHERE TEXT IS HIGHLIGHTED AND MARK WITH COMMENTS
-  // add comment markers for where spans will go later designating debugger
-  // highlighting - comments so lowlight doesn't choke on html
-  const sourceWithHighlightedMarkings = addTextHighlightedClass(
-    source,
-    sourceRange
-  );
+  // DETERMINE WHERE TEXT IS HIGHLIGHTED AND MARK
+  // for lines that are fully highlighted, we don't update them but mark it in
+  // an array - for partially hightlighted lines, we add comment markers for
+  // where spans will go later designating debugger highlighting - we mark
+  // them here as comments so lowlight doesn't choke on html
+  const { sourceWithHighlightedMarkings, fullyHighlightedLines } =
+    markTextHighlighted(source, sourceRange);
 
   // ADD SYNTAX HIGHLIGHTING (HTML) AND BREAK INTO INDIVIDUAL LINES
   const sourceWithSyntaxHighlighting = addSyntaxHighlighting(
@@ -34,15 +33,18 @@ export function convertSourceToHtml({
   ).split("\n");
 
   // COMPLETE LOWLIGHT'S HTML SINCE WE BROKE THE SOURCE INTO LINES
-  // HACK: we need to detect where lowlight added spans for multiline comments
+  // HACK: we need to detect where lowlight added spans for multiline stuff
   // and add more because we break the source into lines
-  const sourceWithAddedSpans = addMultilineCommentSpans(
+  const sourceWithAddedSpans = completeMultilineSpans(
     sourceWithSyntaxHighlighting
   );
 
   // REPLACE OUR HIGHLIGHTING MARKERS WITH HTML
   // replace comment markers with spans denoting the debugger's highlighted text
-  return replaceTextHighlightedMarkings(sourceWithAddedSpans);
+  return replaceTextHighlightedMarkings({
+    source: sourceWithAddedSpans,
+    fullyHighlightedLines
+  });
 }
 
 const textHighlightingBeginsMarker = ` /****truffle-debugger-highlight-begin****/`;
@@ -52,10 +54,8 @@ const closingSpan = ``;
 // the markers with our spans for highlighting
 const highlightJsCommentSpan = ``;
 
-export function addTextHighlightedClass(
-  source: Source,
-  sourceRange: SourceRange
-) {
+export function markTextHighlighted(source: Source, sourceRange: SourceRange) {
+  const fullyHighlightedLines = new Set();
   const editedLines = source.contents.split("\n").map((line, index) => {
     if (line.length === 0) {
       return line;
@@ -84,7 +84,8 @@ export function addTextHighlightedClass(
         index > start.line &&
         end.column === line.length - 1);
     if (wholeLineHighlighted) {
-      return textHighlightingBeginsMarker + line + textHighlightingEndsMarker;
+      fullyHighlightedLines.add(index);
+      return line;
     }
 
     let editedLine;
@@ -124,11 +125,22 @@ export function addTextHighlightedClass(
   });
 
   return {
-    ...source,
-    contents: editedLines.join("\n")
+    fullyHighlightedLines,
+    sourceWithHighlightedMarkings: {
+      ...source,
+      contents: editedLines.join("\n")
+    }
   };
 }
 
+lowlight.registerLanguage("solidity", solidity);
+const processor = unified().use(rehypeStringify);
+
+export function addSyntaxHighlighting(source: Source) {
+  const highlighted = lowlight.highlight("solidity", source.contents);
+  return processor.stringify(highlighted);
+}
+
 export function addMultilineCommentSpans(sourceLines: string[]) {
   let inMultilineComment: boolean = false;
   const lowlightCommentSpan = ``;
@@ -158,46 +170,44 @@ export function addMultilineCommentSpans(sourceLines: string[]) {
   return sourceWithSpans;
 }
 
-export function getCurrentSourceRange(session: Session) {
-  const traceIndex = session.view($.trace.index);
-  const { id } = session.view($.sourcemapping.current.source);
-  const {
-    lines: { start, end }
-  } = session.view($.sourcemapping.current.sourceRange);
-  return {
-    traceIndex,
-    source: { id },
-    start,
-    end
-  };
-}
-
-lowlight.registerLanguage("solidity", solidity);
-const processor = unified().use(rehypeStringify);
-
-export function addSyntaxHighlighting(source: Source) {
-  const highlighted = lowlight.highlight("solidity", source.contents);
-  return processor.stringify(highlighted);
-}
-
-export function replaceTextHighlightedMarkings(lines: string[]) {
-  return lines.map(line => {
+export function replaceTextHighlightedMarkings({
+  source,
+  fullyHighlightedLines
+}: {
+  source: string[];
+  fullyHighlightedLines: Set;
+}) {
+  return source.map((line, index) => {
+    // wrap the entire thing if it is fully highlighted
+    if (fullyHighlightedLines.has(index)) {
+      return highlightedTextTag + line + closingHighlightedTextTag;
+    }
     // we need to add the space to make lowlight parse the comment correctly
     // as a comment as there are some cases where it marks it incorrectly
-    return line
-      .replace(
-        " " +
-          highlightJsCommentSpan +
-          textHighlightingBeginsMarker.slice(1) +
-          closingSpan,
-        highlightedTextTag
-      )
-      .replace(
-        " " +
-          highlightJsCommentSpan +
-          textHighlightingEndsMarker.slice(1) +
-          closingSpan,
-        closingHighlightedTextTag
-      );
+    return (
+      line
+        .replaceAll(
+          " " +
+            highlightJsCommentSpan +
+            textHighlightingBeginsMarker.slice(1) +
+            closingSpan,
+          highlightedTextTag
+        )
+        .replaceAll(
+          " " +
+            highlightJsCommentSpan +
+            textHighlightingEndsMarker.slice(1) +
+            closingSpan,
+          closingHighlightedTextTag
+        )
+        // sometimes the markings don't get wrapped by lowlight for some reason
+        // we replace the ones it missed here
+        .replaceAll(textHighlightingBeginsMarker.slice(1), highlightedTextTag)
+        .replaceAll(
+          textHighlightingEndsMarker.slice(1),
+          closingHighlightedTextTag
+        )
+        .replace(/(?
Date: Wed, 21 Jun 2023 16:00:37 -0400
Subject: [PATCH 138/189] separate source material into two panes: line number
 and source material

---
 .../Debugger/Sources/Source/LineNumber.tsx    | 92 +++++++++++++++++++
 .../Debugger/Sources/Source/SourceLine.tsx    | 62 +------------
 .../Debugger/Sources/Source/index.tsx         | 87 ++++++++++++------
 3 files changed, 154 insertions(+), 87 deletions(-)
 create mode 100644 packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
new file mode 100644
index 00000000000..bf4d3204c91
--- /dev/null
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
@@ -0,0 +1,92 @@
+import {
+  highlightedTextTag,
+  closingHighlightedTextTag
+} from "src/components/composed/Debugger/utils";
+import { createStyles } from "@mantine/core";
+import { useDash } from "src/hooks";
+
+interface LineNumberProps {
+  lineHasHighlighting: boolean;
+  lineNumber: number;
+  lineNumberGutterWidth: number;
+  sourceId: string;
+}
+
+const useStyles = createStyles(() => ({
+  lineNumber: {
+    display: "flex"
+  },
+  spacer: {
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
+    marginRight: 5
+  },
+  breakpointSpacerContainer: {
+    minHeight: 22,
+    minWidth: 22,
+    width: 22,
+    display: "flex",
+    marginRight: 5,
+    alignItems: "center"
+  },
+  breakpointSpacer: {
+    width: 16,
+    height: 16,
+    backgroundColor: "#FA5252",
+    borderRadius: 25
+  }
+}));
+
+function LineNumber({
+  lineHasHighlighting,
+  lineNumberGutterWidth,
+  sourceId,
+  lineNumber
+}: LineNumberProps): JSX.Element {
+  const { classes } = useStyles();
+  const {
+    state: {
+      debugger: { breakpoints }
+    },
+    operations: { toggleDebuggerBreakpoint }
+  } = useDash()!;
+  // if the line contains highlighting we highlight the line number as well
+  const lineNumberDisplay = lineHasHighlighting
+    ? `` +
+      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
+      highlightedTextTag +
+      lineNumber +
+      closingHighlightedTextTag +
+      "  " +
+      ``
+    : `` +
+      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
+      lineNumber +
+      "  " +
+      ``;
+
+  const spacer =
+    breakpoints &&
+    breakpoints[sourceId] &&
+    breakpoints[sourceId].has(lineNumber) ? (
+      

+        

+      

+    ) : (
+      

+    );
+
+  const handleClick = () => {
+    toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
+  };
+
+  return (
+    

+      {spacer}
+      

+    

+  );
+}
+
+export default LineNumber;
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 9994bc00780..b04f3e14474 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -1,9 +1,5 @@
 import { createStyles } from "@mantine/core";
 import { useDash } from "src/hooks";
-import {
-  highlightedTextTag,
-  closingHighlightedTextTag
-} from "src/components/composed/Debugger/utils";
 
 const useStyles = createStyles((theme, _params, _getRef) => ({
   lineNumber: {
@@ -16,27 +12,8 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
     height: 22,
     display: "flex"
   },
-  spacer: {
-    minHeight: 22,
-    minWidth: 22,
-    width: 22,
-    marginRight: 5
-  },
-  breakpointSpacerContainer: {
-    minHeight: 22,
-    minWidth: 22,
-    width: 22,
-    display: "flex",
-    marginRight: 5,
-    alignItems: "center"
-  },
-  breakpointSpacer: {
-    width: 16,
-    height: 16,
-    backgroundColor: "#FA5252",
-    borderRadius: 25
-  },
   content: {
+    height: 22,
     display: "flex"
   }
 }));
@@ -44,55 +21,23 @@ const useStyles = createStyles((theme, _params, _getRef) => ({
 interface SourceLineProps {
   line: string;
   lineNumber: number;
-  lineNumberGutterWidth: number;
   lastLine: boolean;
   firstHighlightedLine: boolean;
   sourceId: string;
-  lineHasHighlighting: boolean;
 }
 
 function SourceLine({
   line,
   lineNumber,
-  lineNumberGutterWidth,
   lastLine,
-  sourceId,
-  lineHasHighlighting
+  sourceId
 }: SourceLineProps): JSX.Element {
   const { classes } = useStyles();
   const {
-    state: {
-      debugger: { breakpoints }
-    },
     operations: { toggleDebuggerBreakpoint }
   } = useDash()!;
 
   if (!lastLine) line += "\n";
-  // if the line contains highlighting we highlight the line number as well
-  const lineNumberDisplay = lineHasHighlighting
-    ? `` +
-      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
-      highlightedTextTag +
-      lineNumber +
-      closingHighlightedTextTag +
-      "  " +
-      ``
-    : `` +
-      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
-      lineNumber +
-      "  " +
-      ``;
-
-  const spacer =
-    breakpoints &&
-    breakpoints[sourceId] &&
-    breakpoints[sourceId].has(lineNumber) ? (
-      

-        

-      

-    ) : (
-      

-    );
 
   const handleClick = () => {
     toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
@@ -102,11 +47,10 @@ function SourceLine({
 
   return (
     

-      {spacer}
       

     

   );
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index dc5dec9cfd2..ba4c11e8ba7 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -1,10 +1,11 @@
 import SourceLine from "src/components/composed/Debugger/Sources/Source/SourceLine";
+import LineNumber from "src/components/composed/Debugger/Sources/Source/LineNumber";
 import type {
   Source as SourceType,
   SourceRange
 } from "src/components/composed/Debugger/utils";
 import { convertSourceToHtml } from "src/components/composed/Debugger/utils";
-import { createStyles } from "@mantine/core";
+import { createStyles, Flex } from "@mantine/core";
 
 const useStyles = createStyles(theme => ({
   sourceContainer: {
@@ -19,6 +20,16 @@ const useStyles = createStyles(theme => ({
     },
     "paddingTop": 15,
     "paddingLeft": 15
+  },
+  lineNumbersContainer: {
+    height: 22,
+    display: "flex",
+    flexDirection: "column"
+  },
+  sourceLineContainer: {
+    height: 22,
+    display: "flex",
+    flexDirection: "column"
   }
 }));
 
@@ -29,41 +40,61 @@ interface SourceProps {
 
 function Source({ source, sourceRange }: SourceProps): JSX.Element {
   const { classes } = useStyles();
-  const sourceLines = convertSourceToHtml({ source, sourceRange });
+  const rawSourceLines = convertSourceToHtml({ source, sourceRange });
 
   const { start, end } = sourceRange;
-  const lineNumberGutterWidth = sourceLines.length.toString().length;
+  const lineNumberGutterWidth = rawSourceLines.length.toString().length;
+
+  const lineNumbers: JSX.Element[] = [];
+  const sourceLines: JSX.Element[] = [];
+
+  rawSourceLines.map((line: string, index: number) => {
+    const sourceLineKey = `${source.id}-sourceLine-${index}`;
+    const lineNumberKey = `${source.id}-lineNumber-${index}`;
+    const lineHasHighlighting =
+      source.id === sourceRange.source.id &&
+      index >= start.line &&
+      (end.line === null ||
+        end.column === null ||
+        (end.column === 0 && index < end.line) ||
+        (end.column > 0 && index <= end.line));
+    const firstHighlightedLine = lineHasHighlighting && index === start.line;
+
+    const lineNumber = index + 1;
+
+    const sourceLineProps = {
+      key: sourceLineKey,
+      line,
+      lineNumber,
+      lineNumberGutterWidth,
+      lastLine: index === rawSourceLines.length - 1,
+      firstHighlightedLine,
+      sourceId: source.id,
+      lineHasHighlighting
+    };
+
+    const lineNumberProps = {
+      key: lineNumberKey,
+      lineHasHighlighting,
+      lineNumber,
+      lineNumberGutterWidth,
+      sourceId: source.id
+    };
+
+    sourceLines.push();
+    lineNumbers.push();
+  });
+
   return (
     

       
-        {sourceLines.map((line: string, index: number) => {
-          const key = `${source.id}-line-${index}`;
-          const lineHasHighlighting =
-            source.id === sourceRange.source.id &&
-            index >= start.line &&
-            (end.line === null ||
-              end.column === null ||
-              (end.column === 0 && index < end.line) ||
-              (end.column > 0 && index <= end.line));
-          const firstHighlightedLine =
-            lineHasHighlighting && index === start.line;
-
-          const props = {
-            key,
-            line,
-            lineNumber: index + 1,
-            lineNumberGutterWidth,
-            lastLine: index === sourceLines.length - 1,
-            firstHighlightedLine,
-            sourceId: source.id,
-            lineHasHighlighting
-          };
-
-          return ;
-        })}
+        
+          
{lineNumbers}

+          
{sourceLines}

+        
       

     

   );

From 66e6173d89c91967d42aad2e2d043bf34363a01c Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 22 Jun 2023 11:07:20 -0400
Subject: [PATCH 139/189] remove some unnecessary imports, some unused libs,
 update some deps, and change type of loop

remove unused libs and update some truffle deps
---
 packages/dashboard/package.json                      | 12 +++++-------
 .../composed/Debugger/Sources/Source/index.tsx       |  2 +-
 .../src/components/composed/Debugger/Variables.tsx   |  2 --
 .../dashboard/src/types/browser-util-inspect.d.ts    |  1 -
 packages/dashboard/src/types/debugger.d.ts           |  1 -
 yarn.lock                                            |  5 -----
 6 files changed, 6 insertions(+), 17 deletions(-)
 delete mode 100644 packages/dashboard/src/types/browser-util-inspect.d.ts

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index e5e08b5d69e..f1a4feb9256 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -35,19 +35,18 @@
     "@emotion/react": "^11.9.3",
     "@truffle/codec": "^0.17.0",
     "@truffle/config": "^1.3.58",
-    "@truffle/codec-components": "^0.1.0-canary-8",
+    "@truffle/decoder": "^6.1.0",
+    "@truffle/fetch-and-compile": "^0.5.51",
+    "@truffle/codec-components": "^0.1.0",
     "@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": "^11.1.4",
+    "@truffle/debugger": "^11.1.5",
     "@mantine/core": "^5.10.5",
     "@mantine/hooks": "^5.10.5",
     "@mantine/notifications": "^5.10.5",
     "@mantine/prism": "^5.10.5",
-    "browser-util-inspect": "0.2.0",
-    "@truffle/debug-utils": "^6.0.50",
+    "@truffle/debug-utils": "^6.0.52",
     "cors": "^2.8.5",
     "css-loader": "^6.8.1",
     "debug": "^4.3.2",
@@ -57,7 +56,6 @@
     "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",
     "open": "^8.4.0",
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
index ba4c11e8ba7..4c57e68f8d8 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/index.tsx
@@ -48,7 +48,7 @@ function Source({ source, sourceRange }: SourceProps): JSX.Element {
   const lineNumbers: JSX.Element[] = [];
   const sourceLines: JSX.Element[] = [];
 
-  rawSourceLines.map((line: string, index: number) => {
+  rawSourceLines.forEach((line: string, index: number) => {
     const sourceLineKey = `${source.id}-sourceLine-${index}`;
     const lineNumberKey = `${source.id}-lineNumber-${index}`;
     const lineHasHighlighting =
diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 3c43a76563f..ac77d127165 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 import type { Session } from "src/components/composed/Debugger/utils";
-import inspect from "browser-util-inspect";
-import * as Codec from "@truffle/codec";
 import * as CodecComponents from "@truffle/codec-components/react";
 import "@truffle/codec-components/react-styles";
 import { createStyles, Flex } from "@mantine/core";
diff --git a/packages/dashboard/src/types/browser-util-inspect.d.ts b/packages/dashboard/src/types/browser-util-inspect.d.ts
deleted file mode 100644
index a8ab96efb78..00000000000
--- a/packages/dashboard/src/types/browser-util-inspect.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module "browser-util-inspect";
diff --git a/packages/dashboard/src/types/debugger.d.ts b/packages/dashboard/src/types/debugger.d.ts
index 81d51e19317..17487d4a27e 100644
--- a/packages/dashboard/src/types/debugger.d.ts
+++ b/packages/dashboard/src/types/debugger.d.ts
@@ -1,2 +1 @@
 declare module "@truffle/debugger";
-declare module "browser-util-inspect";
diff --git a/yarn.lock b/yarn.lock
index 326efdbb069..2f3ad83d281 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10297,11 +10297,6 @@ browser-stdout@1.3.1:
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
-browser-util-inspect@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browser-util-inspect/-/browser-util-inspect-0.2.0.tgz#cdda8ce1a4a07a4386035168a228c8777bff459c"
-  integrity sha512-R7WvAj0p9FtwS2Jbtc1HUd1+YZdeb5EEqjBSbbOK3owJtW1viWyJDeTPy43QZ7bZ8POtb1yMv++h844486jMsQ==
-
 browserify-aes@^1.0.0, browserify-aes@^1.0.4, browserify-aes@^1.0.6, browserify-aes@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"

From 72f84854f44f8f96a688ccaf27d49ede0a17b007 Mon Sep 17 00:00:00 2001
From: "g. nicholas d'andrea" 
Date: Thu, 22 Jun 2023 14:40:42 -0400
Subject: [PATCH 140/189] Display variables in 
     with 

---
 .../composed/Debugger/Variables.tsx           | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index ac77d127165..aff9d91cdcb 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -41,9 +41,20 @@ const useStyles = createStyles(theme => ({
   variablesContent: {
     paddingLeft: 10
   },
+  variablesSection: {
+    listStyleType: "none",
+    marginBlockStart: "0em",
+    marginBlockEnd: "0em",
+    marginInlineStart: "0em",
+    marginInlineEnd: "0em",
+    paddingInlineStart: "0em",
+    marginBottom: "1em"
+  },
   variablesTypes: {
     fontSize: 12,
-    fontWeight: 800
+    fontWeight: 800,
+    textDecoration: "underline",
+    marginBottom: "0.5em"
   }
 }));
 
@@ -75,12 +86,14 @@ function Variables({
           .map((variableName: keyof typeof variables) => {
             if (variables) {
               return (
-                <>
-                  
    {"  " + variableName}
    
-                  
    
-                    
-                  
    
-                
+                
  • 
+                  
+                
    • 
               );
             } else {
               return undefined;
@@ -89,10 +102,10 @@ function Variables({
           .filter((item: JSX.Element | undefined) => item);
         if (variableValues.length > 0) {
           entries.push(
-            
    
+            
    
               
    {section}
    
-              {...variableValues}
-            
    
+              
      {...variableValues}
    
+            

           );
         }
       }
@@ -101,7 +114,7 @@ function Variables({
     }
 
     getVariables();
-  }, [currentStep, session, classes.variablesTypes]);
+  }, [currentStep, session, classes.variablesTypes, classes.variablesSection]);
 
   return (
     

From 1bcfa2ab23a957a10d0bec2e7dde52310652410d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 23 Jun 2023 12:54:24 -0400
Subject: [PATCH 141/189] update preparing session message

---
 .../src/components/composed/Debugger/PreparingSession.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index a31c539b826..997fd6b91b6 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -34,7 +34,7 @@ function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
         
           
           

-            Preparing your debugger session, this may take a minute.
+            Preparing your debugger session, this may take some time.
           

         
         {ganacheLoggingOutput.length > 0 ? (

From 892eefba4c65a9fe3d693a41c07bd50e03d0c83f Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 23 Jun 2023 17:04:58 -0400
Subject: [PATCH 142/189] add another step for preparation and put it in 'prep'
 mode earlier to make it feel faster

---
 packages/dashboard/src/components/composed/Debugger/index.tsx  | 3 +++
 .../dashboard/src/components/composed/Debugger/utils/status.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index ba7935751c1..e1b4122dd72 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -85,6 +85,7 @@ function Debugger(): JSX.Element {
     null
   );
   const inputsDisabled =
+    status === SessionStatus.PreparingForInitialization ||
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
     status === SessionStatus.Starting;
@@ -140,6 +141,7 @@ function Debugger(): JSX.Element {
   };
 
   const onButtonClick = async () => {
+    setStatus(SessionStatus.PreparingForInitialization);
     const provider = window.ethereum;
     if (!provider) {
       throw new Error(
@@ -266,6 +268,7 @@ function Debugger(): JSX.Element {
   }
 
   const preparingSession =
+    status === SessionStatus.PreparingForInitialization ||
     status === SessionStatus.Initializing ||
     status === SessionStatus.Fetching ||
     status === SessionStatus.Starting;
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/status.ts b/packages/dashboard/src/components/composed/Debugger/utils/status.ts
index f5edf7606d8..94098aa5c15 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/status.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/status.ts
@@ -1,5 +1,6 @@
 export enum SessionStatus {
   Inactive = "inactive",
+  PreparingForInitialization = "preparingForInitialization",
   Initializing = "initializing",
   Fetching = "fetching",
   Starting = "starting",

From 87c348a6a0fc9fa003bfaa98531c52dce94d6ca7 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 26 Jun 2023 15:19:28 -0400
Subject: [PATCH 143/189] add comment about why we add highlighting tags at the
 end of html processing

---
 .../src/components/composed/Debugger/utils/source/source.ts    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index 8e72305a0af..74ac88edfbb 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -83,6 +83,9 @@ export function markTextHighlighted(source: Source, sourceRange: SourceRange) {
       (index === end.line! &&
         index > start.line &&
         end.column === line.length - 1);
+    // if the whole line is highlighted, we'll add the highlighting later -
+    // weird html issues occur when we add it here due to us breaking up the
+    // html into lines, thus breaking multiline tags
     if (wholeLineHighlighted) {
       fullyHighlightedLines.add(index);
       return line;

From 2b26bc1168fc98bbe0b553b586921c76a38954ea Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 26 Jun 2023 16:06:51 -0400
Subject: [PATCH 144/189] add in hacky thing to deal with some instances of bad
 source maps

---
 .../composed/Debugger/utils/source/source.ts       | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index 74ac88edfbb..c344e714e2d 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -61,6 +61,20 @@ export function markTextHighlighted(source: Source, sourceRange: SourceRange) {
       return line;
     }
     const { start, end } = sourceRange;
+    // HACK: at times the debugger returns values of `null` which can mean that
+    // the source maps are bad - one case is where the end values are too large
+    // for a given source - here we try to account for this by assuming it
+    // goes until the end of the file
+    if (
+      source.id === sourceRange.source.id &&
+      index >= start.line &&
+      end.line === null
+    ) {
+      fullyHighlightedLines.add(index);
+      return line;
+    }
+    // END HACK
+
     const lineHasHighlighting =
       source.id === sourceRange.source.id &&
       index >= start.line &&

From b1a6fea3808353edb08c2ce6d52f4e32a0463152 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 27 Jun 2023 10:18:10 -0400
Subject: [PATCH 145/189] update yarn.lock

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 2f3ad83d281..59256b98060 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6572,7 +6572,7 @@
     utf8 "^3.0.0"
     web3-utils "1.10.0"
 
-"@truffle/debugger@^11.0.24":
+"@truffle/debugger@^11.1.5":
   version "11.1.5"
   resolved "https://registry.yarnpkg.com/@truffle/debugger/-/debugger-11.1.5.tgz#bd9f79bc00b110f1ef5436f1144edc22e0d099b9"
   integrity sha512-zRVmxVhxNHxJEaqsuHvCLdDAKr4QJiVwf7PI/iwP4YFEt9cjyEMEM9iKLU9nntuqvzWewgerlFpGdyGJYYwyrA==

From 2db4381ff00a307c011581541655b23e07c8eacf Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 27 Jun 2023 17:00:37 -0400
Subject: [PATCH 146/189] don't set breakpoints on source code but only the
 margin

---
 .../composed/Debugger/Sources/Source/LineNumber.tsx    |  5 ++++-
 .../composed/Debugger/Sources/Source/SourceLine.tsx    | 10 +---------
 .../composed/Debugger/Sources/Source/index.tsx         |  7 ++-----
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
index bf4d3204c91..156dcd136e6 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
@@ -14,7 +14,10 @@ interface LineNumberProps {
 
 const useStyles = createStyles(() => ({
   lineNumber: {
-    display: "flex"
+    "&:hover": {
+      cursor: "pointer"
+    },
+    "display": "flex"
   },
   spacer: {
     minHeight: 22,
diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index b04f3e14474..484cf1538a9 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -1,5 +1,4 @@
 import { createStyles } from "@mantine/core";
-import { useDash } from "src/hooks";
 
 const useStyles = createStyles((theme, _params, _getRef) => ({
   lineNumber: {
@@ -33,20 +32,13 @@ function SourceLine({
   sourceId
 }: SourceLineProps): JSX.Element {
   const { classes } = useStyles();
-  const {
-    operations: { toggleDebuggerBreakpoint }
-  } = useDash()!;
 
   if (!lastLine) line += "\n";
 
-  const handleClick = () => {
-    toggleDebuggerBreakpoint({ line: lineNumber, sourceId });
-  };
-
   const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
 
   return (
-    

+    

       
 ({
       theme.colorScheme === "dark" ? theme.colors["truffle-brown"][8] : "white"
   },
   source: {
-    "&:hover": {
-      cursor: "pointer"
-    },
-    "paddingTop": 15,
-    "paddingLeft": 15
+    paddingTop: 15,
+    paddingLeft: 15
   },
   lineNumbersContainer: {
     height: 22,

From a7543a79e01055565c479d25a67de6e869feb16b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 29 Jun 2023 10:46:54 -0400
Subject: [PATCH 147/189] make input responsive to enter key press

---
 .../src/components/composed/Debugger/index.tsx      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index e1b4122dd72..254bf482d5f 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -140,7 +140,7 @@ function Debugger(): JSX.Element {
     }
   };
 
-  const onButtonClick = async () => {
+  const startDebugger = async () => {
     setStatus(SessionStatus.PreparingForInitialization);
     const provider = window.ethereum;
     if (!provider) {
@@ -186,6 +186,16 @@ function Debugger(): JSX.Element {
     }
   };
 
+  const onButtonClick = () => startDebugger();
+
+  // make input responsive to "enter" key
+  const handleKeyDown = (e: any) => {
+    if (formDisabled) return;
+    if (e.keyCode === 13) {
+      startDebugger();
+    }
+  };
+
   const buttonStyles = {
     height: "42px",
     borderTopLeftRadius: "0px",
@@ -298,6 +308,7 @@ function Debugger(): JSX.Element {
               disabled={inputsDisabled}
               type="text"
               placeholder="Transaction hash"
+              onKeyDown={handleKeyDown}
             />
             
       
     
diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
index d67fe7f7644..718dffbdfbb 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/index.tsx
@@ -45,8 +45,7 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
     useDisclosure(false);
   const [confirmButtonHovered, confirmButtonHoveredHandlers] =
     useDisclosure(false);
-  const [simulateButtonHovered, simulateButtonHoveredHandlers] =
-    useDisclosure(false);
+  const [debugButtonHovered, debugButtonHoveredHandlers] = useDisclosure(false);
   const [collapsedDetailsHovered, collapsedDetailsHoveredHandlers] =
     useDisclosure(false);
   const { classes } = useStyles();
@@ -97,7 +96,7 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
           overviewBackHovered ||
           rejectButtonHovered ||
           confirmButtonHovered ||
-          simulateButtonHovered
+          debugButtonHovered
         }
         onBackClick={clickedHandlers.toggle}
         onBackEnter={overviewBackHoveredHandlers.open}
@@ -106,8 +105,8 @@ function RPC({ lifecycle }: RPCProps): JSX.Element {
         onRejectButtonLeave={rejectButtonHoveredHandlers.close}
         onConfirmButtonEnter={confirmButtonHoveredHandlers.open}
         onConfirmButtonLeave={confirmButtonHoveredHandlers.close}
-        onSimulateButtonEnter={simulateButtonHoveredHandlers.open}
-        onSimulateButtonLeave={simulateButtonHoveredHandlers.close}
+        onDebugButtonEnter={debugButtonHoveredHandlers.open}
+        onDebugButtonLeave={debugButtonHoveredHandlers.close}
       />
       

Date: Fri, 7 Jul 2023 14:38:43 -0400
Subject: [PATCH 158/189] add type

---
 .../src/components/composed/Debugger/PreparingSession.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 997fd6b91b6..e821be753c3 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -11,7 +11,11 @@ const useStyles = createStyles(() => ({
   }
 }));
 
-function PreparingSession({ ganacheLoggingOutput }: any): JSX.Element {
+function PreparingSession({
+  ganacheLoggingOutput
+}: {
+  ganacheLoggingOutput: string;
+}): JSX.Element {
   const { classes } = useStyles();
   const [ganacheOutput, setGanacheOutput] = useState([]);
 

From a68a77f89b9545a4e54e9a52cf6f99eccb278ff8 Mon Sep 17 00:00:00 2001
From: tyler 
Date: Fri, 7 Jul 2023 14:43:01 -0400
Subject: [PATCH 159/189] Update
 packages/dashboard/src/components/composed/Debugger/Variables.tsx

Co-authored-by: cliffoo <41348973+cliffoo@users.noreply.github.com>
---
 .../dashboard/src/components/composed/Debugger/Variables.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index aff9d91cdcb..1193c01003c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -76,7 +76,7 @@ function Variables({
       const sections = session.view(
         session.selectors.data.current.identifiers.sections
       );
-      const variables = await session!.variables();
+      const variables = await session.variables();
 
       const entries = [];
       // section here is a variable category such as a Solidity built-in

From 36a9998c8255f31d61aea97dc327001916a26418 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 7 Jul 2023 14:49:34 -0400
Subject: [PATCH 160/189] move etherscan api key name to constants

---
 .../dashboard/src/components/composed/Debugger/index.tsx  | 3 ++-
 packages/dashboard/src/utils/constants.ts                 | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index cbe58774618..54e15afc094 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -20,6 +20,7 @@ import type {
   BreakpointType,
   SourceRange
 } from "src/components/composed/Debugger/utils";
+import { etherscanApiKeyName } from "src/utils/constants";
 
 const useStyles = createStyles(theme => ({
   debugger: {
@@ -64,7 +65,7 @@ function Debugger(): JSX.Element {
     }
   } = useDash()!;
 
-  const [etherscanApiKey] = useLocalStorage({ key: "etherscan-api-key" });
+  const [etherscanApiKey] = useLocalStorage({ key: etherscanApiKeyName });
   const [error, setError] = useState();
   const [loggingOutput, setLoggingOutput] = useState("");
   const [status, setStatus] = useState(SessionStatus.Inactive);
diff --git a/packages/dashboard/src/utils/constants.ts b/packages/dashboard/src/utils/constants.ts
index 8a1215b9320..dde7afba1ce 100644
--- a/packages/dashboard/src/utils/constants.ts
+++ b/packages/dashboard/src/utils/constants.ts
@@ -10,7 +10,7 @@ export const decodableRpcMethodsArr = [
   "eth_signTypedData_v4"
 ] as const;
 export const decodableRpcMethods = new Set(decodableRpcMethodsArr);
-export type DecodableRpcMethod = typeof decodableRpcMethodsArr[number];
+export type DecodableRpcMethod = (typeof decodableRpcMethodsArr)[number];
 
 export const interactiveRpcMethodsArr = [
   ...decodableRpcMethodsArr,
@@ -19,14 +19,14 @@ export const interactiveRpcMethodsArr = [
   "eth_signTypedData_v1"
 ] as const;
 export const interactiveRpcMethods = new Set(interactiveRpcMethodsArr);
-export type InteractiveRpcMethod = typeof interactiveRpcMethodsArr[number];
+export type InteractiveRpcMethod = (typeof interactiveRpcMethodsArr)[number];
 
 export const unsupportedRpcMethodsArr = [
   "eth_sign",
   "eth_signTransaction"
 ] as const;
 export const unsupportedRpcMethods = new Set(unsupportedRpcMethodsArr);
-export type UnsupportedRpcMethod = typeof unsupportedRpcMethodsArr[number];
+export type UnsupportedRpcMethod = (typeof unsupportedRpcMethodsArr)[number];
 
 export const unsupportedMessageResponse = new Map(
   [
@@ -41,6 +41,8 @@ export const unsupportedMessageResponse = new Map(
   ]
 );
 
+export const etherscanApiKeyName = "trfl.dash.etherscan-api-key";
+
 export const chainIDtoName = {
   ...chainIDtoNameJson
 } as const;

From 576ae9c5931ed94027b378022cbfdab24997a42c Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Fri, 7 Jul 2023 14:58:23 -0400
Subject: [PATCH 161/189] cast window.ethereum as any to get rid of some
 ts-ignores

---
 .../src/components/composed/Debugger/utils/session.ts         | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/session.ts b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
index b46e611b880..d7a6365aff0 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/session.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/session.ts
@@ -16,8 +16,7 @@ export async function forkNetworkWithTxAndInitDebugger({
   const { method, params } = tx.message.payload;
   const ganacheOptions = {
     fork: {
-      // @ts-ignore
-      provider: window.ethereum
+      provider: window.ethereum as any
     },
     wallet: {
       unlockedAccounts: [params[0].from]
@@ -31,7 +30,6 @@ export async function forkNetworkWithTxAndInitDebugger({
     }
   };
 
-  // @ts-ignore
   const forkedProvider = ganacheProvider(ganacheOptions);
   const networkId = await forkedProvider.request({
     method: "net_version",

From 2a1d01b4a8445abf329a62bab37c2340a6d0769e Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 11:05:39 -0400
Subject: [PATCH 162/189] get rid of unnecessary flex

---
 .../components/composed/Debugger/Sources/Source/SourceLine.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 38285c5a718..5d7d494723c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -6,8 +6,7 @@ const useStyles = createStyles(() => ({
     display: "flex"
   },
   content: {
-    height: 22,
-    display: "flex"
+    height: 22
   }
 }));
 

From 44e8c9de88e89534c300be96a0347fb88060161b Mon Sep 17 00:00:00 2001
From: tyler 
Date: Mon, 10 Jul 2023 10:34:51 -0400
Subject: [PATCH 163/189] Update
 packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx

Co-authored-by: cliffoo <41348973+cliffoo@users.noreply.github.com>
---
 .../src/components/composed/Debugger/PreparingSession.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index e821be753c3..3712971e3b0 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -41,11 +41,9 @@ function PreparingSession({
             Preparing your debugger session, this may take some time.
           

         
-        {ganacheLoggingOutput.length > 0 ? (
-          
") }}
-          />
-        ) : null}
+        {ganacheLoggingOutput.length > 0 && (
+          
{ganacheOutput.join("\n")}

+        )}
       

     
   );

From 29bede6c691790afb705e487f8759d3c33b4e555 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 11:20:02 -0400
Subject: [PATCH 164/189] remove unnecessary escapes

---
 .../src/components/composed/Debugger/utils/source/source.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index c344e714e2d..f65efe5e1e1 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -52,7 +52,7 @@ const textHighlightingEndsMarker = ` /****truffle-debugger-highlight-end****/`;
 const closingSpan = ``;
 // lowlight wraps our markers in spans which we need to remove when we replace
 // the markers with our spans for highlighting
-const highlightJsCommentSpan = ``;
+const highlightJsCommentSpan = ``;
 
 export function markTextHighlighted(source: Source, sourceRange: SourceRange) {
   const fullyHighlightedLines = new Set();

From 47043301db90220518fd72d41974914c7a7a9942 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 11:21:23 -0400
Subject: [PATCH 165/189] re-add flex

---
 .../components/composed/Debugger/Sources/Source/SourceLine.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
index 5d7d494723c..38285c5a718 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/SourceLine.tsx
@@ -6,7 +6,8 @@ const useStyles = createStyles(() => ({
     display: "flex"
   },
   content: {
-    height: 22
+    height: 22,
+    display: "flex"
   }
 }));
 

From 24177e27f5474ecb18f04c4b303488aa64869834 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 15:22:45 -0400
Subject: [PATCH 166/189] use constant

---
 .../composed/Debugger/Home/EtherscanApiKeyPrompt.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
index 165ed15d83a..2de05edbe5c 100644
--- a/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Home/EtherscanApiKeyPrompt.tsx
@@ -8,6 +8,7 @@ import {
   createStyles
 } from "@mantine/core";
 import { useInputState, useLocalStorage } from "@mantine/hooks";
+import { etherscanApiKeyName } from "src/utils/constants";
 
 const useStyles = createStyles(theme => ({
   inputGroup: {
@@ -43,7 +44,7 @@ function EtherScanApiKeyPrompt() {
 
   const [etherscanApiKey, setEtherscanApiKey, removeEtherscanApiKey] =
     useLocalStorage({
-      key: "etherscan-api-key"
+      key: etherscanApiKeyName
     });
   const [inputValue, setInputValue] = useInputState("");
 

From 7de1f794a4f2ee7f7788d84bdc9d127f7dee0d0b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 15:31:47 -0400
Subject: [PATCH 167/189] move some styles into the component file and remove
 unused class

---
 .../dashboard/src/components/MantineGlobal.tsx   | 15 ---------------
 .../src/components/composed/Debugger/Stack.tsx   |  6 +-----
 .../src/components/composed/Debugger/index.tsx   | 16 +++++++++++++++-
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index 6c60848077f..ebd5243ac69 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -57,21 +57,6 @@ function MantineGlobal(): JSX.Element {
                 colorScheme === "dark" ? "#4444aa60" : "#ffff0050"
             },
 
-            ".truffle-debugger-input-and-button": {
-              display: "flex",
-              flexGrow: 1
-            },
-            ".truffle-debugger-input-and-button > div > input": {
-              borderTopRightRadius: 0,
-              borderBottomRightRadius: 0,
-              border: 0,
-              height: 42,
-              backgroundColor:
-                theme.colorScheme === "dark"
-                  ? theme.colors["truffle-brown"][5]
-                  : "#FFFFFF"
-            },
-
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index a281f662be9..0385273a52f 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -74,11 +74,7 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
         const displayAddress =
           address === undefined ? "unknown address" : address;
         const stackDisplay = `at ${name} [address ${displayAddress}]`;
-        return (
-          

-            {stackDisplay}
-          

-        );
+        return 
{stackDisplay}
;
       });
       setOutput(entries);
     }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 54e15afc094..b87d54910be 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -42,6 +42,20 @@ const useStyles = createStyles(theme => ({
         ? theme.colors["truffle-brown"][8]
         : theme.colors["truffle-beige"][3]
   },
+  inputAndButton: {
+    "display": "flex",
+    "flexGrow": 1,
+    "& > div > input": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      border: 0,
+      height: 42,
+      backgroundColor:
+        theme.colorScheme === "dark"
+          ? theme.colors["truffle-brown"][5]
+          : "#FFFFFF"
+    }
+  },
   mainContent: {
     height: "calc(100vh - 108px)",
     paddingBottom: 36,
@@ -302,7 +316,7 @@ function Debugger(): JSX.Element {
       

         

           
-          

+          

             
Date: Mon, 10 Jul 2023 15:58:06 -0400
Subject: [PATCH 168/189] Update
 packages/dashboard/src/components/composed/Debugger/Sources/index.tsx

Co-authored-by: cliffoo <41348973+cliffoo@users.noreply.github.com>
---
 .../src/components/composed/Debugger/Sources/index.tsx         | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
index 8b254888d87..9d1238d8c78 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx
@@ -89,8 +89,7 @@ function Sources({
   // display the first source when currentSourceRange is `undefined`
   useEffect(() => {
     if (currentSourceId === undefined) {
-      const sourceIds = sources.map(({ id }) => id);
-      setCurrentSourceId(sourceIds[0]);
+      setCurrentSourceId(sources[0].id);
     }
   }, [sources, currentSourceId, setCurrentSourceId]);
 

From 9729d8b024907766df76fddab4e8975e77ce622e Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 17:21:35 -0400
Subject: [PATCH 169/189] change type of variable and get rid of some
 ts-ignores

---
 .../composed/Debugger/Breakpoints/Breakpoint.tsx  |  4 ++--
 .../src/components/composed/Debugger/index.tsx    | 15 +++++++--------
 .../components/composed/Debugger/utils/types.ts   |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index fef5c77ff6d..c8e0233d7cb 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -46,7 +46,7 @@ function Breakpoint({
         onClick={() =>
           handleBreakpointDeleteClick({
             sourceId,
-            line: line.toString()
+            line: line
           })
         }
       >

@@ -55,7 +55,7 @@ function Breakpoint({
         onClick={() =>
           handleBreakpointComponentClick({
             sourceId,
-            line: line.toString()
+            line: line
           })
         }
       >
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index b87d54910be..e072bd5bd69 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -144,15 +144,15 @@ function Debugger(): JSX.Element {
   }) => {
     const lineNumber = line + 1;
     const lineId = `${sourceId.slice(-10)}-${lineNumber}`;
-    const targetLine: any = document.getElementById(lineId);
+    const targetLine: HTMLElement | null = document.getElementById(lineId);
     if (targetLine) {
       const offsetTop = targetLine.offsetTop;
-      // @ts-ignore
       const scroller = document.getElementById(`source-${sourceId.slice(-10)}`);
-      // @ts-ignore
-      const scrollerHeight = scroller.offsetHeight;
-      // @ts-ignore - approx. 60% gets the line to the middle of the container
-      scroller.scrollTop = offsetTop - scrollerHeight * 0.6;
+      if (scroller) {
+        const scrollerHeight = scroller.offsetHeight;
+        // approx. 60% gets the line to the middle of the container
+        scroller.scrollTop = offsetTop - scrollerHeight * 0.6;
+      }
     }
   };
 
@@ -230,7 +230,6 @@ function Debugger(): JSX.Element {
   useEffect(() => {
     if (goToBreakpoint !== null) {
       const { sourceId, line } = goToBreakpoint;
-      // @ts-ignore
       scrollToLine({ sourceId, line });
       setGoToBreakpoint(null);
     }
@@ -247,7 +246,7 @@ function Debugger(): JSX.Element {
   const handleBreakpointDeleteClick = ({ sourceId, line }: BreakpointType) => {
     operations.toggleDebuggerBreakpoint({
       sourceId,
-      line: parseInt(line)
+      line
     });
   };
 
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/types.ts b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
index ee6c6debb4e..52e3e23432d 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/types.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
@@ -4,7 +4,7 @@ export type Selector = any;
 
 export type BreakpointType = {
   sourceId: string;
-  line: string;
+  line: number;
 };
 
 export type UnknownAddress = string;

From 72ff67c7399792bbd407ddc6442da83b1bb71af1 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 17:25:54 -0400
Subject: [PATCH 170/189] remove method that was replaced and never removed

---
 .../composed/Debugger/utils/source/source.ts  | 29 -------------------
 1 file changed, 29 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index f65efe5e1e1..728e208674d 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -158,35 +158,6 @@ export function addSyntaxHighlighting(source: Source) {
   return processor.stringify(highlighted);
 }
 
-export function addMultilineCommentSpans(sourceLines: string[]) {
-  let inMultilineComment: boolean = false;
-  const lowlightCommentSpan = ``;
-  const closingSpan = ``;
-  const sourceWithSpans: string[] = [];
-  for (const line of sourceLines) {
-    if (
-      !inMultilineComment &&
-      line.includes(lowlightCommentSpan) &&
-      !line.slice(line.indexOf(lowlightCommentSpan)).includes(closingSpan)
-    ) {
-      // line where a multiline comment begins with no closing span
-      inMultilineComment = true;
-      sourceWithSpans.push(line + closingSpan);
-    } else if (inMultilineComment && !line.includes(closingSpan)) {
-      // line in the middle of a multiline comment without closing span
-      sourceWithSpans.push(lowlightCommentSpan + line + closingSpan);
-    } else if (inMultilineComment && line.includes(closingSpan)) {
-      // line where a multiline comment begins
-      sourceWithSpans.push(lowlightCommentSpan + line);
-      inMultilineComment = false;
-    } else {
-      // line of code not in a multiline comment
-      sourceWithSpans.push(line);
-    }
-  }
-  return sourceWithSpans;
-}
-
 export function replaceTextHighlightedMarkings({
   source,
   fullyHighlightedLines

From 35277927bc6ae5984466585a420e6418fdc19db6 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Mon, 10 Jul 2023 17:58:52 -0400
Subject: [PATCH 171/189] re-add hover state for inactive navbar tabs

---
 .../composed/Sidebar/Middle/NavButton.tsx          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
index 2c9cbdcb066..8b283592e7d 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
@@ -3,7 +3,7 @@ import { UnstyledButton, Group, Text, createStyles } from "@mantine/core";
 import { useLocation } from "react-router-dom";
 
 const useStyles = createStyles((theme, _params, _getRef) => {
-  const { colors, colorScheme, radius } = theme;
+  const { colors, colorScheme, radius, fn } = theme;
   return {
     button: {
       display: "block",
@@ -22,6 +22,14 @@ const useStyles = createStyles((theme, _params, _getRef) => {
         colorScheme === "dark"
           ? colors["truffle-brown"][6]
           : colors["truffle-beige"][2]
+    },
+    inactive: {
+      "&:hover": {
+        backgroundColor:
+          colorScheme === "dark"
+            ? fn.lighten(colors["truffle-brown"][8], 0.08)
+            : fn.darken(colors["truffle-beige"][4], 0.08)
+      }
     }
   };
 });
@@ -51,7 +59,9 @@ function NavButton({
       p="xl"
       className={`${classes.button} ${
         disabled ? classes.disabled : undefined
-      } ${location.pathname.startsWith(to) ? classes.active : undefined}`}
+      } ${
+        location.pathname.startsWith(to) ? classes.active : classes.inactive
+      }`}
     >
       
         

From 393cd4b0e9832147bd96441298073d2c445a2d3b Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 10:21:24 -0400
Subject: [PATCH 172/189]  add two methods to session type and remove some
 ts-ignores

---
 .../components/composed/Debugger/Breakpoints/Breakpoint.tsx   | 4 ++--
 .../dashboard/src/components/composed/Debugger/utils/types.ts | 2 ++
 packages/dashboard/src/contexts/DashContext/state.ts          | 3 ---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
index c8e0233d7cb..52c7b2d79ab 100644
--- a/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Breakpoints/Breakpoint.tsx
@@ -46,7 +46,7 @@ function Breakpoint({
         onClick={() =>
           handleBreakpointDeleteClick({
             sourceId,
-            line: line
+            line
           })
         }
       >

@@ -55,7 +55,7 @@ function Breakpoint({
         onClick={() =>
           handleBreakpointComponentClick({
             sourceId,
-            line: line
+            line
           })
         }
       >
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/types.ts b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
index 52e3e23432d..4930e3e370b 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/types.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/types.ts
@@ -52,4 +52,6 @@ export interface Session {
   stepInto(): Promise;
   stepOut(): Promise;
   reset(): Promise;
+  addBreakpoint(arg: { line: number; sourceId: string }): void;
+  removeBreakpoint(arg: { line: number; sourceId: string }): void;
 }
diff --git a/packages/dashboard/src/contexts/DashContext/state.ts b/packages/dashboard/src/contexts/DashContext/state.ts
index d9eb2bd25b1..461cad92150 100644
--- a/packages/dashboard/src/contexts/DashContext/state.ts
+++ b/packages/dashboard/src/contexts/DashContext/state.ts
@@ -83,14 +83,12 @@ export const reducer = (state: State, action: Action): State => {
         state.debugger.breakpoints![sourceId]
       );
       if (breakpointExists) {
-        // @ts-ignore
         state.debugger.session!.removeBreakpoint({
           line: debuggerLine,
           sourceId
         });
         newBreakpointStateForSource.delete(line);
       } else {
-        // @ts-ignore
         state.debugger.session!.addBreakpoint({ line: debuggerLine, sourceId });
         newBreakpointStateForSource.add(line);
       }
@@ -114,7 +112,6 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         debugger: {
-          // @ts-ignore
           ...data,
           breakpoints: breakpointsInitialState
         }

From 5babf9080f77047895371fd36829dec3852ce024 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 15:25:09 -0400
Subject: [PATCH 173/189] use non-null assertion instead of conditional logic
 and use createStyles for button styles

---
 .../components/composed/Debugger/index.tsx    | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index e072bd5bd69..21b795a81bb 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -56,6 +56,11 @@ const useStyles = createStyles(theme => ({
           : "#FFFFFF"
     }
   },
+  button: {
+    height: "42px",
+    borderTopLeftRadius: "0px",
+    borderBottomLeftRadius: "0px"
+  },
   mainContent: {
     height: "calc(100vh - 108px)",
     paddingBottom: 36,
@@ -147,12 +152,12 @@ function Debugger(): JSX.Element {
     const targetLine: HTMLElement | null = document.getElementById(lineId);
     if (targetLine) {
       const offsetTop = targetLine.offsetTop;
-      const scroller = document.getElementById(`source-${sourceId.slice(-10)}`);
-      if (scroller) {
-        const scrollerHeight = scroller.offsetHeight;
-        // approx. 60% gets the line to the middle of the container
-        scroller.scrollTop = offsetTop - scrollerHeight * 0.6;
-      }
+      const scroller = document.getElementById(
+        `source-${sourceId.slice(-10)}`
+      )!;
+      const scrollerHeight = scroller.offsetHeight;
+      // approx. 60% gets the line to the middle of the container
+      scroller.scrollTop = offsetTop - scrollerHeight * 0.6;
     }
   };
 
@@ -212,12 +217,6 @@ function Debugger(): JSX.Element {
     }
   };
 
-  const buttonStyles = {
-    height: "42px",
-    borderTopLeftRadius: "0px",
-    borderBottomLeftRadius: "0px"
-  };
-
   useEffect(() => {
     if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
       const { source, start } = currentSourceRange!;
@@ -328,7 +327,7 @@ function Debugger(): JSX.Element {
             

From 42d496de43e5de07be8da66253d9cd974ed0e59d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 15:29:30 -0400
Subject: [PATCH 174/189] revert changes to the try in fetch-and-compile route

---
 packages/dashboard/lib/DashboardServer.ts | 54 +++++++++++------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/dashboard/lib/DashboardServer.ts b/packages/dashboard/lib/DashboardServer.ts
index 1df03a594cb..86fd02eaddb 100644
--- a/packages/dashboard/lib/DashboardServer.ts
+++ b/packages/dashboard/lib/DashboardServer.ts
@@ -99,36 +99,36 @@ export class DashboardServer {
     }
 
     this.expressApp.get("/fetch-and-compile", async (req, res) => {
-      let result;
+      const { address, networkId, etherscanApiKey } = req.query as Record<
+        string,
+        string
+      >;
+      let config;
       try {
-        const { address, networkId, etherscanApiKey } = req.query as Record<
-          string,
-          string
-        >;
-        let config;
-        try {
-          config = Config.detect();
-          // we'll ignore errors as we only get the config for the api key
-        } catch {}
-
-        // a key provided in the browser takes precedence over on in the config
-        let etherscanKey: undefined | string;
-        if (etherscanApiKey) {
-          etherscanKey = etherscanApiKey;
-        } else if (config && config.etherscan !== undefined) {
-          etherscanKey = config.etherscan.apiKey;
-        }
+        config = Config.detect();
+        // we'll ignore errors as we only get the config for the api key
+      } catch {}
+
+      // a key provided in the browser takes precedence over on in the config
+      let etherscanKey: undefined | string;
+      if (etherscanApiKey) {
+        etherscanKey = etherscanApiKey;
+      } else if (config && config.etherscan !== undefined) {
+        etherscanKey = config.etherscan.apiKey;
+      }
 
-        config = Config.default().merge({
-          networks: {
-            custom: { network_id: networkId }
-          },
-          network: "custom",
-          etherscan: {
-            apiKey: etherscanKey
-          }
-        });
+      config = Config.default().merge({
+        networks: {
+          custom: { network_id: networkId }
+        },
+        network: "custom",
+        etherscan: {
+          apiKey: etherscanKey
+        }
+      });
 
+      let result;
+      try {
         result = (await fetchAndCompile(address, config)).compileResult;
       } catch (error) {
         if (!error.message.includes("No verified sources")) {

From 92cd3962a3b14fac64631f9127f4729a3fe206a1 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 15:36:12 -0400
Subject: [PATCH 175/189] get rid of method

---
 .../src/contexts/DashContext/DashProvider.tsx       | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index 33e8c73d74a..b8f99e69b58 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -49,15 +49,6 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
   const dbHelper = useMemo(
     () => ({
       dbPromise: stateRef.current.dbPromise,
-      async getAllCompilations() {
-        const tx = (await this.dbPromise).transaction(
-          "Compilation",
-          "readonly"
-        );
-        const store = tx.objectStore("Compilation");
-        const compilations = await store.getAll();
-        return compilations.map(entry => entry.data);
-      },
       async has(hash: string) {
         return !!(await (await this.dbPromise).getKey("Compilation", hash));
       },
@@ -313,7 +304,9 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
     },
     handleCompilations,
     getCompilations: async (): Promise => {
-      return await dbHelper.getAllCompilations();
+      const { dbPromise } = state;
+      const compilations = await (await dbPromise).getAll("Compilation");
+      return compilations.map(entry => entry.data);
     },
     setDebuggerSessionData: ({
       unknownAddresses,

From 98ae2ec81e0aa9dcc1b8de9795e56f0ae91f9919 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 15:39:00 -0400
Subject: [PATCH 176/189] correct type for operations

---
 packages/dashboard/src/contexts/DashContext/DashContext.ts   | 5 ++++-
 packages/dashboard/src/contexts/DashContext/DashProvider.tsx | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard/src/contexts/DashContext/DashContext.ts b/packages/dashboard/src/contexts/DashContext/DashContext.ts
index 84c5eb9fc80..1d31ae2db07 100644
--- a/packages/dashboard/src/contexts/DashContext/DashContext.ts
+++ b/packages/dashboard/src/contexts/DashContext/DashContext.ts
@@ -21,7 +21,10 @@ export interface ContextValue {
     updateAnalyticsConfig: (value: boolean) => void;
     setDebuggerSessionData: (value: SetDebuggerSessionDataArgs) => void;
     getCompilations: (compilations: Compilation[]) => Promise;
-    handleCompilations: () => Promise;
+    handleCompilations: (
+      compilations: Compilation[],
+      hashes?: string[]
+    ) => Promise;
     toggleDebuggerBreakpoint: (value: ToggleDebuggerBreakpointArgs) => void;
     setTxToRun: (
       lifecycle: ReceivedMessageLifecycle
diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index b8f99e69b58..d2b1fad2202 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -345,7 +345,6 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
   };
 
   return (
-    // @ts-ignore
     
       {children}
     

From 7e6c1d148bf85761ed30aef081d9cfeefc99a67d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Tue, 11 Jul 2023 15:42:43 -0400
Subject: [PATCH 177/189] move string constants next to the others

---
 packages/dashboard/src/utils/constants.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/dashboard/src/utils/constants.ts b/packages/dashboard/src/utils/constants.ts
index dde7afba1ce..b72d4b30039 100644
--- a/packages/dashboard/src/utils/constants.ts
+++ b/packages/dashboard/src/utils/constants.ts
@@ -2,6 +2,7 @@ import chainIDtoNameJson from "src/assets/chainIDtoName.json";
 
 export const EMOTION_KEY = "trfl";
 export const COLOR_SCHEME_KEY = "trfl.dash.color-scheme";
+export const etherscanApiKeyName = "trfl.dash.etherscan-api-key";
 
 export const decodableRpcMethodsArr = [
   "eth_sendTransaction",
@@ -41,8 +42,6 @@ export const unsupportedMessageResponse = new Map(
   ]
 );
 
-export const etherscanApiKeyName = "trfl.dash.etherscan-api-key";
-
 export const chainIDtoName = {
   ...chainIDtoNameJson
 } as const;

From 13ceee4641755b146b4c181e6a0869b692431705 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 11:46:23 -0400
Subject: [PATCH 178/189] update mantine-related classes and add eslint ignore
 comment

---
 .../dashboard/src/components/MantineGlobal.tsx   | 16 ++++++++--------
 .../composed/Debugger/PreparingSession.tsx       |  4 +++-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard/src/components/MantineGlobal.tsx b/packages/dashboard/src/components/MantineGlobal.tsx
index ebd5243ac69..6cba651f839 100644
--- a/packages/dashboard/src/components/MantineGlobal.tsx
+++ b/packages/dashboard/src/components/MantineGlobal.tsx
@@ -12,11 +12,11 @@ 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";
@@ -60,7 +60,7 @@ function MantineGlobal(): JSX.Element {
             ".trfl-Input-wrapper": {
               flexGrow: 1
             },
-            ".mantine-Alert-icon": {
+            ".trfl-Alert-icon": {
               "width": 28,
               "height": "auto",
               "> svg": {
@@ -68,20 +68,20 @@ function MantineGlobal(): JSX.Element {
                 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]
diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 3712971e3b0..2e9dc516d2d 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -25,7 +25,9 @@ function PreparingSession({
     } else {
       setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
     }
-  }, [ganacheLoggingOutput]);
+  }, [
+    ganacheLoggingOutput
+  ]); /* eslint-disable-line react-hooks/exhaustive-deps  */
 
   return (
     
Date: Wed, 12 Jul 2023 11:48:10 -0400
Subject: [PATCH 179/189] update one more mantine-related class and use empty
 string instead of undefined for class name

---
 .../src/components/composed/Notice/content/ConfirmChain.tsx   | 2 +-
 .../src/components/composed/Sidebar/Middle/NavButton.tsx      | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Notice/content/ConfirmChain.tsx b/packages/dashboard/src/components/composed/Notice/content/ConfirmChain.tsx
index 2108707f392..af2283bf447 100644
--- a/packages/dashboard/src/components/composed/Notice/content/ConfirmChain.tsx
+++ b/packages/dashboard/src/components/composed/Notice/content/ConfirmChain.tsx
@@ -18,7 +18,7 @@ const useStyles = createStyles((_theme, _params, _getRef) => ({
     justifyContent: "center"
   },
   label: {
-    "> .mantine-Title-root": {
+    "> .trfl-Title-root": {
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
diff --git a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
index 8b283592e7d..b10fd531862 100644
--- a/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/Middle/NavButton.tsx
@@ -57,9 +57,7 @@ function NavButton({
       component={Link}
       to={to}
       p="xl"
-      className={`${classes.button} ${
-        disabled ? classes.disabled : undefined
-      } ${
+      className={`${classes.button} ${disabled ? classes.disabled : ""} ${
         location.pathname.startsWith(to) ? classes.active : classes.inactive
       }`}
     >

From e9a00dc046298af9b3639d687f04dd218b1ffdb0 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 12:20:17 -0400
Subject: [PATCH 180/189] eslint ignore entire file, cast window.ethereum as
 any, and remove unnecessary provider check

---
 .../components/composed/Debugger/PreparingSession.tsx  |  5 ++---
 .../src/components/composed/Debugger/index.tsx         | 10 +---------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 2e9dc516d2d..01ab6218664 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -1,3 +1,4 @@
+/* eslint react-hooks/exhaustive-deps: 0 */
 import { useState, useEffect } from "react";
 import { createStyles, Flex, Loader } from "@mantine/core";
 
@@ -25,9 +26,7 @@ function PreparingSession({
     } else {
       setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
     }
-  }, [
-    ganacheLoggingOutput
-  ]); /* eslint-disable-line react-hooks/exhaustive-deps  */
+  }, [ganacheLoggingOutput]);
 
   return (
      {
     setStatus(SessionStatus.PreparingForInitialization);
-    const provider = window.ethereum;
-    if (!provider) {
-      throw new Error(
-        "There was no provider found in the browser. Ensure you have " +
-          "MetaMask connected to the current page."
-      );
-    }
+    const provider = window.ethereum as any;
     const networkId = await provider.request({
-      // @ts-ignore
       method: "net_version",
-      // @ts-ignore
       params: []
     });
     const ganacheOptions = {

From 860c006ddc88cb6a5699418165267b28e289b69d Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 12:24:21 -0400
Subject: [PATCH 181/189] get rid of some unnecessary css stuff

---
 .../src/components/composed/Debugger/index.tsx       | 12 ++----------
 .../src/components/composed/Sidebar/index.tsx        |  8 ++------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 0aa36c45868..182ddfb2bc8 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -25,11 +25,7 @@ import { etherscanApiKeyName } from "src/utils/constants";
 const useStyles = createStyles(theme => ({
   debugger: {
     height: "100vh",
-    overflowY: "hidden",
-    backgroundColor:
-      theme.colorScheme === "dark"
-        ? theme.colors["truffle-brown"][8]
-        : theme.colors["truffle-beige"][3]
+    overflowY: "hidden"
   },
   inputGroup: {
     paddingTop: 26,
@@ -49,11 +45,7 @@ const useStyles = createStyles(theme => ({
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
       border: 0,
-      height: 42,
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors["truffle-brown"][5]
-          : "#FFFFFF"
+      height: 42
     }
   },
   button: {
diff --git a/packages/dashboard/src/components/composed/Sidebar/index.tsx b/packages/dashboard/src/components/composed/Sidebar/index.tsx
index 6b0e4386d64..d9da2fa72fe 100644
--- a/packages/dashboard/src/components/composed/Sidebar/index.tsx
+++ b/packages/dashboard/src/components/composed/Sidebar/index.tsx
@@ -4,15 +4,11 @@ import Middle from "src/components/composed/Sidebar/Middle";
 import Bottom from "src/components/composed/Sidebar/Bottom";
 import Divider from "src/components/composed/Sidebar/Divider";
 
-const useStyles = createStyles((theme, _params, _getRef) => ({
+const useStyles = createStyles((_theme, _params, _getRef) => ({
   sideBar: {
     height: "100vh",
     width: 370,
-    borderRight: "none",
-    backgroundColor:
-      theme.colorScheme === "dark"
-        ? theme.colors["truffle-brown"][8]
-        : theme.colors["truffle-beige"][4]
+    borderRight: "none"
   }
 }));
 

From beef54973245007c5c7b85bf3f07ad7f78fca331 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 14:04:50 -0400
Subject: [PATCH 182/189] change how highlighted class is stored in constants
 and update code using it

---
 .../Debugger/Sources/Source/LineNumber.tsx    | 33 +++++++++----------
 .../components/composed/Debugger/index.tsx    |  1 +
 .../composed/Debugger/utils/constants.ts      |  3 +-
 .../composed/Debugger/utils/source/source.ts  | 16 ++++-----
 4 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
index 156dcd136e6..eb95f25fead 100644
--- a/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Sources/Source/LineNumber.tsx
@@ -1,7 +1,4 @@
-import {
-  highlightedTextTag,
-  closingHighlightedTextTag
-} from "src/components/composed/Debugger/utils";
+import { highlightedTextClass } from "src/components/composed/Debugger/utils";
 import { createStyles } from "@mantine/core";
 import { useDash } from "src/hooks";
 
@@ -55,19 +52,19 @@ function LineNumber({
     operations: { toggleDebuggerBreakpoint }
   } = useDash()!;
   // if the line contains highlighting we highlight the line number as well
-  const lineNumberDisplay = lineHasHighlighting
-    ? `` +
-      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
-      highlightedTextTag +
-      lineNumber +
-      closingHighlightedTextTag +
-      "  " +
-      ``
-    : `` +
-      " ".repeat(lineNumberGutterWidth - lineNumber.toString().length) +
-      lineNumber +
-      "  " +
-      ``;
+  const lineNumberDisplay = lineHasHighlighting ? (
+    
+      {" ".repeat(lineNumberGutterWidth - lineNumber.toString().length)}
+      {lineNumber}
+      {"  "}
+    
+  ) : (
+    
+      {" ".repeat(lineNumberGutterWidth - lineNumber.toString().length)}
+      {lineNumber}
+      {"  "}
+    
+  );
 
   const spacer =
     breakpoints &&
@@ -87,7 +84,7 @@ function LineNumber({
   return (
     

       {spacer}
-      

+      {lineNumberDisplay}
     

   );
 }
diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 182ddfb2bc8..9664eeba87e 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -117,6 +117,7 @@ function Debugger(): JSX.Element {
   // wait until the debugger has been initialized and then get source info
   if (session) {
     currentSourceRange = getCurrentSourceRange(session);
+    console.log("the current source range -- %o", currentSourceRange);
     // if the starting source is unknown, we may get `undefined` in the source
     // range - in that case we'll initialize it manually from the stacktrace
     if (!currentSourceRange.source?.id && !currentSourceId) {
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/constants.ts b/packages/dashboard/src/components/composed/Debugger/utils/constants.ts
index 9350ffb6f02..86eb324cd1e 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/constants.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/constants.ts
@@ -1,2 +1 @@
-export const highlightedTextTag = ``;
-export const closingHighlightedTextTag = ``;
+export const highlightedTextClass = "truffle-debugger-text-highlighted";
diff --git a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
index 728e208674d..5763f32967d 100644
--- a/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
+++ b/packages/dashboard/src/components/composed/Debugger/utils/source/source.ts
@@ -2,10 +2,7 @@ import { unified } from "unified";
 import rehypeStringify from "rehype-stringify";
 import { lowlight } from "lowlight/lib/core";
 import { solidity } from "highlightjs-solidity";
-import {
-  highlightedTextTag,
-  closingHighlightedTextTag
-} from "src/components/composed/Debugger/utils";
+import { highlightedTextClass } from "src/components/composed/Debugger/utils";
 import { completeMultilineSpans } from "src/components/composed/Debugger/utils/source/htmlUtils";
 import type {
   Source,
@@ -166,9 +163,11 @@ export function replaceTextHighlightedMarkings({
   fullyHighlightedLines: Set;
 }) {
   return source.map((line, index) => {
+    const highlightedTextTag = ``;
+    const closingTag = ``;
     // wrap the entire thing if it is fully highlighted
     if (fullyHighlightedLines.has(index)) {
-      return highlightedTextTag + line + closingHighlightedTextTag;
+      return highlightedTextTag + line + "";
     }
     // we need to add the space to make lowlight parse the comment correctly
     // as a comment as there are some cases where it marks it incorrectly
@@ -186,15 +185,12 @@ export function replaceTextHighlightedMarkings({
             highlightJsCommentSpan +
             textHighlightingEndsMarker.slice(1) +
             closingSpan,
-          closingHighlightedTextTag
+          closingTag
         )
         // sometimes the markings don't get wrapped by lowlight for some reason
         // we replace the ones it missed here
         .replaceAll(textHighlightingBeginsMarker.slice(1), highlightedTextTag)
-        .replaceAll(
-          textHighlightingEndsMarker.slice(1),
-          closingHighlightedTextTag
-        )
+        .replaceAll(textHighlightingEndsMarker.slice(1), closingTag)
         .replace(/(?
Date: Wed, 12 Jul 2023 14:53:04 -0400
Subject: [PATCH 183/189] narrow the scope of the eslint ignore

---
 .../src/components/composed/Debugger/PreparingSession.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
index 01ab6218664..691dda141cb 100644
--- a/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/PreparingSession.tsx
@@ -1,4 +1,3 @@
-/* eslint react-hooks/exhaustive-deps: 0 */
 import { useState, useEffect } from "react";
 import { createStyles, Flex, Loader } from "@mantine/core";
 
@@ -26,6 +25,7 @@ function PreparingSession({
     } else {
       setGanacheOutput(ganacheOutput.concat(ganacheLoggingOutput));
     }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [ganacheLoggingOutput]);
 
   return (

From 47a71d3b30d1d4ddb355687a830c9afe52b5a5e4 Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 15:44:50 -0400
Subject: [PATCH 184/189] remove console.log

---
 packages/dashboard/src/components/composed/Debugger/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
index 9664eeba87e..182ddfb2bc8 100644
--- a/packages/dashboard/src/components/composed/Debugger/index.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -117,7 +117,6 @@ function Debugger(): JSX.Element {
   // wait until the debugger has been initialized and then get source info
   if (session) {
     currentSourceRange = getCurrentSourceRange(session);
-    console.log("the current source range -- %o", currentSourceRange);
     // if the starting source is unknown, we may get `undefined` in the source
     // range - in that case we'll initialize it manually from the stacktrace
     if (!currentSourceRange.source?.id && !currentSourceId) {

From 0de31721ee3fe3fa02b1970bc5ccf93cfafe27ed Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Wed, 12 Jul 2023 16:35:39 -0400
Subject: [PATCH 185/189] conditionally add tooltip to fix an issue where it
 won't disappear when the button switches to disabled state

---
 .../Debugger/Controls/ControlButton.tsx       | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
index b41a7b2883e..f0c98741d59 100644
--- a/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Controls/ControlButton.tsx
@@ -34,23 +34,31 @@ function ControlButton({
   }));
   const { classes } = useStyles();
 
-  return (
-    
-       {
-          setStepping(true);
-          await step();
-          setStepping(false);
-          stepEffect();
-        }}
-      >
-        {createElement(icon)}
-      
-    
+  const actionIcon = (
+     {
+        setStepping(true);
+        await step();
+        setStepping(false);
+        stepEffect();
+      }}
+    >
+      {createElement(icon)}
+    
   );
+
+  // there is an issue with the tooltips where it doesn't vanish when the button
+  // switches to disabled state - we manually remove it to make it vanish
+  const output = disabled ? (
+    actionIcon
+  ) : (
+    {actionIcon}
+  );
+
+  return output;
 }
 
 export default ControlButton;

From e62852051ebc165ea333c4b787d4531a08075dec Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 13 Jul 2023 13:28:50 -0400
Subject: [PATCH 186/189] re-work Variables component to store raw data in
 state and calculate the display from that

---
 .../composed/Debugger/Variables.tsx           | 92 ++++++++++++-------
 1 file changed, 57 insertions(+), 35 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
index 1193c01003c..7b7141064f1 100644
--- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx
@@ -68,7 +68,7 @@ function Variables({
   currentStep
 }: VariablesArgs): JSX.Element | null {
   const { classes } = useStyles();
-  const [output, setOutput] = useState(null);
+  const [variables, setVariables] = useState(null);
 
   // when the debugger step changes, update variables
   useEffect(() => {
@@ -76,51 +76,73 @@ function Variables({
       const sections = session.view(
         session.selectors.data.current.identifiers.sections
       );
-      const variables = await session.variables();
+      const vars = await session.variables();
+      if (!vars || Object.keys(vars).length === 0) return;
 
-      const entries = [];
-      // section here is a variable category such as a Solidity built-in
-      // or contract variable
-      for (const section in sections) {
-        const variableValues: Array = sections[section]
-          .map((variableName: keyof typeof variables) => {
-            if (variables) {
-              return (
-                
  • 
-                  
-                
    • 
-              );
-            } else {
-              return undefined;
-            }
-          })
-          .filter((item: JSX.Element | undefined) => item);
-        if (variableValues.length > 0) {
-          entries.push(
-            
    
-              
    {section}
    
-              
      {...variableValues}
    
-            
    
-          );
-        }
-      }
+      const variableValues: { [key: string]: any } = {};
 
-      setOutput(entries);
+      // section here is a variable category/type such as a Solidity built-in
+      // or contract variable
+      Object.keys(sections).forEach((section: string) => {
+        const sectionVars = sections[section];
+        if (!sectionVars || sectionVars.length === 0) return;
+        sectionVars.forEach((varName: string) => {
+          variableValues[section] = {
+            ...variableValues[section],
+            [varName]: vars[varName]
+          };
+        });
+      });
+      setVariables(variableValues);
     }
 
     getVariables();
   }, [currentStep, session, classes.variablesTypes, classes.variablesSection]);
 
+  const output = variables
+    ? Object.keys(variables).map(sectionName => {
+        // if there are no variables for a section/type, display just the name
+        if (
+          !variables[sectionName] ||
+          Object.keys(variables[sectionName]).length === 0
+        ) {
+          return (
+            
    
+              
    {sectionName}
    
+              
      
+            
      
+          );
+        }
+
+        // calculate variable values and put them in the appropriate section
+        const variableVals = Object.keys(variables[sectionName]).map(
+          (variableName: string) => {
+            return (
+              
    • 
+                
+              
      • 
+            );
+          }
+        );
+        return (
+          
      
+            
      {sectionName}
      
+            
        {variableVals}
      
+          
      
+        );
+      })
+    : null;
+
   return (
     
       
      Variables
      
       
      
-        
      {output ? output : ""}
      
+        
      {output}
      
       
      
           
   );

From e86fc8f97aad9c9371111c548d22171fa4d4deeb Mon Sep 17 00:00:00 2001
From: eggplantzzz 
Date: Thu, 13 Jul 2023 15:26:58 -0400
Subject: [PATCH 187/189] store stack report data in state and use that for the
 render

---
 .../components/composed/Debugger/Stack.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
index 0385273a52f..e08823092aa 100644
--- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx
+++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx
@@ -47,7 +47,7 @@ type StackArgs = {
 
 function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
   const { classes } = useStyles();
-  const [output, setOutput] = useState(null);
+  const [stackReport, setStackReport] = useState(null);
   // when the debugger step changes, update variables
   useEffect(() => {
     async function getStack() {
@@ -55,7 +55,13 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
       if (!report) return;
       // we need to display this information in the reverse order
       report.reverse();
-      const entries = report.map((reportItem: any, index: number) => {
+      setStackReport(report);
+    }
+    getStack();
+  }, [currentStep, session]);
+
+  const output = stackReport
+    ? stackReport.map((reportItem: any, index: number) => {
         const { address, contractName, functionName, isConstructor, type } =
           reportItem;
         let name: string;
@@ -75,17 +81,14 @@ function Stack({ session, currentStep }: StackArgs): JSX.Element | null {
           address === undefined ? "unknown address" : address;
         const stackDisplay = `at ${name} [address ${displayAddress}]`;
         return 
      {stackDisplay}
      ;
-      });
-      setOutput(entries);
-    }
-    getStack();
-  }, [currentStep, session]);
+      })
+    : null;
 
   return (
     
       
      Stack
      
       
      
-        
      {output ? output : ""}
      
+        
      {output}
      
       
      
           
   );

From 5ec4f32bf92b3c3746d7244eb84d5452337e37c5 Mon Sep 17 00:00:00 2001
From: cliffoo <41348973+cliffoo@users.noreply.github.com>
Date: Fri, 14 Jul 2023 05:13:42 -0400
Subject: [PATCH 188/189] dashboard: Fix debug button styles

---
 .../src/components/composed/RPCs/RPC/Overview.tsx   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
index 2cbf1714093..f67bf7f5592 100644
--- a/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
+++ b/packages/dashboard/src/components/composed/RPCs/RPC/Overview.tsx
@@ -49,6 +49,12 @@ const useStyles = createStyles((theme, _params, getRef) => {
         "&:hover": {
           backgroundColor: colors["truffle-teal"][9]
         }
+      },
+      [`& .${getRef("debugButton")}`]: {
+        "backgroundColor": fn.rgba(colors["truffle-teal"][7], 0.6),
+        "&:hover": {
+          backgroundColor: colors["truffle-teal"][7]
+        }
       }
     },
     info: {
@@ -86,12 +92,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
     },
     rejectButton: { ref: getRef("rejectButton") },
     confirmButton: { ref: getRef("confirmButton") },
-    debugButton: {
-      backgroundColor:
-        colorScheme === "dark"
-          ? colors["truffle-teal"][6]
-          : colors["truffle-teal"][4]
-    },
+    debugButton: { ref: getRef("debugButton") },
     confirmButtonRightIcon: {
       marginLeft: 4,
       marginRight: 6

From 4c74c93204bd35f24120c5485233b27aa0ef78ee Mon Sep 17 00:00:00 2001
From: cliffoo <41348973+cliffoo@users.noreply.github.com>
Date: Fri, 14 Jul 2023 05:38:01 -0400
Subject: [PATCH 189/189] dashboard: Clean up ganache indexeddb on start

---
 .../dashboard/src/contexts/DashContext/DashProvider.tsx  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
index d2b1fad2202..c5f38409cfb 100644
--- a/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
+++ b/packages/dashboard/src/contexts/DashContext/DashProvider.tsx
@@ -1,6 +1,7 @@
 import { useReducer, useEffect, useRef, useMemo, useCallback } from "react";
 import { useAccount, useNetwork } from "wagmi";
 import { sha1 } from "object-hash";
+import { deleteDB } from "idb/with-async-ittr";
 import type { ReceivedMessageLifecycle } from "@truffle/dashboard-message-bus-client";
 import {
   isCliEventMessage,
@@ -234,10 +235,18 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
       dispatch({ type: "set-analytics-config", data });
     };
 
+    const cleanGanacheDb = async () => {
+      const ganacheDb = await indexedDB.databases();
+      for (const { name } of ganacheDb) {
+        if (name?.startsWith("/tmp/ganache_")) await deleteDB(name);
+      }
+    };
+
     const init = async () => {
       await initDecoder();
       await initBusClient();
       await initAnalytics();
+      await cleanGanacheDb();
     };
 
     init();