diff --git a/src/components/molecules/Bookmarks.tsx b/src/components/molecules/Bookmarks.tsx index a60e1c795..40c12d69b 100644 --- a/src/components/molecules/Bookmarks.tsx +++ b/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) { - try { - const metadataCache = new MetadataCache(metadataCacheUri, Logger) - const result: DDO[] = [] +async function getAssetsBookmarked( + bookmarks: string[], + metadataCacheUri: string +) { + const metadataCache = new MetadataCache(metadataCacheUri, Logger) + const result: DDO[] = [] - for (const pin of pins) { - result.push(await metadataCache.retrieveDDO(pin)) - } - - return result - } catch (error) { - Logger.error(error.message) + for (const bookmark of bookmarks) { + const ddo = bookmark && (await metadataCache.retrieveDDO(bookmark)) + ddo && result.push(ddo) } + + return result } const columns = [ @@ -63,19 +64,32 @@ export default function Bookmarks(): ReactElement { const [isLoading, setIsLoading] = useState() 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, - config.metadataCacheUri - ) - setPinned(resultPinned) + + try { + const resultPinned = await getAssetsBookmarked( + bookmarks[networkName], + config.metadataCacheUri + ) + setPinned(resultPinned) + } catch (error) { + Logger.error(error.message) + } + setIsLoading(false) } init() - }, [bookmarks, config.metadataCacheUri]) + }, [bookmarks, config.metadataCacheUri, config]) return ( 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() - 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 (