Fix watchlist (#245)

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,19 +29,19 @@ interface Props {
 }
 
 const SettingsProvider = ({ children }: Props) => {
-  const [watchList, setWatchList] = useState<number[]>([]);
+  const [watchList, setWatchList] = useState<Parachain[]>([]);
 
   useEffect(() => {
     const strItem = localStorage.getItem(KEY_SETTINGS);
     if (!strItem) {
       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));
   };

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