From a0c898ccffe6d088f859e78058b4be815b842df9 Mon Sep 17 00:00:00 2001
From: rajk93 <raj@blockdeep.io>
Date: Wed, 26 Nov 2025 12:40:59 +0530
Subject: [PATCH] chore: resolve chain colors when WS_URL matches existing
 endpoint (#12016)

---
 .../apps-config/src/endpoints/development.ts  | 69 +++++++++++++------
 packages/apps-config/src/endpoints/index.ts   | 12 +++-
 2 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/packages/apps-config/src/endpoints/development.ts b/packages/apps-config/src/endpoints/development.ts
index a70f9d3a8c..e53c43cc14 100644
--- a/packages/apps-config/src/endpoints/development.ts
+++ b/packages/apps-config/src/endpoints/development.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from '../types.js';
-import type { LinkOption } from './types.js';
+import type { EndpointOption, LinkOption } from './types.js';
 
 export const CUSTOM_ENDPOINT_KEY = 'polkadot-app-custom-endpoints';
 
@@ -13,30 +13,59 @@ interface EnvWindow {
   }
 }
 
-export function createCustom (t: TFunction): LinkOption[] {
+function findUiForUrl (url: string, endpoints: EndpointOption[]): LinkOption['ui'] {
+  // Search through all endpoints to find a matching provider URL
+  for (const endpoint of endpoints) {
+    if (endpoint.providers) {
+      for (const providerUrl of Object.values(endpoint.providers)) {
+        if (providerUrl === url) {
+          return endpoint.ui;
+        }
+      }
+    }
+
+    // Also check linked endpoints (parachains)
+    if (endpoint.linked) {
+      const linkedUi = findUiForUrl(url, endpoint.linked);
+
+      if (linkedUi && (linkedUi.color || linkedUi.logo || linkedUi.identityIcon)) {
+        return linkedUi;
+      }
+    }
+  }
+
+  return {};
+}
+
+export function createCustom (t: TFunction, endpoints: EndpointOption[] = []): LinkOption[] {
   const WS_URL = (
     (typeof process !== 'undefined' ? process.env?.WS_URL : undefined) ||
     (typeof window !== 'undefined' ? (window as EnvWindow).process_env?.WS_URL : undefined)
   );
 
-  return WS_URL
-    ? [
-      {
-        isHeader: true,
-        text: t('rpc.dev.custom', 'Custom environment', { ns: 'apps-config' }),
-        textBy: '',
-        ui: {},
-        value: ''
-      },
-      {
-        info: 'WS_URL',
-        text: t('rpc.dev.custom.entry', 'Custom {{WS_URL}}', { ns: 'apps-config', replace: { WS_URL } }),
-        textBy: WS_URL,
-        ui: {},
-        value: WS_URL
-      }
-    ]
-    : [];
+  if (!WS_URL) {
+    return [];
+  }
+
+  // Try to find UI configuration from existing endpoint with matching URL
+  const ui = findUiForUrl(WS_URL, endpoints);
+
+  return [
+    {
+      isHeader: true,
+      text: t('rpc.dev.custom', 'Custom environment', { ns: 'apps-config' }),
+      textBy: '',
+      ui: {},
+      value: ''
+    },
+    {
+      info: 'WS_URL',
+      text: t('rpc.dev.custom.entry', 'Custom {{WS_URL}}', { ns: 'apps-config', replace: { WS_URL } }),
+      textBy: WS_URL,
+      ui,
+      value: WS_URL
+    }
+  ];
 }
 
 export function createOwn (t: TFunction): LinkOption[] {
diff --git a/packages/apps-config/src/endpoints/index.ts b/packages/apps-config/src/endpoints/index.ts
index b7b9fbdd70..483fadb023 100644
--- a/packages/apps-config/src/endpoints/index.ts
+++ b/packages/apps-config/src/endpoints/index.ts
@@ -23,8 +23,18 @@ function defaultT (keyOrText: string, text?: string | TOptions, options?: TOptio
 }
 
 export function createWsEndpoints (t: TFunction = defaultT, firstOnly = false, withSort = true): LinkOption[] {
+  // Collect all endpoint configs to pass to createCustom for UI lookup
+  const allEndpoints = [
+    prodRelayPolkadot,
+    prodRelayKusama,
+    testRelayWestend,
+    testRelayPaseo,
+    ...prodChains,
+    ...testChains
+  ];
+
   return [
-    ...createCustom(t),
+    ...createCustom(t, allEndpoints),
     {
       isDisabled: false,
       isHeader: true,