Merge pull request #3 from OpenZeppelin/support-tenant-networks

Support tenant networks

src/lib/components/ApprovalProcess.svelte

@@ -114,12 +114,12 @@
             value: globalState.form.approvalProcessSelected,
           }
         : undefined}
-      emptyLabel="No Approval Processes in selected Network"
+      emptyLabel="No Approval Processes Available"
     />
   {/key}
 </div>
 <div
-  class="form-check"
+  class="form-check mt-3"
   title={disableCreation ? "Deploy Environment already exists" : undefined}
 >
   <input
@@ -183,7 +183,7 @@
     {/if}
   {/if}
 </div>
-<div class="form-check">
+<div class="form-check mt-3">
   <input
     class="form-check-input"
     type="radio"

src/lib/components/Depoy.svelte

@@ -20,6 +20,7 @@
   import { deployContract, switchToNetwork } from "$lib/ethereum";
   import { API } from "$lib/api";
   import type { APIResponse } from "$lib/models/ui";
+    import { getNetworkLiteral } from "$lib/models/network";
 
   let contractName: string | undefined;
   let contractBytecode: string | undefined;
@@ -105,7 +106,7 @@
       name: `Deploy From Remix - ${ap.viaType}`,
       via: ap.via,
       viaType: ap.viaType,
-      network: globalState.form.network,
+      network: getNetworkLiteral(globalState.form.network),
       relayerId: ap.relayerId,
       component: ["deploy"],
     };
@@ -207,7 +208,7 @@
     log("[Defender Deploy] Creating contract deployment in Defender...");
     const deployRequest: DeployContractRequest = {
       contractName: contractName,
-      network: globalState.form.network,
+      network: getNetworkLiteral(globalState.form.network),
       approvalProcessId: approvalProcess.approvalProcessId,
       contractPath: contractPath,
       verifySourceCode: true,
@@ -274,19 +275,22 @@
   disabled
 />
 
-<div class="form-check m-2">
-  <input 
-    class="form-check-input" 
-    type="checkbox" 
-    id="isDeterministic" 
-    checked={isDeterministic} 
-    onchange={() => (isDeterministic = !isDeterministic)}
-  >
-  <label class="form-check-label" for="isDeterministic">
-    Deterministic
-  </label>
+<div class="pt-2">
+  <div class="form-check">
+    <input 
+      class="form-check-input" 
+      type="checkbox" 
+      id="isDeterministic" 
+      checked={isDeterministic} 
+      onchange={() => (isDeterministic = !isDeterministic)}
+    >
+    <label class="form-check-label" for="isDeterministic">
+      Deterministic
+    </label>
+  </div>
 </div>
 
+
 {#if isDeterministic}
   <label for="salt">{`Salt`}</label>
   <input
@@ -324,3 +328,9 @@
   </p>
 </div>
 {/if}
+
+<style>
+  input[type=checkbox] {
+    top: 2px;
+  }
+</style>

src/lib/components/Network.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-  import { chainDisplayNames } from "$lib/models/network";
+  import {
+    chainDisplayNames,
+    type TenantNetworkResponse,
+  } from "$lib/models/network";
   import type { DropdownItem } from "$lib/models/ui";
   import { globalState } from "$lib/state/state.svelte";
   import Dropdown from "./shared/Dropdown.svelte";
@@ -9,10 +12,10 @@
   };
   const { onSelected }: Props = $props();
 
-  const networkToDropdownItem = (network: string) => ({
-    label: chainDisplayNames[network],
-    value: network,
-  });
+  const networkToDropdownItem = (network: string | TenantNetworkResponse) => {
+    const n = typeof network === "string" ? network : network.name;
+    return { label: chainDisplayNames[n] ?? n, value: network };
+  };
 
   // network selection logic
   let network = $state("");
@@ -23,14 +26,16 @@
     // Resets Approval process state.
     globalState.form.approvalProcessSelected = undefined;
     globalState.form.approvalProcessToCreate = undefined;
-    globalState.form.approvalType = 'existing';
+    globalState.form.approvalType = "existing";
 
     onSelected(network);
   };
 </script>
 
 <Dropdown
-  items={globalState.networks.map(networkToDropdownItem).sort((a, b) => a.label > b.label ? 1 : -1)}
+  items={globalState.networks
+    .map(networkToDropdownItem)
+    .sort((a, b) => (a.label > b.label ? 1 : -1))}
   placeholder="Select Network"
   on:select={(e) => onNetworkSelect(e.detail)}
 />

