From 19b3ff15686f2695968d245f7d9c2aa06993de7c Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Thu, 7 Mar 2024 16:30:26 +0700 Subject: [PATCH] add recent chain to Connect --- src/contexts/Api/index.tsx | 6 +++-- src/contexts/Tabs/defaults.ts | 6 ++--- src/contexts/Tabs/index.tsx | 13 +++++++++++ src/contexts/Tabs/types.ts | 5 +++- src/screens/Default/Connect/ChainList.tsx | 12 ++++++++-- src/screens/Default/Connect/RecentChain.tsx | 26 +++++++++++++++++++++ src/screens/Default/Connect/index.tsx | 2 ++ 7 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 src/screens/Default/Connect/RecentChain.tsx diff --git a/src/contexts/Api/index.tsx b/src/contexts/Api/index.tsx index 147d71d6..ee237c98 100644 --- a/src/contexts/Api/index.tsx +++ b/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); + } } }); }, []); diff --git a/src/contexts/Tabs/defaults.ts b/src/contexts/Tabs/defaults.ts index db7ab069..90018c93 100644 --- a/src/contexts/Tabs/defaults.ts +++ b/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, }, diff --git a/src/contexts/Tabs/index.tsx b/src/contexts/Tabs/index.tsx index d6d34bbc..e0a0b8ed 100644 --- a/src/contexts/Tabs/index.tsx +++ b/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, }} > diff --git a/src/contexts/Tabs/types.ts b/src/contexts/Tabs/types.ts index e1b1460d..f2e22518 100644 --- a/src/contexts/Tabs/types.ts +++ b/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; } diff --git a/src/screens/Default/Connect/ChainList.tsx b/src/screens/Default/Connect/ChainList.tsx index 73dd517c..d796ea10 100644 --- a/src/screens/Default/Connect/ChainList.tsx +++ b/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 }]) => diff --git a/src/screens/Default/Connect/RecentChain.tsx b/src/screens/Default/Connect/RecentChain.tsx new file mode 100644 index 00000000..e977efd4 --- /dev/null +++ b/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 ( + + +

Recently Connected

+ + + ); +}; diff --git a/src/screens/Default/Connect/index.tsx b/src/screens/Default/Connect/index.tsx index db137e88..c99687a5 100644 --- a/src/screens/Default/Connect/index.tsx +++ b/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 = () => ( + );