Prioritize Selected Chain RPC Provider for System Chains (#11764)

* fix: select system chains url based on selected chain's provider

* refactor: rename variable for clarity

packages/page-parachains/src/Teleport.tsx

@@ -96,16 +96,16 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
     [destinations]
   );
 
-  const url = useMemo(
+  const urls = useMemo(
     () => destinations.find(({ paraId }, index) =>
       recipientParaId === -1
         ? index === 0
         : recipientParaId === paraId
-    )?.value,
+    )?.providers,
     [destinations, recipientParaId]
   );
 
-  const destApi = useApiUrl(url);
+  const destApi = useApiUrl(urls);
 
   const params = useMemo(
     () => [

packages/react-hooks/src/useApiUrl.ts

@@ -6,12 +6,15 @@ import type { ProviderInterface } from '@polkadot/rpc-provider/types';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { ApiPromise, WsProvider } from '@polkadot/api';
-import { typesBundle } from '@polkadot/apps-config';
+import { createWsEndpoints, typesBundle } from '@polkadot/apps-config';
+import { settings } from '@polkadot/ui-settings';
 import { arrayShuffle, isString } from '@polkadot/util';
 
 import { createNamedHook } from './createNamedHook.js';
 import { useIsMountedRef } from './useIsMountedRef.js';
 
+const endpoints = createWsEndpoints();
+
 function disconnect (provider: ProviderInterface | null): null {
   provider?.disconnect().catch(console.error);
 
@@ -22,13 +25,48 @@ function useApiUrlImpl (url?: null | string | string[]): ApiPromise | null {
   const providerRef = useRef<ProviderInterface | null>(null);
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<ApiPromise | null>(null);
+
+  const groupedEndpoints = useMemo(() => {
+    const map = new Map<string, string>();
+
+    for (const endpoint of endpoints) {
+      const rpcProvider = endpoint.textBy;
+
+      if (typeof rpcProvider === 'string' && rpcProvider.length > 0 && rpcProvider !== 'Placeholder') {
+        map.set(endpoint.value, rpcProvider);
+      }
+    }
+
+    return map;
+  }, []);
+
   const urls = useMemo(
-    () => url
-      ? isString(url)
-        ? [url]
-        : arrayShuffle(url.filter((u) => !u.startsWith('light://')))
-      : [],
-    [url]
+    () => {
+      let validUrls = url
+        ? isString(url)
+          ? [url]
+          : arrayShuffle(url.filter((u) => !u.startsWith('light://')))
+        : [];
+
+      const apiUrl = settings.apiUrl; // Selected chain URL
+      const apiUrlProvider = groupedEndpoints.get(apiUrl);
+
+      if (groupedEndpoints.has(apiUrl)) {
+        const matchIndex = validUrls.findIndex(
+          (u) => groupedEndpoints.get(u) === apiUrlProvider
+        );
+
+        // Move the RPC URL to the first position if it's provider matches the selected chain's provider
+        if (matchIndex > -1) {
+          const [match] = validUrls.splice(matchIndex, 1);
+
+          validUrls = [match, ...validUrls];
+        }
+      }
+
+      return validUrls;
+    },
+    [groupedEndpoints, url]
   );
 
   useEffect((): () => void => {