From 3cf5f7f1b7767344bc8a1c4221666b0cd020c978 Mon Sep 17 00:00:00 2001
From: saeta-eth <saetaeth@proton.me>
Date: Wed, 30 Oct 2024 17:37:29 -0300
Subject: [PATCH] fixes and improvements

---
 .../features/Deploy/QueueFromGitOpsPage.tsx   |  98 +---
 .../Deploy/TransactionDetailsPage.tsx         |  20 +-
 .../features/Packages/CannonfileExplorer.tsx  |   2 +-
 .../src/features/Packages/CannonfileGraph.tsx | 452 ++++++++++--------
 .../src/features/Packages/Interact.tsx        |  79 +--
 .../Packages/PackageAccordionHelper/index.tsx |  34 +-
 .../features/Packages/Tabs/InteractTab.tsx    | 132 ++---
 .../website/src/helpers/chain-definition.ts   |   4 +-
 packages/website/src/hooks/cannon.ts          |  47 +-
 packages/website/src/hooks/deployer.ts        |   4 +-
 packages/website/src/hooks/useWorker.ts       |  23 -
 packages/website/src/lib/builder.ts           |  12 +-
 .../src/workers/chain-definition.worker.ts    |   3 +-
 13 files changed, 472 insertions(+), 438 deletions(-)
 delete mode 100644 packages/website/src/hooks/useWorker.ts

diff --git a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
index 6749c235f..43910048f 100644
--- a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
+++ b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
@@ -9,7 +9,7 @@ import { useDeployerWallet } from '@/hooks/deployer';
 import {
   useCannonPackage,
   useCannonWriteDeployToIpfs,
-  useLoadCannonDefinition,
+  useMergedCannonDefInfo,
   useCannonFindUpgradeFromUrl,
   CannonWriteDeployToIpfsMutationResult,
   useCannonBuildTmp,
@@ -46,12 +46,10 @@ import {
   ChainBuilderContext,
   DeploymentInfo,
   PackageReference,
-  RawChainDefinition,
 } from '@usecannon/builder';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Alert as AlertCannon } from '@/components/Alert';
-import { useQuery } from '@tanstack/react-query';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import {
   encodeAbiParameters,
@@ -67,9 +65,7 @@ import pkg from '../../../package.json';
 import NoncePicker from './NoncePicker';
 import { TransactionDisplay } from './TransactionDisplay';
 import 'react-diff-view/style/index.css';
-import { ChainDefinition } from '@usecannon/builder/dist/src';
 import { extractIpfsHash } from '@/helpers/ipfs';
-import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
 
 const EMPTY_IPFS_MISC_URL =
   'ipfs://QmeSt2mnJKE8qmRhLyYbHQQxDKpsFbcWnw5e7JF4xVbN6k';
@@ -90,74 +86,6 @@ const ctx: ChainBuilderContext = {
   overrideSettings: {},
 };
 
-function useMergedCannonDefInfo(
-  gitUrl: string,
-  gitRef: string,
-  gitFile: string,
-  partialDeployInfo: ReturnType<typeof useCannonPackage>
-) {
-  const originalCannonDefInfo = useLoadCannonDefinition(
-    gitUrl,
-    gitRef,
-    gitFile
-  );
-
-  const {
-    data: workerDef,
-    error: workerError,
-    isLoading,
-  } = useQuery({
-    queryKey: [
-      'worker-def',
-      gitUrl,
-      gitRef,
-      gitFile,
-      partialDeployInfo?.ipfsQuery.data?.deployInfo,
-    ],
-    queryFn: async () => {
-      if (
-        !partialDeployInfo?.ipfsQuery.data?.deployInfo &&
-        !originalCannonDefInfo.def
-      ) {
-        return null;
-      }
-
-      const deployInfo =
-        partialDeployInfo?.ipfsQuery.data?.deployInfo?.def ||
-        originalCannonDefInfo.def;
-
-      try {
-        if (deployInfo) {
-          return await getChainDefinitionFromWorker(
-            deployInfo as RawChainDefinition
-          );
-        }
-      } catch (e) {
-        // fallback to non-worker execution if worker fails
-        return new ChainDefinition(deployInfo as RawChainDefinition);
-      }
-      return null;
-    },
-    enabled: Boolean(
-      partialDeployInfo?.ipfsQuery.data?.deployInfo || originalCannonDefInfo.def
-    ),
-  });
-
-  return useMemo(() => {
-    const isError = originalCannonDefInfo.isError || !!workerError;
-    const isFetching = originalCannonDefInfo.isFetching || isLoading;
-    const error = workerError || originalCannonDefInfo.error;
-
-    return {
-      isLoading,
-      isFetching,
-      isError,
-      error,
-      def: workerDef!,
-    };
-  }, [originalCannonDefInfo, workerDef, workerError, isLoading]);
-}
-
 type DeployType = 'git' | 'partial';
 
 export default function QueueFromGitOps() {
@@ -250,13 +178,15 @@ export default function QueueFromGitOps() {
   }, [previousPackageInput]);
 
   useEffect(() => {
-    if (!cannonDefInfo?.def) return setPreviousPackageInput('');
+    if (!prevCannonDeployInfo.ipfsQuery.data?.deployInfo)
+      return setPreviousPackageInput('');
 
-    const name = cannonDefInfo?.def.getName(ctx);
-    const version = 'latest';
-    const preset = cannonDefInfo?.def.getPreset(ctx);
+    const name = prevCannonDeployInfo.ipfsQuery.data?.deployInfo?.def?.name;
+    const version =
+      prevCannonDeployInfo.ipfsQuery.data?.deployInfo?.def?.version || 'latest';
+    const preset = prevCannonDeployInfo.ipfsQuery.data?.deployInfo?.def?.preset;
     setPreviousPackageInput(`${name}:${version}@${preset}`);
-  }, [cannonDefInfo, cannonDefInfo?.def, selectedDeployType]);
+  }, [prevCannonDeployInfo]);
 
   // run the build and get the list of transactions we need to run
   const { buildState, doBuild, resetState } = useCannonBuildTmp(currentSafe);
