From 8ec0afe8e53300b5f512d49afc2d2f9f8da3858c Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 11:48:45 -0300
Subject: [PATCH 1/6] fix: networks classification

---
 src/lib/components/Network.svelte         | 20 ++++++++++++---
 src/lib/components/shared/Dropdown.svelte | 31 +++++++++++++++++------
 src/lib/models/ui.ts                      |  1 +
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Network.svelte b/src/lib/components/Network.svelte
index d3c8173..6e378f6 100644
--- a/src/lib/components/Network.svelte
+++ b/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,7 @@
 </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)}
 />
diff --git a/src/lib/components/shared/Dropdown.svelte b/src/lib/components/shared/Dropdown.svelte
index d812afa..a566ebf 100644
--- a/src/lib/components/shared/Dropdown.svelte
+++ b/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>
diff --git a/src/lib/models/ui.ts b/src/lib/models/ui.ts
index 52fe941..1658724 100644
--- a/src/lib/models/ui.ts
+++ b/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 = {

From 8e9853b794d751238189c2e210949d92fcadc34b Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 11:59:55 -0300
Subject: [PATCH 2/6] fix: keep network selected

---
 src/lib/components/Network.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/Network.svelte b/src/lib/components/Network.svelte
index 6e378f6..845eb78 100644
--- a/src/lib/components/Network.svelte
+++ b/src/lib/components/Network.svelte
@@ -50,4 +50,5 @@
   items={globalState.networks.map(networkToDropdownItem)}
   placeholder="Select Network"
   on:select={(e) => onNetworkSelect(e.detail)}
+  defaultItem={globalState.form.network ? networkToDropdownItem(globalState.form.network) : undefined}
 />

From 562e3fa79ae80d56355e8efdcbabf918e2e2b552 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 12:11:12 -0300
Subject: [PATCH 3/6] fix: clear error banner when triggering deployment

---
 src/lib/components/Depoy.svelte | 11 ++++++-----
 src/lib/components/Setup.svelte |  4 ++--
 src/lib/state/state.svelte.ts   | 10 +++++++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Depoy.svelte b/src/lib/components/Depoy.svelte
index afd54a7..15f17c3 100644
--- a/src/lib/components/Depoy.svelte
+++ b/src/lib/components/Depoy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { globalState } from "$lib/state/state.svelte";
+  import { clearErrorBanner, globalState, setErrorBanner } from "$lib/state/state.svelte";
   import type {
     ABIDescription,
     ABIParameter,
@@ -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
@@ -137,6 +137,7 @@
   async function triggerDeployment() {
     if (!globalState.form.network || !contractName || !contractPath) return;
 
+    clearErrorBanner();
     deploying = true;
 
     const [constructorBytecode, error] = await attempt<string>(async () => {
@@ -229,7 +230,7 @@
       logError(
         `[Defender Deploy] Contract deployment creation failed, error: ${JSON.stringify(result.error)}`,
       );
-      globalState.error = result.error;
+      setErrorBanner(result.error);
       deploying = false;
       return;
     }
diff --git a/src/lib/components/Setup.svelte b/src/lib/components/Setup.svelte
index 7ffa72d..7697644 100644
--- a/src/lib/components/Setup.svelte
+++ b/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;
 
diff --git a/src/lib/state/state.svelte.ts b/src/lib/state/state.svelte.ts
index 10b18b1..c2661f6 100644
--- a/src/lib/state/state.svelte.ts
+++ b/src/lib/state/state.svelte.ts
@@ -65,4 +65,12 @@ export const globalState = $state<GlobalState>({
     // Indicates if deployment is completed.
     completed: false,
   },
-});
\ No newline at end of file
+});
+
+export const clearErrorBanner = () => {
+  globalState.error = undefined;
+};
+
+export const setErrorBanner = (error?: string) => {
+  globalState.error = error;
+};
\ No newline at end of file

From defec9fc28c7baf434ff153916e20342ece5c348 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 12:25:45 -0300
Subject: [PATCH 4/6] fix: add created approval process to approval process
 list + display warning about created deployment envioronment

---
 src/lib/components/Depoy.svelte | 10 ++++++++--
 src/lib/remix/logger.ts         |  5 +++++
 src/lib/state/state.svelte.ts   |  5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Depoy.svelte b/src/lib/components/Depoy.svelte
index 15f17c3..9640874 100644
--- a/src/lib/components/Depoy.svelte
+++ b/src/lib/components/Depoy.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { clearErrorBanner, globalState, setErrorBanner } 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,
@@ -131,6 +131,12 @@
       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;
   }
 
diff --git a/src/lib/remix/logger.ts b/src/lib/remix/logger.ts
index ba67a10..c39fe54 100644
--- a/src/lib/remix/logger.ts
+++ b/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 });
diff --git a/src/lib/state/state.svelte.ts b/src/lib/state/state.svelte.ts
index c2661f6..547de8d 100644
--- a/src/lib/state/state.svelte.ts
+++ b/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";
 
 /**
@@ -73,4 +74,8 @@ export const clearErrorBanner = () => {
 
 export const setErrorBanner = (error?: string) => {
   globalState.error = error;
+};
+
+export const addAPToDropdown = (approvalProcess: ApprovalProcess) => {
+  globalState.approvalProcesses.push(approvalProcess);
 };
\ No newline at end of file

From a0d0ccd2b6e5f9cdf6050e4896c4b17ce96b96a9 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 12:29:26 -0300
Subject: [PATCH 5/6] format

---
 src/lib/state/state.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/state/state.svelte.ts b/src/lib/state/state.svelte.ts
index 547de8d..6db823a 100644
--- a/src/lib/state/state.svelte.ts
+++ b/src/lib/state/state.svelte.ts
@@ -78,4 +78,4 @@ export const setErrorBanner = (error?: string) => {
 
 export const addAPToDropdown = (approvalProcess: ApprovalProcess) => {
   globalState.approvalProcesses.push(approvalProcess);
-};
\ No newline at end of file
+};

From 506138013122cd54faf88f43bfa657c9e63ad095 Mon Sep 17 00:00:00 2001
From: Marcos <marcoscarlomagno1@gmail.com>
Date: Wed, 27 Nov 2024 13:17:04 -0300
Subject: [PATCH 6/6] fix: japan open chain labels

---
 src/lib/models/network.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/models/network.ts b/src/lib/models/network.ts
index cea4436..4cfcba5 100644
--- a/src/lib/models/network.ts
+++ b/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',