Merge pull request #6 from OpenZeppelin/plat-5674-remix-plugin-fixes-…

…from-feedback

Remix plugin fixes from testing feedback

src/lib/components/Depoy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { globalState } from "$lib/state/state.svelte";
+  import { addAPToDropdown, clearErrorBanner, globalState, setErrorBanner } from "$lib/state/state.svelte";
   import type {
     ABIDescription,
     ABIParameter,
@@ -8,7 +8,7 @@
   import Button from "./shared/Button.svelte";
   import { AbiCoder } from "ethers";
   import { attempt } from "$lib/utils";
-  import { log, logError, logSuccess } from "$lib/remix/logger";
+  import { log, logError, logSuccess, logWarning } from "$lib/remix/logger";
   import type {
     ApprovalProcess,
     CreateApprovalProcessRequest,
@@ -99,12 +99,12 @@
     if (!ap) return;
 
     if (!globalState.form.network) {
-      globalState.error = "Please select a network";
+      setErrorBanner("Please select a network");
       return;
     }
 
     if (!ap.via || !ap.viaType) {
-      globalState.error = "Please select an approval process";
+      setErrorBanner("Please select an approval process");
       return;
     }
 
@@ -121,7 +121,7 @@
       await API.createApprovalProcess(apRequest);
 
     if (!result.success) {
-      globalState.error = result.error;
+      setErrorBanner(result.error);
       deploying = false;
 
       // log error in Remix terminal
@@ -131,12 +131,19 @@
       return;
     }
 
+
+    logSuccess("[Defender Deploy] Deployment Environment successfully created");
+    logWarning("[Defender Deploy] The created Deployment Environment has Deploy Approval Process configuration only, the Block Explorer API Key and Upgrade Approval Process are not set");
+    if (!result.data) return;
+
+    addAPToDropdown(result.data?.approvalProcess)
     return result.data?.approvalProcess;
   }
 
   async function triggerDeployment() {
     if (!globalState.form.network || !contractName || !contractPath) return;
 
+    clearErrorBanner();
     deploying = true;
 
     const [constructorBytecode, error] = await attempt<string>(async () => {
@@ -229,7 +236,7 @@
       logError(
         `[Defender Deploy] Contract deployment creation failed, error: ${JSON.stringify(result.error)}`,
       );
-      globalState.error = result.error;
+      setErrorBanner(result.error);
       deploying = false;
       return;
     }

src/lib/components/Network.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     chainDisplayNames,
+    isProductionNetwork,
     type TenantNetworkResponse,
   } from "$lib/models/network";
   import type { DropdownItem } from "$lib/models/ui";
@@ -12,9 +13,22 @@
   };
   const { onSelected }: Props = $props();
 
+  const getNetworkGroup = (network: string | TenantNetworkResponse) => {
+    const type = typeof network !== "string" ? network.networkType : undefined;
+    if (type === 'fork') return 'Forked Networks';
+    if (type === 'private') return 'Private Networks';
+
+    const isProduction = isProductionNetwork(network);
+    return isProduction ? 'Production Networks' : 'Test Networks';
+  };
+
   const networkToDropdownItem = (network: string | TenantNetworkResponse) => {
     const n = typeof network === "string" ? network : network.name;
-    return { label: chainDisplayNames[n] ?? n, value: network };
+    return { 
+      label: chainDisplayNames[n] ?? n, 
+      value: network, 
+      group: getNetworkGroup(network),
+    };
   };
 
   // network selection logic
@@ -33,9 +47,8 @@
 </script>
 
 <Dropdown
-  items={globalState.networks
-    .map(networkToDropdownItem)
-    .sort((a, b) => (a.label > b.label ? 1 : -1))}
+  items={globalState.networks.map(networkToDropdownItem)}
   placeholder="Select Network"
   on:select={(e) => onNetworkSelect(e.detail)}
+  defaultItem={globalState.form.network ? networkToDropdownItem(globalState.form.network) : undefined}
 />

src/lib/components/Setup.svelte

@@ -3,7 +3,7 @@
   import type { AuthenticationResponse } from "$lib/models/auth";
   import type { APIResponse } from "$lib/models/ui";
   import { logError, logSuccess } from "$lib/remix/logger";
-  import { globalState } from "$lib/state/state.svelte";
+  import { clearErrorBanner, globalState } from "$lib/state/state.svelte";
   import Button from "./shared/Button.svelte";
 
   type Props = {
@@ -20,7 +20,7 @@
 
   const authenticate = async () => {
     loading = true;
-    globalState.error = undefined;
+    clearErrorBanner();
     successMessage = undefined;
     errorMessage = undefined;
 

src/lib/components/shared/Dropdown.svelte

@@ -18,6 +18,13 @@
   const { placeholder, items, disabled, emptyLabel, defaultItem, name }: Props =
     $props();
 
+  const groupedItems = $derived(items.reduce((acc, item) => {
+    const group = item.group || 'default';
+    if (!acc[group]) acc[group] = [];
+    acc[group].push(item);
+    return acc;
+  }, {} as Record<string, DropdownItem[]>));
+
   // network selection logic
   let selected = $state<DropdownItem | undefined>(defaultItem);
   const onSelect = (item: DropdownItem) => {
@@ -44,14 +51,22 @@
     </span>
   </button>
   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-    {#each items as item}
-      <button
-        type="button"
-        class="dropdown-item"
-        onclick={() => onSelect(item)}
-      >
-        {item.label}
-      </button>
+    {#each Object.entries(groupedItems) as [group, items]}
+      {#if group !== 'default'}
+        <div class="dropdown-header">
+          <small>{group}</small>
+          <hr class="p-0 m-0 border-secondary"/>
+        </div>
+      {/if}
+      {#each items.sort((a, b) => a.label.localeCompare(b.label)) as item}
+        <button
+          type="button"
+          class="dropdown-item"
+          onclick={() => onSelect(item)}
+        >
+          {item.label}
+        </button>
+      {/each}
     {/each}
     {#if items.length === 0}
       <button type="button" class="dropdown-item" disabled>

src/lib/models/network.ts

@@ -124,8 +124,8 @@ export const chainDisplayNames: { [key in string]: string } = {
   'hedera': 'Hedera',
   'hederatest': 'Hedera Testnet',
   'holesky': 'Holesky',
-  'japan': 'Ethereum Japan',
-  'japan-testnet': 'Ethereum Japan Testnet',
+  'japan': 'Japan Open Chain',
+  'japan-testnet': 'Japan Open Chain Testnet',
   'linea': 'Linea',
   'linea-sepolia': 'Linea Sepolia',
   'mainnet': 'Ethereum Mainnet',

src/lib/models/ui.ts

@@ -7,6 +7,7 @@ import type { TenantNetworkResponse } from "./network";
 export type DropdownItem = {
   label: string;
   value: any;
+  group?: string;
 }
 
 export type GlobalState = {

src/lib/remix/logger.ts

@@ -17,6 +17,11 @@ export const logSuccess = (msg: string) => {
   terminal?.log({ type: 'info', value: msg });
 }
 
+export const logWarning = (msg: string) => {
+  if (!terminal) throw new Error('Terminal not initialized');
+  terminal?.log({ type: 'warn', value: msg });
+}
+
 export const log = (msg: string) => {
   if (!terminal) throw new Error('Terminal not initialized');
   terminal?.log({ type: 'log', value: msg });

src/lib/state/state.svelte.ts

@@ -1,3 +1,4 @@
+import type { ApprovalProcess } from "$lib/models/approval-process";
 import type { GlobalState } from "$lib/models/ui";
 
 /**
@@ -65,4 +66,16 @@ export const globalState = $state<GlobalState>({
     // Indicates if deployment is completed.
     completed: false,
   },
-});
+});
+
+export const clearErrorBanner = () => {
+  globalState.error = undefined;
+};
+
+export const setErrorBanner = (error?: string) => {
+  globalState.error = error;
+};
+
+export const addAPToDropdown = (approvalProcess: ApprovalProcess) => {
+  globalState.approvalProcesses.push(approvalProcess);
+};