remove all favorites button

components/shared/FavoriteMarketButton.tsx

@@ -2,7 +2,7 @@ import { StarIcon } from '@heroicons/react/24/outline'
 import { StarIcon as FilledStarIcon } from '@heroicons/react/20/solid'
 import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
 import useLocalStorageState from 'hooks/useLocalStorageState'
-import { FAVORITE_MARKETS_KEY } from 'utils/constants'
+import { DEFAULT_FAVORITE_MKTS, FAVORITE_MARKETS_KEY } from 'utils/constants'
 
 const FavoriteMarketButton = ({
   market,
@@ -11,7 +11,7 @@ const FavoriteMarketButton = ({
 }) => {
   const [favoriteMarkets, setFavoriteMarkets] = useLocalStorageState<string[]>(
     FAVORITE_MARKETS_KEY,
-    [],
+    DEFAULT_FAVORITE_MKTS,
   )
 
   const addToFavorites = (marketName: string) => {

components/trade/FavoriteMarketsBar.tsx

@@ -4,11 +4,15 @@ import useLocalStorageState from 'hooks/useLocalStorageState'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import Link from 'next/link'
-import { FAVORITE_MARKETS_KEY } from 'utils/constants'
+import { DEFAULT_FAVORITE_MKTS, FAVORITE_MARKETS_KEY } from 'utils/constants'
 import MarketLogos from './MarketLogos'
+import Tooltip from '@components/shared/Tooltip'
 
 const FavoriteMarketsBar = () => {
-  const [favoriteMarkets] = useLocalStorageState(FAVORITE_MARKETS_KEY, [])
+  const [favoriteMarkets, setFavorites] = useLocalStorageState(
+    FAVORITE_MARKETS_KEY,
+    DEFAULT_FAVORITE_MKTS,
+  )
   const { selectedMarket } = useSelectedMarket()
   const { group } = useMangoGroup()
 
@@ -23,7 +27,11 @@ const FavoriteMarketsBar = () => {
       leaveFrom="opacity-100 h-8"
       leaveTo="opacity-0 h-0"
     >
-      <StarIcon className="h-4 w-4 flex-shrink-0 text-th-fgd-4" />
+      <Tooltip content="Remove all favorites">
+        <div onClick={() => setFavorites([])} className="cursor-pointer">
+          <StarIcon className="h-4 w-4 flex-shrink-0 text-th-fgd-4" />
+        </div>
+      </Tooltip>
       {favoriteMarkets.map((mkt: string) => {
         // const change24h = marketsInfo?.find((m) => m.name === mkt)?.change24h
         const isPerp = mkt.includes('PERP')

utils/constants.ts

@@ -144,6 +144,13 @@ export const CUSTOM_TOKEN_ICONS: { [key: string]: boolean } = {
   'wbtc (portal)': true,
 }
 
+export const DEFAULT_FAVORITE_MKTS = [
+  'SOL-PERP',
+  'ETH-PERP',
+  'BTC-PERP',
+  'RNDR-PERP',
+]
+
 export const WHITE_LIST_API = 'https://api.mngo.cloud/whitelist/v1/'
 export const DAILY_SECONDS = 86400
 export const DAILY_MILLISECONDS = 86400000