add recent chain to Connect

src/contexts/Api/index.tsx

@@ -147,8 +147,10 @@ export const ApiProvider = ({ children }: { children: ReactNode }) => {
       if (tab?.chain && tab.autoConnect) {
         const { id, provider } = tab.chain;
 
-        const endpoint = NetworkDirectory[id].providers[provider];
-        ApiController.instantiate(tab.id, id, endpoint);
+        const endpoint = NetworkDirectory[id]?.providers[provider];
+        if (endpoint) {
+          ApiController.instantiate(tab.id, id, endpoint);
+        }
       }
     });
   }, []);

src/contexts/Tabs/defaults.ts

@@ -28,6 +28,7 @@ export const defaultTabsContext: TabsContextInterface = {
   redirectCounter: 0,
   incrementRedirectCounter: () => {},
   connectTab: (tabId, chainId, endpoint) => {},
+  getStoredChain: (tabId) => undefined,
 };
 
 export const DEFAULT_TAB_WIDTH_PX = 145;
@@ -65,10 +66,7 @@ export const defaultTabs: Tabs = [
   },
   {
     id: 4,
-    chain: {
-      id: 'westend',
-      provider: 'IBP-GeoDNS1',
-    },
+    chain: undefined,
     name: 'Westend Relay Chain',
     autoConnect: false,
   },

src/contexts/Tabs/index.tsx

@@ -93,6 +93,17 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
   const getChainTab = (chainId: ChainId) =>
     tabs.find((tab) => tab.chain?.id === chainId);
 
+  // Gets the previously connected to chain, if present.
+  const getStoredChain = (tabId: number) => {
+    const tab = tabs.find(({ id }) => id === tabId);
+
+    if (!tab?.chain?.id) {
+      return undefined;
+    }
+
+    return { id: tab.chain.id, chain: NetworkDirectory[tab.chain.id] };
+  };
+
   // Get the largest id from a list of tabs.
   const getLargestId = (list: Tabs) =>
     [...list].sort((a, b) => b.id - a.id)?.[0].id || 0;
@@ -167,6 +178,7 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
       tab.id === tabId
         ? {
             ...tab,
+            // Auto rename the tab here if the setting is turned on.
             name: autoTabNaming ? getAutoTabName(chainId) : tab.name,
             chain: { id: chainId, provider },
           }
@@ -204,6 +216,7 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
         connectTab,
         redirectCounter,
         incrementRedirectCounter,
+        getStoredChain,
         instantiatedIds: instantiatedIds.current,
       }}
     >

src/contexts/Tabs/types.ts

@@ -1,7 +1,7 @@
 // Copyright 2024 @rossbulat/console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { ChainId } from 'config/networks';
+import type { ChainId, NetworkDirectoryItem } from 'config/networks';
 import type { Dispatch, SetStateAction } from 'react';
 
 export type Tabs = Tab[];
@@ -42,4 +42,7 @@ export interface TabsContextInterface {
   redirectCounter: number;
   incrementRedirectCounter: () => void;
   connectTab: (tabId: number, chainId: ChainId, endpoint: string) => void;
+  getStoredChain: (
+    tabId: number
+  ) => { id: ChainId; chain: NetworkDirectoryItem } | undefined;
 }

src/screens/Default/Connect/ChainList.tsx

@@ -11,11 +11,12 @@ import { useTags } from 'contexts/Tags';
 import type { TagItem } from 'contexts/Tags/types';
 
 export const ChainList = () => {
-  const { activeTabId } = useTabs();
   const { getTagsForChain } = useTags();
+  const { activeTabId, getStoredChain } = useTabs();
   const { getAppliedTags, getSearchTerm } = useChainFilter();
+  const tabStoredChain = getStoredChain(activeTabId);
 
-  // NOTE: Currently naively filering simple chain list.
+  // NOTE: Currently naively filtering simple chain list.
 
   const results = NetworkDirectory;
 
@@ -35,6 +36,13 @@ export const ChainList = () => {
   // Filter chains based on search term.
   const searchTerm = getSearchTerm(activeTabId);
 
+  // Remove the currently stored chain from results if it exists.
+  if (tabStoredChain) {
+    filtered = Object.fromEntries(
+      Object.entries(filtered).filter(([key]) => key !== tabStoredChain.id)
+    );
+  }
+
   if (searchTerm !== '') {
     filtered = Object.fromEntries(
       Object.entries(filtered).filter(([, { name }]) =>

src/screens/Default/Connect/RecentChain.tsx

@@ -0,0 +1,26 @@
+// Copyright 2024 @rossbulat/console authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { useTabs } from 'contexts/Tabs';
+import { ChainListWrapper, Separator } from './Wrappers';
+import { ChainListItem } from './ChainListItem';
+import type { ChainId } from 'config/networks';
+
+export const RecentChain = () => {
+  const { activeTabId, getStoredChain, getActiveTab } = useTabs();
+  const activeTab = getActiveTab();
+
+  const result = getStoredChain(activeTabId);
+
+  if (!result || !activeTab?.chain?.id) {
+    return null;
+  }
+
+  return (
+    <ChainListWrapper>
+      <Separator />
+      <h4>Recently Connected</h4>
+      <ChainListItem chainId={result.id as ChainId} name={result.chain.name} />
+    </ChainListWrapper>
+  );
+};

src/screens/Default/Connect/index.tsx

@@ -5,11 +5,13 @@ import { ChainList } from './ChainList';
 import { AutoConnect } from '../AutoConnect';
 import { SearchChain } from './SearchChain';
 import { PageContentWrapper } from 'library/Page/Wrapper';
+import { RecentChain } from './RecentChain';
 
 export const Connect = () => (
   <PageContentWrapper>
     <AutoConnect />
     <SearchChain />
+    <RecentChain />
     <ChainList />
   </PageContentWrapper>
 );