add deployment logic

Author: MCarlomagno

src/lib/remix/components/Deploy.svelte

@@ -81,7 +81,7 @@
       contractBytecode = getContractBytecode(
         contractInfo.path,
         contractInfo.name,
-        globalState.contract.data
+        globalState.contract.data.contracts
       );
     }
   });

src/lib/utils/contracts.ts

@@ -67,7 +67,7 @@ export function createArtifactPayload(
 export function getContractBytecode(
   path: string,
   contractName: string,
-  compilation: CompilationResult
+  contractSources: Record<string, any>
 ): string {
-  return compilation.contracts[path][contractName].evm.bytecode.object;
+  return contractSources[path][contractName].evm.bytecode.object;
 }

src/lib/wizard/components/ApprovalProcess.svelte

@@ -8,7 +8,7 @@
   import { getNetworkLiteral } from "$lib/models/network";
   import Input from "./shared/Input.svelte";
 
-  let address = $state<string>("");
+  let address = $state<string>(globalState.form.approvalProcessToCreate?.via || "");
 
   function approvalProcessByNetworkAndComponent(ap: ApprovalProcess) {
     const networkName = typeof globalState.form.network === 'string' 
@@ -163,7 +163,7 @@
 
   {#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
     <div class="mt-2">
-      <Input value={address} placeholder="* Address" type="text" />
+      <Input value={address} placeholder="* Address" type="text" onchange={onAddressChange} />
     </div>
   {:else if approvalProcessType === "Relayer"}
     {#if disableRelayers}

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

@@ -1,12 +1,15 @@
 <script lang="ts">
+  import type { ChangeEventHandler } from "svelte/elements";
+
   type Props = {
     label?: string;
     value: string;
     placeholder: string;
     type: 'text' | 'password';
     disabled?: boolean;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
   };
-  let { label, value = $bindable(), placeholder, type, disabled }: Props = $props();
+  let { label, value = $bindable(), placeholder, type, disabled, onchange }: Props = $props();
     
 </script>
 
@@ -19,5 +22,6 @@
   bind:value={value}
   placeholder={placeholder}
   disabled={disabled}
+  onchange={onchange}
   class="border text-xs border-gray-300 disabled:opacity-50 rounded-md p-2 w-full"
 />

src/routes/wizard.svelte

@@ -5,20 +5,33 @@
   import { onMount } from "svelte";
   import Configuration from "$lib/wizard/components/Configuration.svelte";
   import Network from "$lib/wizard/components/Network.svelte";
-  import ApprovalProcess from "$lib/wizard/components/ApprovalProcess.svelte";
   import Button from "$lib/wizard/components/shared/Button.svelte";
-  import { globalState } from "$lib/state/state.svelte";
+  import { addAPToDropdown, globalState } from "$lib/state/state.svelte";
   import { API } from "$lib/api";
   import { buildCompilerInput, type ContractSources } from "$lib/models/solc";
   import Message from "$lib/wizard/components/shared/Message.svelte";
-  import type { Artifact, DeployContractRequest } from "$lib/models/deploy";
+  import type { Artifact, DeployContractRequest, UpdateDeploymentRequest } from "$lib/models/deploy";
   import { getNetworkLiteral } from "$lib/models/network";
+  import { attempt } from "$lib/utils/attempt";
+  import { getContractBytecode } from "$lib/utils/contracts";
+  import { deployContract, switchToNetwork } from "$lib/ethereum";
+  import type { ApprovalProcess as ApprovalProcessType, CreateApprovalProcessRequest } from "$lib/models/approval-process";
+  import type { APIResponse } from "$lib/models/ui";
+  import { isDeploymentEnvironment, isSameNetwork } from "$lib/utils/helpers";
+  import ApprovalProcess from "$lib/wizard/components/ApprovalProcess.svelte";
+
+  interface DeploymentResult {
+    deploymentId?: string;
+    address: string;
+    hash: string;
+    sender?: string;
+  }
 
   let busy = $state(false);
   let successMessage = $state<string>("");
   let errorMessage = $state<string>("");
   let compilationResult = $state<{ output: Artifact['output'] }>();
-
+  let deploymentId = $state<string | undefined>(undefined);
   let deploymentArtifact = $derived.by(() => {
     if (!compilationResult || !globalState.contract?.target || !globalState.contract.source?.sources) return;
    
@@ -28,6 +41,21 @@
     }
   });
 
+  let contractBytecode = $derived.by(() => {
+    if (!globalState.contract?.target || !compilationResult) return;
+
+    const name = globalState.contract.target;
+    const sources = compilationResult.output.contracts;
+
+    return getContractBytecode(name, name, sources);
+  });
+
+  let constructorBytecode = $derived.by(() => {
+    return "0x";
+  });
+
+  let deploymentResult = $state<DeploymentResult | undefined>(undefined);
+
   let currentStep = $state(0);
   function toggleStep(step: number) {
     currentStep = step;
@@ -62,15 +90,130 @@
     compilationResult = res.data;
   }
 
+  export async function handleInjectedProviderDeployment(bytecode: string) {
+    // Switch network if needed
+    const [, networkError] = await attempt(async () => switchToNetwork(globalState.form.network!));
+    if (networkError) {
+      throw new Error(`Error switching network: ${networkError.msg}`);
+    }
+
+    const [result, error] = await attempt(async () => deployContract(bytecode));
+    if (error) {
+      throw new Error(`Error deploying contract: ${error.msg}`);
+    }
+
+    if (!result) {
+      throw new Error("Deployment result not found");
+    }
+
+    displayMessage(`Contract deployed successfully, hash: ${result?.hash}`, "success");
+    
+    return {
+      address: result.address,
+      hash: result.hash,
+      sender: result.sender
+    };
+  }
+
+  function findDeploymentEnvironment(via?: string, network?: string) {
+    if (!via || !network) return undefined;
+    return globalState.approvalProcesses.find((ap) => 
+      ap.network &&
+      isDeploymentEnvironment(ap) &&
+      isSameNetwork(ap.network, network) &&
+      ap.via?.toLocaleLowerCase() === via.toLocaleLowerCase()
+    );
+  }
+
+
+  async function getOrCreateApprovalProcess(): Promise<ApprovalProcessType | undefined> {
+    const ap = globalState.form.approvalProcessToCreate;
+    if (!ap || !ap.via || !ap.viaType) {
+      displayMessage("Must select an approval process to create", "error");
+      return;
+    }
 
-  const deploy = async () => {
     if (!globalState.form.network) {
-      displayMessage("No network selected", "error");
+      displayMessage("Must select a network", "error");
       return;
     }
 
-    if (!globalState.form.approvalProcessSelected) {
-      displayMessage("No approval process selected", "error");
+    const existing = findDeploymentEnvironment(ap.via, ap.network);
+    if (existing) {
+      return existing;
+    }
+
+    const apRequest: CreateApprovalProcessRequest = {
+      name: `Deploy From Remix - ${ap.viaType}`,
+      via: ap.via,
+      viaType: ap.viaType,
+      network: getNetworkLiteral(globalState.form.network),
+      relayerId: ap.relayerId,
+      component: ["deploy"],
+    };
+    const result: APIResponse<{ approvalProcess: ApprovalProcessType }> =
+      await API.createApprovalProcess(apRequest);
+
+    if (!result.success) {
+      displayMessage(`Approval process creation failed, error: ${JSON.stringify(result.error)}`, "error");
+      return;
+    }
+
+    displayMessage("Deployment Environment successfully created", "success");
+    if (!result.data) return;
+
+    addAPToDropdown(result.data.approvalProcess)
+    return result.data.approvalProcess;
+  }
+
+  export async function createDefenderDeployment(request: DeployContractRequest) {
+    const result: APIResponse<{ deployment: { deploymentId: string } }> =
+      await API.createDeployment(request);
+
+    if (!result.success || !result.data) {
+      throw new Error(`Contract deployment creation failed: ${JSON.stringify(result.error)}`);
+    }
+
+    return result.data.deployment.deploymentId;
+  }
+
+  export async function updateDeploymentStatus(
+    deploymentId: string,
+    address: string,
+    hash: string
+  ) {
+    const updateRequest: UpdateDeploymentRequest = {
+      deploymentId,
+      hash,
+      address,
+    };
+    
+    const result = await API.updateDeployment(updateRequest);
+    if (!result.success) {
+      throw new Error(`Failed to update deployment status: ${JSON.stringify(result.error)}`);
+    }
+  }
+
+  // function listenForDeployment(deploymentId: string) {
+  //   // polls the deployment status every 10 seconds
+  //   const interval = 10000;
+  //   timeout = setInterval(async () => {
+  //     const result: APIResponse<{ address: string, hash: string }> = await API.getDeployment(deploymentId);
+  //     if (result.success && result.data?.address) {
+  //       deploymentResult = {
+  //         address: result.data.address,
+  //         hash: result.data.hash,
+  //       };
+  //       logDeploymentResult(deploymentResult);
+  //       clearInterval(timeout);
+  //     }
+  //   }, interval);
+  // }
+
+
+  const deploy = async () => {
+    if (!globalState.form.network) {
+      displayMessage("No network selected", "error");
       return;
     }
 
@@ -84,24 +227,73 @@
       return;
     }
 
+    // contract deployment requires contract bytecode
+    // and constructor bytecode to be concatenated.
+    const bytecode = contractBytecode + constructorBytecode?.slice(2);
+
+    const shouldUseInjectedProvider = globalState.form.approvalType === "injected";
+    if (shouldUseInjectedProvider) {
+      const [result, error] = await attempt(async () =>
+        handleInjectedProviderDeployment(bytecode),
+      );
+      if (error) {
+        displayMessage(`Error deploying contract: ${error.msg}`, "error");
+        return;
+      }
+
+      deploymentResult = result;
+
+      // loads global state with EOA approval process to create
+      globalState.form.approvalProcessToCreate = {
+        viaType: "EOA",
+        via: deploymentResult?.sender,
+        network: getNetworkLiteral(globalState.form.network),
+      };
+      globalState.form.approvalProcessSelected = undefined;
+    }
+
+    const approvalProcess = globalState.form.approvalProcessSelected ?? await getOrCreateApprovalProcess();
+    if (!approvalProcess) {
+      displayMessage("No Approval Process selected", "error");
+      return;
+    };
+
     const deployRequest: DeployContractRequest = {
-      artifactPayload: JSON.stringify(deploymentArtifact),
       network: getNetworkLiteral(globalState.form.network),
-      // TODO: Implement approval process creation
-      approvalProcessId: globalState.form.approvalProcessSelected.approvalProcessId,
+      approvalProcessId: approvalProcess.approvalProcessId,
       contractName: globalState.contract!.target,
       contractPath:  globalState.contract!.target,
       verifySourceCode: true,
-      // TODO: Implement constructor arguments
+      licenseType: 'MIT',
+      artifactPayload: JSON.stringify(deploymentArtifact),
+      // TODO: Implement constructor arguments + salt
       constructorBytecode: '',
+      salt: '',
     }
 
-    const res = await API.createDeployment(deployRequest);
-    if (!res.success) {
-      displayMessage(`Deployment failed: ${res.error}`, "error");
+    const [newDeploymentId, deployError] = await attempt(async () => createDefenderDeployment(deployRequest));
+    if (deployError || !newDeploymentId) {
+      displayMessage(`Deployment failed to create: ${deployError?.msg}`, "error");
       return;
     }
 
+    if (shouldUseInjectedProvider && deploymentResult) {
+      const [, updateError] = await attempt(async () => updateDeploymentStatus(
+        newDeploymentId,
+        deploymentResult!.address,
+        deploymentResult!.hash
+      ));
+      if (updateError) {
+        displayMessage(`Error updating deployment status: ${updateError.msg}`, "error");
+        return;
+      }
+    } else {
+      // If we're not using an injected provider
+      // we need to listen for the deployment to be finished.
+      // listenForDeployment(newDeploymentId);
+    }
+
+    deploymentId = newDeploymentId;
     displayMessage("Deployment successful", "success");
   };
 
@@ -145,9 +337,6 @@
         <ApprovalProcess  />
       </div>
     </div>
-    {#if compilationResult}
-      {JSON.stringify(compilationResult, null, 2)}
-    {/if}
   </div>
   <div class="sticky px-4 flex flex-col gap-2">
     <Button disabled={!globalState.authenticated || busy} loading={busy} label="Deploy" onClick={compileAndDeploy} />