From a2a7f346c561c66d95633eccd24584ad20f001a6 Mon Sep 17 00:00:00 2001
From: Sergej Sakac <73715684+Szegoo@users.noreply.github.com>
Date: Tue, 23 Apr 2024 09:08:33 +0200
Subject: [PATCH] Network selection (#72)

* Network selection

* progress

* format

* ..

* working

* fix style

* lint fixes

* width

* fix

* linting errors

* working but a mess

* cleanup

* more cleanup

* ..

* small fixes

* merge fix

* fix issue
---
 .env.example                                  |  6 ++-
 Dockerfile                                    |  4 +-
 next.config.js                                |  6 ++-
 src/components/Elements/FeatureCard/index.tsx |  4 +-
 .../Elements/NetworkSelect/index.tsx          | 35 +++++++++++++++++
 src/components/Header/index.tsx               | 12 +-----
 src/components/Sidebar/index.module.scss      |  7 +++-
 src/components/Sidebar/index.tsx              |  8 +++-
 src/contexts/apis/CoretimeApi/index.tsx       | 33 +++++++++++-----
 src/contexts/apis/RelayApi/index.tsx          | 33 ++++++++++++----
 src/contexts/apis/common.ts                   | 27 ++++++++-----
 src/contexts/apis/consts.ts                   |  8 +++-
 src/contexts/sales/index.tsx                  |  9 ++++-
 src/contexts/tasks/index.tsx                  | 14 ++++++-
 src/hooks/salePhase.tsx                       | 15 ++++++--
 src/pages/_app.tsx                            | 24 +++++++++++-
 src/pages/purchase.tsx                        |  8 ++--
 src/utils/functions.ts                        | 38 ++++++++++---------
 src/utils/sale/utils.test.ts                  | 17 ++++++---
 src/utils/sale/utils.ts                       | 29 ++++++++------
 20 files changed, 239 insertions(+), 98 deletions(-)
 create mode 100644 src/components/Elements/NetworkSelect/index.tsx

diff --git a/.env.example b/.env.example
index 5c2e725f..30aa77da 100644
--- a/.env.example
+++ b/.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"
diff --git a/Dockerfile b/Dockerfile
index ec8f1dfc..6c7364b2 100644
--- a/Dockerfile
+++ b/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
 
diff --git a/next.config.js b/next.config.js
index 7bee534b..5ab342eb 100644
--- a/next.config.js
+++ b/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_CORETIME_CHAIN: process.env.WS_KUSAMA_CORETIME_CHAIN || '',
+    WS_ROCOCO_RELAY_CHAIN: process.env.WS_ROCOCO_RELAY_CHAIN,
+    WS_KUSAMA_RELAY_CHAIN: process.env.WS_KUSAMA_RELAY_CHAIN,
   },
 };
 
