From 49f704037cc9dea7039f8cd2231074a4197682d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mati=CC=81as?= <mjlescano@protonmail.com>
Date: Thu, 19 Sep 2024 11:21:49 -0300
Subject: [PATCH] fix inifinite re-renders

---
 .../features/Deploy/QueueFromGitOpsPage.tsx   | 32 ++++++++++++++-----
 packages/website/src/hooks/cannon.ts          | 22 +++++--------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
index 332ea29fe..f657d2aa7 100644
--- a/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
+++ b/packages/website/src/features/Deploy/QueueFromGitOpsPage.tsx
@@ -46,7 +46,7 @@ import {
   Checkbox,
 } from '@chakra-ui/react';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
-import { ChainBuilderContext } from '@usecannon/builder';
+import { ChainBuilderContext, DeploymentInfo } from '@usecannon/builder';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -219,10 +219,10 @@ function QueueFromGitOps() {
   //   buildInfo.reset();
   // }, [deployerWalletAddress, buildInfo]);
 
-  const uploadToPublishIpfs = useCannonWriteDeployToIpfs(
-    buildInfo.buildResult?.runtime,
-    cannonDefInfo.def
-      ? {
+  const nextCannonDeployInfo = useMemo(() => {
+    console.log('useMemo nextCannonDeployInfo');
+    return cannonDefInfo.def
+      ? ({
           generator: `cannon website ${pkg.version}`,
           timestamp: Math.floor(Date.now() / 1000),
           def: cannonDefInfo.def.toJson(),
@@ -231,8 +231,20 @@ function QueueFromGitOps() {
           meta: prevCannonDeployInfo.pkg?.meta,
           miscUrl: prevCannonDeployInfo.pkg?.miscUrl || EMPTY_IPFS_MISC_URL,
           chainId: currentSafe.chainId,
-        }
-      : undefined,
+        } satisfies DeploymentInfo)
+      : undefined;
+  }, [
+    buildInfo.buildResult?.state,
+    cannonDefInfo.def,
+    currentSafe.chainId,
+    prevCannonDeployInfo.pkg?.meta,
+    prevCannonDeployInfo.pkg?.miscUrl,
+    prevCannonDeployInfo.pkg?.options,
+  ]);
+
+  const uploadToPublishIpfs = useCannonWriteDeployToIpfs(
+    buildInfo.buildResult?.runtime,
+    nextCannonDeployInfo,
     prevCannonDeployInfo.metaUrl
   );
 
@@ -240,7 +252,11 @@ function QueueFromGitOps() {
     if (['success', 'error'].includes(buildInfo.buildStatus)) {
       uploadToPublishIpfs.writeToIpfsMutation.mutate();
     }
-  }, [buildInfo.buildStatus, uploadToPublishIpfs.writeToIpfsMutation]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    buildInfo.buildStatus,
+    // DO NOT ADD: uploadToPublishIpfs.writeToIpfsMutation
+  ]);
 
   const refsInfo = useGitRefsList(gitUrl);
   const foundRef = refsInfo.refs?.find(
diff --git a/packages/website/src/hooks/cannon.ts b/packages/website/src/hooks/cannon.ts
index b60bc0cba..ff1272ff6 100644
--- a/packages/website/src/hooks/cannon.ts
+++ b/packages/website/src/hooks/cannon.ts
@@ -8,7 +8,7 @@ import { useCannonChains } from '@/providers/CannonProvidersProvider';
 import { useCannonRegistry } from '@/providers/CannonRegistryProvider';
 import { useLogs } from '@/providers/logsProvider';
 import { BaseTransaction } from '@safe-global/safe-apps-sdk';
-import { useMutation, UseMutationOptions, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useDeployerWallet } from './deployer';
 import {
   build as cannonBuild,
@@ -28,7 +28,7 @@ import {
   findUpgradeFromPackage,
 } from '@usecannon/builder';
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Abi, Address, createPublicClient, createTestClient, createWalletClient, custom, Hex, isAddressEqual } from 'viem';
 import { useChainId, usePublicClient } from 'wagmi';
 // Needed to prepare mock run step with registerAction
@@ -296,23 +296,22 @@ export function useCannonBuild(safe: SafeDefinition | null, def?: ChainDefinitio
 export function useCannonWriteDeployToIpfs(
   runtime?: ChainBuilderRuntime,
   deployInfo?: DeploymentInfo | undefined,
-  metaUrl?: string,
-  mutationOptions: Partial<UseMutationOptions> = {}
+  metaUrl?: string
 ) {
   const settings = useStore((s) => s.settings);
 
+  const def = useMemo(() => deployInfo && new ChainDefinition(deployInfo.def), [deployInfo]);
+
   const writeToIpfsMutation = useMutation({
-    ...mutationOptions,
     mutationFn: async () => {
       if (settings.isIpfsGateway) {
         throw new Error('You cannot write on an IPFS gateway, only read operations can be done');
       }
 
-      if (!runtime || !deployInfo) {
+      if (!runtime || !deployInfo || !def) {
         throw new Error('Missing required parameters');
       }
 
-      const def = new ChainDefinition(deployInfo.def);
       const ctx = await createInitialContext(def, deployInfo.meta, runtime.chainId, deployInfo.options);
 
       const preset = def.getPreset(ctx);
@@ -325,11 +324,10 @@ export function useCannonWriteDeployToIpfs(
         metaUrl || ''
       );
 
-      // eslint-disable-next-line no-console
-      console.log('pushed to memory registry', runtime.registry, packageRef);
-
       const memoryRegistry = new InMemoryRegistry();
 
+      console.log('pinning package:', packageRef, runtime.chainId);
+
       const publishTxns = await publishPackage({
         fromStorage: runtime,
         toStorage: new CannonStorage(
@@ -343,10 +341,6 @@ export function useCannonWriteDeployToIpfs(
         includeProvisioned: true,
       });
 
-      // it was published
-      // eslint-disable-next-line no-console
-      console.log('pushed to memory registry', memoryRegistry, packageRef, runtime.chainId);
-
       // load the new ipfs url
       const mainUrl = await memoryRegistry.getUrl(packageRef, runtime.chainId);