Network selection

.env.example

@@ -1,2 +1,4 @@
-WS_CORETIME_CHAIN="WSS endpoint of the coretime chain"
-WS_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
+WS_ROCOCO_CORETIME_CHAIN="WSS endpoint of the coretime chain"
+WS_KUSAMA_CORETIME_CHAIN="WSS endpoint of the coretime chain"
+WS_ROCOCO_RELAY_CHAIN="WSS endpoint of the coretime relay chain"
+WS_KUSAMA_RELAY_CHAIN="WSS endpoint of the coretime relay chain"

Dockerfile

@@ -5,8 +5,8 @@ WORKDIR /corehub
 COPY . .
 
 # Set the necessary environment variables
-ENV WS_CORETIME_CHAIN="ws://127.0.0.1:9910"
-ENV WS_RELAY_CHAIN="ws://127.0.0.1:9900"
+ENV WS_ROCOCO_CORETIME_CHAIN="ws://127.0.0.1:9910"
+ENV WS_ROCOCO_RELAY_CHAIN="ws://127.0.0.1:9900"
 
 RUN apk add --no-cache libc6-compat
 

next.config.js

@@ -5,8 +5,10 @@ const nextConfig = {
     domains: ['github.com'],
   },
   env: {
-    WS_CORETIME_CHAIN: process.env.WS_CORETIME_CHAIN || '',
-    WS_RELAY_CHAIN: process.env.WS_RELAY_CHAIN,
+    WS_ROCOCO_CORETIME_CHAIN: process.env.WS_ROCOCO_CORETIME_CHAIN || '',
+    WS_KUSAMA_COREITME_CHAIN: process.env.WS_KUSAMA_COREITME_CHAIN || '',
+    WS_ROCOCO_RELAY_CHAIN: process.env.WS_ROCOCO_RELAY_CHAIN,
+    WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN,
   },
 };
 

src/components/Elements/NetworkSelect/index.tsx

