support auto tab naming on connect

polkadot-cloud · Mar 6, 2024 · 50162de · 50162de
1 parent 2b633bb
commit 50162de
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/src/contexts/Tabs/defaults.ts b/src/contexts/Tabs/defaults.ts
@@ -24,6 +24,7 @@ export const defaultTabsContext: TabsContextInterface = {
   setTabsHidden: (hidden) => {},
   instantiatedIds: [],
   renameTab: (id, name) => {},
+  getAutoTabName: (chainId) => '',
 };
 
 export const DEFAULT_TAB_WIDTH_PX = 145;
@@ -38,7 +39,7 @@ export const defaultTabs: Tabs = [
       id: 'polkadot-relay-chain',
       provider: 'IBP-GeoDNS1',
     },
-    name: 'Polkadot Relay',
+    name: 'Polkadot Relay Chain',
     autoConnect: true,
   },
   {
@@ -47,7 +48,7 @@ export const defaultTabs: Tabs = [
       id: 'kusama-relay-chain',
       provider: 'IBP-GeoDNS1',
     },
-    name: 'Kusama Relay',
+    name: 'Kusama Relay Chain',
     autoConnect: false,
   },
   {
@@ -56,7 +57,7 @@ export const defaultTabs: Tabs = [
       id: 'westend-relay-chain',
       provider: 'IBP-GeoDNS1',
     },
-    name: 'Westend Relay',
+    name: 'Westend Relay Chain',
     autoConnect: false,
   },
 ];

diff --git a/src/contexts/Tabs/index.tsx b/src/contexts/Tabs/index.tsx
@@ -7,7 +7,7 @@ import type { Tabs, TabsContextInterface } from './types';
 import { defaultTabs, defaultTabsContext } from './defaults';
 import * as local from './Local';
 import { useSettings } from 'contexts/Settings';
-import type { ChainId } from 'config/networks';
+import { NetworkDirectory, type ChainId } from 'config/networks';
 import { checkLocalTabs } from 'IntegrityChecks';
 
 checkLocalTabs();
@@ -135,6 +135,19 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
     setTabs(newTabs);
   };
 
+  // Gets the amount of tab names starting with the provided string.
+  const getTabNameCount = (name: string) =>
+    tabs.filter((tab) => tab.name.startsWith(name)).length;
+
+  // Generate tab name for chain.
+  const getAutoTabName = (chainId: ChainId) => {
+    const chainName = NetworkDirectory[chainId].name;
+    const existingNames = getTabNameCount(chainName);
+    const tabName =
+      existingNames === 0 ? chainName : `${chainName} ${existingNames + 1}`;
+
+    return tabName;
+  };
   return (
     <TabsContext.Provider
       value={{
@@ -156,6 +169,7 @@ export const TabsProvider = ({ children }: { children: ReactNode }) => {
         tabsHidden,
         setTabsHidden,
         renameTab,
+        getAutoTabName,
         instantiatedIds: instantiatedIds.current,
       }}
     >

diff --git a/src/contexts/Tabs/types.ts b/src/contexts/Tabs/types.ts
@@ -38,4 +38,5 @@ export interface TabsContextInterface {
   setTabsHidden: (hidden: boolean) => void;
   instantiatedIds: number[];
   renameTab: (id: number, name: string) => void;
+  getAutoTabName: (chainId: ChainId) => string;
 }
diff --git a/src/screens/Default/Connect/ChainList.tsx b/src/screens/Default/Connect/ChainList.tsx
@@ -54,7 +54,7 @@ export const ChainList = () => {
       {Object.entries(filtered).map(([key, { name }]) => (
         <ChainListItem
           key={`chain_index_${key}`}
-          chain={key as ChainId}
+          chainId={key as ChainId}
           name={name}
         />
       ))}

diff --git a/src/screens/Default/Connect/ChainListItem.tsx b/src/screens/Default/Connect/ChainListItem.tsx
@@ -10,40 +10,50 @@ import { faCircleRight, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { useMenu } from 'contexts/Menu';
 import { ConfigTagMenu } from './TagsMenu/ConfigTagMenu';
 import type { TagId } from 'contexts/Tags/types';
-import type { ChainId } from 'config/networks';
+import { type ChainId } from 'config/networks';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ConnectMenu } from './ConnectMenu';
+import { useSettings } from 'contexts/Settings';
+import { useTabs } from 'contexts/Tabs';
 
 export interface ChainListItemProps {
-  chain: ChainId;
+  chainId: ChainId;
   name: string;
 }
 
-export const ChainListItem = ({ chain, name }: ChainListItemProps) => {
+export const ChainListItem = ({ chainId, name }: ChainListItemProps) => {
   const { openMenu } = useMenu();
+  const { autoTabNaming } = useSettings();
+  const { activeTabId, getAutoTabName, renameTab } = useTabs();
   const { tags, getTagsForChain, addChainToTag, removeChainFromTag } =
     useTags();
-  const chainTags = getTagsForChain(chain);
+  const chainTags = getTagsForChain(chainId);
 
   // Lazily load the icon for the chain.
   const Icon = useMemo(
     () =>
-      lazy(() => import(`../../../config/networks/icons/${chain}/Inline.tsx`)),
+      lazy(
+        () => import(`../../../config/networks/icons/${chainId}/Inline.tsx`)
+      ),
     []
   );
 
   // Handle tag provider select. Connect to chain on successful selection.
   const handleOnProviderSelect = (providerUrl: string) => {
+    // If auto-renaming is turned on, rename tab to automated name.
+    if (autoTabNaming) {
+      renameTab(activeTabId, getAutoTabName(chainId));
+    }
     // TODO: update tab data and connect to Api instance.
     console.log(providerUrl);
   };
 
   // Handle tag menu item select. Either add or remove a tag configs.
   const handleOnTagSelect = (tagId: TagId, selected: boolean) => {
     if (selected) {
-      removeChainFromTag(tagId, chain);
+      removeChainFromTag(tagId, chainId);
     } else {
-      addChainToTag(tagId, chain);
+      addChainToTag(tagId, chainId);
     }
   };
 
@@ -64,7 +74,7 @@ export const ChainListItem = ({ chain, name }: ChainListItemProps) => {
               openMenu(
                 ev,
                 <ConnectMenu
-                  chainId={chain}
+                  chainId={chainId}
                   onSelect={handleOnProviderSelect}
                 />
               );
@@ -77,7 +87,7 @@ export const ChainListItem = ({ chain, name }: ChainListItemProps) => {
       </div>
 
       <div className="body">
-        <h5>{chain}</h5>
+        <h5>{chainId}</h5>
       </div>
 
       <div className="footer">
@@ -94,7 +104,7 @@ export const ChainListItem = ({ chain, name }: ChainListItemProps) => {
             onClick={(ev) => {
               openMenu(
                 ev,
-                <ConfigTagMenu chainId={chain} onSelect={handleOnTagSelect} />
+                <ConfigTagMenu chainId={chainId} onSelect={handleOnTagSelect} />
               );
             }}
           />