diff --git a/src/components/Elements/FeatureCard/index.tsx b/src/components/Elements/FeatureCard/index.tsx
index bd54f7cc..c9c5d9bb 100644
--- a/src/components/Elements/FeatureCard/index.tsx
+++ b/src/components/Elements/FeatureCard/index.tsx
@@ -27,7 +27,7 @@ export const FeatureCard = ({
   enabled,
   href,
 }: FeatureCardProps) => {
-  const { push } = useRouter();
+  const { push, query } = useRouter();
   const theme = useTheme();
 
   return (
@@ -40,7 +40,7 @@ export const FeatureCard = ({
       </Typography>
       <CardActions>
         <Button
-          onClick={() => enabled && push(href)}
+          onClick={() => enabled && push({ pathname: href, query })}
           size='small'
           variant='text'
           disabled={!enabled}
diff --git a/src/components/Elements/NetworkSelect/index.tsx b/src/components/Elements/NetworkSelect/index.tsx
new file mode 100644
index 00000000..afc3b201
--- /dev/null
+++ b/src/components/Elements/NetworkSelect/index.tsx
@@ -0,0 +1,35 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import { useRouter } from 'next/router';
+
+const RelaySelect = () => {
+  const router = useRouter();
+  const { network } = router.query;
+
+  const handleChange = (e: any) => {
+    router.push(
+      {
+        pathname: router.pathname,
+        query: { ...router.query, network: e.target.value },
+      },
+      undefined,
+      { shallow: false }
+    );
+  };
+
+  return (
+    <FormControl sx={{ m: 2, minWidth: 150 }} fullWidth>
+      <InputLabel>Network</InputLabel>
+      <Select
+        id='network-select'
+        value={network ? network : 'rococo'}
+        label='Relay chain'
+        onChange={handleChange}
+      >
+        <MenuItem value='rococo'>Rococo</MenuItem>
+        <MenuItem value='kusama'>Kusama</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default RelaySelect;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index f2b6ea3c..f0dc27e2 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -9,9 +9,7 @@ import {
   useTheme,
 } from '@mui/material';
 import { useInkathon } from '@scio-labs/use-inkathon';
-import React, { useEffect, useState } from 'react';
-
-import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
+import React, { useState } from 'react';
 
 import styles from './index.module.scss';
 import { WalletModal } from '../Modals/WalletConnect';
@@ -24,14 +22,6 @@ export const Header = () => {
   const [accountsOpen, openAccounts] = useState(false);
   const [walletModalOpen, openWalletModal] = useState(false);
 
-  const { connectRelay } = useRelayApi();
-  const { connectCoretime } = useCoretimeApi();
-
-  useEffect(() => {
-    connectRelay();
-    connectCoretime();
-  }, [connectRelay, connectCoretime]);
-
   const onDisconnect = () => {
     openAccounts(false);
     disconnect && disconnect();
diff --git a/src/components/Sidebar/index.module.scss b/src/components/Sidebar/index.module.scss
index 042de80b..b333bc77 100644
--- a/src/components/Sidebar/index.module.scss
+++ b/src/components/Sidebar/index.module.scss
@@ -17,7 +17,7 @@
   height: 3rem;
 }
 
-.logo > img {
+.logo>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -36,6 +36,11 @@
   gap: 0.5rem;
 }
 
+.networkSelector {
+  display: flex;
+  padding: .5rem;
+}
+
 .menuIcon {
   width: 1.5rem;
 }
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index 5b73a5ba..770e3685 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -14,6 +14,7 @@ import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 
 import styles from './index.module.scss';
 import { StatusIndicator } from '../Elements';
+import NetworkSelect from '../Elements/NetworkSelect';
 
 interface MenuItemProps {
   label: string;
@@ -23,7 +24,7 @@ interface MenuItemProps {
 }
 
 const MenuItem = ({ label, enabled, route, icon }: MenuItemProps) => {
-  const { pathname, push } = useRouter();
+  const { pathname, push, query } = useRouter();
   const isActive = pathname === route;
   const theme = useTheme();
 
@@ -52,7 +53,7 @@ const MenuItem = ({ label, enabled, route, icon }: MenuItemProps) => {
           opacity: 0.8,
         },
       }}
-      onClick={() => enabled && route && push(route)}
+      onClick={() => enabled && route && push({ pathname: route, query })}
     >
       <span className={styles.menuIcon}>{{ ...icon }}</span>
       <span
@@ -168,6 +169,9 @@ export const Sidebar = () => {
           <StatusIndicator state={coretimeApiState} label='Coretime chain' />
         </div>
       </Box>
+      <div className={styles.networkSelector}>
+        <NetworkSelect />
+      </div>
     </div>
   );
 };
diff --git a/src/contexts/apis/CoretimeApi/index.tsx b/src/contexts/apis/CoretimeApi/index.tsx
index a9bdc42f..7289ddf3 100644
--- a/src/contexts/apis/CoretimeApi/index.tsx
+++ b/src/contexts/apis/CoretimeApi/index.tsx
@@ -1,10 +1,11 @@
+import { useRouter } from 'next/router';
 import React, { useContext, useEffect, useReducer } from 'react';
 
 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_KUSAMA_CORETIME_CHAIN, WS_ROCOCO_CORETIME_CHAIN } from '../consts';
 
 const types = {
   CoreIndex: 'u32',
@@ -24,9 +25,6 @@ const types = {
 
 const defaultValue = {
   state: { ...initialState },
-  connectCoretime: (): void => {
-    /** */
-  },
   disconnectCoretime: (): void => {
     /** */
   },
@@ -38,6 +36,9 @@ const CoretimeApiContextProvider = (props: any) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { toastError, toastSuccess } = useToast();
 
+  const router = useRouter();
+  const { network } = router.query;
+
   useEffect(() => {
     state.apiError && toastError(`Failed to connect to Coretime chain`);
   }, [state.apiError, toastError]);
@@ -47,15 +48,29 @@ const CoretimeApiContextProvider = (props: any) => {
       toastSuccess('Successfully connected to the Coretime chain');
   }, [state.apiState, toastSuccess]);
 
-  const connectCoretime = () =>
-    connect(state, WS_CORETIME_CHAIN, dispatch, types);
+  const getUrl = (network: any): string => {
+    if (!network || network == 'rococo') {
+      return WS_ROCOCO_CORETIME_CHAIN;
+    } else if (network == 'kusama') {
+      return WS_KUSAMA_CORETIME_CHAIN;
+    } else {
+      /* eslint-disable no-console */
+      console.error(`Network: ${network} not recognized`);
+      // Default to rococo.
+      return WS_ROCOCO_CORETIME_CHAIN;
+    }
+  };
 
   const disconnectCoretime = () => disconnect(state);
 
+  useEffect(() => {
+    if (state.socket == getUrl(network)) return;
+    const updateNetwork = network != '' && state.socket != getUrl(network);
+    connect(state, getUrl(network), dispatch, updateNetwork, types);
+  }, [network, state]);
+
   return (
-    <CoretimeApiContext.Provider
-      value={{ state, connectCoretime, disconnectCoretime }}
-    >
+    <CoretimeApiContext.Provider value={{ state, disconnectCoretime }}>
       {props.children}
     </CoretimeApiContext.Provider>
   );
diff --git a/src/contexts/apis/RelayApi/index.tsx b/src/contexts/apis/RelayApi/index.tsx
index 103ba92e..7fbb2c4a 100644
--- a/src/contexts/apis/RelayApi/index.tsx
+++ b/src/contexts/apis/RelayApi/index.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import React, { useContext, useEffect, useReducer, useState } from 'react';
 
 import { parseHNString } from '@/utils/functions';
@@ -7,13 +8,10 @@ import { useToast } from '@/contexts/toast';
 import { ParaId } from '@/models';
 
 import { connect, disconnect, initialState, reducer } from '../common';
-import { WS_RELAY_CHAIN } from '../consts';
+import { WS_KUSAMA_RELAY_CHAIN, WS_ROCOCO_RELAY_CHAIN } from '../consts';
 
 const defaultValue = {
   state: initialState,
-  connectRelay: (): void => {
-    /** */
-  },
   disconnectRelay: (): void => {
     /** */
   },
@@ -27,6 +25,9 @@ const RelayApiContextProvider = (props: any) => {
   const { toastError, toastSuccess } = useToast();
   const [paraIds, setParaIds] = useState<ParaId[]>([]);
 
+  const router = useRouter();
+  const { network } = router.query;
+
   useEffect(() => {
     state.apiError && toastError(`Failed to connect to relay chain`);
   }, [state.apiError, toastError]);
@@ -36,9 +37,27 @@ const RelayApiContextProvider = (props: any) => {
       toastSuccess('Successfully connected to the relay chain');
   }, [state.apiState, toastSuccess]);
 
-  const connectRelay = () => connect(state, WS_RELAY_CHAIN, dispatch);
   const disconnectRelay = () => disconnect(state);
 
+  const getUrl = (network: any): string => {
+    if (!network || network == 'rococo') {
+      return WS_ROCOCO_RELAY_CHAIN;
+    } else if (network == 'kusama') {
+      return WS_KUSAMA_RELAY_CHAIN;
+    } else {
+      /* eslint-disable no-console */
+      console.error(`Network: ${network} not recognized`);
+      // Default to rococo.
+      return WS_ROCOCO_RELAY_CHAIN;
+    }
+  };
+
+  useEffect(() => {
+    if (state.socket == getUrl(network)) return;
+    const updateNetwork = network != '' && state.socket != getUrl(network);
+    connect(state, getUrl(network), dispatch, updateNetwork);
+  }, [network, state]);
+
   useEffect(() => {
     const { api, apiState } = state;
     if (!api || apiState !== ApiState.READY) return;
@@ -54,9 +73,7 @@ const RelayApiContextProvider = (props: any) => {
   }, [state]);
 
   return (
-    <RelayApiContext.Provider
-      value={{ state, connectRelay, disconnectRelay, paraIds }}
-    >
+    <RelayApiContext.Provider value={{ state, disconnectRelay, paraIds }}>
       {props.children}
     </RelayApiContext.Provider>
   );
diff --git a/src/contexts/apis/common.ts b/src/contexts/apis/common.ts
index 63ec0e11..ad96b28f 100644
--- a/src/contexts/apis/common.ts
+++ b/src/contexts/apis/common.ts
@@ -10,6 +10,7 @@ import { ApiState } from './types';
 export type State = {
   jsonrpc: Record<string, Record<string, DefinitionRpcExt>>;
   api: ApiPromise | null;
+  socket: string;
   apiError: any;
   apiState: ApiState;
   symbol: string;
@@ -19,6 +20,7 @@ export const initialState: State = {
   // These are the states
   jsonrpc: { ...jsonrpc },
   api: null,
+  socket: '',
   apiError: null,
   apiState: ApiState.DISCONNECTED,
   symbol: '',
@@ -30,9 +32,18 @@ export const initialState: State = {
 export const reducer = (state: any, action: any) => {
   switch (action.type) {
     case 'CONNECT_INIT':
-      return { ...state, apiState: ApiState.CONNECT_INIT };
+      return {
+        ...state,
+        socket: action.socket,
+        apiState: ApiState.CONNECT_INIT,
+      };
     case 'CONNECT':
-      return { ...state, api: action.payload, apiState: ApiState.CONNECTING };
+      return {
+        ...state,
+        socket: action.socket,
+        api: action.payload,
+        apiState: ApiState.CONNECTING,
+      };
     case 'CONNECT_SUCCESS':
       return { ...state, apiState: ApiState.READY };
     case 'CONNECT_ERROR':
@@ -46,29 +57,27 @@ export const reducer = (state: any, action: any) => {
   }
 };
 
-///
 // Connecting to the Substrate node
 
 export const connect = (
   state: any,
   socket: string,
   dispatch: any,
+  newSocket: boolean,
   types?: any
 ) => {
   const { apiState, jsonrpc } = state;
-  // We only want this function to be performed once
-  if (apiState !== ApiState.DISCONNECTED) return;
 
-  if (!socket) return;
-
-  dispatch({ type: 'CONNECT_INIT' });
+  // We only want this function to be performed once
+  if (apiState !== ApiState.DISCONNECTED && !newSocket) return;
 
   const provider = new WsProvider(socket);
   const _api = new ApiPromise({ provider, rpc: jsonrpc, types });
+  dispatch({ type: 'CONNECT_INIT', socket });
 
   // Set listeners for disconnection and reconnection event.
   _api.on('connected', () => {
-    dispatch({ type: 'CONNECT', payload: _api });
+    dispatch({ type: 'CONNECT', payload: _api, socket });
     // `ready` event is not emitted upon reconnection and is checked explicitly here.
     _api.isReady.then(() => {
       dispatch({ type: 'CONNECT_SUCCESS' });
diff --git a/src/contexts/apis/consts.ts b/src/contexts/apis/consts.ts
index bfaf616a..ca7da40b 100644
--- a/src/contexts/apis/consts.ts
+++ b/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_KUSAMA_RELAY_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 ?? '';
diff --git a/src/contexts/sales/index.tsx b/src/contexts/sales/index.tsx
index cd9bce1d..c1783aa9 100644
--- a/src/contexts/sales/index.tsx
+++ b/src/contexts/sales/index.tsx
@@ -66,10 +66,15 @@ const SaleInfoProvider = ({ children }: Props) => {
 
   const fetchSaleInfo = useCallback(async () => {
     setLoading(true);
-    if (!coretimeApi || coretimeApiState !== ApiState.READY) return {};
+    if (
+      !coretimeApi ||
+      coretimeApiState !== ApiState.READY ||
+      !coretimeApi.query.broker
+    )
+      return {};
 
     const saleInfo: any = (await coretimeApi.query.broker.saleInfo()).toHuman();
-    if (Object.keys(saleInfo).length) {
+    if (saleInfo && Object.keys(saleInfo).length) {
       setSaleInfo({
         coresOffered: parseHNString(saleInfo.coresOffered.toString()),
         coresSold: parseHNString(saleInfo.coresSold.toString()),
diff --git a/src/contexts/tasks/index.tsx b/src/contexts/tasks/index.tsx
index 0c67dcd3..52d69a6b 100644
--- a/src/contexts/tasks/index.tsx
+++ b/src/contexts/tasks/index.tsx
@@ -57,7 +57,12 @@ const TaskDataProvider = ({ children }: Props) => {
 
   // The tasks which will run on Polkadot cores in the future.
   const fetchWorkplan = async (): Promise<Tasks> => {
-    if (!coretimeApi || coretimeApiState !== ApiState.READY) return {};
+    if (
+      !coretimeApi ||
+      coretimeApiState !== ApiState.READY ||
+      !coretimeApi.query.broker
+    )
+      return {};
     const workplan = await coretimeApi.query.broker.workplan.entries();
     const tasks: Record<string, number | null> = {};
 
@@ -94,7 +99,12 @@ const TaskDataProvider = ({ children }: Props) => {
     core: CoreIndex,
     regionMask: CoreMask
   ): Promise<Task> => {
-    if (!coretimeApi || coretimeApiState !== ApiState.READY) return null;
+    if (
+      !coretimeApi ||
+      coretimeApiState !== ApiState.READY ||
+      !coretimeApi.query.broker
+    )
+      return null;
     const workload = (
       (
         await coretimeApi.query.broker.workload(core)
diff --git a/src/hooks/salePhase.tsx b/src/hooks/salePhase.tsx
index aba6ba7e..75eaf9e7 100644
--- a/src/hooks/salePhase.tsx
+++ b/src/hooks/salePhase.tsx
@@ -1,7 +1,9 @@
 import { ApiPromise } from '@polkadot/api';
+import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 
 import {
+  getBlockTime,
   getBlockTimestamp,
   parseHNString,
 } from '@/utils/functions';
@@ -34,6 +36,9 @@ const useSalePhase = () => {
   const [progress, setProgress] = useState<number | null>(0);
   const [saleSections, setSaleSections] = useState<Section[]>([]);
 
+  const router = useRouter();
+  const { network } = router.query;
+
   const fetchCurrentPhase = useCallback(
     async (api: ApiPromise) => {
       const blockNumber = (await api.query.system.number()).toJSON() as number;
@@ -43,17 +48,18 @@ const useSalePhase = () => {
         ).lastCommittedTimeslice.toString()
       );
 
-      const _saleStart = getSaleStartInBlocks(saleInfo, config);
+      const _saleStart = getSaleStartInBlocks(saleInfo);
       const _saleEnd = getSaleEndInBlocks(
         saleInfo,
         blockNumber,
         lastCommittedTimeslice,
+        network
       );
 
-      getBlockTimestamp(api, _saleStart).then(
+      getBlockTimestamp(api, _saleStart, getBlockTime(network)).then(
         (value: number) => setSaleStartTimestamp(value)
       );
-      getBlockTimestamp(api, _saleEnd).then(
+      getBlockTimestamp(api, _saleEnd, getBlockTime(network)).then(
         (value: number) => setSaleEndTimestamp(value)
       );
 
@@ -62,6 +68,7 @@ const useSalePhase = () => {
         config,
         blockNumber,
         lastCommittedTimeslice,
+        network
       );
       setProgress(progress);
 
@@ -83,7 +90,7 @@ const useSalePhase = () => {
         },
       ]);
     },
-    [saleInfo, config]
+    [saleInfo, config, network]
   );
 
   useEffect(() => {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 39b20361..c9a20c51 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import { Id } from 'coretime-utils';
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import * as React from 'react';
 import '../../styles/global.scss';
 
@@ -18,7 +19,10 @@ import {
   CoretimeApiContextProvider,
   RelayApiContextProvider,
 } from '@/contexts/apis';
-import { WS_CORETIME_CHAIN } from '@/contexts/apis/consts';
+import {
+  WS_KUSAMA_CORETIME_CHAIN,
+  WS_ROCOCO_CORETIME_CHAIN,
+} from '@/contexts/apis/consts';
 import { ContextDataProvider } from '@/contexts/common';
 import { MarketProvider } from '@/contexts/market';
 import { RegionDataProvider } from '@/contexts/regions';
@@ -37,9 +41,25 @@ interface MyAppProps extends AppProps {
 }
 
 export default function MyApp(props: MyAppProps) {
+  const router = useRouter();
+  const { network } = router.query;
+
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
   const getLayout = Component.getLayout ?? ((page) => <Layout>{page}</Layout>);
 
+  const getUrl = (network: any): string => {
+    if (!network || network === 'rococo') {
+      return WS_ROCOCO_CORETIME_CHAIN;
+    } else if (network === 'kusama') {
+      return WS_KUSAMA_CORETIME_CHAIN;
+    } else {
+      /* eslint-disable no-console */
+      console.error(`Network: ${network} not recognized`);
+      // default to rococo.
+      return WS_ROCOCO_CORETIME_CHAIN;
+    }
+  };
+
   return (
     <CacheProvider value={emotionCache}>
       <Head>
@@ -57,7 +77,7 @@ export default function MyApp(props: MyAppProps) {
                 defaultChain={{
                   network: '',
                   name: '',
-                  rpcUrls: [WS_CORETIME_CHAIN],
+                  rpcUrls: [getUrl(network)],
                 }}
                 apiOptions={{ types: { Id } }}
               >
diff --git a/src/pages/purchase.tsx b/src/pages/purchase.tsx
index 5101bc8a..b91cca66 100644
--- a/src/pages/purchase.tsx
+++ b/src/pages/purchase.tsx
@@ -108,10 +108,10 @@ const Purchase = () => {
       </Box>
       <Box>
         {loading ||
-          !currentPhase ||
-          !progress ||
-          !saleStartTimestamp ||
-          !saleEndTimestamp ? (
+        !currentPhase ||
+        !progress ||
+        !saleStartTimestamp ||
+        !saleEndTimestamp ? (
           <>
             <Typography variant='h5' align='center'>
               Connect your wallet
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index 61ab5954..86cff9d8 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -3,11 +3,7 @@ import { formatBalance as polkadotFormatBalance } from '@polkadot/util';
 import { CoreMask, RegionId } from 'coretime-utils';
 import Decimal from 'decimal.js';
 
-import {
-  CORETIME_DECIMALS,
-  REGIONX_DECIMALS,
-  RELAY_CHAIN_BLOCK_TIME,
-} from '@/models';
+import { CORETIME_DECIMALS, REGIONX_DECIMALS } from '@/models';
 
 // parse human readable number string
 export const parseHNString = (str: string): number => {
@@ -20,7 +16,8 @@ export const parseHNStringToString = (str: string): string => {
 
 export const getBlockTimestamp = async (
   api: ApiPromise,
-  height: number
+  height: number,
+  blockTime = 6000
 ): Promise<number> => {
   const [resHeight, resTimestamp] = await Promise.all([
     api.query.system.number(),
@@ -29,18 +26,9 @@ export const getBlockTimestamp = async (
   const currentHeight = parseHNString(resHeight.toString());
   const currentTimestamp = parseHNString(resTimestamp.toString());
   if (height <= currentHeight) {
-    try {
-      const hash = await api.rpc.chain.getBlockHash(height);
-      const apiAt = await api.at(hash);
-      const timestamp = Number((await apiAt.query.timestamp.now()).toJSON());
-      return timestamp;
-    } catch (_) {
-      return (
-        currentTimestamp - (currentHeight - height) * RELAY_CHAIN_BLOCK_TIME
-      );
-    }
+    return currentTimestamp - (currentHeight - height) * blockTime;
   } else {
-    return currentTimestamp + (height - currentHeight) * RELAY_CHAIN_BLOCK_TIME;
+    return currentTimestamp + (height - currentHeight) * blockTime;
   }
 };
 
@@ -121,3 +109,19 @@ export const extractRegionIdFromRaw = (rawRegionId: bigint): RegionId => {
     mask: new CoreMask(('0x' + mask.toString(16)).padEnd(22, '0')),
   };
 };
+
+export const getBlockTime = (network: any): number => {
+  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
+  const blockTime = !network || network == 'rococo' ? 6000 : 12000;
+  return blockTime;
+};
+
+export const rcBlockToParachainBlock = (
+  network: any,
+  blockNumber: number
+): number => {
+  // Coretime on Rococo has async backing and due to this it has a block time of 6 seconds.
+  return !network || network == 'rococo'
+    ? blockNumber
+    : Math.floor(blockNumber / 2);
+};
diff --git a/src/utils/sale/utils.test.ts b/src/utils/sale/utils.test.ts
index 1c256c60..82b84771 100644
--- a/src/utils/sale/utils.test.ts
+++ b/src/utils/sale/utils.test.ts
@@ -79,9 +79,7 @@ describe('Purchase page', () => {
 
   describe('getSaleStartInBlocks', () => {
     it('works', () => {
-      expect(getSaleStartInBlocks(mockSaleInfo, mockConfig)).toBe(
-        mockSaleInfo.saleStart - mockConfig.interludeLength
-      );
+      expect(getSaleStartInBlocks(mockSaleInfo)).toBe(mockSaleInfo.saleStart);
     });
   });
 
@@ -94,7 +92,12 @@ describe('Purchase page', () => {
       );
 
       expect(
-        getSaleEndInBlocks(mockSaleInfo, blockNumber, lastCommittedTimeslice)
+        getSaleEndInBlocks(
+          mockSaleInfo,
+          blockNumber,
+          lastCommittedTimeslice,
+          'rococo'
+        )
       ).toBe(mockSaleInfo.saleStart + mockConfig.regionLength * 80);
     });
   });
@@ -112,7 +115,8 @@ describe('Purchase page', () => {
           mockSaleInfo,
           mockConfig,
           blockNumber,
-          lastCommittedTimeslice
+          lastCommittedTimeslice,
+          'rococo'
         )
       ).toBe(0);
 
@@ -123,7 +127,8 @@ describe('Purchase page', () => {
           mockSaleInfo,
           mockConfig,
           blockNumber,
-          lastCommittedTimeslice
+          lastCommittedTimeslice,
+          'rococo'
         )
       ).toBe(0.49); // 0.49 %
     });
diff --git a/src/utils/sale/utils.ts b/src/utils/sale/utils.ts
index 3480d3a4..e54fa651 100644
--- a/src/utils/sale/utils.ts
+++ b/src/utils/sale/utils.ts
@@ -1,6 +1,6 @@
 import { Timeslice } from 'coretime-utils';
 
-import { leadinFactorAt } from '@/utils/functions';
+import { leadinFactorAt, rcBlockToParachainBlock } from '@/utils/functions';
 
 import { BlockNumber, SaleConfig, SaleInfo, SalePhase } from '@/models';
 
@@ -17,22 +17,23 @@ export const getCurrentPhase = (
   }
 };
 
-export const getSaleStartInBlocks = (
-  saleInfo: SaleInfo,
-  config: SaleConfig
-) => {
+export const getSaleStartInBlocks = (saleInfo: SaleInfo) => {
   // `saleInfo.saleStart` defines the start of the leadin phase.
   // However, we want to account for the interlude period as well.
-  return saleInfo.saleStart - config.interludeLength;
+  return saleInfo.saleStart;
 };
 
 export const getSaleEndInBlocks = (
   saleInfo: SaleInfo,
   blockNumber: BlockNumber,
-  lastCommittedTimeslice: Timeslice
+  lastCommittedTimeslice: Timeslice,
+  network: any
 ) => {
   const timeslicesUntilSaleEnd = saleInfo.regionBegin - lastCommittedTimeslice;
-  return blockNumber + 80 * timeslicesUntilSaleEnd;
+  return rcBlockToParachainBlock(
+    network,
+    blockNumber + 80 * timeslicesUntilSaleEnd
+  );
 };
 
 // Returns a range between 0 and 100.
@@ -40,10 +41,16 @@ export const getSaleProgress = (
   saleInfo: SaleInfo,
   config: SaleConfig,
   blockNumber: number,
-  lastCommittedTimeslice: number
+  lastCommittedTimeslice: number,
+  network: any
 ): number => {
-  const start = getSaleStartInBlocks(saleInfo, config);
-  const end = getSaleEndInBlocks(saleInfo, blockNumber, lastCommittedTimeslice);
+  const start = getSaleStartInBlocks(saleInfo) - config.interludeLength;
+  const end = getSaleEndInBlocks(
+    saleInfo,
+    blockNumber,
+    lastCommittedTimeslice,
+    network
+  );
 
   const saleDuration = end - start;
   const elapsed = blockNumber - start;