handle api status

src/contexts/Api/defaults.ts

@@ -7,5 +7,5 @@ import type { ApiContextInterface } from './types';
 export const defaultApiContext: ApiContextInterface = {
   isReady: false,
   getTabApi: () => undefined,
-  apiStatus: {},
+  getApiStatus: (tabId) => 'disconnected',
 };

src/contexts/Api/index.tsx

@@ -10,13 +10,14 @@ import { useTabs } from 'contexts/Tabs';
 import { useEventListener } from 'usehooks-ts';
 import { isCustomEvent } from 'Utils';
 import type { ApiStatus } from 'model/Api/types';
+import { NetworkDirectory } from 'config/networks';
 
 export const Api = createContext<ApiContextInterface>(defaultApiContext);
 
 export const useApi = () => useContext(Api);
 
 export const ApiProvider = ({ children }: { children: ReactNode }) => {
-  const { getActiveTab, getChainTab } = useTabs();
+  const { getActiveTab, getChainTab, tabs } = useTabs();
 
   // Store API connection status of each tab. NOTE: requires ref as it is used in event listener.
   const [apiStatus, setApiStatusState] = useState<Record<number, ApiStatus>>(
@@ -30,11 +31,14 @@ export const ApiProvider = ({ children }: { children: ReactNode }) => {
     setApiStatusState(status);
   };
 
-  // Gets the Api instance of the active tab, if present.
+  // Gets an api status based on a tab id.
+  const getApiStatus = (tabId: number): ApiStatus => apiStatus[tabId];
+
+  // Gets the `Api` instance of the active tab, if present.
   const getTabApi = () => {
-    const chainId = getActiveTab()?.chainId;
-    if (chainId) {
-      return ApiController.instances[chainId];
+    const activeTab = getActiveTab();
+    if (activeTab?.chain) {
+      return ApiController.instances[activeTab.id];
     }
   };
 
@@ -83,14 +87,21 @@ export const ApiProvider = ({ children }: { children: ReactNode }) => {
 
   // Initialisation of Api instances.
   useEffect(() => {
-    // TOOD: implement.
+    console.log('initialise tab instances');
+    tabs.forEach((tab) => {
+      if (tab?.chain && tab.autoConnect) {
+        const { id, provider } = tab.chain;
+        const endpoint = NetworkDirectory[id].providers[provider];
+        ApiController.instantiate(tab.id, id, endpoint);
+      }
+    });
   }, []);
 
   return (
     <Api.Provider
       value={{
         isReady: false,
-        apiStatus,
+        getApiStatus,
         getTabApi,
       }}
     >

src/contexts/Api/types.ts

@@ -7,5 +7,5 @@ import type { ApiStatus } from 'model/Api/types';
 export interface ApiContextInterface {
   isReady: boolean;
   getTabApi: () => Api | undefined;
-  apiStatus: Record<string, ApiStatus>;
+  getApiStatus: (tabId: number) => ApiStatus;
 }

src/contexts/Tabs/defaults.ts

@@ -34,27 +34,36 @@ export const TAB_TRANSITION_DURATION_MS = 300;
 export const defaultTabs: Tabs = [
   {
     id: 1,
-    chainId: 'polkadot-relay-chain',
+    chain: {
+      id: 'polkadot-relay-chain',
+      provider: 'IBP-GeoDNS1',
+    },
     name: 'Polkadot Relay',
     autoConnect: true,
   },
   {
     id: 2,
-    chainId: 'kusama-relay-chain',
+    chain: {
+      id: 'kusama-relay-chain',
+      provider: 'IBP-GeoDNS1',
+    },
     name: 'Kusama Relay',
     autoConnect: true,
   },
   {
     id: 3,
-    chainId: 'westend-relay-chain',
+    chain: {
+      id: 'westend-relay-chain',
+      provider: 'IBP-GeoDNS1',
+    },
     name: 'Westend Relay Long Name',
     autoConnect: true,
   },
 ];
 
 export const defaultEemptyTab: Tab = {
   id: -1,
-  chainId: undefined,
+  chain: undefined,
   name: '',
   autoConnect: true,
 };

src/contexts/Tabs/index.tsx

@@ -81,7 +81,7 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
 
   // Gets a tab by chain id.
   const getChainTab = (chainId: ChainId) =>
-    tabs.find((tab) => tab.chainId === chainId);
+    tabs.find((tab) => tab.chain?.id === chainId);
 
   // Get the largest id from a list of tabs.
   const getLargestId = (list: Tabs) =>
@@ -97,7 +97,7 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
       ...tabs,
       {
         id: newTabId,
-        chainId: undefined,
+        chain: undefined,
         name: 'New Tab',
         autoConnect,
       },

src/contexts/Tabs/types.ts

@@ -8,7 +8,12 @@ export type Tabs = Tab[];
 
 export interface Tab {
   id: number;
-  chainId: ChainId | undefined;
+  chain:
+    | {
+        id: ChainId;
+        provider: string;
+      }
+    | undefined;
   name: string;
   autoConnect: boolean;
 }

src/screens/Default/Menu/index.tsx

@@ -11,17 +11,33 @@ import { useLocation } from 'react-router-dom';
 import { HeaderMenuWrapper } from 'library/HeaderMenu/Wrappers';
 import { useSection } from 'library/Page/provider';
 import { ButtonWithTooltip } from './ButtonWithTooltip';
+import { useApi } from 'contexts/Api';
 
 export const ChainMenu = () => {
+  const { getApiStatus } = useApi();
   const { pathname } = useLocation();
-  const { tabsHidden, setTabsHidden } = useTabs();
   const { activeSection, setActiveSection } = useSection();
+  const { tabsHidden, setTabsHidden, activeTabId } = useTabs();
+
+  const apiStatus = getApiStatus(activeTabId);
+  let statusLabel;
+  switch (apiStatus) {
+    case 'connecting':
+      statusLabel = 'Connecting';
+      break;
+    case 'ready':
+    case 'connected':
+      statusLabel = 'Connected';
+      break;
+    default:
+      statusLabel = 'Not Connected';
+  }
 
   return (
     <HeaderMenuWrapper>
       <div className="menu">
         <section className="main">
-          <div className="label">Not Connected</div>
+          <div className="label"> {statusLabel}</div>
           <button
             onClick={() => setActiveSection(0)}
             className={activeSection === 0 ? 'active' : undefined}

src/screens/Default/Overview/index.tsx

@@ -0,0 +1,4 @@
+// Copyright 2024 @rossbulat/console authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export const Overview = () => <h2>Chain Api Instance present.</h2>;

src/screens/Default/index.tsx

@@ -5,17 +5,14 @@ import { useApi } from 'contexts/Api';
 import { Connect } from './Connect';
 import { ManageTab } from './ManageTab';
 import { useSection } from 'library/Page/provider';
+import { Overview } from './Overview';
 
 export const Default = () => {
   const { getTabApi } = useApi();
   const { activeSection } = useSection();
 
-  // If Api instance does not yet exist for the tab, display the connect chain UI.
-  const firstSection = getTabApi() ? (
-    <h2>Chain Api Instance present.</h2>
-  ) : (
-    <Connect />
-  );
+  // If `Api` instance does not yet exist for the tab, display the connect chain UI.
+  const firstSection = getTabApi() ? <Overview /> : <Connect />;
 
   return (
     <>