From bc3d8ed41ebc9a6580ff234573586d35eed67f88 Mon Sep 17 00:00:00 2001
From: Nicolas Molina <nicolas.molina@openzeppelin.com>
Date: Mon, 20 Jan 2025 15:05:27 -0300
Subject: [PATCH] fix: adding warning message when user select injected
 provider

---
 .../wizard/components/ApprovalProcess.svelte  | 205 ++++++++++--------
 1 file changed, 117 insertions(+), 88 deletions(-)

diff --git a/src/lib/wizard/components/ApprovalProcess.svelte b/src/lib/wizard/components/ApprovalProcess.svelte
index b93e049..0ebbea0 100644
--- a/src/lib/wizard/components/ApprovalProcess.svelte
+++ b/src/lib/wizard/components/ApprovalProcess.svelte
@@ -2,20 +2,27 @@
   import { globalState } from "$lib/state/state.svelte";
   import Dropdown from "./shared/Dropdown.svelte";
   import { abbreviateAddress } from "$lib/utils/helpers";
-  import { approvalProcessTypes, type ApprovalProcess, type ApprovalProcessType } from "$lib/models/approval-process";
+  import {
+    approvalProcessTypes,
+    type ApprovalProcess,
+    type ApprovalProcessType,
+  } from "$lib/models/approval-process";
   import type { DropdownItem, GlobalState } from "$lib/models/ui";
   import type { Relayer } from "$lib/models/relayer";
   import { getNetworkLiteral } from "$lib/models/network";
   import Input from "./shared/Input.svelte";
   import Message from "./shared/Message.svelte";
 
-  let address = $state<string>(globalState.form.approvalProcessToCreate?.via || "");
+  let address = $state<string>(
+    globalState.form.approvalProcessToCreate?.via || ""
+  );
 
   function approvalProcessByNetworkAndComponent(ap: ApprovalProcess) {
-    const networkName = typeof globalState.form.network === 'string' 
-      ? globalState.form.network 
-      : globalState.form.network?.name;
-      
+    const networkName =
+      typeof globalState.form.network === "string"
+        ? globalState.form.network
+        : globalState.form.network?.name;
+
     return ap.network === networkName && ap.component?.includes("deploy");
   }
 
@@ -63,7 +70,9 @@
         viaType: "Relayer",
         via: relayer.value.address,
         relayerId: relayer.value.relayerId,
-        network: globalState.form.network && getNetworkLiteral(globalState.form.network),
+        network:
+          globalState.form.network &&
+          getNetworkLiteral(globalState.form.network),
       };
     }
   };
@@ -75,7 +84,8 @@
     globalState.form.approvalProcessToCreate = {
       viaType: approvalProcessType as "EOA" | "Safe" | "Relayer",
       via: element.value,
-      network: globalState.form.network && getNetworkLiteral(globalState.form.network),
+      network:
+        globalState.form.network && getNetworkLiteral(globalState.form.network),
     };
   };
 
@@ -91,102 +101,115 @@
   };
 
   let disableCreation = $derived.by(() =>
-    globalState.approvalProcesses.some(approvalProcessByNetworkAndComponent),
+    globalState.approvalProcesses.some(approvalProcessByNetworkAndComponent)
   );
 
