network agnostic bookmarks (#162)

* network agnostic bookmarks
* bookmark data structure migration

src/components/molecules/Bookmarks.tsx

@@ -7,20 +7,21 @@ import { Link } from 'gatsby'
 import styles from './Bookmarks.module.css'
 import Price from '../atoms/Price'
 import Tooltip from '../atoms/Tooltip'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 
-async function getAssetsBookmarked(pins: string[], metadataCacheUri: string) {
+async function getAssetsBookmarked(
-  try {
+  bookmarks: string[],
-    const metadataCache = new MetadataCache(metadataCacheUri, Logger)
+  metadataCacheUri: string
-    const result: DDO[] = []
+) {
+  const metadataCache = new MetadataCache(metadataCacheUri, Logger)
+  const result: DDO[] = []
 
-    for (const pin of pins) {
+  for (const bookmark of bookmarks) {
-      result.push(await metadataCache.retrieveDDO(pin))
+    const ddo = bookmark && (await metadataCache.retrieveDDO(bookmark))
-    }
+    ddo && result.push(ddo)
-
-    return result
-  } catch (error) {
-    Logger.error(error.message)
   }
+
+  return result
 }
 
 const columns = [
@@ -63,19 +64,32 @@ export default function Bookmarks(): ReactElement {
   const [isLoading, setIsLoading] = useState<boolean>()
 
   useEffect(() => {
-    if (!bookmarks || !bookmarks.length) return
+    if (!config || bookmarks === {}) return
+
+    const networkName = (config as ConfigHelperConfig).network
 
     async function init() {
+      if (!bookmarks[networkName]?.length) {
+        setPinned([])
+        return
+      }
+
       setIsLoading(true)
-      const resultPinned = await getAssetsBookmarked(
+
-        bookmarks,
+      try {
-        config.metadataCacheUri
+        const resultPinned = await getAssetsBookmarked(
-      )
+          bookmarks[networkName],
-      setPinned(resultPinned)
+          config.metadataCacheUri
+        )
+        setPinned(resultPinned)
+      } catch (error) {
+        Logger.error(error.message)
+      }
+
       setIsLoading(false)
     }
     init()
-  }, [bookmarks, config.metadataCacheUri])
+  }, [bookmarks, config.metadataCacheUri, config])
 
   return (
     <Table

src/components/organisms/AssetContent/Bookmark.tsx

@@ -2,10 +2,15 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
 import React, { ReactElement } from 'react'
 import styles from './Bookmark.module.css'
 import { ReactComponent as BookmarkIcon } from '../../../images/bookmark.svg'
+import { useOcean } from '@oceanprotocol/react'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 
 export default function Bookmark({ did }: { did: string }): ReactElement {
+  const { config } = useOcean()
   const { bookmarks, addBookmark, removeBookmark } = useUserPreferences()
-  const isBookmarked = bookmarks?.includes(did)
+  const isBookmarked =
+    bookmarks &&
+    bookmarks[(config as ConfigHelperConfig).network]?.includes(did)
 
   function handleBookmark() {
     isBookmarked ? removeBookmark(did) : addBookmark(did)

src/providers/UserPreferences.tsx

@@ -8,12 +8,17 @@ import React, {
 } from 'react'
 import { Logger } from '@oceanprotocol/lib'
 import { LogLevel } from '@oceanprotocol/lib/dist/node/utils/Logger'
+import { useOcean } from '@oceanprotocol/react'
+import { getNetworkName } from '../utils/wallet'
+import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
 
 interface UserPreferencesValue {
   debug: boolean
   currency: string
   locale: string
-  bookmarks: string[]
+  bookmarks: {
+    [network: string]: string[]
+  }
   setDebug: (value: boolean) => void
   setCurrency: (value: string) => void
   addBookmark: (did: string) => void
@@ -43,6 +48,8 @@ function UserPreferencesProvider({
 }: {
   children: ReactNode
 }): ReactElement {
+  const { config } = useOcean()
+  const networkName = (config as ConfigHelperConfig).network
   const localStorage = getLocalStorage()
 
   // Set default values from localStorage
@@ -51,7 +58,7 @@ function UserPreferencesProvider({
     localStorage?.currency || 'EUR'
   )
   const [locale, setLocale] = useState<string>()
-  const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || [])
+  const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || {})
 
   // Write values to localStorage on change
   useEffect(() => {
@@ -72,15 +79,30 @@ function UserPreferencesProvider({
   }, [])
 
   function addBookmark(didToAdd: string): void {
-    const newPinned = [didToAdd].concat(bookmarks)
+    const newPinned = {
+      ...bookmarks,
+      [networkName]: [didToAdd].concat(bookmarks[networkName])
+    }
     setBookmarks(newPinned)
   }
 
   function removeBookmark(didToAdd: string): void {
-    const newPinned = bookmarks.filter((did: string) => did !== didToAdd)
+    const newPinned = {
+      ...bookmarks,
+      [networkName]: bookmarks[networkName].filter(
+        (did: string) => did !== didToAdd
+      )
+    }
     setBookmarks(newPinned)
   }
 
+  // Bookmarks old data structure migration
+  useEffect(() => {
+    if (!bookmarks.length) return
+    const newPinned = { mainnet: bookmarks as any }
+    setBookmarks(newPinned)
+  }, [bookmarks])
+
   return (
     <UserPreferencesContext.Provider
       value={