APIs connect

src/components/Header/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material';
 import { useInkathon } from '@scio-labs/use-inkathon';
 import Image from 'next/image';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Logo from '@/assets/logo.png';
 import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
@@ -20,16 +20,20 @@ import { WalletModal } from '../Modals/WalletConnect';
 export const Header = () => {
   const { activeAccount, disconnect, accounts, setActiveAccount } =
     useInkathon();
-  const { disconnectRelay } = useRelayApi();
-  const { disconnectCoretime } = useCoretimeApi();
   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();
-    disconnectRelay();
-    disconnectCoretime();
   };
 
   return (

src/components/Modals/WalletConnect/index.tsx

@@ -7,16 +7,9 @@ import {
   List,
   ListItemButton,
 } from '@mui/material';
-import { isWalletInstalled } from '@scio-labs/use-inkathon';
-import {
-  allSubstrateWallets,
-  SubstrateWallet,
-  useInkathon,
-} from '@scio-labs/use-inkathon';
+import { isWalletInstalled,SubstrateWallet } from '@scio-labs/use-inkathon';
+import { allSubstrateWallets, useInkathon } from '@scio-labs/use-inkathon';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
-
-import { useCoretimeApi, useRelayApi } from '@/contexts/apis';
 
 import styles from './index.module.scss';
 
@@ -26,31 +19,13 @@ interface WalletModalProps {
 }
 
 export const WalletModal = (props: WalletModalProps) => {
-  const {
-    connect: connectContract,
-    activeChain,
-    isInitialized,
-  } = useInkathon();
-  const { connectRelay } = useRelayApi();
-  const { connectCoretime } = useCoretimeApi();
+  const { connect } = useInkathon();
 
-  const [wallet, setWallet] = useState<SubstrateWallet | null>(null);
-
-  const onConnect = async (wallet: SubstrateWallet) => {
-    setWallet(wallet);
-    if (!connectContract) return;
-    connectRelay();
-    connectCoretime();
-    connectContract(activeChain, wallet);
+  const onConnect = (wallet: SubstrateWallet) => {
+    connect?.(undefined, wallet);
     props.onClose();
   };
 
-  useEffect(() => {
-    if (wallet) {
-      onConnect(wallet);
-    }
-  }, [isInitialized]);
-
   return (
     <Dialog {...props} fullWidth maxWidth='sm'>
       <DialogTitle>Choose your wallet extension</DialogTitle>

src/contexts/common/index.tsx

@@ -33,13 +33,13 @@ const ContextDataProvider = ({ children }: Props) => {
 
   useEffect(() => {
     const collectContextData = async () => {
-      if (!relayConnected) return;
+      if (!relayConnected || !relayApi.query.system) return;
       const currentBlockHeight = parseHNString(
         (await relayApi.query.system.number()).toString()
       );
       setRelayBlockNumber(currentBlockHeight);
 
-      if (!coretimeConnected) return;
+      if (!coretimeConnected || !coretimeApi.consts.broker) return;
 
       const timeslicePeriod = parseHNString(
         coretimeApi.consts.broker.timeslicePeriod.toString()