@@ -618,7 +548,7 @@ export default function QueueFromGitOps() {
         </Tooltip>
       );
     },
-    [loadingDataForDeploy, disablePreviewButton, handlePreviewTxnsClick]
+    [loadingDataForDeploy, disablePreviewButton]
   );
 
   const RenderPreviewButtonTooltip = useCallback(() => {
@@ -994,7 +924,15 @@ export default function QueueFromGitOps() {
 
           {renderAlert()}
 
-          {chainId !== currentSafe?.chainId ? (
+          {!isConnected ? (
+            <Button
+              width="100%"
+              colorScheme="teal"
+              onClick={() => openConnectModal && openConnectModal()}
+            >
+              Connect wallet
+            </Button>
+          ) : chainId !== currentSafe?.chainId ? (
             <Button
               width="100%"
               colorScheme="teal"
diff --git a/packages/website/src/features/Deploy/TransactionDetailsPage.tsx b/packages/website/src/features/Deploy/TransactionDetailsPage.tsx
index 7a1a1a323..a5606572e 100644
--- a/packages/website/src/features/Deploy/TransactionDetailsPage.tsx
+++ b/packages/website/src/features/Deploy/TransactionDetailsPage.tsx
@@ -64,6 +64,7 @@ import { TransactionDisplay } from './TransactionDisplay';
 import { TransactionStepper } from './TransactionStepper';
 import 'react-diff-view/style/index.css';
 import { ChainDefinition } from '@usecannon/builder';
+import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
 
 const AdditionalSignaturesText = ({ amount }: { amount: number }) => (
   <Text fontWeight="bold" mt="3">
@@ -95,6 +96,7 @@ function TransactionDetailsPage() {
   const [expandDiff, setExpandDiff] = useState<boolean>(false);
   const [executionTxnHash, setExecutionTxnHash] = useState<Hash | null>(null);
   const accountAlreadyConnected = useRef(account.isConnected);
+  const [chainDefinition, setChainDefinition] = useState<ChainDefinition>();
 
   const safe: SafeDefinition = useMemo(
     () => ({
@@ -231,16 +233,29 @@ function TransactionDetailsPage() {
     gitFile ?? ''
   );
 
+  useEffect(() => {
+    const getChainDef = async () => {
+      if (!cannonDefInfo.def) return;
+
+      const chainDefition = await getChainDefinitionFromWorker(
+        cannonDefInfo.def
+      );
+      setChainDefinition(chainDefition);
+    };
+
+    void getChainDef();
+  }, [cannonDefInfo.def]);
+
   const buildInfo = useCannonBuild(
     safe,
-    new ChainDefinition(cannonDefInfo.def!),
+    chainDefinition,
     prevCannonDeployInfo.ipfsQuery.data?.deployInfo
   );
 
   useEffect(() => {
     if (
       !safe ||
-      !cannonDefInfo.def ||
+      !chainDefinition ||
       !prevCannonDeployInfo.ipfsQuery.data?.deployInfo
     )
       return;
@@ -248,6 +263,7 @@ function TransactionDetailsPage() {
   }, [
     !isTransactionExecuted &&
       (!prevDeployGitHash || prevCannonDeployInfo.ipfsQuery.isFetched),
+    chainDefinition,
   ]);
 
   // compare proposed build info with expected transaction batch
diff --git a/packages/website/src/features/Packages/CannonfileExplorer.tsx b/packages/website/src/features/Packages/CannonfileExplorer.tsx
index aa653ea34..f9d5c2f12 100644
--- a/packages/website/src/features/Packages/CannonfileExplorer.tsx
+++ b/packages/website/src/features/Packages/CannonfileExplorer.tsx
@@ -195,7 +195,7 @@ export const CannonfileExplorer: FC<{
               flex="1"
               direction="column"
             >
-              <CannonfileGraph deploymentInfo={deploymentInfo} />
+              <CannonfileGraph deploymentDefinition={deploymentInfo.def} />
             </Flex>
             <Container
               maxW="container.lg"
diff --git a/packages/website/src/features/Packages/CannonfileGraph.tsx b/packages/website/src/features/Packages/CannonfileGraph.tsx
index e862ab477..baafdfc94 100644
--- a/packages/website/src/features/Packages/CannonfileGraph.tsx
+++ b/packages/website/src/features/Packages/CannonfileGraph.tsx
@@ -1,9 +1,10 @@
-import { ChainDefinition } from '@usecannon/builder';
 import { FC, useEffect, useRef } from 'react';
 import React from 'react';
 import * as d3 from 'd3';
 import { createGlobalStyle } from 'styled-components';
 import { useStepModalContext } from '@/providers/stepModalProvider';
+import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
+import { RawChainDefinition } from '@usecannon/builder';
 
 // Define global styles
 const GlobalStyles = createGlobalStyle`
@@ -46,227 +47,254 @@ interface ExtendedSimulationNodeDatum extends d3.SimulationNodeDatum {
 }
 
 export const CannonfileGraph: FC<{
-  deploymentInfo: any;
-}> = ({ deploymentInfo }) => {
+  deploymentDefinition: RawChainDefinition;
+}> = ({ deploymentDefinition }) => {
   const nodes: ExtendedSimulationNodeDatum[] = [];
   const links: d3.SimulationLinkDatum<ExtendedSimulationNodeDatum>[] = [];
 
-  const chainDefinition = new ChainDefinition(deploymentInfo.def);
-
-  for (const node of chainDefinition.allActionNames) {
-    nodes.push({ id: node });
-  }
-  for (const node of chainDefinition.allActionNames) {
-    chainDefinition.resolvedDependencies.get(node)?.forEach((dependency) => {
-      links.push({ source: dependency, target: node });
-    });
-  }
-
   const svgRef = useRef<SVGSVGElement>(null);
-
   const { setActiveModule } = useStepModalContext();
 
   useEffect(() => {
-    // Select the SVG element and clear it
-    const svg = d3.select(svgRef.current);
-    svg.selectAll('*').remove();
-
-    const width = svg?.node()?.getBoundingClientRect().width;
-    const height = svg?.node()?.getBoundingClientRect().height;
-
-    // Set up the simulation
-    const simulation = d3
-      .forceSimulation(nodes)
-      .force(
-        'link',
-        d3
-          .forceLink(links)
-          .id((d) => (d as ExtendedSimulationNodeDatum).id)
-          .strength(0.1)
-      )
-      .force('charge', d3.forceManyBody().strength(-100))
-      .force(
-        'center',
-        d3.forceCenter(width && width / 2, height && height / 2)
-      );
-
-    // Create a group element for all graph elements
-    const wrapper = svg.append('g');
-
-    // Initialize zoom behavior
-    const zoom = d3
-      .zoom()
-      .scaleExtent([0.1, 4])
-      .on('zoom', (event) => wrapper.attr('transform', event.transform));
-    svg.call(zoom as any);
-
-    // Define the drag behavior
-    const drag = d3
-      .drag<SVGCircleElement, ExtendedSimulationNodeDatum>()
-      .on('start', dragstarted)
-      .on('drag', dragged)
-      .on('end', dragended);
-
-    function dragstarted(
-      event: d3.D3DragEvent<
-        SVGCircleElement,
-        ExtendedSimulationNodeDatum,
-        unknown
-      >,
-      d: ExtendedSimulationNodeDatum
-    ) {
-      if (!event.active) simulation.alphaTarget(0.3).restart();
-      d.fx = event.x;
-      d.fy = event.y;
-    }
-
-    function dragged(
-      event: d3.D3DragEvent<
-        SVGCircleElement,
-        ExtendedSimulationNodeDatum,
-        unknown
-      >,
-      d: ExtendedSimulationNodeDatum
-    ) {
-      d.fx = event.x;
-      d.fy = event.y;
-    }
-
-    function dragended(
-      event: d3.D3DragEvent<
-        SVGCircleElement,
-        ExtendedSimulationNodeDatum,
-        unknown
-      >,
-      d: ExtendedSimulationNodeDatum
-    ) {
-      if (!event.active) simulation.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
-    }
-
-    // Draw lines for the links
-    svg
-      .append('defs')
-      .append('marker')
-      .attr('id', 'arrow')
-      .attr('viewBox', '0 -5 10 10') // This might need adjustment
-      .attr('refX', 5) // Adjust this depending on the new size
-      .attr('refY', 0)
-      .attr('markerWidth', 8) // Increased size
-      .attr('markerHeight', 8) // Increased size
-      .attr('orient', 'auto')
-      .append('path')
-      .attr('d', 'M0,-5L10,0L0,5') // Path for the arrow shape
-      .attr('class', 'arrowHead');
-
-    // Append lines for links and use the arrow marker
-    const link = wrapper
-      .selectAll('.link')
-      .data(links)
-      .enter()
-      .append('line')
-      .attr('class', 'link');
-
-    const arrowLines = wrapper
-      .selectAll('.arrow-line')
-      .data(links)
-      .enter()
-      .append('line')
-      .attr('class', 'arrow-line')
-      .style('stroke', 'none')
-      .attr('marker-end', 'url(#arrow)'); // Attach the arrowhead marker
-
-    // Append rect elements for each node
-    const node = wrapper
-      .selectAll('.node')
-      .data(nodes)
-      .enter()
-      .append('g')
-      .attr('class', 'node');
-
-    // Append text to the node group first
-    node
-      .append('text')
-      .text((d) => `[${d.id}]`)
-      .attr('class', 'node-text')
-      .attr('text-anchor', 'middle')
-      .attr('alignment-baseline', 'middle')
-      .on('click', function (event, d) {
-        setActiveModule(d.id);
-      });
-
-    // Append a rect to each node for the background
-    node
-      .insert('rect', 'text')
-      .attr('class', 'node-background')
-      .attr('width', function (d, i, nodes) {
-        const bbox = ((nodes[i] as SVGGElement)
-          .nextSibling as SVGGraphicsElement)!.getBBox();
-        return bbox.width + 10;
-      })
-      .attr('height', function (d, i, nodes) {
-        const bbox = ((nodes[i] as SVGGElement)
-          .nextSibling as SVGGraphicsElement)!.getBBox();
-        return bbox.height + 10;
-      })
-      .attr('x', function (d, i, nodes) {
-        const bbox = ((nodes[i] as SVGGElement)
-          .nextSibling as SVGGraphicsElement)!.getBBox();
-        return bbox.x - 5;
-      })
-      .attr('y', function (d, i, nodes) {
-        const bbox = ((nodes[i] as SVGGElement)
-          .nextSibling as SVGGraphicsElement)!.getBBox();
-        return bbox.y - 5;
-      });
-
-    node.call(drag as any);
-
-    // Update positions on each tick
-    simulation.on('tick', () => {
-      // Update link positions
-      link
-        .attr('x1', (d: any) => d.source.x)
-        .attr('y1', (d: any) => d.source.y)
-        .attr('x2', (d: any) => d.target.x)
-        .attr('y2', (d: any) => d.target.y);
-
-      // Update the overlay lines for the arrowheads
-      arrowLines
-        .attr('x1', (d: any) => d.source.x)
-        .attr('y1', (d: any) => d.source.y)
-        .attr('x2', (d: any) => d.source.x + (d.target.x - d.source.x) * 0.5) // Corrected midpoint x
-        .attr('y2', (d: any) => d.source.y + (d.target.y - d.source.y) * 0.5); // Corrected midpoint y
-
-      // Update node and text positions
-      node.attr('transform', (d) => `translate(${d.x}, ${d.y})`);
-    });
-
-    function zoomToFit() {
-      const bounds = wrapper?.node()?.getBBox();
-      const dx = bounds?.width;
-      const dy = bounds?.height;
-      const x = bounds!.x + dx! / 2;
-      const y = bounds!.y + dy! / 2;
-
-      const scale = Math.min(0.8 / Math.max(dx! / width!, dy! / height!), 4);
-      const translate = [width! / 2 - scale * x, height! / 2 - scale * y];
-
-      svg
-        .transition()
-        .duration(1000)
-        .call(
-          zoom.transform as any,
-          d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)
+    async function initializeGraph() {
+      try {
+        const chainDefinition = await getChainDefinitionFromWorker(
+          deploymentDefinition
         );
+
+        // Clear existing nodes and links
+        nodes.length = 0;
+        links.length = 0;
+
+        // Add nodes and links using worker result
+        for (const node of chainDefinition.allActionNames) {
+          nodes.push({ id: node });
+        }
+        for (const node of chainDefinition.allActionNames) {
+          chainDefinition.resolvedDependencies
+            .get(node)
+            ?.forEach((dependency) => {
+              links.push({ source: dependency, target: node });
+            });
+        }
+
+        // Continue with existing D3 setup code...
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('*').remove();
+
+        const width = svg?.node()?.getBoundingClientRect().width;
+        const height = svg?.node()?.getBoundingClientRect().height;
+
+        // Set up the simulation
+        const simulation = d3
+          .forceSimulation(nodes)
+          .force(
+            'link',
+            d3
+              .forceLink(links)
+              .id((d) => (d as ExtendedSimulationNodeDatum).id)
+              .strength(0.1)
+          )
+          .force('charge', d3.forceManyBody().strength(-100))
+          .force(
+            'center',
+            d3.forceCenter(width && width / 2, height && height / 2)
+          );
+
+        // Create a group element for all graph elements
+        const wrapper = svg.append('g');
+
+        // Initialize zoom behavior
+        const zoom = d3
+          .zoom()
+          .scaleExtent([0.1, 4])
+          .on('zoom', (event) => wrapper.attr('transform', event.transform));
+        svg.call(zoom as any);
+
+        const dragstarted = (
+          event: d3.D3DragEvent<
+            SVGCircleElement,
+            ExtendedSimulationNodeDatum,
+            unknown
+          >,
+          d: ExtendedSimulationNodeDatum
+        ) => {
+          if (!event.active) simulation.alphaTarget(0.3).restart();
+          d.fx = event.x;
+          d.fy = event.y;
+        };
+
+        const dragged = (
+          event: d3.D3DragEvent<
+            SVGCircleElement,
+            ExtendedSimulationNodeDatum,
+            unknown
+          >,
+          d: ExtendedSimulationNodeDatum
+        ) => {
+          d.fx = event.x;
+          d.fy = event.y;
+        };
+
+        const dragended = (
+          event: d3.D3DragEvent<
+            SVGCircleElement,
+            ExtendedSimulationNodeDatum,
+            unknown
+          >,
+          d: ExtendedSimulationNodeDatum
+        ) => {
+          if (!event.active) simulation.alphaTarget(0);
+          d.fx = null;
+          d.fy = null;
+        };
+
+        // Define the drag behavior
+        const drag = d3
+          .drag<SVGCircleElement, ExtendedSimulationNodeDatum>()
+          .on('start', dragstarted)
+          .on('drag', dragged)
+          .on('end', dragended);
+
+        // Draw lines for the links
+        svg
+          .append('defs')
+          .append('marker')
+          .attr('id', 'arrow')
+          .attr('viewBox', '0 -5 10 10') // This might need adjustment
+          .attr('refX', 5) // Adjust this depending on the new size
+          .attr('refY', 0)
+          .attr('markerWidth', 8) // Increased size
+          .attr('markerHeight', 8) // Increased size
+          .attr('orient', 'auto')
+          .append('path')
+          .attr('d', 'M0,-5L10,0L0,5') // Path for the arrow shape
+          .attr('class', 'arrowHead');
+
+        // Append lines for links and use the arrow marker
+        const link = wrapper
+          .selectAll('.link')
+          .data(links)
+          .enter()
+          .append('line')
+          .attr('class', 'link');
+
+        const arrowLines = wrapper
+          .selectAll('.arrow-line')
+          .data(links)
+          .enter()
+          .append('line')
+          .attr('class', 'arrow-line')
+          .style('stroke', 'none')
+          .attr('marker-end', 'url(#arrow)'); // Attach the arrowhead marker
+
+        // Append rect elements for each node
+        const node = wrapper
+          .selectAll('.node')
+          .data(nodes)
+          .enter()
+          .append('g')
+          .attr('class', 'node');
+
+        // Append text to the node group first
+        node
+          .append('text')
+          .text((d) => `[${d.id}]`)
+          .attr('class', 'node-text')
+          .attr('text-anchor', 'middle')
+          .attr('alignment-baseline', 'middle')
+          .on('click', function (event, d) {
+            setActiveModule(d.id);
+          });
+
+        // Append a rect to each node for the background
+        node
+          .insert('rect', 'text')
+          .attr('class', 'node-background')
+          .attr('width', function (d, i, nodes) {
+            const bbox = ((nodes[i] as SVGGElement)
+              .nextSibling as SVGGraphicsElement)!.getBBox();
+            return bbox.width + 10;
+          })
+          .attr('height', function (d, i, nodes) {
+            const bbox = ((nodes[i] as SVGGElement)
+              .nextSibling as SVGGraphicsElement)!.getBBox();
+            return bbox.height + 10;
+          })
+          .attr('x', function (d, i, nodes) {
+            const bbox = ((nodes[i] as SVGGElement)
+              .nextSibling as SVGGraphicsElement)!.getBBox();
+            return bbox.x - 5;
+          })
+          .attr('y', function (d, i, nodes) {
+            const bbox = ((nodes[i] as SVGGElement)
+              .nextSibling as SVGGraphicsElement)!.getBBox();
+            return bbox.y - 5;
+          });
+
+        node.call(drag as any);
+
+        // Update positions on each tick
+        simulation.on('tick', () => {
+          // Update link positions
+          link
+            .attr('x1', (d: any) => d.source.x)
+            .attr('y1', (d: any) => d.source.y)
+            .attr('x2', (d: any) => d.target.x)
+            .attr('y2', (d: any) => d.target.y);
+
+          // Update the overlay lines for the arrowheads
+          arrowLines
+            .attr('x1', (d: any) => d.source.x)
+            .attr('y1', (d: any) => d.source.y)
+            .attr(
+              'x2',
+              (d: any) => d.source.x + (d.target.x - d.source.x) * 0.5
+            ) // Corrected midpoint x
+            .attr(
+              'y2',
+              (d: any) => d.source.y + (d.target.y - d.source.y) * 0.5
+            ); // Corrected midpoint y
+
+          // Update node and text positions
+          node.attr('transform', (d) => `translate(${d.x}, ${d.y})`);
+        });
+
+        // Define zoomToFit function at the top level
+        const zoomToFit = () => {
+          const bounds = wrapper?.node()?.getBBox();
+          const dx = bounds?.width;
+          const dy = bounds?.height;
+          const x = bounds!.x + dx! / 2;
+          const y = bounds!.y + dy! / 2;
+
+          const scale = Math.min(
+            0.8 / Math.max(dx! / width!, dy! / height!),
+            4
+          );
+          const translate = [width! / 2 - scale * x, height! / 2 - scale * y];
+
+          svg
+            .transition()
+            .duration(1000)
+            .call(
+              zoom.transform as any,
+              d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)
+            );
+        };
+
+        // Call zoomToFit to fit graph after initial rendering
+        setTimeout(() => {
+          zoomToFit();
+        }, 1500);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Error initializing graph:', error);
+      }
     }
 
-    // Call zoomToFit to fit graph after initial rendering
-    setTimeout(() => {
-      zoomToFit();
-    }, 1500);
-  }, [deploymentInfo]);
+    void initializeGraph();
+  }, [deploymentDefinition]);
 
   return (
     <>
diff --git a/packages/website/src/features/Packages/Interact.tsx b/packages/website/src/features/Packages/Interact.tsx
index cfea7dd90..9fde15197 100644
--- a/packages/website/src/features/Packages/Interact.tsx
+++ b/packages/website/src/features/Packages/Interact.tsx
@@ -52,44 +52,49 @@ const Interact: FC = () => {
       return;
     }
 
-    const cannonOutputs: ChainArtifacts = getOutput(deploymentData.data);
-
-    setCannonOutputs(cannonOutputs);
-
-    const findContract = (
-      contracts: any,
-      parentModuleName: string,
-      imports: any
-    ) => {
-      if (contracts) {
-        Object.entries(contracts).forEach(([k, v]) => {
-          if (
-            parentModuleName === moduleName &&
-            k === contractName &&
-            (v as ContractData).address === contractAddress
-          ) {
-            setContract({
-              ...(v as ContractData),
-              contractName: k,
-            });
-            return;
-          }
-        });
-      }
-
-      if (imports) {
-        Object.entries(imports).forEach(([k, v]) =>
-          findContract(
-            (v as any).contracts,
-            parentModuleName && parentModuleName !== name
-              ? `${parentModuleName}.${k}`
-              : k,
-            (v as any).imports
-          )
-        );
-      }
+    const processOutputs = async () => {
+      const cannonOutputs: ChainArtifacts = await getOutput(
+        deploymentData.data
+      );
+      setCannonOutputs(cannonOutputs);
+
+      const findContract = (
+        contracts: any,
+        parentModuleName: string,
+        imports: any
+      ) => {
+        if (contracts) {
+          Object.entries(contracts).forEach(([k, v]) => {
+            if (
+              parentModuleName === moduleName &&
+              k === contractName &&
+              (v as ContractData).address === contractAddress
+            ) {
+              setContract({
+                ...(v as ContractData),
+                contractName: k,
+              });
+              return;
+            }
+          });
+        }
+
+        if (imports) {
+          Object.entries(imports).forEach(([k, v]) =>
+            findContract(
+              (v as any).contracts,
+              parentModuleName && parentModuleName !== name
+                ? `${parentModuleName}.${k}`
+                : k,
+              (v as any).imports
+            )
+          );
+        }
+      };
+      findContract(cannonOutputs.contracts, name, cannonOutputs.imports);
     };
-    findContract(cannonOutputs.contracts, name, cannonOutputs.imports);
+
+    void processOutputs();
   }, [
     contractName,
     deploymentData.data,
diff --git a/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx b/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx
index 1b5690769..7a1a70b18 100644
--- a/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx
+++ b/packages/website/src/features/Packages/PackageAccordionHelper/index.tsx
@@ -7,6 +7,8 @@ import IntegrateWithPackage from '@/features/Packages/PackageAccordionHelper/Int
 import { extractAddressesAbis } from '@/features/Packages/utils/extractAddressesAndABIs';
 import { Skeleton, Stack, Text } from '@chakra-ui/react';
 import { usePackageByRef } from '@/hooks/api/usePackage';
+import { useState, useEffect } from 'react';
+import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
 
 type Props = {
   name: string;
@@ -21,6 +23,9 @@ export default function PackageAccordionHelper({
   preset,
   chainId,
 }: Props) {
+  const [chainDefinition, setChainDefinition] =
+    useState<ChainDefinition | null>(null);
+
   const packagesQuery = usePackageByRef({ name, tag, preset, chainId });
 
   const deploymentData = useQueryIpfsDataParsed<DeploymentInfo>(
@@ -30,6 +35,25 @@ export default function PackageAccordionHelper({
 
   const isLoading = packagesQuery.isLoading || deploymentData.isLoading;
 
+  useEffect(() => {
+    async function loadChainDefinition() {
+      if (deploymentData.data?.def) {
+        /** Removing any potential run steps from the definition so it doesnt get registered in ChainDefinition */
+        //eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { ['run']: _, ...filteredDefinition } = deploymentData.data
+          .def as any;
+
+        const chainDefinition = await getChainDefinitionFromWorker(
+          filteredDefinition
+        );
+
+        setChainDefinition(chainDefinition);
+      }
+    }
+
+    void loadChainDefinition();
+  }, [deploymentData.data?.def]);
+
   if (isLoading) {
     return (
       <Stack>
@@ -51,10 +75,6 @@ export default function PackageAccordionHelper({
     return null;
   }
 
-  /** Removing any potential run steps from the definition so it doesnt get registered in ChainDefinition */
-  //eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { ['run']: _, ...filteredDefinition } = deploymentInfo.def as any;
-
   return (
     <CustomAccordion allowToggle={!isLoading}>
       <CustomAccordionItem
@@ -90,17 +110,17 @@ export default function PackageAccordionHelper({
         title="Integrate with this package"
         accordionPanelProps={{ p: 0 }}
       >
-        {state && deploymentInfo ? (
+        {state && deploymentInfo && chainDefinition ? (
           <IntegrateWithPackage
             name={name}
             chainId={packagesQuery.data.chainId}
             preset={packagesQuery.data.preset}
-            chainDefinition={new ChainDefinition(filteredDefinition)}
+            chainDefinition={chainDefinition}
             deploymentState={state}
             version={packagesQuery.data.version}
           />
         ) : (
-          <Text>Error retrieving deployment data</Text>
+          <Text>Loading deployment data...</Text>
         )}
       </CustomAccordionItem>
     </CustomAccordion>
diff --git a/packages/website/src/features/Packages/Tabs/InteractTab.tsx b/packages/website/src/features/Packages/Tabs/InteractTab.tsx
index f923bb357..ac1c59cde 100644
--- a/packages/website/src/features/Packages/Tabs/InteractTab.tsx
+++ b/packages/website/src/features/Packages/Tabs/InteractTab.tsx
@@ -143,78 +143,82 @@ export const InteractTab: FC<{
       return;
     }
 
-    const allContracts: AllContracts[] = [];
-    const cannonOutputs = getOutput(deploymentData.data);
-    processContracts(allContracts, cannonOutputs.contracts, name);
-    processImports(allContracts, cannonOutputs.imports);
+    const processDeploymentData = async (deploymentInfo: DeploymentInfo) => {
+      const allContracts: AllContracts[] = [];
+      const cannonOutputs = await getOutput(deploymentInfo);
+      processContracts(allContracts, cannonOutputs.contracts, name);
+      processImports(allContracts, cannonOutputs.imports);
 
-    const highlightedContracts = allContracts.filter(
-      (contract) => contract.highlight
-    );
-    const proxyContracts = allContracts.filter((contract) =>
-      contract.contractName.toLowerCase().includes('proxy')
-    );
-
-    let highlightedData: any[] = [];
-    if (highlightedContracts.length > 0) {
-      highlightedData = highlightedContracts;
-    } else if (proxyContracts.length > 0) {
-      highlightedData = proxyContracts;
-    } else {
-      highlightedData = allContracts;
-    }
-
-    const uniqueAddresses = new Set();
-    for (const contractData of highlightedData) {
-      uniqueAddresses.add(contractData.contractAddress);
-    }
-
-    for (const uniqueAddress of uniqueAddresses) {
-      const excessContracts = highlightedData.filter(
-        (contract) => contract.contractAddress === uniqueAddress
+      const highlightedContracts = allContracts.filter(
+        (contract) => contract.highlight
       );
-      excessContracts.sort((a, b) => {
-        const accumulateDeepLevel = (acc: number, cur: string) =>
-          cur === '.' ? acc + 1 : acc;
-        const getModuleNameDeepLevel = (moduleName: string) =>
-          moduleName.split('').reduce(accumulateDeepLevel, 0);
-        const aDeepLevel = getModuleNameDeepLevel(a.moduleName);
-        const bDeepLevel = getModuleNameDeepLevel(b.moduleName);
-        return aDeepLevel - bDeepLevel;
-      });
-      excessContracts.shift();
-      highlightedData = highlightedData.filter(
-        (contract) => !excessContracts.includes(contract)
+      const proxyContracts = allContracts.filter((contract) =>
+        contract.contractName.toLowerCase().includes('proxy')
       );
-    }
 
-    setHighlightedOptions(
-      highlightedData.sort((a, b) => {
-        const valueA: string = a['contractName'];
-        const valueB: string = b['contractName'];
-        return valueA.localeCompare(valueB);
-      })
-    );
+      let highlightedData: any[] = [];
+      if (highlightedContracts.length > 0) {
+        highlightedData = highlightedContracts;
+      } else if (proxyContracts.length > 0) {
+        highlightedData = proxyContracts;
+      } else {
+        highlightedData = allContracts;
+      }
 
-    const otherData = allContracts.filter(
-      (contract) => !highlightedData.includes(contract)
-    );
-    setOtherOptions(
-      otherData.sort((a, b) => {
-        const valueA: string = a['contractName'];
-        const valueB: string = b['contractName'];
-        return valueA.localeCompare(valueB);
-      })
-    );
+      const uniqueAddresses = new Set();
+      for (const contractData of highlightedData) {
+        uniqueAddresses.add(contractData.contractAddress);
+      }
 
-    if (!activeContractOption) {
-      const _contract = highlightedData[0] || otherData[0];
-      if (_contract) {
-        void router.push(
-          `/packages/${name}/${tag}/${variant}/interact/${_contract.moduleName}/${_contract.contractName}/${_contract.contractAddress}`
+      for (const uniqueAddress of uniqueAddresses) {
+        const excessContracts = highlightedData.filter(
+          (contract) => contract.contractAddress === uniqueAddress
+        );
+        excessContracts.sort((a, b) => {
+          const accumulateDeepLevel = (acc: number, cur: string) =>
+            cur === '.' ? acc + 1 : acc;
+          const getModuleNameDeepLevel = (moduleName: string) =>
+            moduleName.split('').reduce(accumulateDeepLevel, 0);
+          const aDeepLevel = getModuleNameDeepLevel(a.moduleName);
+          const bDeepLevel = getModuleNameDeepLevel(b.moduleName);
+          return aDeepLevel - bDeepLevel;
+        });
+        excessContracts.shift();
+        highlightedData = highlightedData.filter(
+          (contract) => !excessContracts.includes(contract)
         );
       }
-    }
+
+      setHighlightedOptions(
+        highlightedData.sort((a, b) => {
+          const valueA: string = a['contractName'];
+          const valueB: string = b['contractName'];
+          return valueA.localeCompare(valueB);
+        })
+      );
+
+      const otherData = allContracts.filter(
+        (contract) => !highlightedData.includes(contract)
+      );
+      setOtherOptions(
+        otherData.sort((a, b) => {
+          const valueA: string = a['contractName'];
+          const valueB: string = b['contractName'];
+          return valueA.localeCompare(valueB);
+        })
+      );
+
+      if (!activeContractOption) {
+        const _contract = highlightedData[0] || otherData[0];
+        if (_contract) {
+          void router.push(
+            `/packages/${name}/${tag}/${variant}/interact/${_contract.moduleName}/${_contract.contractName}/${_contract.contractAddress}`
+          );
+        }
+      }
+    };
+
+    void processDeploymentData(deploymentData.data);
   }, [activeContractOption, deploymentData.data, name, router, tag, variant]);
 
   return (
diff --git a/packages/website/src/helpers/chain-definition.ts b/packages/website/src/helpers/chain-definition.ts
index c9646be8e..290318e2a 100644
--- a/packages/website/src/helpers/chain-definition.ts
+++ b/packages/website/src/helpers/chain-definition.ts
@@ -7,9 +7,11 @@ export const getChainDefinitionFromWorker = (deployInfo: RawChainDefinition) =>
     worker.onmessage = (event) => {
       if ('error' in event.data) {
         worker.terminate();
-        reject(new Error(event.data.error));
+        // in case of error, fallback to non-worker execution and return the chain definition
+        resolve(new ChainDefinition(deployInfo));
       } else {
         worker.terminate();
+        // in case of success, return the chain definition
         resolve(event.data);
       }
     };
diff --git a/packages/website/src/hooks/cannon.ts b/packages/website/src/hooks/cannon.ts
index 4f2aad300..6e718e818 100644
--- a/packages/website/src/hooks/cannon.ts
+++ b/packages/website/src/hooks/cannon.ts
@@ -9,6 +9,7 @@ import { useCannonRegistry } from '@/providers/CannonRegistryProvider';
 import { useLogs } from '@/providers/logsProvider';
 import { BaseTransaction } from '@safe-global/safe-apps-sdk';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
 import { useDeployerWallet } from './deployer';
 import {
   build as cannonBuild,
@@ -27,6 +28,7 @@ import {
   publishPackage,
   findUpgradeFromPackage,
   ChainBuilderContext,
+  RawChainDefinition,
 } from '@usecannon/builder';
 import _ from 'lodash';
 import { useEffect, useReducer, useState, useMemo } from 'react';
@@ -754,6 +756,47 @@ function getContractsRecursive(outputs: ChainArtifacts, prefix?: string): Contra
   return contracts;
 }
 
+export function useMergedCannonDefInfo(
+  gitUrl: string,
+  gitRef: string,
+  gitFile: string,
+  partialDeployInfo: ReturnType<typeof useCannonPackage>
+) {
+  const originalCannonDefInfo = useLoadCannonDefinition(gitUrl, gitRef, gitFile);
+
+  const {
+    data: workerDef,
+    error: workerError,
+    isLoading,
+  } = useQuery({
+    queryKey: ['merged-cannon-definition', gitUrl, gitRef, gitFile, partialDeployInfo?.ipfsQuery.data?.deployInfo],
+    queryFn: async () => {
+      if (!partialDeployInfo?.ipfsQuery.data?.deployInfo && !originalCannonDefInfo.def) {
+        return null;
+      }
+
+      const deployInfo = partialDeployInfo?.ipfsQuery.data?.deployInfo?.def || originalCannonDefInfo.def;
+
+      return await getChainDefinitionFromWorker(deployInfo as RawChainDefinition);
+    },
+    enabled: Boolean(partialDeployInfo?.ipfsQuery.data?.deployInfo || originalCannonDefInfo.def),
+  });
+
+  return useMemo(() => {
+    const isError = originalCannonDefInfo.isError || !!workerError;
+    const isFetching = originalCannonDefInfo.isFetching || isLoading;
+    const error = workerError || originalCannonDefInfo.error;
+
+    return {
+      isLoading,
+      isFetching,
+      isError,
+      error,
+      def: workerDef!,
+    };
+  }, [originalCannonDefInfo, workerDef, workerError, isLoading]);
+}
+
 export function useCannonPackageContracts(packageRef?: string, chainId?: number) {
   const pkg = useCannonPackage(packageRef, chainId);
   const [contracts, setContracts] = useState<ContractInfo | null>(null);
@@ -779,7 +822,9 @@ export function useCannonPackageContracts(packageRef?: string, chainId?: number)
           { ipfs: loader }
         );
 
-        const outputs = await getOutputs(readRuntime, new ChainDefinition(info.def), info.state);
+        const chainDefinition = await getChainDefinitionFromWorker(info.def);
+
+        const outputs = await getOutputs(readRuntime, chainDefinition, info.state);
 
         if (outputs) {
           setContracts(getContractsRecursive(outputs));
diff --git a/packages/website/src/hooks/deployer.ts b/packages/website/src/hooks/deployer.ts
index 41adee2a1..43e3980e7 100644
--- a/packages/website/src/hooks/deployer.ts
+++ b/packages/website/src/hooks/deployer.ts
@@ -13,9 +13,7 @@ export function useDeployerWallet(chainId?: number) {
   const [error, setError] = useState<Error | null>(null);
 
   const { switchChainAsync } = useSwitchChain();
-
   const { sendTransaction, isIdle, data: hash, error: txnError } = useSendTransaction();
-
   const { isSuccess: isConfirmed } = useWaitForTransactionReceipt({ hash });
 
   useEffect(
@@ -57,7 +55,7 @@ export function useDeployerWallet(chainId?: number) {
           setError(err);
         });
     },
-    [isConfirmed, isIdle, executionProgress.length, queuedTransactions, chainId]
+    [isConfirmed, isIdle, executionProgress.length, queuedTransactions, chainId, executionProgress]
   );
 
   return {
diff --git a/packages/website/src/hooks/useWorker.ts b/packages/website/src/hooks/useWorker.ts
deleted file mode 100644
index 42ee18311..000000000
--- a/packages/website/src/hooks/useWorker.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export function useWorker<T>(workerPath: string, onMessage: (data: T) => void, onError?: (error: ErrorEvent) => void) {
-  const workerRef = useRef<Worker | null>(null);
-
-  useEffect(() => {
-    workerRef.current = new Worker(new URL(workerPath, import.meta.url));
-
-    workerRef.current.onmessage = (event) => {
-      onMessage(event.data);
-    };
-
-    if (onError) {
-      workerRef.current.onerror = onError;
-    }
-
-    return () => {
-      workerRef.current?.terminate();
-    };
-  }, [workerPath, onMessage, onError]);
-
-  return workerRef.current;
-}
diff --git a/packages/website/src/lib/builder.ts b/packages/website/src/lib/builder.ts
index 74f6cd733..685e4f94e 100644
--- a/packages/website/src/lib/builder.ts
+++ b/packages/website/src/lib/builder.ts
@@ -1,6 +1,7 @@
 // Extracted builder getOutput from ipfs logic
 
-import { ChainArtifacts, ChainDefinition, registerAction } from '@usecannon/builder';
+import { getChainDefinitionFromWorker } from '@/helpers/chain-definition';
+import { ChainDefinition, ChainArtifacts, registerAction, DeploymentInfo } from '@usecannon/builder';
 import _ from 'lodash';
 import { z } from 'zod';
 
@@ -14,11 +15,12 @@ registerAction({
   validate: z.any(),
 });
 
-export const getOutput = (ipfs: { state: any; def: any }): ChainArtifacts => {
-  const { state } = ipfs;
-  const def = new ChainDefinition(ipfs.def);
+export const getOutput = async (deploymentInfo: DeploymentInfo): Promise<ChainArtifacts> => {
+  const { state, def } = deploymentInfo;
+  const chainDefinition = await getChainDefinitionFromWorker(def);
   const artifacts: ChainArtifacts = {};
-  for (const step of def.topologicalActions) {
+
+  for (const step of chainDefinition.topologicalActions) {
     if (state[step] && state[step].artifacts) {
       _.merge(artifacts, state[step].artifacts);
     }
diff --git a/packages/website/src/workers/chain-definition.worker.ts b/packages/website/src/workers/chain-definition.worker.ts
index 2c5e7044d..0eab23fde 100644
--- a/packages/website/src/workers/chain-definition.worker.ts
+++ b/packages/website/src/workers/chain-definition.worker.ts
@@ -1,8 +1,8 @@
+import _ from 'lodash';
 import { ChainDefinition } from '@usecannon/builder';
 
 self.onmessage = (event) => {
   try {
-    // Validate input data exists
     if (!event.data) {
       throw new Error('No chain definition data provided');
     }
@@ -12,7 +12,6 @@ self.onmessage = (event) => {
       throw new Error('Failed to create chain definition');
     }
 
-    // Return the chain definition
     self.postMessage(def);
   } catch (error: any) {
     self.postMessage({ error: error.message });