src/lib/components/shared/Dropdown.svelte

@@ -55,7 +55,7 @@
     {/each}
     {#if items.length === 0}
       <button type="button" class="dropdown-item" disabled>
-        {emptyLabel ?? "No items available"}
+        <small>{emptyLabel ?? "No items available"}</small>
       </button>
     {/if}
   </div>
@@ -67,8 +67,14 @@
     font-size: smaller;
   }
 
+  .dropdown-menu {
+    background: var(--custom-select);
+  }
+
   .dropdown-item {
     cursor: pointer;
     font-size: smaller;
+    background: var(--custom-select);
+    color: var(--text);
   }
 </style>

src/lib/defender/index.ts

@@ -23,8 +23,12 @@ export const listApiKeyPermissions = async (credentials: Credentials) => {
 
 export const listNetworks = async (credentials: Credentials) => {
   const client = getClient(credentials);
-  const networks = await client.network.listSupportedNetworks();
-  return networks;
+  const [networks, forkedNetworks, privateNetworks] = await Promise.all([
+    client.network.listSupportedNetworks(),
+    client.network.listForkedNetworks(),
+    client.network.listPrivateNetworks(),
+  ]);
+  return [...networks, ...forkedNetworks, ...privateNetworks];
 }
 
 export const listApprovalProcesses = async (credentials: Credentials) => {

src/lib/ethereum/index.ts

@@ -1,5 +1,5 @@
 import { type Eip1193Provider, BrowserProvider, ContractFactory } from 'ethers';
-import { chainIds } from "$lib/models/network";
+import { chainIds, type TenantNetworkResponse } from "$lib/models/network";
 import type { DeployContractResult } from '$lib/models/ethereum';
 
 function getEthereum(): Eip1193Provider {
@@ -12,8 +12,8 @@ function getEthereum(): Eip1193Provider {
  * 
  * @param network target network to switch to.
  */
-export async function switchToNetwork(network: string) {
-  const chainId = chainIds[network];
+export async function switchToNetwork(network: string | TenantNetworkResponse) {
+  const chainId = typeof network === 'string' ? chainIds[network] : network.chainId;
   if (!chainId) throw new Error(`Invalid network: ${network}`);
 
   const ethereum = getEthereum();

src/lib/models/network.ts

@@ -2,6 +2,18 @@
  * Network mappings for Defender
  * https://github.com/OpenZeppelin/defender-sdk/blob/main/packages/base/src/utils/network.ts
  */
+
+export interface TenantNetworkResponse {
+  tenantNetworkId: string;
+  name: string;
+  chainId: number;
+  networkType: 'private' | 'fork';
+}
+
+export function getNetworkLiteral(network: string | TenantNetworkResponse): string {
+  return typeof network === 'string' ? network : network.name;
+}
+
 export const chainIds: { [key in string]: number } = {
   'alfajores': 44787,
   'amoy': 80002,
@@ -88,6 +100,7 @@ export const chainDisplayNames: { [key in string]: string } = {
   'matic': 'Polygon',
   'matic-zkevm': 'Polygon ZK-EVM',
   'matic-zkevm-testnet': 'Polygon ZK-EVM Testnet',
+  'matic-cardona-zkevm-testnet': 'Polygon Cardona ZK-EVM Testnet',
   'meld': 'Meld',
   'meld-kanazawa': 'Meld Kanazawa',
   'moonbase': 'Moonbase',

src/lib/models/ui.ts

@@ -2,6 +2,7 @@ import type { CompilationFileSources, CompilationResult, SourceWithTarget } from
 import type { Relayer } from "./relayer";
 import type { ApiKeyCapability, Credentials } from "./auth";
 import type { ApprovalProcess } from "./approval-process";
+import type { TenantNetworkResponse } from "./network";
 
 export type DropdownItem = {
   label: string;
@@ -14,7 +15,7 @@ export type GlobalState = {
   successMessage?: string;
   credentials: Credentials;
   permissions: ApiKeyCapability[];
-  networks: string[];
+  networks: string[] | TenantNetworkResponse[];
   approvalProcesses: ApprovalProcess[];
   relayers: Relayer[];
   contract?: {
@@ -24,7 +25,7 @@ export type GlobalState = {
     data?: CompilationResult | null,
   }
   form: {
-    network?: string;
+    network?: string | TenantNetworkResponse;
     approvalProcessSelected?: ApprovalProcess;
     approvalProcessToCreate?: {
       viaType: 'EOA' | 'Safe' | 'Relayer';