Feat watchlist notifications (#2276)

* Revert "Stash away portfolio notifications components"

This reverts commit 34138ed.

* wip

* Switch to form controls

* WIP

* cleanup

* cleanup

* Updates

* minor updates

Author: Caranell

public/icons/v25.svg renamed to public/icons/v26.svg

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 import { Icon } from '~/components/Icon'
-import { useWatchlistManager } from '~/contexts/LocalStorage'
+import { useBookmarks } from '~/hooks/useBookmarks'
 
 interface IBookmarkProps {
 	readableName: string
@@ -15,7 +15,7 @@ export function Bookmark({ readableName, isChain, ...props }: IBookmarkProps) {
 
 	const watchlistType = isChain ? 'chains' : router.pathname.includes('/yields') ? 'yields' : 'defi'
 
-	const { savedProtocols, addProtocol, removeProtocol } = useWatchlistManager(watchlistType)
+	const { savedProtocols, addProtocol, removeProtocol } = useBookmarks(watchlistType)
 
 	const isSaved: boolean = savedProtocols.has(readableName)
 

src/components/Bookmark.tsx

@@ -92,14 +92,15 @@ type Name =
 	| 'layout-grid'
 	| 'arrow-down'
 	| 'share'
+	| 'pause'
 
 export interface IIcon extends SVGProps<SVGSVGElement> {
 	name: Name
 }
 export const Icon = memo(function Icon({ name, ...props }: IIcon) {
 	return (
 		<svg {...props}>
-			<use href={`/icons/v25.svg#${name}`} />
+			<use href={`/icons/v26.svg#${name}`} />
 		</svg>
 	)
 })

src/components/Icon.tsx

@@ -0,0 +1,25 @@
+export const protocolMetrics = [
+	{ key: 'tvl', name: 'TVL' },
+	{ key: 'volume', name: 'Volume' },
+	{ key: 'perp_volume', name: 'Perps Volume' },
+	{ key: 'fees', name: 'Fees' },
+	{ key: 'revenue', name: 'Revenue' },
+	{ key: 'mcap', name: 'Market Cap' },
+	{ key: 'price', name: 'Price' },
+	{ key: 'fdv', name: 'FDV' },
+	{ key: 'outstanding_fdv', name: 'Outstanding FDV' }
+]
+
+export const chainMetrics = [
+	{ key: 'tvl', name: 'TVL' },
+	{ key: 'volume', name: 'Volume' },
+	{ key: 'perp_volume', name: 'Perps Volume' },
+	{ key: 'fees', name: 'Fees' },
+	{ key: 'revenue', name: 'Revenue' },
+	{ key: 'mcap', name: 'Market Cap' },
+	{ key: 'price', name: 'Price' },
+	{ key: 'fdv', name: 'FDV' },
+	{ key: 'inflows', name: 'Inflows' },
+	{ key: 'stablecoins', name: 'Stablecoins' },
+	{ key: 'bridge_volume', name: 'Bridge Volume' }
+]