()
+
+ const noBookmarks = !bookmarks || !bookmarks.length
+
+ useEffect(() => {
+ if (noBookmarks) return
+
+ async function init() {
+ setIsLoading(true)
+ const resultPinned = await getAssetsBookmarked(
+ bookmarks,
+ config.metadataCacheUri
+ )
+ setPinned(resultPinned)
+ setIsLoading(false)
+ }
+ init()
+ }, [bookmarks, config.metadataCacheUri, noBookmarks])
+
+ return noBookmarks ? (
+ Your bookmarks will appear here.
+ ) : (
+
+ )
+}
diff --git a/src/components/organisms/AssetContent/Bookmark.module.css b/src/components/organisms/AssetContent/Bookmark.module.css
new file mode 100644
index 000000000..19b19db0a
--- /dev/null
+++ b/src/components/organisms/AssetContent/Bookmark.module.css
@@ -0,0 +1,28 @@
+.bookmark {
+ position: absolute;
+ top: -10px;
+ right: calc(var(--spacer) / 4);
+ appearance: none;
+ background: none;
+ border: none;
+ box-shadow: none;
+ outline: 0;
+ cursor: pointer;
+ transition: 0.2s ease-out;
+}
+
+.bookmark svg {
+ fill: var(--brand-grey-light);
+ height: 40px;
+ width: 40px;
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
+}
+
+.bookmark:hover,
+.bookmark:focus {
+ transform: translate3d(0, 6px, 0);
+}
+
+.bookmark.active svg {
+ fill: var(--brand-violet);
+}
diff --git a/src/components/organisms/AssetContent/Bookmark.tsx b/src/components/organisms/AssetContent/Bookmark.tsx
new file mode 100644
index 000000000..9914818fb
--- /dev/null
+++ b/src/components/organisms/AssetContent/Bookmark.tsx
@@ -0,0 +1,23 @@
+import { useUserPreferences } from '../../../providers/UserPreferences'
+import React, { ReactElement } from 'react'
+import styles from './Bookmark.module.css'
+import { ReactComponent as BookmarkIcon } from '../../../images/bookmark.svg'
+
+export default function Bookmark({ did }: { did: string }): ReactElement {
+ const { bookmarks, addBookmark, removeBookmark } = useUserPreferences()
+ const isBookmarked = bookmarks?.includes(did)
+
+ function handleBookmark() {
+ isBookmarked ? removeBookmark(did) : addBookmark(did)
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index fd6784518..471f4091b 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -12,6 +12,7 @@
.content {
composes: box from '../../atoms/Box.module.css';
margin-top: var(--spacer);
+ position: relative;
}
@media (min-width: 60rem) {
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 63e4bffac..7b25c03f4 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -1,6 +1,5 @@
import { MetadataMarket } from '../../../@types/MetaData'
import React, { ReactElement } from 'react'
-import Time from '../../atoms/Time'
import { Link } from 'gatsby'
import Markdown from '../../atoms/Markdown'
import MetaFull from './MetaFull'
@@ -12,7 +11,7 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
import Pricing from './Pricing'
import { useOcean, usePricing } from '@oceanprotocol/react'
import EtherscanLink from '../../atoms/EtherscanLink'
-import MetaItem from './MetaItem'
+import Bookmark from './Bookmark'
export interface AssetContentProps {
metadata: MetadataMarket
@@ -89,6 +88,8 @@ export default function AssetContent({
{JSON.stringify(ddo, null, 2)}
)}
+
+
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index b8d8ab4a5..edb9e7f3d 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -11,6 +11,7 @@ import Container from '../atoms/Container'
import Loader from '../atoms/Loader'
import { useOcean } from '@oceanprotocol/react'
import Button from '../atoms/Button'
+import Bookmarks from '../molecules/Bookmarks'
const queryHighest = {
page: 1,
@@ -46,6 +47,7 @@ async function getAssets(query: SearchQuery, metadataCacheUri: string) {
export default function HomePage(): ReactElement {
const { config } = useOcean()
+
const [queryResultLatest, setQueryResultLatest] = useState()
const [queryResultPoolsLatest, setQueryResultPoolsLatest] = useState<
QueryResult
@@ -83,6 +85,11 @@ export default function HomePage(): ReactElement {
+
+
Highest Liquidity Pools
{loading ? (
diff --git a/src/images/bookmark.svg b/src/images/bookmark.svg
new file mode 100644
index 000000000..95ed52f19
--- /dev/null
+++ b/src/images/bookmark.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/providers/UserPreferences.tsx b/src/providers/UserPreferences.tsx
index ce5db4463..b4201dee7 100644
--- a/src/providers/UserPreferences.tsx
+++ b/src/providers/UserPreferences.tsx
@@ -13,8 +13,11 @@ interface UserPreferencesValue {
debug: boolean
currency: string
locale: string
+ bookmarks: string[]
setDebug: (value: boolean) => void
setCurrency: (value: string) => void
+ addBookmark: (did: string) => void
+ removeBookmark: (did: string) => void
}
const UserPreferencesContext = createContext(null)
@@ -48,13 +51,14 @@ function UserPreferencesProvider({
localStorage?.currency || 'EUR'
)
const [locale, setLocale] = useState()
+ const [bookmarks, setBookmarks] = useState(localStorage?.bookmarks || [])
// Write values to localStorage on change
useEffect(() => {
- setLocalStorage({ debug, currency })
- }, [debug, currency])
+ setLocalStorage({ debug, currency, bookmarks })
+ }, [debug, currency, bookmarks])
- // Set ocean-lib-js log levels, default: Error
+ // Set ocean.js log levels, default: Error
useEffect(() => {
debug === true
? Logger.setLevel(LogLevel.Verbose)
@@ -67,6 +71,16 @@ function UserPreferencesProvider({
setLocale(window.navigator.language)
}, [])
+ function addBookmark(didToAdd: string): void {
+ const newPinned = bookmarks.concat(didToAdd)
+ setBookmarks(newPinned)
+ }
+
+ function removeBookmark(didToAdd: string): void {
+ const newPinned = bookmarks.filter((did: string) => did !== didToAdd)
+ setBookmarks(newPinned)
+ }
+
return (