feat(website): refactor fetch cannonfile (website-build-refactor) (#1639

)

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

@@ -56,6 +56,7 @@ import { BuildStateAlerts } from '@/features/Deploy/BuildStateAlerts';
 import { WalletConnectionButtons } from '@/features/Deploy/WalletConnectionButtons';
 import { useToast } from '@/hooks/use-toast';
 import { useForm, FormProvider } from 'react-hook-form';
+import { useGitInfoFromCannonFileUrl } from '@/hooks/useGitInfoFromCannonFileUrl';
 
 const EMPTY_IPFS_MISC_URL =
   'ipfs://QmeSt2mnJKE8qmRhLyYbHQQxDKpsFbcWnw5e7JF4xVbN6k';
@@ -101,37 +102,13 @@ export default function QueueFromGitOps() {
   } | null>(null);
   const [inputError, setInputError] = useState<string | null>(null);
 
-  const gitInfo = useMemo(() => {
-    if (
-      !isCannonFileURL(cannonfileUrlInput) ||
-      !cannonfileUrlInput.includes('/blob/')
-    ) {
-      return { gitUrl: '', gitRef: '', gitFile: '' };
-    }
-
-    const [url, blobPath] = cannonfileUrlInput.split('/blob/');
-    const urlComponents = blobPath.split('/');
-    const branchName = urlComponents[0];
-    const filePath = urlComponents.slice(1).join('/');
-
-    return {
-      gitUrl: url,
-      gitRef: branchName,
-      gitFile: filePath,
-    };
-  }, [cannonfileUrlInput]);
-
+  const writeToIpfsMutation = useCannonWriteDeployToIpfs();
+  const gitInfo = useGitInfoFromCannonFileUrl(cannonfileUrlInput);
   const partialDeployInfo = useCannonPackage(
     partialDeployIpfs ? `ipfs://${partialDeployIpfs}` : '',
     currentSafe?.chainId
   );
-
-  const cannonDefInfo = useMergedCannonDefInfo(
-    gitInfo.gitUrl,
-    gitInfo.gitRef,
-    gitInfo.gitFile,
-    partialDeployInfo
-  );
+  const cannonDefInfo = useMergedCannonDefInfo(gitInfo, partialDeployInfo);
 
   const hasDeployers = useMemo(() => {
     return Boolean(cannonDefInfo?.def?.getDeployers()?.length);
@@ -210,8 +187,6 @@ export default function QueueFromGitOps() {
     setPreviousPackageInput(fullPackageRef);
   }, [nextCannonDeployInfo, hasDeployers]);
 
-  const writeToIpfsMutation = useCannonWriteDeployToIpfs();
-
   useEffect(() => {
     const callMutation = async () => {
       if (['success'].includes(buildState.status)) {

packages/website/src/hooks/cannon.ts

@@ -38,6 +38,7 @@ import { Abi, Address, createPublicClient, createTestClient, createWalletClient,
 import { useChainId, usePublicClient } from 'wagmi';
 // Needed to prepare mock run step with registerAction
 import '@/lib/builder';
+import { CannonfileGitInfo } from '@/hooks/useGitInfoFromCannonFileUrl';
 
 type CannonTxRecord = { name: string; gas: bigint; tx: BaseTransaction };
 
@@ -563,12 +564,8 @@ function getContractsRecursive(outputs: ChainArtifacts, prefix?: string): Contra
   return contracts;
 }
 
-export function useMergedCannonDefInfo(
-  gitUrl: string,
-  gitRef: string,
-  gitFile: string,
-  partialDeployInfo: ReturnType<typeof useCannonPackage>
-) {
+export function useMergedCannonDefInfo(gitInfo: CannonfileGitInfo, partialDeployInfo: ReturnType<typeof useCannonPackage>) {
+  const { gitUrl, gitRef, gitFile } = gitInfo;
   const originalCannonDefInfo = useLoadCannonDefinition(gitUrl, gitRef, gitFile);
 
   const {

packages/website/src/hooks/useGitInfoFromCannonFileUrl.ts

@@ -0,0 +1,30 @@
+import { isCannonFileURL } from '@/helpers/isCannonFileURL';
+
+export type CannonfileGitInfo = {
+  gitUrl: string;
+  gitRef: string;
+  gitFile: string;
+};
+
+const EMPTY_GIT_INFO: CannonfileGitInfo = {
+  gitUrl: '',
+  gitRef: '',
+  gitFile: '',
+};
+
+export function useGitInfoFromCannonFileUrl(cannonfileUrlInput: string): CannonfileGitInfo {
+  if (!isCannonFileURL(cannonfileUrlInput) || !cannonfileUrlInput.includes('/blob/')) {
+    return EMPTY_GIT_INFO;
+  }
+
+  const [url, blobPath] = cannonfileUrlInput.split('/blob/');
+  const urlComponents = blobPath.split('/');
+  const branchName = urlComponents[0];
+  const filePath = urlComponents.slice(1).join('/');
+
+  return {
+    gitUrl: url,
+    gitRef: branchName,
+    gitFile: filePath,
+  };
+}