-  let disableRelayers = $derived.by(() => 
-    !globalState.permissions?.includes("manage-relayers")
+  let disableRelayers = $derived.by(
+    () => !globalState.permissions?.includes("manage-relayers")
   );
 </script>
 
 <div class="form-check flex flex-col gap-2">
   <div>
-  <input
-    class="form-check-input"
-    type="radio"
-    name="flexRadioDefault"
-    id="existing"
-    onclick={(e) => onRadioChange(e)}
-    checked
-  />
-  <label class="text-sm" for="flexRadioDefault1">
-    Use existing Approval Process
-  </label></div>
-  <div class="pl-4">
-  {#key globalState.form.approvalProcessSelected}
-    <Dropdown
-      items={globalState.approvalProcesses
-        .filter(approvalProcessByNetworkAndComponent)
-        .map(approvalProcessToDropdownItem)}
-      placeholder="Select Approval Process"
-      on:select={(e) => onSelectApprovalProcess(e.detail)}
-      disabled={radioSelected !== "existing"}
-      defaultItem={globalState.form.approvalProcessSelected
-        ? {
-            label: toDisplayName(globalState.form.approvalProcessSelected),
-            value: globalState.form.approvalProcessSelected,
-          }
-        : undefined}
-      emptyLabel="No Approval Processes Available"
+    <input
+      class="form-check-input"
+      type="radio"
+      name="flexRadioDefault"
+      id="existing"
+      onclick={(e) => onRadioChange(e)}
+      checked
     />
-  {/key}
-</div>
+    <label class="text-sm" for="flexRadioDefault1">
+      Use existing Approval Process
+    </label>
+  </div>
+  <div class="pl-4">
+    {#key globalState.form.approvalProcessSelected}
+      <Dropdown
+        items={globalState.approvalProcesses
+          .filter(approvalProcessByNetworkAndComponent)
+          .map(approvalProcessToDropdownItem)}
+        placeholder="Select Approval Process"
+        on:select={(e) => onSelectApprovalProcess(e.detail)}
+        disabled={radioSelected !== "existing"}
+        defaultItem={globalState.form.approvalProcessSelected
+          ? {
+              label: toDisplayName(globalState.form.approvalProcessSelected),
+              value: globalState.form.approvalProcessSelected,
+            }
+          : undefined}
+        emptyLabel="No Approval Processes Available"
+      />
+    {/key}
+  </div>
 </div>
 <div
   class="form-check mt-3 flex flex-col gap-2"
   title={disableCreation ? "Deploy Environment already exists" : undefined}
-><div>
-
-  <label
-    class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
-    for="flexRadioDefault2"
-    title={disableCreation ? "Deploy Environment already exists" : undefined}
-  >  <input
-  class="text-xs"
-  type="radio"
-  name="flexRadioDefault"
-  id="new"
-  onclick={(e) => onRadioChange(e)}
-  disabled={disableCreation}
-  title={disableCreation ? "Deploy Environment already exists" : undefined}
-/>
-    Create new Approval Process
-  </label>
+>
+  <div>
+    <label
+      class={`text-sm ${disableCreation ? "text-gray-500" : ""}`}
+      for="flexRadioDefault2"
+      title={disableCreation ? "Deploy Environment already exists" : undefined}
+    >
+      <input
+        class="text-xs"
+        type="radio"
+        name="flexRadioDefault"
+        id="new"
+        onclick={(e) => onRadioChange(e)}
+        disabled={disableCreation}
+        title={disableCreation
+          ? "Deploy Environment already exists"
+          : undefined}
+      />
+      Create new Approval Process
+    </label>
   </div>
   <div class="pl-4 gap-2 flex flex-col">
-  <Dropdown
-    items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
-    placeholder="Approval Process Type"
-    on:select={(e) => onSelectApprovalProcessType(e.detail)}
-    disabled={radioSelected !== "new" || disableCreation}
-    defaultItem={{
-      label: approvalProcessType,
-      value: approvalProcessType,
-    }}
-  />
+    <Dropdown
+      items={approvalProcessTypes.map(approvalProcessTypeToDropdownItem)}
+      placeholder="Approval Process Type"
+      on:select={(e) => onSelectApprovalProcessType(e.detail)}
+      disabled={radioSelected !== "new" || disableCreation}
+      defaultItem={{
+        label: approvalProcessType,
+        value: approvalProcessType,
+      }}
+    />
 
-  {#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
-    <div>
-      <Input value={address} placeholder="* Address" type="text" onchange={onAddressChange} />
-    </div>
-  {:else if approvalProcessType === "Relayer"}
-    {#if disableRelayers}
-      <div class="mt-2">
-        <Message message="API Key not allowed to manage Relayers" type="warn" />
+    {#if approvalProcessType === "EOA" || approvalProcessType === "Safe"}
+      <div>
+        <Input
+          value={address}
+          placeholder="* Address"
+          type="text"
+          onchange={onAddressChange}
+        />
       </div>
-    {:else}
-      <Dropdown
-        name="relayer"
-        items={globalState.relayers
-          .filter(relayerByNetwork)
-          .map(relayerToDropdownItem)}
-        placeholder="* Select Relayer"
-        on:select={(e) => onSelectRelayer(e.detail)}
-        disabled={radioSelected !== "new" || disableCreation}
-      />
+    {:else if approvalProcessType === "Relayer"}
+      {#if disableRelayers}
+        <div class="mt-2">
+          <Message
+            message="API Key not allowed to manage Relayers"
+            type="warn"
+          />
+        </div>
+      {:else}
+        <Dropdown
+          name="relayer"
+          items={globalState.relayers
+            .filter(relayerByNetwork)
+            .map(relayerToDropdownItem)}
+          placeholder="* Select Relayer"
+          on:select={(e) => onSelectRelayer(e.detail)}
+          disabled={radioSelected !== "new" || disableCreation}
+        />
+      {/if}
     {/if}
-  {/if}
-</div></div>
+  </div>
+</div>
 <div class="form-check mt-3">
   <input
     class="form-check-input"
@@ -198,10 +221,16 @@
     disabled={disableCreation}
   />
   <label
-    class={`text-sm ${disableCreation ? 'text-gray-500' : ''}`}
+    class={`text-sm ${disableCreation ? "text-gray-500" : ""}`}
     for="flexRadioDefault2"
     title={disableCreation ? "Deploy Environment already exists" : undefined}
   >
     Approve using injected provider
   </label>
+  <div class="mt-2">
+    <Message
+      message="By selecting this option, the contract to deploy will not be verified automatically"
+      type="warn"
+    />
+  </div>
 </div>