resolved conflicts

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "resolutions": {
+    "@galacticcouncil/xcm-core": "^1.5.0",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-augment": "10.9.1",
     "@polkadot/api-derive": "10.9.1",
@@ -41,7 +42,7 @@
     "@galacticcouncil/sdk": "^3.0.1",
     "@galacticcouncil/ui": "^4.1.0",
     "@galacticcouncil/xcm-cfg": "^2.5.0",
-    "@galacticcouncil/xcm-core": "^1.4.0",
+    "@galacticcouncil/xcm-core": "^1.5.0",
     "@galacticcouncil/xcm-sdk": "^3.3.0",
     "@hookform/resolvers": "^3.3.4",
     "@lit-labs/react": "^1.1.0",

src/api/chain.ts

@@ -1,11 +1,13 @@
 import { useQuery } from "@tanstack/react-query"
 import { QUERY_KEYS } from "utils/queryKeys"
 import { useRpcProvider } from "providers/rpcProvider"
+import { useActiveProvider } from "api/provider"
 
 export const useBestNumber = (disable?: boolean) => {
   const { api } = useRpcProvider()
+  const activeProvider = useActiveProvider()
   return useQuery(
-    QUERY_KEYS.bestNumber,
+    QUERY_KEYS.bestNumber(activeProvider?.url ?? ""),
     async () => {
       const [validationData, parachainBlockNumber, timestamp] =
         await Promise.all([
@@ -16,6 +18,8 @@ export const useBestNumber = (disable?: boolean) => {
       const relaychainBlockNumber = validationData.unwrap().relayParentNumber
       return { parachainBlockNumber, relaychainBlockNumber, timestamp }
     },
-    { enabled: !disable },
+    {
+      enabled: "query" in api && !!activeProvider?.url && !disable,
+    },
   )
 }

src/api/provider.ts

@@ -5,8 +5,22 @@ import { create } from "zustand"
 import { persist } from "zustand/middleware"
 import { getAssets } from "./assetDetails"
 import { SubstrateApis } from "@galacticcouncil/xcm-core"
+import { useMemo } from "react"
+import { useShallow } from "hooks/useShallow"
+import { pick } from "utils/rx"
+import { ApiPromise, WsProvider } from "@polkadot/api"
 
-export const PROVIDERS = [
+export type TEnv = "testnet" | "mainnet"
+export type ProviderProps = {
+  name: string
+  url: string
+  indexerUrl: string
+  squidUrl: string
+  env: string | string[]
+  dataEnv: TEnv
+}
+
+export const PROVIDERS: ProviderProps[] = [
   {
     name: "GalacticCouncil",
     url: "wss://rpc.hydradx.cloud",
@@ -39,6 +53,14 @@ export const PROVIDERS = [
     env: "production",
     dataEnv: "mainnet",
   },
+  {
+    name: "Testnet",
+    url: "wss://rpc.nice.hydration.cloud",
+    indexerUrl: "https://archive.nice.hydration.cloud/graphql",
+    squidUrl: "https://data-squid.nice.hydration.cloud/graphql",
+    env: ["development"],
+    dataEnv: "testnet",
+  },
   {
     name: "Rococo via GC",
     url: "wss://hydradx-rococo-rpc.play.hydration.cloud",
@@ -48,14 +70,6 @@ export const PROVIDERS = [
     env: ["rococo", "development"],
     dataEnv: "testnet",
   },
-  {
-    name: "Testnet",
-    url: "wss://rpc.nice.hydration.cloud",
-    indexerUrl: "https://archive.nice.hydration.cloud/graphql",
-    squidUrl: "https://data-squid.nice.hydration.cloud/graphql",
-    env: ["development"],
-    dataEnv: "testnet",
-  },
   /*{
     name: "Testnet",
     url: "wss://mining-rpc.hydradx.io",
@@ -64,35 +78,48 @@ export const PROVIDERS = [
       "https://squid.subsquid.io/hydradx-rococo-data-squid/v/v1/graphql",
     env: "development",
   },*/
-] as const
+]
 
-export type TEnv = "testnet" | "mainnet"
+export const PROVIDER_LIST = PROVIDERS.filter((provider) =>
+  typeof provider.env === "string"
+    ? provider.env === import.meta.env.VITE_ENV
+    : provider.env.includes(import.meta.env.VITE_ENV),
+)
+
+export const PROVIDER_URLS = PROVIDER_LIST.map(({ url }) => url)
 
 export const useProviderRpcUrlStore = create(
   persist<{
-    rpcUrl?: string
+    rpcUrl: string
+    autoMode: boolean
     setRpcUrl: (rpcUrl: string | undefined) => void
-    getDataEnv: () => "testnet" | "mainnet"
+    getDataEnv: () => TEnv
+    setAutoMode: (state: boolean) => void
     _hasHydrated: boolean
     _setHasHydrated: (value: boolean) => void
   }>(
     (set, get) => ({
+      rpcUrl: import.meta.env.VITE_PROVIDER_URL,
+      autoMode: true,
       setRpcUrl: (rpcUrl) => set({ rpcUrl }),
+      setAutoMode: (state) => set({ autoMode: state }),
       getDataEnv: () => {
-        return (
-          PROVIDERS.find(
-            (provider) =>
-              provider.url === get().rpcUrl ??
-              import.meta.env.VITE_PROVIDER_URL,
-          )?.dataEnv ?? "mainnet"
-        )
+        const { rpcUrl, autoMode } = get()
+        if (!autoMode) {
+          return (
+            PROVIDERS.find((provider) => provider.url === rpcUrl)?.dataEnv ??
+            "mainnet"
+          )
+        }
+
+        return import.meta.env.VITE_ENV === "production" ? "mainnet" : "testnet"
       },
       _hasHydrated: false,
       _setHasHydrated: (state) => set({ _hasHydrated: state }),
     }),
     {
       name: "rpcUrl",
-      version: 2,
+      version: 2.1,
       getStorage: () => ({
         async getItem(name: string) {
           return window.localStorage.getItem(name)
@@ -111,14 +138,24 @@ export const useProviderRpcUrlStore = create(
   ),
 )
 
-export const useProviderData = (rpcUrl: string) => {
+export const useActiveRpcUrlList = () => {
+  const { autoMode, rpcUrl } = useProviderRpcUrlStore(
+    useShallow((state) => pick(state, ["autoMode", "rpcUrl"])),
+  )
+  return autoMode ? PROVIDER_URLS : [rpcUrl]
+}
+
+export const useProviderData = () => {
+  const rpcUrlList = useActiveRpcUrlList()
+  const { setRpcUrl } = useProviderRpcUrlStore()
   const displayAsset = useDisplayAssetStore()
 
   return useQuery(
-    QUERY_KEYS.provider(rpcUrl),
-    async ({ queryKey: [_, url] }) => {
+    QUERY_KEYS.provider(rpcUrlList.join()),
+    async () => {
+      const maxRetries = rpcUrlList.length * 5
       const apiPool = SubstrateApis.getInstance()
-      const api = await apiPool.api(url)
+      const api = await apiPool.api(rpcUrlList, maxRetries)
 
       api.registry.register({
         XykLMDeposit: {
@@ -140,6 +177,7 @@ export const useProviderData = (rpcUrl: string) => {
       } = displayAsset
 
       const assets = await getAssets(api)
+
       let stableCoinId: string | undefined
 
       // set USDT as a stable token
@@ -173,37 +211,67 @@ export const useProviderData = (rpcUrl: string) => {
         poolService: assets.poolService,
       }
     },
-    { refetchOnWindowFocus: false },
+    {
+      refetchOnWindowFocus: false,
+      retry: false,
+      onSettled: (data) => {
+        if (data?.api) {
+          const provider = getProviderInstance(data.api)
+          setRpcUrl(provider.endpoint)
+        }
+      },
+    },
   )
 }
 
 export const useRefetchProviderData = () => {
   const queryClient = useQueryClient()
-
-  const preference = useProviderRpcUrlStore()
+  const rpcList = useActiveRpcUrlList()
 
   return () => {
-    const url = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
-    url && queryClient.invalidateQueries(QUERY_KEYS.provider(url))
+    queryClient.invalidateQueries(QUERY_KEYS.provider(rpcList.join()))
   }
 }
 
 export const useIndexerUrl = () => {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
-  const selectedProvider = PROVIDERS.find((provider) => provider.url === rpcUrl)
-
-  const indexerUrl =
-    selectedProvider?.indexerUrl ?? import.meta.env.VITE_INDEXER_URL
-  return indexerUrl
+  const activeProvider = useActiveProvider()
+  return activeProvider.indexerUrl
 }
 
 export const useSquidUrl = () => {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_SQUID_URL
-  const selectedProvider = PROVIDERS.find((provider) => provider.url === rpcUrl)
+  const activeProvider = useActiveProvider()
+  return activeProvider.squidUrl
+}
+
+export const useActiveProvider = (): ProviderProps => {
+  const { data } = useProviderData()
+
+  const activeRpcUrl = useMemo(() => {
+    let rpcUrl = import.meta.env.VITE_PROVIDER_URL
+    try {
+      const provider = data?.api ? getProviderInstance(data.api) : null
+      if (provider?.endpoint) {
+        rpcUrl = provider.endpoint
+      }
+    } catch (e) {}
+    return rpcUrl
+  }, [data?.api])
+
+  return (
+    PROVIDERS.find((provider) => provider.url === activeRpcUrl) || {
+      name: "",
+      url: import.meta.env.VITE_PROVIDER_URL,
+      indexerUrl: import.meta.env.VITE_INDEXER_URL,
+      squidUrl: import.meta.env.VITE_SQUID_URL,
+      env: import.meta.env.VITE_ENV,
+      dataEnv:
+        import.meta.env.VITE_ENV === "production" ? "mainnet" : "testnet",
+    }
+  )
+}
 
-  const indexerUrl =
-    selectedProvider?.squidUrl ?? import.meta.env.VITE_SQUID_URL
-  return indexerUrl
+export function getProviderInstance(api: ApiPromise) {
+  // @ts-ignore
+  const options = api?._options
+  return options?.provider as WsProvider
 }

src/api/staking.ts

@@ -5,7 +5,7 @@ import BN from "bignumber.js"
 import { getUniques } from "./uniques"
 import { getReferendumInfoOf } from "./democracy"
 import request, { gql } from "graphql-request"
-import { PROVIDERS, useProviderRpcUrlStore } from "./provider"
+import { useActiveProvider } from "./provider"
 import { useRpcProvider } from "providers/rpcProvider"
 import { useAccount } from "sections/web3-connect/Web3Connect.utils"
 import { undefinedNoop } from "utils/helpers"
@@ -219,12 +219,7 @@ export type TAccumulatedRpsUpdated = StakeEventBase & {
 }
 
 export const useStakingEvents = () => {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
-  const selectedProvider = PROVIDERS.find((provider) => provider.url === rpcUrl)
-
-  const indexerUrl =
-    selectedProvider?.indexerUrl ?? import.meta.env.VITE_INDEXER_URL
+  const { indexerUrl } = useActiveProvider()
 
   return useQuery(QUERY_KEYS.stakingEvents, async () => {
     const [accumulatedRpsUpdated, stakingInitialized] = await Promise.all([
@@ -242,12 +237,7 @@ export const useStakingEvents = () => {
 }
 
 export const useStakingPositionBalances = (positionId?: string) => {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
-  const selectedProvider = PROVIDERS.find((provider) => provider.url === rpcUrl)
-
-  const indexerUrl =
-    selectedProvider?.indexerUrl ?? import.meta.env.VITE_INDEXER_URL
+  const { indexerUrl } = useActiveProvider()
 
   return useQuery(
     QUERY_KEYS.stakingPositionBalances(positionId),

src/api/volume.ts

@@ -6,7 +6,7 @@ import { QUERY_KEYS } from "utils/queryKeys"
 import { u32 } from "@polkadot/types-codec"
 import BN from "bignumber.js"
 import { BN_0 } from "utils/constants"
-import { PROVIDERS, useIndexerUrl, useProviderRpcUrlStore } from "./provider"
+import { PROVIDERS, useActiveProvider, useIndexerUrl } from "./provider"
 import { u8aToHex } from "@polkadot/util"
 import { decodeAddress } from "@polkadot/util-crypto"
 
@@ -256,10 +256,11 @@ export function useTradeVolumes(
   assetIds: Maybe<u32 | string>[],
   noRefresh?: boolean,
 ) {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
+  const activeProvider = useActiveProvider()
   const selectedProvider = PROVIDERS.find(
-    (provider) => new URL(provider.url).hostname === new URL(rpcUrl).hostname,
+    (provider) =>
+      activeProvider &&
+      new URL(provider.url).hostname === new URL(activeProvider.url).hostname,
   )
 
   const indexerUrl =
@@ -296,10 +297,11 @@ export function useXYKTradeVolumes(assetIds: Maybe<u32 | string>[]) {
 }
 
 export function useAllTrades(assetId?: number) {
-  const preference = useProviderRpcUrlStore()
-  const rpcUrl = preference.rpcUrl ?? import.meta.env.VITE_PROVIDER_URL
+  const activeProvider = useActiveProvider()
   const selectedProvider = PROVIDERS.find(
-    (provider) => new URL(provider.url).hostname === new URL(rpcUrl).hostname,
+    (provider) =>
+      activeProvider &&
+      new URL(provider.url).hostname === new URL(activeProvider.url).hostname,
   )
 
   const indexerUrl =

src/components/AppProviders/AppProviders.tsx

@@ -8,6 +8,7 @@ import { theme } from "theme"
 import * as React from "react"
 import * as Apps from "@galacticcouncil/apps"
 import { createComponent } from "@lit-labs/react"
+import { ProviderReloader } from "sections/provider/ProviderReloader"
 import { MigrationProvider } from "sections/migration/MigrationProvider"
 
 const AppsContextProvider = createComponent({
@@ -21,17 +22,19 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
     <MigrationProvider>
       <TooltipProvider>
         <RpcProvider>
-          <InvalidateOnBlock>
-            <ToastProvider>
-              <SkeletonTheme
-                baseColor={`rgba(${theme.rgbColors.white}, 0.12)`}
-                highlightColor={`rgba(${theme.rgbColors.white}, 0.24)`}
-                borderRadius={4}
-              >
-                <AppsContextProvider>{children}</AppsContextProvider>
-              </SkeletonTheme>
-            </ToastProvider>
-          </InvalidateOnBlock>
+          <ProviderReloader>
+            <InvalidateOnBlock>
+              <ToastProvider>
+                <SkeletonTheme
+                  baseColor={`rgba(${theme.rgbColors.white}, 0.12)`}
+                  highlightColor={`rgba(${theme.rgbColors.white}, 0.24)`}
+                  borderRadius={4}
+                >
+                  <AppsContextProvider>{children}</AppsContextProvider>
+                </SkeletonTheme>
+              </ToastProvider>
+            </InvalidateOnBlock>
+          </ProviderReloader>
         </RpcProvider>
       </TooltipProvider>
     </MigrationProvider>