diff --git a/packages/page-parachains/src/Teleport.tsx b/packages/page-parachains/src/Teleport.tsx index e4ce8ed4f2..543721afa3 100644 --- a/packages/page-parachains/src/Teleport.tsx +++ b/packages/page-parachains/src/Teleport.tsx @@ -96,16 +96,16 @@ function Teleport ({ onClose }: Props): React.ReactElement | 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( () => [ diff --git a/packages/react-hooks/src/useApiUrl.ts b/packages/react-hooks/src/useApiUrl.ts index 1e3a8bf355..0f9ee99e47 100644 --- a/packages/react-hooks/src/useApiUrl.ts +++ b/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(null); const mountedRef = useIsMountedRef(); const [state, setState] = useState(null); + + const groupedEndpoints = useMemo(() => { + const map = new Map(); + + 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 => {