diff --git a/src/contexts/settings/index.tsx b/src/contexts/settings/index.tsx index 7ac4d594..abf1b653 100644 --- a/src/contexts/settings/index.tsx +++ b/src/contexts/settings/index.tsx @@ -1,16 +1,23 @@ import { createContext, useContext, useEffect, useState } from 'react'; +import { NetworkType } from '@/models'; + const KEY_SETTINGS = 'settings'; +type Parachain = { + network: NetworkType; + paraId: number; +}; + // Stores and manages settings in and from the local storage interface SettingsData { - watchList: number[]; - setWatchList: (_watchList: number[]) => void; + watchList: Parachain[]; + setWatchList: (_watchList: Parachain[]) => void; } const defaultSettingsData: SettingsData = { watchList: [], - setWatchList: (_watchList: number[]) => { + setWatchList: (_watchList: Parachain[]) => { /** */ }, }; @@ -22,7 +29,7 @@ interface Props { } const SettingsProvider = ({ children }: Props) => { - const [watchList, setWatchList] = useState([]); + const [watchList, setWatchList] = useState([]); useEffect(() => { const strItem = localStorage.getItem(KEY_SETTINGS); @@ -30,11 +37,11 @@ const SettingsProvider = ({ children }: Props) => { setWatchList([]); return; } - const watchList = JSON.parse(strItem) as number[]; + const watchList = JSON.parse(strItem) as Parachain[]; setWatchList(watchList); }, []); - const updateWatchList = (watchList: number[]) => { + const updateWatchList = (watchList: Parachain[]) => { setWatchList(watchList); localStorage.setItem(KEY_SETTINGS, JSON.stringify(watchList)); }; diff --git a/src/pages/paras/index.tsx b/src/pages/paras/index.tsx index 0e5bfe8d..1276a64d 100644 --- a/src/pages/paras/index.tsx +++ b/src/pages/paras/index.tsx @@ -62,15 +62,20 @@ const ParachainManagement = () => { }; const onWatch = (id: number, watching: boolean) => { - const newList = watchList.filter((value) => value !== id); - if (watching) newList.push(id); + const newList = watchList.filter( + (value) => JSON.stringify(value) !== JSON.stringify({ network, paraId: id }) + ); + if (watching) newList.push({ network, paraId: id }); setWatchList(newList); }; useEffect(() => { const parasWithWatchInfo = parachains.map((para) => ({ ...para, - watching: watchList.includes(para.id), + watching: + watchList.findIndex( + (w) => JSON.stringify(w) === JSON.stringify({ network, paraId: para.id }) + ) >= 0, })); const filtered = parasWithWatchInfo.filter((para) => watchAll ? true : para.watching === true