fix(website): Optimizations to prevent CPU spikes

packages/website/src/features/Deploy/TransactionDetailsPage.tsx

@@ -63,6 +63,8 @@ import { SimulateTransactionButton } from './SimulateTransactionButton';
 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">
@@ -94,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(
     () => ({
@@ -230,18 +233,37 @@ 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,
-    cannonDefInfo.def,
-    prevCannonDeployInfo.pkg
+    chainDefinition,
+    prevCannonDeployInfo.ipfsQuery.data?.deployInfo
   );
 
   useEffect(() => {
-    if (!safe || !cannonDefInfo.def || !prevCannonDeployInfo.pkg) return;
+    if (
+      !safe ||
+      !chainDefinition ||
+      !prevCannonDeployInfo.ipfsQuery.data?.deployInfo
+    )
+      return;
     buildInfo.doBuild();
   }, [
     !isTransactionExecuted &&
       (!prevDeployGitHash || prevCannonDeployInfo.ipfsQuery.isFetched),
+    chainDefinition,
   ]);
 
   // compare proposed build info with expected transaction batch

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"