@@ -0,0 +1,26 @@
+import { useNetwork } from '@/contexts/network';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+
+const RelaySelect = () => {
+  const { network, setNetwork } = useNetwork();
+  const handleChange = (e: any) => {
+    setNetwork(e.target.value);
+  };
+
+  return (
+    <FormControl sx={{ m: 2, minWidth: 200 }} fullWidth>
+      <InputLabel id='demo-simple-select-label'>Network</InputLabel>
+      <Select
+        id='network-select'
+        value={network}
+        label='Relay chain'
+        onChange={handleChange}
+      >
+        <MenuItem value='rococo'>Rococo</MenuItem>
+        <MenuItem value='kusama'>Kusama</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default RelaySelect;

src/components/Sidebar/index.tsx

@@ -11,6 +11,7 @@ import { TransferIcon } from '@/icons';
 
 import styles from './index.module.scss';
 import { StatusIndicator } from '../Elements';
+import RelaySelect from '../Elements/NetworkSelect';
 
 interface MenuItemProps {
   label: string;
@@ -109,6 +110,9 @@ export const Sidebar = () => {
         <StatusIndicator state={relayApiState} label='Relay chain' />
         <StatusIndicator state={coretimeApiState} label='Coretime chain' />
       </div>
+      <div>
+        <RelaySelect />
+      </div>
     </div>
   );
 };

src/contexts/apis/CoretimeApi/index.tsx

@@ -4,7 +4,8 @@ import { ApiState } from '@/contexts/apis/types';
 import { useToast } from '@/contexts/toast';
 
 import { connect, disconnect, initialState, reducer } from '../common';
-import { WS_CORETIME_CHAIN } from '../consts';
+import { WS_ROCOCO_CORETIME_CHAIN, WS_KUSAMA_CORETIME_CHAIN } from '../consts';
+import { useNetwork } from '@/contexts/network';
 
 const types = {
   CoreIndex: 'u32',
@@ -36,6 +37,7 @@ const CoretimeApiContext = React.createContext(defaultValue);
 
 const CoretimeApiContextProvider = (props: any) => {
   const [state, dispatch] = useReducer(reducer, initialState);
+  const { network } = useNetwork();
   const { toastError, toastSuccess } = useToast();
 
   useEffect(() => {
@@ -48,7 +50,14 @@ const CoretimeApiContextProvider = (props: any) => {
   }, [state.apiState, toastSuccess]);
 
   const connectCoretime = () =>
-    connect(state, WS_CORETIME_CHAIN, dispatch, types);
+    connect(
+      state,
+      network === 'rococo'
+        ? WS_ROCOCO_CORETIME_CHAIN
+        : WS_KUSAMA_CORETIME_CHAIN,
+      dispatch,
+      types
+    );
 
   const disconnectCoretime = () => disconnect(state);
 

src/contexts/apis/RelayApi/index.tsx

@@ -7,7 +7,8 @@ import { useToast } from '@/contexts/toast';
 import { ParaId } from '@/models';
 
 import { connect, disconnect, initialState, reducer } from '../common';
-import { WS_RELAY_CHAIN } from '../consts';
+import { WS_ROCOCO_RELAY_CHAIN, WS_KUSAMA_RELAY_CHAIN } from '../consts';
+import { useNetwork } from '@/contexts/network';
 
 const defaultValue = {
   state: initialState,
@@ -26,6 +27,7 @@ const RelayApiContextProvider = (props: any) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { toastError, toastSuccess } = useToast();
   const [paraIds, setParaIds] = useState<ParaId[]>([]);
+  const { network } = useNetwork();
 
   useEffect(() => {
     state.apiError && toastError(`Failed to connect to relay chain`);
@@ -36,7 +38,12 @@ const RelayApiContextProvider = (props: any) => {
       toastSuccess('Successfully connected to the relay chain');
   }, [state.apiState, toastSuccess]);
 
-  const connectRelay = () => connect(state, WS_RELAY_CHAIN, dispatch);
+  const connectRelay = () =>
+    connect(
+      state,
+      network === 'rococo' ? WS_ROCOCO_RELAY_CHAIN : WS_KUSAMA_RELAY_CHAIN,
+      dispatch
+    );
   const disconnectRelay = () => disconnect(state);
 
   useEffect(() => {
@@ -51,7 +58,7 @@ const RelayApiContextProvider = (props: any) => {
       setParaIds(paraIds);
     };
     fetchParaIds();
-  }, [state]);
+  }, [state, network]);
 
   return (
     <RelayApiContext.Provider

src/contexts/apis/consts.ts

@@ -1,2 +1,6 @@
-export const WS_RELAY_CHAIN = process.env.WS_RELAY_CHAIN ?? '';
-export const WS_CORETIME_CHAIN = process.env.WS_CORETIME_CHAIN ?? '';
+export const WS_ROCOCO_RELAY_CHAIN = process.env.WS_ROCOCO_RELAY_CHAIN ?? '';
+export const WS_KUSAMA_RELAY_CHAIN = process.env.WS_ROCOCO_KUSAMA_CHAIN ?? '';
+export const WS_ROCOCO_CORETIME_CHAIN =
+  process.env.WS_ROCOCO_CORETIME_CHAIN ?? '';
+export const WS_KUSAMA_CORETIME_CHAIN =
+  process.env.WS_KUSAMA_CORETIME_CHAIN ?? '';

src/contexts/network/index.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import { Network, NetworkContext } from '@/models';
+
+const defaultNetworkData = {
+  network: 'rococo',
+  setNetwork: (_n: Network): void => {
+    /** */
+  },
+};
+
+const NetworkContextData = createContext<NetworkContext>(defaultNetworkData);
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const NetworkDataProvider = ({ children }: Props) => {
+  const [network, setNetwork] = useState<Network>('rococo');
+
+  return (
+    <NetworkContextData.Provider value={{ network, setNetwork }}>
+      {children}
+    </NetworkContextData.Provider>
+  );
+};
+
+const useNetwork = () => useContext(NetworkContextData);
+
+export { NetworkDataProvider, useNetwork };

src/contexts/regions/index.tsx

@@ -14,6 +14,7 @@ import * as NativeRegions from './native';
 import { useCoretimeApi } from '../apis';
 import { useCommon } from '../common';
 import { useTasks } from '../tasks';
+import { useNetwork } from '../network';
 
 interface RegionsData {
   regions: Array<RegionMetadata>;
@@ -51,6 +52,7 @@ const RegionDataProvider = ({ children }: Props) => {
   const { fetchWorkplan, fetchRegionWorkload } = useTasks();
 
   const context = useCommon();
+  const { network } = useNetwork();
 
   const [regions, setRegions] = useState<Array<RegionMetadata>>([]);
   const [loading, setLoading] = useState(false);
@@ -114,6 +116,7 @@ const RegionDataProvider = ({ children }: Props) => {
     context,
     coretimeApi,
     api,
+    network,
     fetchWorkplan,
     _getTaskFromWorkloadId,
   ]);

src/models/types.ts

@@ -16,6 +16,13 @@ export type ParaId = number;
 
 export type BlockNumber = number;
 
+export type Network = 'rococo' | 'kusama';
+
+export type NetworkContext = {
+  network: string;
+  setNetwork: (_n: Network) => void;
+};
+
 export type Sender = {
   address: string;
   signer: Signer;

src/pages/_app.tsx

@@ -18,13 +18,14 @@ import {
   CoretimeApiContextProvider,
   RelayApiContextProvider,
 } from '@/contexts/apis';
-import { WS_CORETIME_CHAIN } from '@/contexts/apis/consts';
+import { WS_ROCOCO_CORETIME_CHAIN } from '@/contexts/apis/consts';
 import { ContextDataProvider } from '@/contexts/common';
 import { MarketProvider } from '@/contexts/market';
 import { RegionDataProvider } from '@/contexts/regions';
 import { SaleInfoProvider } from '@/contexts/sales';
 import { TaskDataProvider } from '@/contexts/tasks';
 import { ToastProvider } from '@/contexts/toast';
+import { NetworkDataProvider } from '@/contexts/network';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -49,32 +50,34 @@ export default function MyApp(props: MyAppProps) {
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <ToastProvider>
-          <CoretimeApiContextProvider>
-            <RelayApiContextProvider>
-              <UseInkathonProvider
-                appName='CoreHub'
-                connectOnInit={false}
-                defaultChain={{
-                  network: '',
-                  name: '',
-                  rpcUrls: [WS_CORETIME_CHAIN],
-                }}
-                apiOptions={{ types: { Id } }}
-              >
-                <ContextDataProvider>
-                  <TaskDataProvider>
-                    <RegionDataProvider>
-                      <MarketProvider>
-                        <SaleInfoProvider>
-                          {getLayout(<Component {...pageProps} />)}
-                        </SaleInfoProvider>
-                      </MarketProvider>
-                    </RegionDataProvider>
-                  </TaskDataProvider>
-                </ContextDataProvider>
-              </UseInkathonProvider>
-            </RelayApiContextProvider>
-          </CoretimeApiContextProvider>
+          <NetworkDataProvider>
+            <CoretimeApiContextProvider>
+              <RelayApiContextProvider>
+                <UseInkathonProvider
+                  appName='CoreHub'
+                  connectOnInit={false}
+                  defaultChain={{
+                    network: '',
+                    name: '',
+                    rpcUrls: [WS_ROCOCO_CORETIME_CHAIN],
+                  }}
+                  apiOptions={{ types: { Id } }}
+                >
+                  <ContextDataProvider>
+                    <TaskDataProvider>
+                      <RegionDataProvider>
+                        <MarketProvider>
+                          <SaleInfoProvider>
+                            {getLayout(<Component {...pageProps} />)}
+                          </SaleInfoProvider>
+                        </MarketProvider>
+                      </RegionDataProvider>
+                    </TaskDataProvider>
+                  </ContextDataProvider>
+                </UseInkathonProvider>
+              </RelayApiContextProvider>
+            </CoretimeApiContextProvider>
+          </NetworkDataProvider>
         </ToastProvider>
       </ThemeProvider>
     </CacheProvider>