move source range data into Sources component and make it state

trufflesuite · Jul 20, 2023 · b95ef79 · b95ef79
1 parent 4be9fb6
commit b95ef79
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 46 deletions.
diff --git 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 { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { basename } from "path";
 import { createStyles, Tabs } from "@mantine/core";
 import Source from "src/components/composed/Debugger/Sources/Source";
@@ -9,6 +9,7 @@ import type {
   Source as SourceType,
   UnknownAddress
 } from "src/components/composed/Debugger/utils";
+import { getCurrentSourceRange } from "src/components/composed/Debugger/utils";
 
 const useStyles = createStyles((theme, _params, _getRef) => ({
   maxHeight: {
@@ -67,25 +68,32 @@ interface SourcesProps {
   session: Session;
   sessionUpdated: any;
   sources: SourceType[];
-  currentSourceRange: SourceRange;
   unknownAddresses: UnknownAddress[] | null;
   currentSourceId: string | undefined;
   setCurrentSourceId: (sourceId: string) => void;
+  scrollToLine: (arg: { sourceId: string; line: number }) => void;
 }
 
 function Sources({
   sources,
   session,
   sessionUpdated,
-  currentSourceRange,
   unknownAddresses,
   currentSourceId,
-  setCurrentSourceId
+  setCurrentSourceId,
+  scrollToLine
 }: SourcesProps): JSX.Element {
   const { classes } = useStyles();
   const currentSourceIdRef = useRef(currentSourceId);
   currentSourceIdRef.current = currentSourceId;
 
+  const [currentSourceRange, setCurrentSourceRange] = useState<
+    SourceRange | { traceIndex: number; source: any }
+  >({
+    traceIndex: -1,
+    source: {}
+  });
+
   // display the first source when currentSourceRange is `undefined`
   useEffect(() => {
     if (currentSourceId === undefined) {
@@ -94,7 +102,7 @@ function Sources({
   }, [sources, currentSourceId, setCurrentSourceId]);
 
   useEffect(() => {
-    const sessionSourceId = currentSourceRange.source.id;
+    const sessionSourceId = currentSourceRange.source!.id;
     if (sessionSourceId !== currentSourceIdRef.current) {
       setCurrentSourceId(sessionSourceId);
     }
@@ -105,10 +113,37 @@ function Sources({
     setCurrentSourceId
   ]);
 
+  useEffect(() => {
+    setCurrentSourceRange(getCurrentSourceRange(session));
+    // 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) {
+      const currentContractAddress = session.view(
+        session.selectors.stacktrace.current.report
+      )[0].address;
+      // when the contract is "unknown", the source id will be the address
+      // we need this if check so that no loop occurs when the value is falsy
+      if (currentContractAddress) {
+        setCurrentSourceId(currentContractAddress);
+      }
+    }
+  }, [session.view(session.selectors.trace.index)]);
+
+  const isSourceRange = (item: any): item is SourceRange => {
+    return item.source.id !== undefined;
+  };
+
+  useEffect(() => {
+    if (isSourceRange(currentSourceRange)) {
+      const { source, start } = currentSourceRange!;
+      scrollToLine({ sourceId: source.id, line: start.line });
+    }
+  }, [session!.view(session!.selectors.trace.index), currentSourceId]);
+
   const unknownSourcesExist = unknownAddresses && unknownAddresses.length > 0;
 
   let sourcesContent, unknownSourcesContent;
-  if (currentSourceId !== undefined) {
+  if (isSourceRange(currentSourceRange) && currentSourceId !== undefined) {
     sourcesContent = sources.map((source: SourceType) => (
       <Tabs.Panel
         key={source.id}

diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx
@@ -15,11 +15,7 @@ import {
   SessionStatus
 } from "src/components/composed/Debugger/utils";
 import { useDash } from "src/hooks";
-import { getCurrentSourceRange } from "src/components/composed/Debugger/utils";
-import type {
-  BreakpointType,
-  SourceRange
-} from "src/components/composed/Debugger/utils";
+import type { BreakpointType } from "src/components/composed/Debugger/utils";
 import { etherscanApiKeyName } from "src/utils/constants";
 
 const useStyles = createStyles(theme => ({
@@ -109,27 +105,6 @@ function Debugger(): JSX.Element {
     undefined
   );
 
-  let currentSourceRange: SourceRange | Partial<SourceRange> = {
-    traceIndex: -1
-  };
-
-  // wait until the debugger has been initialized and then get source info
-  if (session) {
-    currentSourceRange = getCurrentSourceRange(session);
-    // 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) {
-      const currentContractAddress = session.view(
-        session.selectors.stacktrace.current.report
-      )[0].address;
-      // when the contract is "unknown", the source id will be the address
-      // we need this if check so that no loop occurs when the value is falsy
-      if (currentContractAddress) {
-        setCurrentSourceId(currentContractAddress);
-      }
-    }
-  }
-
   const scrollToLine = ({
     sourceId,
     line
@@ -199,13 +174,6 @@ function Debugger(): JSX.Element {
     }
   };
 
-  useEffect(() => {
-    if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) {
-      const { source, start } = currentSourceRange!;
-      scrollToLine({ sourceId: source.id, line: start.line });
-    }
-  }, [session!.view(session!.selectors.trace.index), currentSourceId]);
-
   // check whether we need to scroll to a breakpoint
   // this is to ensure the source has fully rendered before scrolling
   useEffect(() => {
@@ -231,13 +199,8 @@ 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 && isSourceRange(currentSourceRange)) {
+  if (session && sources) {
     content = (
       <div className={classes.mainContent}>
         <Grid
@@ -254,9 +217,9 @@ function Debugger(): JSX.Element {
               unknownAddresses={unknownAddresses}
               session={session}
               sessionUpdated={sessionUpdated}
-              currentSourceRange={currentSourceRange}
               currentSourceId={currentSourceId}
               setCurrentSourceId={setCurrentSourceId}
+              scrollToLine={scrollToLine}
             />
           </Grid.Col>
           <Grid.Col span={2} className={classes.fullHeight}>