Simplify OP Stack L1 parent selection to show network names

Instead of exposing internal workspace details (IDs, names), the OP Stack
setup now shows user-friendly network names (e.g., "Ethereum Mainnet").

Changes:
- Create run/lib/opNetworks.js with hardcoded supported networks
- Update GET /availableOpParents to return network list instead of workspaces
- Update POST /:id/opConfig to validate networkId and convert to parentChainId
- Update ExplorerOpSettings.vue to use network dropdown
- Network selection is disabled after config is created (cannot be changed)

For now, only Ethereum Mainnet is supported. Additional networks can be
added to SUPPORTED_OP_L1_NETWORKS in opNetworks.js.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Antoine de Chevigné

run/api/explorers.js

@@ -45,6 +45,7 @@ const { bulkEnqueue } = require('../lib/queue');
 const PM2 = require('../lib/pm2');
 const db = require('../lib/firebase');
 const { isChainAllowed } = require('../lib/chains');
+const { getSupportedOpNetworks, isOpNetworkSupported } = require('../lib/opNetworks');
 const authMiddleware = require('../middlewares/auth');
 const stripeMiddleware = require('../middlewares/stripe');
 const secretMiddleware = require('../middlewares/secret');
@@ -56,14 +57,15 @@ const secretMiddleware = require('../middlewares/secret');
  */
 
 /**
- * Get available L1 parent workspaces for OP Stack configuration
- * @returns {Promise<object>} - List of available parent workspaces
+ * Get available L1 networks for OP Stack configuration
+ * Returns hardcoded list of supported networks (not internal workspace details)
+ * @returns {Promise<object>} - List of supported networks with networkId, name, explorerUrl
  */
 router.get('/availableOpParents', authMiddleware, async (req, res, next) => {
     try {
-        const availableParents = await db.getAvailableOpParents();
+        const availableNetworks = getSupportedOpNetworks();
 
-        res.status(200).json({ availableParents });
+        res.status(200).json({ availableNetworks });
     } catch (error) {
         return managedError(error, req, res);
     }
@@ -282,19 +284,24 @@ router.post('/:id/opConfig', authMiddleware, async (req, res, next) => {
         if (currentConfig)
             return managedError(new Error('There is already an OP config for this explorer.'), req, res);
 
-        if (!req.body.params.config.parentWorkspaceId && !req.body.params.config.parentChainId)
-            return managedError(new Error('Parent workspace is required.'), req, res);
+        // Validate networkId is provided and supported
+        if (!req.body.params.config.networkId)
+            return managedError(new Error('Network selection is required.'), req, res);
+
+        const networkId = parseInt(req.body.params.config.networkId);
+        if (!isOpNetworkSupported(networkId))
+            return managedError(new Error('Selected network is not supported. Only Ethereum Mainnet is currently available.'), req, res);
 
         if (!req.body.params.config.batchInboxAddress)
             return managedError(new Error('Batch inbox address is required.'), req, res);
 
         if (!req.body.params.config.optimismPortalAddress)
             return managedError(new Error('Optimism portal address is required.'), req, res);
 
+        // Convert networkId to parentChainId for model layer
         let configParams = { ...req.body.params.config };
-        if (configParams.parentChainId) {
-            configParams.parentChainId = parseInt(configParams.parentChainId);
-        }
+        configParams.parentChainId = networkId;
+        delete configParams.networkId;
 
         let config;
         try {

run/lib/opNetworks.js

@@ -0,0 +1,56 @@
+/**
+ * @fileoverview Supported L1 networks for OP Stack L2 chains.
+ * @module lib/opNetworks
+ */
+
+/**
+ * Supported L1 parent chain networks for OP Stack.
+ * Maps network ID to display configuration.
+ *
+ * @constant {Object.<number, {name: string, explorerUrl: string}>}
+ */
+const SUPPORTED_OP_L1_NETWORKS = {
+    1: {
+        name: 'Ethereum Mainnet',
+        explorerUrl: 'https://etherscan.io'
+    }
+    // Future networks can be added here:
+    // 11155111: { name: 'Sepolia Testnet', explorerUrl: 'https://sepolia.etherscan.io' }
+};
+
+/**
+ * Get list of supported networks for OP Stack L1 parent selection.
+ * @returns {Array<{networkId: number, name: string, explorerUrl: string}>}
+ */
+function getSupportedOpNetworks() {
+    return Object.entries(SUPPORTED_OP_L1_NETWORKS).map(([networkId, config]) => ({
+        networkId: parseInt(networkId),
+        name: config.name,
+        explorerUrl: config.explorerUrl
+    }));
+}
+
+/**
+ * Check if a network ID is supported as OP Stack L1 parent.
+ * @param {number} networkId - The network ID to check
+ * @returns {boolean}
+ */
+function isOpNetworkSupported(networkId) {
+    return SUPPORTED_OP_L1_NETWORKS.hasOwnProperty(networkId);
+}
+
+/**
+ * Get network configuration by network ID.
+ * @param {number} networkId - The network ID
+ * @returns {Object|null} Network config or null if not supported
+ */
+function getOpNetworkConfig(networkId) {
+    return SUPPORTED_OP_L1_NETWORKS[networkId] || null;
+}
+
+module.exports = {
+    SUPPORTED_OP_L1_NETWORKS,
+    getSupportedOpNetworks,
+    isOpNetworkSupported,
+    getOpNetworkConfig
+};

src/components/ExplorerOpSettings.vue

@@ -17,28 +17,28 @@
             </v-card-title>
 
             <v-card-text>
-                <v-form v-model="isConfigured" @submit.prevent="saveOrUpdateConfig">
+                <v-form v-model="isFormValid" @submit.prevent="saveOrUpdateConfig">
                     <v-row>
                         <v-col cols="12">
                             <v-alert class="mb-3" variant="tonal" type="info" density="compact">
                                 Configure the L1 parent chain details. This workspace should be your L2 OP Stack chain,
-                                and you need to specify the L1 parent chain contracts and RPC.
+                                and you need to specify the L1 parent chain contracts.
                             </v-alert>
                         </v-col>
 
                         <v-col cols="12" md="6">
                             <v-select
-                                v-model="config.parentWorkspaceId"
-                                label="L1 Parent Workspace (required)"
-                                :items="parentOptions"
-                                item-title="displayName"
-                                item-value="id"
-                                :rules="parentWorkspaceRules"
-                                :disabled="loading || loadingParents"
-                                :loading="loadingParents"
-                                hint="Select the L1 chain workspace"
+                                v-model="config.networkId"
+                                label="L1 Parent Network (required)"
+                                :items="availableNetworks"
+                                item-title="name"
+                                item-value="networkId"
+                                :rules="networkRules"
+                                :disabled="loading || loadingNetworks || !!config.id"
+                                :loading="loadingNetworks"
+                                hint="Select the L1 chain for your OP Stack rollup"
                                 persistent-hint
-                                no-data-text="No L1 parent workspaces available. Mark a workspace as 'Top L1 Parent' first."
+                                no-data-text="No supported networks available."
                             />
                         </v-col>
                     </v-row>
@@ -200,12 +200,14 @@ const props = defineProps({
 const $server = inject('$server');
 
 const loading = ref(false);
-const loadingParents = ref(false);
+const loadingNetworks = ref(false);
 const errorMessage = ref('');
 const successMessage = ref('');
-const availableParents = ref([]);
+const availableNetworks = ref([]);
+const isFormValid = ref(false);
 
 const config = ref({
+    networkId: null,
     outputVersion: 0,
     l2ToL1MessagePasserAddress: '0x4200000000000000000000000000000000000016'
 });
@@ -215,13 +217,6 @@ const outputVersionOptions = [
     { text: 'Fault Proofs (DisputeGameFactory)', value: 1 }
 ];
 
-const parentOptions = computed(() =>
-    availableParents.value.map(p => ({
-        ...p,
-        displayName: `${p.name} (Chain ID: ${p.networkId})`
-    }))
-);
-
 const addressRules = [
     v => !!v || 'Address is required',
     v => /^0x[a-fA-F0-9]{40}$/.test(v) || 'Must be a valid Ethereum address'
@@ -231,24 +226,28 @@ const optionalAddressRules = [
     v => !v || /^0x[a-fA-F0-9]{40}$/.test(v) || 'Must be a valid Ethereum address'
 ];
 
-const parentWorkspaceRules = [
-    v => !!v || 'Parent workspace is required'
+const networkRules = [
+    v => !!v || 'Network selection is required'
 ];
 
 const isConfigured = computed(() => {
-    return !!(config.value.parentWorkspaceId &&
+    return !!(config.value.networkId &&
            config.value.optimismPortalAddress &&
            config.value.batchInboxAddress);
 });
 
-function loadAvailableParents() {
-    loadingParents.value = true;
+function loadAvailableNetworks() {
+    loadingNetworks.value = true;
     $server.getAvailableOpParents()
         .then(({ data }) => {
-            availableParents.value = data.availableParents || [];
+            availableNetworks.value = data.availableNetworks || [];
+            // Auto-select if only one network available and no config yet
+            if (availableNetworks.value.length === 1 && !config.value.networkId && !config.value.id) {
+                config.value.networkId = availableNetworks.value[0].networkId;
+            }
         })
         .catch(console.log)
-        .finally(() => loadingParents.value = false);
+        .finally(() => loadingNetworks.value = false);
 }
 
 function loadConfig() {
@@ -258,7 +257,9 @@ function loadConfig() {
             if (data.opConfig) {
                 config.value = {
                     ...config.value,
-                    ...data.opConfig
+                    ...data.opConfig,
+                    // Map parentChainId to networkId for the form
+                    networkId: data.opConfig.parentChainId
                 };
             }
         })
@@ -281,7 +282,11 @@ function createConfig() {
 
     $server.createOpConfig(props.explorerId, config.value)
         .then(({ data: { config: newConfig } }) => {
-            config.value = { ...config.value, ...newConfig };
+            config.value = {
+                ...config.value,
+                ...newConfig,
+                networkId: newConfig.parentChainId
+            };
             successMessage.value = 'OP Stack configuration created.';
         })
         .catch(error => errorMessage.value = error.response && error.response.data || 'Error while creating configuration. Please retry.')
@@ -296,9 +301,17 @@ function updateConfig() {
     errorMessage.value = '';
     successMessage.value = '';
 
-    $server.updateOpConfig(props.explorerId, config.value)
+    // Don't send networkId on updates - it can't be changed
+    const updatePayload = { ...config.value };
+    delete updatePayload.networkId;
+
+    $server.updateOpConfig(props.explorerId, updatePayload)
         .then(({ data: { config: updatedConfig } }) => {
-            config.value = { ...config.value, ...updatedConfig };
+            config.value = {
+                ...config.value,
+                ...updatedConfig,
+                networkId: updatedConfig.parentChainId
+            };
             successMessage.value = 'OP Stack configuration saved.';
         })
         .catch(error => errorMessage.value = error.response && error.response.data || 'Error while saving configuration. Please retry.')
@@ -309,7 +322,7 @@ function updateConfig() {
 }
 
 onMounted(async () => {
-    loadAvailableParents();
+    loadAvailableNetworks();
     loadConfig();
 });
 </script>

tests/unit/components/ExplorerOpSettings.spec.js

@@ -5,7 +5,7 @@ describe('ExplorerOpSettings.vue', () => {
         vi.spyOn(server, 'getOpConfig')
             .mockResolvedValue({ data: null });
         vi.spyOn(server, 'getAvailableOpParents')
-            .mockResolvedValue({ data: { availableParents: [] } });
+            .mockResolvedValue({ data: { availableNetworks: [] } });
 
         mount(ExplorerOpSettings, {
             global: {
@@ -19,16 +19,15 @@ describe('ExplorerOpSettings.vue', () => {
         expect(server.getAvailableOpParents).toHaveBeenCalled();
     });
 
-    it('Should display parent workspaces in dropdown', async () => {
-        const mockParents = [
-            { id: 1, name: 'Ethereum Mainnet', networkId: 1 },
-            { id: 2, name: 'Sepolia', networkId: 11155111 }
+    it('Should display network selection dropdown', async () => {
+        const mockNetworks = [
+            { networkId: 1, name: 'Ethereum Mainnet', explorerUrl: 'https://etherscan.io' }
         ];
 
         vi.spyOn(server, 'getOpConfig')
             .mockResolvedValue({ data: null });
         vi.spyOn(server, 'getAvailableOpParents')
-            .mockResolvedValue({ data: { availableParents: mockParents } });
+            .mockResolvedValue({ data: { availableNetworks: mockNetworks } });
 
         const wrapper = mount(ExplorerOpSettings, {
             global: {
@@ -38,6 +37,6 @@ describe('ExplorerOpSettings.vue', () => {
 
         await new Promise(process.nextTick);
 
-        expect(wrapper.text()).toContain('L1 Parent Workspace');
+        expect(wrapper.text()).toContain('L1 Parent Network');
     });
 });