feat: favourite markets (#2650)

Co-authored-by: mark hinschberger <markhinschberger@gmail.com>

Author: mgrabina

public/icons/networks/ink.svg

@@ -1,9 +1,10 @@
 import { ChevronDownIcon } from '@heroicons/react/outline';
-import { ExternalLinkIcon } from '@heroicons/react/solid';
+import { ExternalLinkIcon, StarIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
 import {
   Box,
   BoxProps,
+  IconButton,
   ListItemText,
   MenuItem,
   SvgIcon,
@@ -111,6 +112,35 @@ enum SelectedMarketVersion {
   V3,
 }
 
+// Custom market order requested by BD - TODO: move logic to the backend base on TVL
+const MARKET_ORDER_BY_TITLE: { [title: string]: number } = {
+  Core: 0,
+  Prime: 1,
+  Base: 2,
+  Arbitrum: 3,
+  Avalanche: 4,
+  Linea: 5,
+  'Horizon RWA': 6,
+  Sonic: 7,
+  OP: 8,
+  Gnosis: 9,
+  Aptos: 10,
+  'BNB Chain': 11,
+  Polygon: 12,
+  Scroll: 13,
+  ZKsync: 14,
+  Celo: 15,
+  Metis: 16,
+  Soneium: 17,
+  EtherFi: 18,
+};
+
+const getMarketOrder = (marketId: CustomMarket): number => {
+  const { market } = getMarketInfoById(marketId);
+  const marketTitle = market.marketTitle;
+  return MARKET_ORDER_BY_TITLE[marketTitle] ?? 999; // Default to end if not found
+};
+
 export const MarketSwitcher = () => {
   const [selectedMarketVersion, setSelectedMarketVersion] = useState<SelectedMarketVersion>(
     SelectedMarketVersion.V3
@@ -121,6 +151,10 @@ export const MarketSwitcher = () => {
   const [trackEvent, currentMarket, setCurrentMarket] = useRootStore(
     useShallow((store) => [store.trackEvent, store.currentMarket, store.setCurrentMarket])
   );
+  const isFavoriteMarket = useRootStore((store) => store.isFavoriteMarket);
+  const toggleFavoriteMarket = useRootStore((store) => store.toggleFavoriteMarket);
+  // Subscribe to favoriteMarkets to trigger re-renders when favorites change
+  useRootStore((store) => store.favoriteMarkets);
 
   const isV3MarketsAvailable = availableMarkets
     .map((marketId: CustomMarket) => {
@@ -143,6 +177,12 @@ export const MarketSwitcher = () => {
     setCurrentMarket(selectedMarket);
   };
 
+  const handleStarClick = (e: React.MouseEvent, marketId: CustomMarket) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleFavoriteMarket(marketId);
+  };
+
   const marketBlurbs: { [key: string]: JSX.Element } = {
     proto_mainnet_v3: (
       <Trans>Main Ethereum market with the largest selection of assets and yield options</Trans>
@@ -385,53 +425,94 @@ export const MarketSwitcher = () => {
           </StyledToggleButtonGroup>
         </Box>
       )}
-      {availableMarkets.map((marketId: CustomMarket) => {
-        const { market, logo } = getMarketInfoById(marketId);
-        const marketNaming = getMarketHelpData(market.marketTitle);
-        return (
-          <MenuItem
-            key={marketId}
-            data-cy={`marketSelector_${marketId}`}
-            value={marketId}
-            sx={{
-              '.MuiListItemIcon-root': { minWidth: 'unset' },
-              display:
-                (market.v3 && selectedMarketVersion === SelectedMarketVersion.V2) ||
-                (!market.v3 && selectedMarketVersion === SelectedMarketVersion.V3)
-                  ? 'none'
-                  : 'flex',
-            }}
-          >
-            <MarketLogo size={32} logo={logo} testChainName={marketNaming.testChainName} />
-            <ListItemText sx={{ mr: 0 }}>
-              {marketNaming.name} {market.isFork ? 'Fork' : ''}
-            </ListItemText>
-            <ListItemText
+      {availableMarkets
+        .slice() // Create a copy to avoid mutating the original array
+        .sort((a, b) => {
+          const aIsFavorite = isFavoriteMarket(a);
+          const bIsFavorite = isFavoriteMarket(b);
+
+          // If both are favorites or both are not favorites, maintain custom order
+          if (aIsFavorite === bIsFavorite) {
+            return getMarketOrder(a) - getMarketOrder(b);
+          }
+
+          // Otherwise, favorites come first
+          return aIsFavorite ? -1 : 1;
+        })
+        .map((marketId: CustomMarket) => {
+          const { market, logo } = getMarketInfoById(marketId);
+          const marketNaming = getMarketHelpData(market.marketTitle);
+          const isFavorite = isFavoriteMarket(marketId);
+          return (
+            <MenuItem
+              key={marketId}
+              data-cy={`marketSelector_${marketId}`}
+              value={marketId}
               sx={{
-                textAlign: 'right',
-                display: 'flex',
-                alignItems: 'center',
-                flexDirection: 'row-reverse',
-                gap: 1,
+                '.MuiListItemIcon-root': { minWidth: 'unset' },
+                display:
+                  (market.v3 && selectedMarketVersion === SelectedMarketVersion.V2) ||
+                  (!market.v3 && selectedMarketVersion === SelectedMarketVersion.V3)
+                    ? 'none'
+                    : 'flex',
               }}
             >
-              <Typography color="text.muted" variant="description">
-                {marketNaming.testChainName}
-              </Typography>
-              {market.externalUrl && (
-                <SvgIcon
-                  sx={{
-                    fontSize: '16px',
-                    color: 'text.muted',
-                  }}
-                >
-                  <ExternalLinkIcon />
-                </SvgIcon>
-              )}
-            </ListItemText>
-          </MenuItem>
-        );
-      })}
+              <MarketLogo size={32} logo={logo} testChainName={marketNaming.testChainName} />
+              <ListItemText sx={{ mr: 0 }}>
+                {marketNaming.name} {market.isFork ? 'Fork' : ''}
+              </ListItemText>
+              <ListItemText
+                sx={{
+                  textAlign: 'right',
+                  display: 'flex',
+                  alignItems: 'center',
+                  flexDirection: 'row-reverse',
+                  gap: 1,
+                }}
+              >
+                <Typography color="text.muted" variant="description">
+                  {marketNaming.testChainName}
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  {market.externalUrl && (
+                    <SvgIcon
+                      sx={{
+                        fontSize: '16px',
+                        color: 'text.muted',
+                      }}
+                    >
+                      <ExternalLinkIcon />
+                    </SvgIcon>
+                  )}
+                  <Tooltip title={isFavorite ? 'Remove from favorites' : 'Add to favorites'}>
+                    <IconButton
+                      size="small"
+                      onClick={(e) => handleStarClick(e, marketId)}
+                      sx={{
+                        padding: '2px',
+                        '&:hover': {
+                          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                        },
+                      }}
+                    >
+                      <SvgIcon
+                        sx={{
+                          fontSize: '18px',
+                          color: isFavorite ? '#FBCC5F' : 'text.disabled',
+                          '&:hover': {
+                            color: isFavorite ? '#FBCC5F' : 'text.secondary',
+                          },
+                        }}
+                      >
+                        <StarIcon />
+                      </SvgIcon>
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              </ListItemText>
+            </MenuItem>
+          );
+        })}
     </TextField>
   );
 };

src/components/MarketSwitcher.tsx

@@ -1,5 +1,6 @@
+import { StarIcon } from '@heroicons/react/solid';
 import { Trans } from '@lingui/macro';
-import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, SvgIcon, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
 
 import { useRootStore } from '../../store/root';
@@ -13,16 +14,33 @@ export interface PageTitleProps extends Pick<NetworkConfig, 'bridge'> {
   pageTitle?: ReactNode;
   withMarketSwitcher?: boolean;
   withMigrateButton?: boolean;
+  withFavoriteButton?: boolean;
 }
 
-export const PageTitle = ({ pageTitle, withMarketSwitcher, withMigrateButton }: PageTitleProps) => {
+export const PageTitle = ({
+  pageTitle,
+  withMarketSwitcher,
+  withMigrateButton,
+  withFavoriteButton,
+}: PageTitleProps) => {
   const isMigrateToV3Available = useRootStore((state) => selectIsMigrationAvailable(state));
+  const currentMarket = useRootStore((state) => state.currentMarket);
+  const isFavoriteMarket = useRootStore((state) => state.isFavoriteMarket);
+  const toggleFavoriteMarket = useRootStore((state) => state.toggleFavoriteMarket);
+  // Subscribe to favoriteMarkets to trigger re-renders when favorites change
+  useRootStore((state) => state.favoriteMarkets);
 
   const theme = useTheme();
   const upToLG = useMediaQuery(theme.breakpoints.up('lg'));
   // const upToMD = useMediaQuery(theme.breakpoints.up('md'));
   const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
 
+  const isCurrentMarketFavorite = isFavoriteMarket(currentMarket);
+
+  const handleFavoriteClick = () => {
+    toggleFavoriteMarket(currentMarket);
+  };
+
   return (
     <Box
       sx={{
@@ -53,17 +71,51 @@ export const PageTitle = ({ pageTitle, withMarketSwitcher, withMigrateButton }:
           alignItems: 'flex-start',
           flexWrap: 'wrap',
           mb: !pageTitle ? 4 : 0,
+          justifyContent: 'space-between',
+          width: '100%',
         }}
       >
-        {withMarketSwitcher && <MarketSwitcher />}
-        {/* <BridgeButton bridge={bridge} variant="surface" withoutIcon={!upToMD} /> */}
-        {/* NOTE:// Removing for now  */}
-        {isMigrateToV3Available && withMigrateButton && (
-          <Link href={ROUTES.migrationTool} sx={{ mt: { xs: 2, xsm: 0 } }}>
-            <Button variant="gradient" size="small">
-              <Trans>Migrate to V3</Trans>
-            </Button>
-          </Link>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+          {withMarketSwitcher && <MarketSwitcher />}
+          {/* <BridgeButton bridge={bridge} variant="surface" withoutIcon={!upToMD} /> */}
+          {/* NOTE:// Removing for now  */}
+          {isMigrateToV3Available && withMigrateButton && (
+            <Link href={ROUTES.migrationTool} sx={{ mt: { xs: 2, xsm: 0 } }}>
+              <Button variant="gradient" size="small">
+                <Trans>Migrate to V3</Trans>
+              </Button>
+            </Link>
+          )}
+        </Box>
+
+        {withFavoriteButton && (
+          <Button
+            onClick={handleFavoriteClick}
+            variant="surface"
+            sx={{
+              display: { xs: 'none', sm: 'flex' }, // Hide on mobile (xs), show on small screens and up
+              p: '7px 8px',
+              minWidth: 'unset',
+              gap: 2,
+              alignItems: 'center',
+            }}
+            aria-label="Favorite tool"
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+              <SvgIcon
+                sx={{
+                  fontSize: '18px !important',
+                  color: isCurrentMarketFavorite ? '#FBCC5F' : 'rgba(255, 255, 255, 0.3)',
+                }}
+              >
+                <StarIcon />
+              </SvgIcon>
+            </Box>
+
+            <Typography component="span" typography="subheader1" sx={{ fontWeight: 500 }}>
+              {isCurrentMarketFavorite ? <Trans>Favourited</Trans> : <Trans>Favourite</Trans>}
+            </Typography>
+          </Button>
         )}
       </Box>
     </Box>

src/components/TopInfoPanel/PageTitle.tsx

@@ -14,6 +14,7 @@ export const TopInfoPanel = ({
   titleComponent,
   withMarketSwitcher,
   withMigrateButton,
+  withFavoriteButton,
   bridge,
   children,
   containerProps = {},
@@ -34,6 +35,7 @@ export const TopInfoPanel = ({
               pageTitle={pageTitle}
               withMarketSwitcher={withMarketSwitcher}
               withMigrateButton={withMigrateButton}
+              withFavoriteButton={withFavoriteButton}
               bridge={bridge}
             />
           )}

src/components/TopInfoPanel/TopInfoPanel.tsx

@@ -282,6 +282,10 @@ msgstr "Total Deposited"
 msgid "{0}{name}"
 msgstr "{0}{name}"
 
+#: src/components/TopInfoPanel/PageTitle.tsx
+msgid "Favourited"
+msgstr "Favourited"
+
 #: src/ui-config/errorMapping.tsx
 msgid "Stable borrowing is enabled"
 msgstr "Stable borrowing is enabled"
@@ -3000,6 +3004,10 @@ msgstr "Your {name} wallet is empty. Purchase or transfer assets or use <0>{0}</
 msgid "Checking approval"
 msgstr "Checking approval"
 
+#: src/components/TopInfoPanel/PageTitle.tsx
+msgid "Favourite"
+msgstr "Favourite"
+
 #: src/modules/staking/BuyWithFiat.tsx
 msgid "Buy {cryptoSymbol} with Fiat"
 msgstr "Buy {cryptoSymbol} with Fiat"

src/locales/el/messages.js

@@ -35,6 +35,7 @@ export const MarketsTopPanel = () => {
       containerProps={marketContainerProps}
       pageTitle={<Trans>Markets</Trans>}
       withMarketSwitcher
+      withFavoriteButton
     >
       <TopInfoPanelItem hideIcon title={<Trans>Total market size</Trans>} loading={loading}>
         <FormattedNumber