feat(builder): disable mainnet networks on hosted deployments

.github/workflows/docker-prod.yaml

@@ -27,8 +27,8 @@ jobs:
       security-events: write
     env:
       REGISTRY: ${{ secrets.RESEARCH_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com
-      ROLE_FOR_OIDC: "arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role"
-      ROLE_TO_ASSUME: "arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole"
+      ROLE_FOR_OIDC: 'arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role'
+      ROLE_TO_ASSUME: 'arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole'
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
@@ -53,7 +53,7 @@ jobs:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
         with:
-          platforms: "arm64"
+          platforms: 'arm64'
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
@@ -82,6 +82,7 @@ jobs:
           build-args: |
             VITE_EXPORT_ENV=production
             VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=true
+            VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=true
             VITE_GA_TAG_ID=${{ secrets.VITE_GA_TAG_ID_PROD }}
           secrets: |
             npm_token=${{ secrets.NPM_TOKEN }}
@@ -115,6 +116,7 @@ jobs:
           build-args: |
             VITE_EXPORT_ENV=production
             VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=true
+            VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=true
             VITE_GA_TAG_ID=${{ secrets.VITE_GA_TAG_ID_PROD }}
           secrets: |
             npm_token=${{ secrets.NPM_TOKEN }}
@@ -125,11 +127,11 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-and-push
     env:
-      ROLE_FOR_OIDC: "arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role"
-      ROLE_TO_ASSUME: "arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole"
-      ECS_CLUSTER: "contracts-ui-builder-prod-cluster"
-      ECS_SERVICE: "contracts-ui-builder-prod-service"
-      AWS_REGION: "us-east-1"
+      ROLE_FOR_OIDC: 'arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role'
+      ROLE_TO_ASSUME: 'arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole'
+      ECS_CLUSTER: 'contracts-ui-builder-prod-cluster'
+      ECS_SERVICE: 'contracts-ui-builder-prod-service'
+      AWS_REGION: 'us-east-1'
     permissions:
       contents: read
       id-token: write

.github/workflows/docker-stg.yaml

@@ -20,9 +20,9 @@ on:
   workflow_dispatch:
     inputs:
       branch:
-        description: "Branch to build from"
+        description: 'Branch to build from'
         required: true
-        default: "main"
+        default: 'main'
         type: string
 
 # Prevent concurrent staging deployments
@@ -45,8 +45,8 @@ jobs:
       security-events: write
     env:
       REGISTRY: ${{ secrets.RESEARCH_ACCOUNT_ID }}.dkr.ecr.us-east-1.amazonaws.com
-      ROLE_FOR_OIDC: "arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role"
-      ROLE_TO_ASSUME: "arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole"
+      ROLE_FOR_OIDC: 'arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role'
+      ROLE_TO_ASSUME: 'arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole'
     steps:
       - name: Harden the runner (Audit all outbound calls)
         uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
@@ -59,7 +59,7 @@ jobs:
       - name: Set up QEMU
         uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
         with:
-          platforms: "arm64"
+          platforms: 'arm64'
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
@@ -89,6 +89,7 @@ jobs:
             VITE_EXPORT_ENV=staging
             ADAPTER_DIST_TAG=rc
             VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=true
+            VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=true
             VITE_GA_TAG_ID=${{ secrets.VITE_GA_TAG_ID_STAGING }}
           secrets: |
             npm_token=${{ secrets.NPM_TOKEN }}
@@ -123,6 +124,7 @@ jobs:
             VITE_EXPORT_ENV=staging
             ADAPTER_DIST_TAG=rc
             VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=true
+            VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=true
             VITE_GA_TAG_ID=${{ secrets.VITE_GA_TAG_ID_STAGING }}
           secrets: |
             npm_token=${{ secrets.NPM_TOKEN }}
@@ -133,11 +135,11 @@ jobs:
     runs-on: ubuntu-latest
     needs: build-and-push
     env:
-      ROLE_FOR_OIDC: "arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role"
-      ROLE_TO_ASSUME: "arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole"
-      ECS_CLUSTER: "contracts-ui-builder-stg-cluster"
-      ECS_SERVICE: "contracts-ui-builder-stg-service"
-      AWS_REGION: "us-east-1"
+      ROLE_FOR_OIDC: 'arn:aws:iam::${{ secrets.ROOT_ACCOUNT_ID }}:role/github-actions-research-account-oidc-role'
+      ROLE_TO_ASSUME: 'arn:aws:iam::${{ secrets.RESEARCH_ACCOUNT_ID }}:role/GithubOIDCResearchAccountRole'
+      ECS_CLUSTER: 'contracts-ui-builder-stg-cluster'
+      ECS_SERVICE: 'contracts-ui-builder-stg-service'
+      AWS_REGION: 'us-east-1'
     permissions:
       contents: read
       id-token: write

Dockerfile

@@ -19,6 +19,10 @@ ENV VITE_EXPORT_ENV=$VITE_EXPORT_ENV
 ARG VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=false
 ENV VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED=$VITE_APP_CFG_FEATURE_FLAG_ANALYTICS_ENABLED
 
+# Disable mainnet network selection on hosted UI Builder deployments
+ARG VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=false
+ENV VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED=$VITE_APP_CFG_FEATURE_FLAG_MAINNET_NETWORKS_DISABLED
+
 # Accept build argument for Google Analytics tag ID
 ARG VITE_GA_TAG_ID
 ENV VITE_GA_TAG_ID=$VITE_GA_TAG_ID

apps/builder/package.json

@@ -35,13 +35,13 @@
     "@openzeppelin/adapter-polkadot": "^2.0.2",
     "@openzeppelin/adapter-solana": "^2.0.0",
     "@openzeppelin/adapter-stellar": "^2.0.2",
-    "@openzeppelin/ui-components": "^3.0.0",
+    "@openzeppelin/ui-components": "^3.0.1",
     "@openzeppelin/ui-react": "^3.0.0",
     "@openzeppelin/ui-renderer": "^3.0.0",
     "@openzeppelin/ui-storage": "^1.2.2",
     "@openzeppelin/ui-styles": "^1.1.0",
-    "@openzeppelin/ui-types": "^3.0.0",
-    "@openzeppelin/ui-utils": "^3.0.0",
+    "@openzeppelin/ui-types": "^3.1.1",
+    "@openzeppelin/ui-utils": "^3.0.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -70,7 +70,7 @@
     "lucide-react": "^0.510.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-hook-form": "^7.72.1",
+    "react-hook-form": "^7.79.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",

apps/builder/src/components/Common/DevToolsDropdown.tsx

@@ -1,4 +1,4 @@
-import { Settings, Wrench } from 'lucide-react';
+import { Database, Settings, Wrench } from 'lucide-react';
 
 import {
   DropdownMenu,
@@ -11,6 +11,8 @@ import {
 } from '@openzeppelin/ui-components';
 import { useWalletState } from '@openzeppelin/ui-react';
 
+import { seedMockMainnetContractUIWithToast } from '../../dev/seedMockMainnetContractUI';
+
 /**
  * Developer tools dropdown component for testing and debugging features.
  */
@@ -91,6 +93,12 @@ export const DevToolsDropdown = () => {
           <Settings className="mr-2 h-4 w-4" />
           Trigger Explorer Error
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Mainnet Disable Testing</DropdownMenuLabel>
+        <DropdownMenuItem onClick={() => void seedMockMainnetContractUIWithToast()}>
+          <Database className="mr-2 h-4 w-4" />
+          Seed saved mainnet config
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );

apps/builder/src/components/UIBuilder/StepChainSelection/components/NetworkRow.tsx

@@ -11,6 +11,8 @@ export interface NetworkRowProps {
   network: NetworkConfig;
   isSelected: boolean;
   isLoading?: boolean;
+  disabled?: boolean;
+  disabledLabel?: string;
   onSelect: () => void;
   onOpenSettings?: (event: React.MouseEvent) => void;
 }
@@ -19,6 +21,8 @@ export function NetworkRow({
   network,
   isSelected,
   isLoading = false,
+  disabled = false,
+  disabledLabel,
   onSelect,
   onOpenSettings,
 }: NetworkRowProps) {
@@ -27,20 +31,24 @@ export function NetworkRow({
   return (
     <div
       className={cn(
-        'relative flex items-center gap-3 rounded-md border p-3 transition-all w-full group cursor-pointer',
+        'relative flex items-center gap-3 rounded-md border p-3 transition-all w-full group',
+        disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
         // Use dashed border for testnet/devnet networks
         isTestnetLike ? 'border-dashed' : 'border-solid',
         // Selection and hover states
-        isSelected
+        isSelected && !disabled
           ? 'border-primary bg-primary/5 ring-primary/20 ring-1'
           : isTestnetLike
             ? 'border-muted-foreground/40 bg-card'
             : 'border-border bg-card'
       )}
-      aria-selected={isSelected}
+      aria-selected={isSelected && !disabled}
+      aria-disabled={disabled}
       onClick={(e) => {
         e.stopPropagation();
-        onSelect();
+        if (!disabled) {
+          onSelect();
+        }
       }}
     >
       {/* Network info display area */}
@@ -52,61 +60,65 @@ export function NetworkRow({
 
         {/* Network name and details */}
         <div className="flex-1 min-w-0">
-          <div className="flex items-center justify-between">
-            <div className="flex flex-col">
-              <span className="font-medium text-sm" title={network.name}>
-                {network.name}
-              </span>
-              {/* Network details inline for more compact layout */}
-              <div className="text-xs text-muted-foreground">
-                <NetworkDetail network={network} />
-              </div>
-            </div>
+          <span className="font-medium text-sm" title={network.name}>
+            {network.name}
+          </span>
+          <div className="text-xs text-muted-foreground">
+            <NetworkDetail network={network} />
           </div>
         </div>
       </div>
 
-      {/* Action buttons */}
-      <div className="flex items-center gap-2">
+      {/* Disabled badge or action buttons */}
+      <div className="flex shrink-0 items-center gap-2">
+        {disabled && disabledLabel ? (
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap">
+            {disabledLabel}
+          </span>
+        ) : null}
         {isLoading ? (
           <div className="flex items-center gap-2 h-8 px-3 text-xs text-muted-foreground">
             <Loader2 className="h-4 w-4 animate-spin" />
             <span>Loading…</span>
           </div>
         ) : (
           <>
-            {/* Select button - visible on hover */}
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={(e) => {
-                e.stopPropagation();
-                onSelect();
-              }}
-              className={cn(
-                'h-8 px-3 text-xs',
-                'opacity-100 sm:opacity-0 sm:group-hover:opacity-100',
-                'transition-opacity duration-200'
-              )}
-            >
-              Select
-            </Button>
+            {!disabled && (
+              <>
+                {/* Select button - visible on hover */}
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSelect();
+                  }}
+                  className={cn(
+                    'h-8 px-3 text-xs',
+                    'opacity-100 sm:opacity-0 sm:group-hover:opacity-100',
+                    'transition-opacity duration-200'
+                  )}
+                >
+                  Select
+                </Button>
 
-            {/* Settings button - visible on mobile, hover-only on desktop */}
-            {onOpenSettings && (
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={onOpenSettings}
-                className={cn(
-                  'size-8 p-0',
-                  'opacity-100 sm:opacity-0 sm:group-hover:opacity-100',
-                  'transition-opacity duration-200'
+                {/* Settings button - visible on mobile, hover-only on desktop */}
+                {onOpenSettings && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={onOpenSettings}
+                    className={cn(
+                      'size-8 p-0',
+                      'opacity-100 sm:opacity-0 sm:group-hover:opacity-100',
+                      'transition-opacity duration-200'
+                    )}
+                    title="Configure network settings"
+                  >
+                    <Settings size={14} />
+                  </Button>
                 )}
-                title="Configure network settings"
-              >
-                <Settings size={14} />
-              </Button>
+              </>
             )}
           </>
         )}