From 7918160a9f7f07e3b01799313b06aa0d006a2451 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Fri, 6 Dec 2024 19:00:08 -0300
Subject: [PATCH 1/3] minor ui fixes + logic for compiling contracts

---
 .../wizard/components/ApprovalProcess.svelte  |   4 +-
 .../wizard/components/Configuration.svelte    | 115 +++++++++++-------
 .../wizard/components/shared/Button.svelte    |   5 +-
 .../wizard/components/shared/Dropdown.svelte  |  97 ++++++++++-----
 src/lib/wizard/components/shared/Input.svelte |  12 +-
 .../wizard/components/shared/Message.svelte   |  22 ++++
 src/lib/wizard/index.ts                       |   4 +-
 src/routes/wizard.svelte                      |  73 ++++++++---
 8 files changed, 230 insertions(+), 102 deletions(-)
 create mode 100644 src/lib/wizard/components/shared/Message.svelte

diff --git a/src/lib/wizard/components/ApprovalProcess.svelte b/src/lib/wizard/components/ApprovalProcess.svelte
index e0af2f9..5a52e38 100644
--- a/src/lib/wizard/components/ApprovalProcess.svelte
+++ b/src/lib/wizard/components/ApprovalProcess.svelte
@@ -143,7 +143,7 @@
     title={disableCreation ? "Deploy Environment already exists" : undefined}
   />
   <label
-    class="text-sm"
+    class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
     for="flexRadioDefault2"
     title={disableCreation ? "Deploy Environment already exists" : undefined}
   >
@@ -197,7 +197,7 @@
     disabled={disableCreation}
   />
   <label
-    class="text-sm"
+    class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
     for="flexRadioDefault2"
     title={disableCreation ? "Deploy Environment already exists" : undefined}
   >
diff --git a/src/lib/wizard/components/Configuration.svelte b/src/lib/wizard/components/Configuration.svelte
index 4918cbb..087dbb6 100644
--- a/src/lib/wizard/components/Configuration.svelte
+++ b/src/lib/wizard/components/Configuration.svelte
@@ -5,77 +5,98 @@
   import { globalState } from "$lib/state/state.svelte";
   import Button from "./shared/Button.svelte";
   import Input from "./shared/Input.svelte";
+  import Message from "./shared/Message.svelte";
 
   let loading = $state(false);
   let successMessage = $state<string | undefined>(undefined);
   let errorMessage = $state<string | undefined>(undefined);
-  let apiKey = $state("");
-  let apiSecret = $state("");
+  let apiKey = $state(globalState.credentials?.apiKey ?? "");
+  let apiSecret = $state(globalState.credentials?.apiSecret ?? "");
 
   function handleGetApiKey() {
-    // TODO: Implement
+    window.open(
+      "https://defender.openzeppelin.com/#/settings/api-keys",
+      "_blank",
+    );
   }
 
   async function authenticate() {
-
-  loading = true;
-
-  const result: APIResponse<AuthenticationResponse> = await API.authenticate({ apiKey, apiSecret });
-
-if (result.success) {
-  globalState.authenticated = true;
-  successMessage = "API Key Authenticated";
-} else {
-  errorMessage = result.error ?? "Defender Authentication Failed";
-}
-
-if (result?.data?.credentials) {
-  globalState.credentials = {
-    apiKey: result?.data?.credentials.apiKey,
-    apiSecret: result?.data?.credentials.apiSecret,
-  };
-}
-
-if (result?.data?.permissions) {
-  globalState.permissions = result?.data?.permissions;
-}
-
-if (result?.data?.networks) {
-  globalState.networks = result?.data?.networks;
-}
-
-if (result?.data?.approvalProcesses) {
-  globalState.approvalProcesses = result?.data?.approvalProcesses;
-}
-
-if (result?.data?.relayers) {
-  globalState.relayers = result?.data?.relayers;
-}
-
-loading = false;
+    loading = true;
+    successMessage = undefined;
+    errorMessage = undefined;
+
+    const result: APIResponse<AuthenticationResponse> = await API.authenticate({
+      apiKey,
+      apiSecret,
+    });
+
+    if (result.success) {
+      globalState.authenticated = true;
+      successMessage = "API Key Authenticated";
+    } else {
+      errorMessage = result.error ?? "Defender Authentication Failed";
+    }
+
+    if (result?.data?.credentials) {
+      globalState.credentials = {
+        apiKey: result?.data?.credentials.apiKey,
+        apiSecret: result?.data?.credentials.apiSecret,
+      };
+    }
+
+    if (result?.data?.permissions) {
+      globalState.permissions = result?.data?.permissions;
+    }
+
+    if (result?.data?.networks) {
+      globalState.networks = result?.data?.networks;
+    }
+
+    if (result?.data?.approvalProcesses) {
+      globalState.approvalProcesses = result?.data?.approvalProcesses;
+    }
+
+    if (result?.data?.relayers) {
+      globalState.relayers = result?.data?.relayers;
+    }
+
+    loading = false;
   }
