Merge pull request #29 from OpenZeppelin/debounce-compile-calls

debounce calls to compiler api

Author: MCarlomagno

src/lib/utils/helpers.ts

@@ -26,3 +26,11 @@ export const isUpgradeable = (sources?: ContractSources) => {
   if (!sources) return false;
   return Object.keys(sources).some((path) => path.includes('@openzeppelin/contracts-upgradeable'));
 }
+
+export const debouncer = (fn: (...args: any[]) => void, delay: number) => {
+  let timeout: NodeJS.Timeout;
+  return (...args: any[]) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}

src/lib/wizard/components/Deploy.svelte

@@ -9,13 +9,16 @@
   import { addAPToDropdown, findDeploymentEnvironment, globalState } from "$lib/state/state.svelte";
   import { attempt } from "$lib/utils/attempt";
   import { encodeConstructorArgs, getConstructorInputsWizard, getContractBytecode } from "$lib/utils/contracts";
-  import { isMultisig, isUpgradeable } from "$lib/utils/helpers";
+  import { debouncer, isMultisig, isUpgradeable } from "$lib/utils/helpers";
   import Button from "./shared/Button.svelte";
   import Input from "./shared/Input.svelte";
   import Message from "./shared/Message.svelte";
 
+  // debounce the compile call to avoid sending too many requests while the user is editing.
+  const compileDebounced = debouncer(compile, 600);
+
   let inputsWithValue = $state<Record<string, string | number | boolean>>({});
-  let busy = $state(false);
+  let isDeploying = $state(false);
   let successMessage = $state<string>("");
   let errorMessage = $state<string>("");
   let compilationError = $state<string>("");
@@ -24,6 +27,7 @@
   let deploymentResult = $state<DeploymentResult | undefined>(undefined);
   let isDeterministic = $state(false);
   let salt: string = $state("");
+  let isCompiling = $state(false);
 
   let contractBytecode = $derived.by(() => {
     if (!globalState.contract?.target || !compilationResult) return;
@@ -61,12 +65,12 @@
     : undefined
   );
 
-
   let inputs: ABIParameter[] = $state([]);
 
   $effect(() => {
     if (globalState.contract?.source?.sources) {
-      compile();
+      isCompiling = true;
+      compileDebounced();
     }
   });
 
@@ -75,7 +79,7 @@
     inputsWithValue[target.name] = target.value;
   }
 
-  async function compile() {
+  async function compile(): Promise<void> {
     const sources = globalState.contract?.source?.sources;
     if (!sources) {
       return;
@@ -94,6 +98,7 @@
     if (globalState.contract?.target && compilationResult) {
       inputs = getConstructorInputsWizard(globalState.contract.target, compilationResult.output.contracts);
     }
+    isCompiling = false;
   }
 
   function displayMessage(message: string, type: "success" | "error") {
@@ -304,9 +309,9 @@
   };
 
   async function triggerDeploy() {
-    busy = true;
+    isDeploying = true;
     await deploy();
-    busy = false;
+    isDeploying = false;
   }
 
 </script>
@@ -316,7 +321,9 @@
     <Message type="warn" message="Upgradable contracts are not yet fully supported. This action will only deploy the implementation contract without initializing. <br />We recommend using <u><a href='https://github.com/OpenZeppelin/openzeppelin-upgrades' target='_blank'>openzeppelin-upgrades</a></u> package instead." />
   {/if}
 
-  {#if inputs.length > 0}
+  {#if isCompiling}
+    <Message type="loading" message="Compiling..." />
+  {:else if inputs.length > 0}
     <h6 class="text-sm">Constructor Arguments</h6>
     {#each inputs as input}
       <Input name={input.name} placeholder={`${input.name} (${input.type})`} onchange={handleInputChange} value={''} type="text"/>
@@ -352,7 +359,7 @@
     <Message message={compilationError} type="error" />
   {/if}
 
-  <Button disabled={!globalState.authenticated || busy} loading={busy} label="Deploy" onClick={triggerDeploy} />
+  <Button disabled={!globalState.authenticated || isDeploying || isCompiling} loading={isDeploying} label="Deploy" onClick={triggerDeploy} />
 
   {#if successMessage || errorMessage} 
     <Message message={successMessage || errorMessage} type={successMessage ? "success" : "error"} />

src/lib/wizard/components/shared/Message.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   type Props = {
     message: string;
-    type: 'success' | 'error' | 'warn' | 'info';
+    type: 'success' | 'error' | 'warn' | 'info' | 'loading';
   };
 
   let { message, type }: Props = $props();
@@ -27,5 +27,10 @@
     <i class={`fa fa-info-circle text-blue-600`}></i>
     <div class="text-xs text-blue-600">{@html message}</div>
   </div>
+{:else if type === 'loading'}
+  <div class="flex flex-row items-center gap-2">
+    <i class={"fa fa-circle-o-notch fa-spin text-blue-600"}></i>
+    <div class="text-xs text-blue-600">{@html message}</div>
+  </div>
 {/if}