fix

chaindata/index.ts

@@ -86,7 +86,6 @@ export class Chaindata {
   }
 
   public async getChain(chainId: number, relay: string): Promise<Chain> {
-    console.log(relay);
     if (chainId === 0) {
       const result: any = await request(graphqlUrl, relayQuery, {
         relayId: relay

src/components/Layout/index.tsx

@@ -8,18 +8,16 @@ import { Sidebar } from '../Sidebar';
 
 interface Props {
   children: ReactElement | ReactElement[];
-  relay: string,
-  setRelay: (relay: string) => void
 }
 
-export const Layout = ({ relay, setRelay, children }: Props) => {
+export const Layout = ({ children }: Props) => {
   const { isConnected } = useInkathon();
   return (
     <div className={styles.layout}>
       <Header />
       <div className={styles.content}>
         <div className={styles.sidebar}>
-          <Sidebar relay={relay} setRelay={setRelay} />
+          <Sidebar />
         </div>
         <div className={styles.main}>
           {isConnected ? (

src/components/RelaySelect/index.tsx

@@ -1,7 +1,8 @@
+import { useRelay } from "@/contexts/RelayApi";
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material"
 
-const RelaySelect = ({ relay, setRelay }: { relay: string, setRelay: (relay: string) => void }) => {
-
+const RelaySelect = () => {
+  const { relay, setRelay } = useRelay();
   const handleChange = (e: any) => {
     setRelay(e.target.value);
   };

src/components/Sidebar/index.tsx

@@ -28,8 +28,7 @@ const MenuItem = ({ label, route, icon }: MenuItemProps) => {
   );
 };
 
-export const Sidebar = ({ relay, setRelay }: { relay: string, setRelay: (relay: string) => void }) => {
-  console.log(setRelay);
+export const Sidebar = () => {
   const menuItems: MenuItemProps[] = [
     {
       label: 'My Identity',
@@ -53,7 +52,7 @@ export const Sidebar = ({ relay, setRelay }: { relay: string, setRelay: (relay:
         <MenuItem key={index} {...item} />
       ))}
       <div className={styles.networkSelect}>
-        <RelaySelect relay={relay} setRelay={setRelay} />
+        <RelaySelect />
       </div>
     </div>
   );

src/contexts/RelayApi/index.tsx

@@ -81,23 +81,21 @@ const RelayContext = React.createContext(
 const RelayContextProvider = (props: any) => {
   const [relay, setRelay]: [relay: "polkadot" | "kusama", setRelay: any] = useState("polkadot");
 
-  const handleChange = (value: string) => {
-    console.log(value);
-    setRelay(value);
-  }
-
   return (
-    <RelayContext.Provider value={{ relay: relay, setRelay: handleChange }}>
+    <RelayContext.Provider value={{ relay: relay, setRelay: setRelay }}>
       {props.children}
     </RelayContext.Provider>
   );
 }
 
+const useRelay = () => useContext(RelayContext);
+
 const RelayApiContext = React.createContext(defaultValue);
 
 const RelayApiContextProvider = (props: any) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { toastError, toastSuccess } = useToast();
+  const { relay } = useRelay();
 
   useEffect(() => {
     state.apiError &&
@@ -112,17 +110,17 @@ const RelayApiContextProvider = (props: any) => {
   }, [state.apiState]);
 
   useEffect(() => {
-    console.log(props.relay);
-    connect(state, getRelayChainApiURL(props.relay), dispatch);
-  }, [props.relay]);
+    console.log(relay);
+    connect(state, getRelayChainApiURL(relay), dispatch);
+  }, [relay]);
 
   return (
     <RelayApiContext.Provider value={{ state }}>
       {props.children}
     </RelayApiContext.Provider>
   );
 };
-const useRelay = () => useContext(RelayContext);
+
 const useRelayApi = () => useContext(RelayApiContext);
 
 export { RelayApiContextProvider, RelayContextProvider, useRelayApi, useRelay };

src/contracts/identity/context.tsx

@@ -22,6 +22,7 @@ import { useToast } from '@/contexts/Toast';
 import { IdentityMetadata } from '.';
 import { CONTRACT_IDENTITY } from '..';
 import { Address, ChainConsts, ChainId, Chains, IdentityNo } from '../types';
+import { useRelay } from '@/contexts/RelayApi';
 
 interface IdentityContract {
   identityNo: number | null;
@@ -56,10 +57,9 @@ const IdentityContext = createContext<IdentityContract>(defaultIdentity);
 
 interface Props {
   children: React.ReactNode;
-  relay: "polkadot" | "kusama";
 }
 
-const IdentityContractProvider = ({ children, relay }: Props) => {
+const IdentityContractProvider = ({ children }: Props) => {
   const { contract } = useContract(IdentityMetadata, CONTRACT_IDENTITY);
   const { api, activeAccount } = useInkathon();
   const [identityNo, setIdentityNo] = useState<IdentityNo>(null);
@@ -68,6 +68,7 @@ const IdentityContractProvider = ({ children, relay }: Props) => {
   const [loadingIdentityNo, setLoadingIdentityNo] = useState(false);
   const [loadingChains, setLoadingChains] = useState(false);
   const { toastError } = useToast();
+  const { relay } = useRelay();
 
   const fetchIdentityNo = useCallback(async () => {
     if (!api || !contract || !activeAccount) {

src/pages/_app.tsx

@@ -14,11 +14,10 @@ import theme from '@/utils/muiTheme';
 
 import { Layout } from '@/components/Layout';
 
-import { RelayApiContextProvider, RelayContextProvider, useRelay } from '@/contexts/RelayApi';
+import { RelayApiContextProvider, RelayContextProvider } from '@/contexts/RelayApi';
 import { ToastProvider } from '@/contexts/Toast';
 import { IdentityContractProvider } from '@/contracts';
 import { AddressBookContractProvider } from '@/contracts/addressbook/context';
-import { createContext, useState } from 'react';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -32,10 +31,9 @@ interface MyAppProps extends AppProps {
 
 export default function MyApp(props: MyAppProps) {
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
-  const { relay, setRelay } = useRelay();
   const getLayout = Component.getLayout ?? ((page) =>
     <RelayContextProvider>
-      <Layout relay={relay} setRelay={setRelay}>{page}</Layout>
+      <Layout>{page}</Layout>
     </RelayContextProvider>
   );
 
@@ -50,7 +48,7 @@ export default function MyApp(props: MyAppProps) {
         <CssBaseline />
         <ToastProvider>
           <RelayContextProvider>
-            <RelayApiContextProvider relay={relay}>
+            <RelayApiContextProvider>
               <UseInkathonProvider
                 appName='DotFlow UI'
                 connectOnInit={false}
@@ -64,10 +62,10 @@ export default function MyApp(props: MyAppProps) {
                   faucetUrls: [],
                 }}
               >
-                <IdentityContractProvider relay={relay}>
+                <IdentityContractProvider>
                   <AddressBookContractProvider>
                     <ConfirmProvider>
-                      {getLayout(<Component {...pageProps} relay={relay} />)}
+                      {getLayout(<Component {...pageProps} />)}
                     </ConfirmProvider>
                   </AddressBookContractProvider>
                 </IdentityContractProvider>

src/pages/transfer.tsx

@@ -30,12 +30,12 @@ import { getTeleportableAssets } from '@/utils/xcmTransfer/teleportableRoutes';
 import { Fungible } from '@/utils/xcmTransfer/types';
 
 import { chainsSupportingXcmExecute } from '@/consts';
-import { useRelayApi } from '@/contexts/RelayApi';
+import { RelayContextProvider, useRelay, useRelayApi } from '@/contexts/RelayApi';
 import { useToast } from '@/contexts/Toast';
 import { useIdentity } from '@/contracts';
 import { useAddressBook } from '@/contracts/addressbook/context';
 
-const TransferPage = ({ relay }: { relay: "polkadot" | "kusama" }) => {
+const TransferPage = () => {
   const {
     chains,
     getAddresses,
@@ -61,6 +61,8 @@ const TransferPage = ({ relay }: { relay: "polkadot" | "kusama" }) => {
   const [amount, setAmount] = useState<number>();
   const [transferring, setTransferring] = useState<boolean>(false);
 
+  const { relay } = useRelay();
+
   const chainsSelected =
     !loadingAssets && sourceChainId !== undefined && destChainId !== undefined;
   const assetSelected = chainsSelected && Boolean(selectedAsset);
@@ -506,4 +508,13 @@ const TransferPage = ({ relay }: { relay: "polkadot" | "kusama" }) => {
   );
 };
 
-export default TransferPage;
+
+const TransferPageWrapped = () => {
+  return (
+    <RelayContextProvider>
+      <TransferPage />
+    </RelayContextProvider>
+  )
+}
+
+export default TransferPageWrapped;