-
 </script>
 
 <div class="flex flex-col gap-2">
   <div class="flex flex-row justify-between">
     <div>
       <label class="text-xs" for="apiKey">API Key</label>
-      <i class="fa fa-info-circle text-xs text-gray-500" title="Get your API key from the Defender Dashboard"></i>
+      <i
+        class="fa fa-info-circle text-xs text-gray-500"
+        title="Get your API key from the Defender Dashboard"
+      ></i>
     </div>
-    <button onclick={handleGetApiKey} class="text-xs text-blue-600 font-bold">Get API Key</button>
+    <button onclick={handleGetApiKey} class="text-xs text-blue-600 font-bold"
+      >Get API Key</button
+    >
   </div>
-  <Input value={apiKey} placeholder="Enter your API key" type="text" />
+  <Input
+    bind:value={apiKey}
+    placeholder="Enter your API key"
+    type="text"
+  />
 
-  <Input label="Secret" value={apiSecret} placeholder="Enter your API secret" type="password" />
+  <Input
+    label="Secret"
+    bind:value={apiSecret}
+    placeholder="Enter your API secret"
+    type="password"
+  />
 
-  <Button loading={loading} label="Authenticate" onClick={authenticate} />
+  <Button {loading} label="Authenticate" onClick={authenticate} />
 
   {#if successMessage}
-    <div class="text-green-600">{successMessage}</div>
+    <Message message={successMessage} type="success" />
   {/if}
 
   {#if errorMessage}
-    <div class="text-red-600">{errorMessage}</div>
+    <Message message={errorMessage} type="error" />
   {/if}
 </div>
diff --git a/src/lib/wizard/components/shared/Button.svelte b/src/lib/wizard/components/shared/Button.svelte
index bc7b831..7bfaaf8 100644
--- a/src/lib/wizard/components/shared/Button.svelte
+++ b/src/lib/wizard/components/shared/Button.svelte
@@ -3,11 +3,12 @@
     loading: boolean;
     onClick: () => void;
     label: string;
+    disabled?: boolean;
   };
-  const { loading, onClick, label }: Props = $props();
+  const { loading, onClick, label, disabled }: Props = $props();
 </script>
 
-<button onclick={onClick} disabled={loading} class="bg-blue-600 text-white text-sm rounded-md p-2 mt-2" class:bg-gray-400={loading}>
+<button onclick={onClick} disabled={disabled || loading} class="bg-blue-600 text-white text-sm rounded-md p-2 mt-2" class:bg-gray-400={loading}>
   {#if loading}
     <i class="fa fa-spinner fa-spin"></i>
   {/if}
diff --git a/src/lib/wizard/components/shared/Dropdown.svelte b/src/lib/wizard/components/shared/Dropdown.svelte
index fff769f..244f7da 100644
--- a/src/lib/wizard/components/shared/Dropdown.svelte
+++ b/src/lib/wizard/components/shared/Dropdown.svelte
@@ -2,6 +2,22 @@
   import type { DropdownItem } from "$lib/models/ui";
   import { createEventDispatcher } from "svelte";
 
+  function clickOutside(node: HTMLElement, handler: () => void) {
+    const handleClick = (event: MouseEvent) => {
+      if (!node.contains(event.target as Node)) {
+        handler();
+      }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+      destroy() {
+        document.removeEventListener('click', handleClick, true);
+      }
+    };
+  }
+
   type Props = {
     placeholder: string;
     items: DropdownItem[];
@@ -31,39 +47,58 @@
     selected = item;
     dispatch("select", item);
   };  
+  let isOpen = $state(false);
+  
+  const toggleDropdown = () => {
+    if (!disabled) isOpen = !isOpen;
+  };
+
+  const handleSelect = (item: DropdownItem) => {
+    selected = item;
+    isOpen = false;
+    dispatch("select", item);
+  };
+
+  const handleClickOutside = () => {
+    isOpen = false;
+  };
 </script>
 
-<div class="flex flex-col">
-  <select name={name} id={name} bind:value={selected} disabled={disabled} class="border border-gray-300 disabled:opacity-50 rounded-md cursor-pointer p-2 text-xs">
-    <option disabled selected value={undefined}>{placeholder}</option>
-    {#each Object.entries(groupedItems) as [group, items]}
-      {#if group !== 'default'}
-        <optgroup label={group}>
-          {#each items.sort((a, b) => a.label.localeCompare(b.label)) as item}
-            <option value={item.value} onclick={() => onSelect(item)}>{item.label}</option>
-          {/each}
-        </optgroup>
-      {:else}
+<div class="relative w-full" use:clickOutside={handleClickOutside}>
+  <button
+    type="button"
+    class="w-full flex items-center justify-between border border-gray-300 disabled:opacity-50 rounded-md p-2 text-xs bg-white"
+    onclick={toggleDropdown}
+    disabled={disabled}
+    {name}
+  >
+    <span class="truncate">
+      {selected ? selected.label : placeholder}
+    </span>
+    <i class="fa fa-chevron-down text-[8px] transition-transform duration-200 font-light {isOpen ? 'rotate-180' : ''}"></i>
+  </button>
+
+  {#if isOpen}
+    <div class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto">
+      {#each Object.entries(groupedItems) as [group, items]}
+        {#if group !== 'default'}
+          <div class="px-2 py-1 text-xs font-semibold bg-gray-50 text-gray-700">{group}</div>
+        {/if}
         {#each items.sort((a, b) => a.label.localeCompare(b.label)) as item}
-          <option value={item.value} onclick={() => onSelect(item)}>{item.label}</option>
+          <button
+            type="button"
+            class="w-full text-left px-2 py-1.5 text-xs hover:bg-gray-100 focus:bg-gray-100 focus:outline-none {selected?.value === item.value ? 'bg-gray-50' : ''}"
+            onclick={() => handleSelect(item)}
+          >
+            {item.label}
+          </button>
         {/each}
+      {/each}
+      {#if items.length === 0}
+        <div class="px-2 py-1.5 text-xs text-gray-500">
+          {emptyLabel ?? "No items available"}
+        </div>
       {/if}
-    {/each}
-    {#if items.length === 0}
-      <option disabled>{emptyLabel ?? "No items available"}</option>
-    {/if}
-  </select>
-</div>
-
-
-<style>
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8l-6-6h12l-6 6z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0.75rem center;
-    background-size: 8px 8px;
-  }
-</style>
+    </div>
+  {/if}
+</div>
\ No newline at end of file
diff --git a/src/lib/wizard/components/shared/Input.svelte b/src/lib/wizard/components/shared/Input.svelte
index 02f1b9f..e40466d 100644
--- a/src/lib/wizard/components/shared/Input.svelte
+++ b/src/lib/wizard/components/shared/Input.svelte
@@ -6,10 +6,18 @@
     type: 'text' | 'password';
     disabled?: boolean;
   };
-  let { label, value, placeholder, type, disabled }: Props = $props();
+  let { label, value = $bindable(), placeholder, type, disabled }: Props = $props();
+    
 </script>
 
 {#if label}
   <label class="text-xs" for="apiSecret">{label}</label>
 {/if}
-<input name="apiSecret" type={type} bind:value={value} placeholder={placeholder} disabled={disabled} class="border text-xs border-gray-300 disabled:opacity-50 rounded-md p-2 w-full" />
+<input
+  name="apiSecret"
+  type={type}
+  bind:value={value}
+  placeholder={placeholder}
+  disabled={disabled}
+  class="border text-xs border-gray-300 disabled:opacity-50 rounded-md p-2 w-full"
+/>
diff --git a/src/lib/wizard/components/shared/Message.svelte b/src/lib/wizard/components/shared/Message.svelte
new file mode 100644
index 0000000..f66d51d
--- /dev/null
+++ b/src/lib/wizard/components/shared/Message.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  type Props = {
+    message: string;
+    type: 'success' | 'error';
+  };
+
+  let { message, type }: Props = $props();
+
+  let color = type === 'success' ? 'green' : 'red';
+</script>
+
+{#if type === 'success'}
+  <div class="flex flex-row items-center gap-2">
+    <i class={`fa fa-check-circle-o text-green-600`}></i>
+    <div class="text-xs text-green-600">{message}</div>
+  </div>
+{:else if type === 'error'}
+  <div class="flex flex-row items-center gap-2">
+    <i class={`fa fa-times-circle-o text-red-600`}></i>
+    <div class="text-xs text-red-600">{message}</div>
+  </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/wizard/index.ts b/src/lib/wizard/index.ts
index 5600865..4d1c0e0 100644
--- a/src/lib/wizard/index.ts
+++ b/src/lib/wizard/index.ts
@@ -15,7 +15,9 @@ function listenToContracts() {
   window.addEventListener('message', function (e: MessageEvent<DefenderDeployMessage>) {
     if (e.data.kind === 'oz-wizard-defender-deploy') {
       globalState.contract = { 
-        source: e.data.sources, 
+        source: {
+          sources: e.data.sources,
+        },
         target: getMainContractName(e.data.sources) 
       } ;
     }
diff --git a/src/routes/wizard.svelte b/src/routes/wizard.svelte
index 5216ab4..cfdbd22 100644
--- a/src/routes/wizard.svelte
+++ b/src/routes/wizard.svelte
@@ -5,29 +5,62 @@
   import { onMount } from "svelte";
   import Configuration from "$lib/wizard/components/Configuration.svelte";
   import Network from "$lib/wizard/components/Network.svelte";
-  import { wait } from "$lib/utils/helpers";
   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 { API } from "$lib/api";
+  import { buildCompilerInput, type ContractSources } from "$lib/models/solc";
+  import Message from "$lib/wizard/components/shared/Message.svelte";
 
-  let deploying = $state(false);
+  let busy = $state(false);
+  let successMessage = $state<string>("");
+  let errorMessage = $state<string>("");
+  let compilationResult = $state<any>();
 
-  // import { buildCompilerInput, type ContractSources } from "$lib/models/solc";
-  // let compilationResult: any;
+  let currentStep = $state(0);
+  function toggleStep(step: number) {
+    currentStep = step;
+  }
+
+  const displayMessage = (message: string, type: "success" | "error") => {
+    successMessage = "";
+    errorMessage = "";
+    if (type === "success") {
+      successMessage = message;
+    } else {
+      errorMessage = message;
+    }
+  }
+  async function compile() {
+    const sources = globalState.contract?.source?.sources;
+    if (!sources) {
+      displayMessage("No source code found", "error");
+      return;
+    }
+
+    const res = await API.compile(buildCompilerInput(
+      globalState.contract!.source!.sources as ContractSources
+    ));
+
+    if (!res.success) {
+      displayMessage("Compilation failed", "error");
+      return;
+    }
+
+    displayMessage("Compilation successful", "success");
+    compilationResult = res.data;
+  }
 
-  // async function compile() {
-  //   if (!wizardState.sources) return;
-  //   compilationResult = await API.compile(buildCompilerInput(wizardState.sources));
-  // }
 
   const deploy = async () => {
-    deploying = true;
-    await wait(2000);
-    deploying = false;
+    // TODO: Implement deploy
   };
 
-  let currentStep = $state(0);
-  function toggleStep(step: number) {
-    currentStep = step;
+  async function compileAndDeploy() {
+    busy = true;
+    await compile();
+    await deploy();
+    busy = false;
   }
 
   onMount(initWizardPlugin);
@@ -45,7 +78,7 @@
         <Configuration />
       </div>
     </div>
-    <button onclick={() => toggleStep(1)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
+    <button disabled={!globalState.authenticated} onclick={() => toggleStep(1)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
       <span>Network</span>
       <i class={`pr-2 ${currentStep === 1 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
@@ -54,7 +87,7 @@
         <Network onSelected={() => {}} />
       </div>
     </div>
-    <button onclick={() => toggleStep(2)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
+    <button disabled={!globalState.authenticated} onclick={() => toggleStep(2)} class="flex items-center justify-between w-full p-4 text-sm font-medium rtl:text-right text-gray-800 rounded-t-xl gap-3">
       <span>Approval Process</span>
       <i class={`pr-2 ${currentStep === 2 ? "fa fa-angle-down" : "fa fa-angle-right"}`}></i>
     </button>
@@ -63,9 +96,15 @@
         <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} />
 
-    <Button loading={deploying} label="Deploy" onClick={deploy} />
+    {#if successMessage || errorMessage} 
+      <Message message={successMessage || errorMessage} type={successMessage ? "success" : "error"} />
+    {/if}
   </div>
 </div>

From eff7e9265aa44bad3f1b0105cc39794043ad35fc Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Mon, 9 Dec 2024 13:35:51 -0300
Subject: [PATCH 2/3] implement deploy with existing approval process

---
 src/lib/models/solc.ts       |  8 ++++++
 src/routes/deploy/+server.ts |  3 +-
 src/routes/wizard.svelte     | 53 ++++++++++++++++++++++++++++++++++--
 3 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/lib/models/solc.ts b/src/lib/models/solc.ts
index 3f635e2..995e23c 100644
--- a/src/lib/models/solc.ts
+++ b/src/lib/models/solc.ts
@@ -14,6 +14,10 @@ export type CompilerInput = {
    */
   settings: {
     outputSelection: Record<string, Record<string, string[]>>;
+    optimizer?: {
+      enabled: boolean,
+      runs: number,
+    },
   };
 };
 
@@ -26,6 +30,10 @@ export function buildCompilerInput(sources: ContractSources): CompilerInput {
     sources,
     language: 'Solidity',
     settings: {
+      optimizer: {
+        enabled: true,
+        runs: 200,
+      },
       outputSelection: {
         '*': { '*': ['*'] }
       }
diff --git a/src/routes/deploy/+server.ts b/src/routes/deploy/+server.ts
index 28029c7..0f4b36c 100644
--- a/src/routes/deploy/+server.ts
+++ b/src/routes/deploy/+server.ts
@@ -10,7 +10,8 @@ export async function POST({ request }: { request: Request }) {
 
   const [deploymentResult, error] = await attempt(() => deployContract(credentials, deployment));
   if (error) {
-    return json({ success: false, error: error.msg });
+    const internalError = error.errorObject?.response?.data?.message;
+    return json({ success: false, error: internalError || error.msg });
   }
 
   return json({ success: true, data: { deployment: deploymentResult } });
diff --git a/src/routes/wizard.svelte b/src/routes/wizard.svelte
index cfdbd22..3b9f7dc 100644
--- a/src/routes/wizard.svelte
+++ b/src/routes/wizard.svelte
@@ -11,11 +11,22 @@
   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 { getNetworkLiteral } from "$lib/models/network";
 
   let busy = $state(false);
   let successMessage = $state<string>("");
   let errorMessage = $state<string>("");
-  let compilationResult = $state<any>();
+  let compilationResult = $state<{ output: Artifact['output'] }>();
+
+  let deploymentArtifact = $derived.by(() => {
+    if (!compilationResult || !globalState.contract?.target || !globalState.contract.source?.sources) return;
+   
+    return {
+      input: buildCompilerInput(globalState.contract.source?.sources as ContractSources),
+      output: compilationResult.output
+    }
+  });
 
   let currentStep = $state(0);
   function toggleStep(step: number) {
@@ -53,7 +64,45 @@
 
 
   const deploy = async () => {
-    // TODO: Implement deploy
+    if (!globalState.form.network) {
+      displayMessage("No network selected", "error");
+      return;
+    }
+
+    if (!globalState.form.approvalProcessSelected) {
+      displayMessage("No approval process selected", "error");
+      return;
+    }
+
+    if (!globalState.contract?.target || !globalState.contract.source?.sources) {
+      displayMessage("No contract selected", "error");
+      return;
+    }
+
+    if (!deploymentArtifact) {
+      displayMessage("No artifact found", "error");
+      return;
+    }
+
+    const deployRequest: DeployContractRequest = {
+      artifactPayload: JSON.stringify(deploymentArtifact),
+      network: getNetworkLiteral(globalState.form.network),
+      // TODO: Implement approval process creation
+      approvalProcessId: globalState.form.approvalProcessSelected.approvalProcessId,
+      contractName: globalState.contract!.target,
+      contractPath:  globalState.contract!.target,
+      verifySourceCode: true,
+      // TODO: Implement constructor arguments
+      constructorBytecode: '',
+    }
+
+    const res = await API.createDeployment(deployRequest);
+    if (!res.success) {
+      displayMessage(`Deployment failed: ${res.error}`, "error");
+      return;
+    }
+
+    displayMessage("Deployment successful", "success");
   };
 
   async function compileAndDeploy() {

From b7dd07e9aac1e352ef06f315f4b19654f05c5887 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Mon, 9 Dec 2024 16:34:12 -0300
Subject: [PATCH 3/3] add deployment logic

---
 src/lib/remix/components/Deploy.svelte        |   2 +-
 src/lib/utils/contracts.ts                    |   4 +-
 .../wizard/components/ApprovalProcess.svelte  |   4 +-
 src/lib/wizard/components/shared/Input.svelte |   6 +-
 src/routes/wizard.svelte                      | 225 ++++++++++++++++--
 5 files changed, 217 insertions(+), 24 deletions(-)

diff --git a/src/lib/remix/components/Deploy.svelte b/src/lib/remix/components/Deploy.svelte
index 105c405..639c7f4 100644
--- a/src/lib/remix/components/Deploy.svelte
+++ b/src/lib/remix/components/Deploy.svelte
@@ -81,7 +81,7 @@
       contractBytecode = getContractBytecode(
         contractInfo.path,
         contractInfo.name,
-        globalState.contract.data
+        globalState.contract.data.contracts
       );
     }
   });
diff --git a/src/lib/utils/contracts.ts b/src/lib/utils/contracts.ts
index 7882d88..821ba38 100644
--- a/src/lib/utils/contracts.ts
+++ b/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;
 }
diff --git a/src/lib/wizard/components/ApprovalProcess.svelte b/src/lib/wizard/components/ApprovalProcess.svelte
index 5a52e38..5450f97 100644
--- a/src/lib/wizard/components/ApprovalProcess.svelte
+++ b/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}
diff --git a/src/lib/wizard/components/shared/Input.svelte b/src/lib/wizard/components/shared/Input.svelte
index e40466d..d0e72b6 100644
--- a/src/lib/wizard/components/shared/Input.svelte
+++ b/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"
 />
diff --git a/src/routes/wizard.svelte b/src/routes/wizard.svelte
index 3b9f7dc..02794fe 100644
--- a/src/routes/wizard.svelte
+++ b/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} />