fix: issue#2573: show GHO in core markets & link banner GHO to sGHO savings. (#2575)

Author: AGMASO

src/components/primitives/Link.tsx

@@ -12,10 +12,10 @@ const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    'href' | 'onClick' | 'onMouseEnter' | 'onTouchStart'
-  >,
-  Omit<NextLinkProps, 'href' | 'as' | 'onClick' | 'onMouseEnter' | 'onTouchStart'> {
+      AnchorHTMLAttributes<HTMLAnchorElement>,
+      'href' | 'onClick' | 'onMouseEnter' | 'onTouchStart'
+    >,
+    Omit<NextLinkProps, 'href' | 'as' | 'onClick' | 'onMouseEnter' | 'onTouchStart'> {
   to: NextLinkProps['href'];
   linkAs?: NextLinkProps['as'];
   href?: NextLinkProps['href'];

src/modules/markets/Gho/GhoBanner.tsx

@@ -4,17 +4,12 @@ import { Box, Button, Skeleton, Stack, Typography, useMediaQuery, useTheme } fro
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 import { Link, ROUTES } from 'src/components/primitives/Link';
 import { TokenIcon } from 'src/components/primitives/TokenIcon';
-import { FormattedReservesAndIncentives } from 'src/hooks/pool/usePoolFormattedReserves';
 import { useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
 import { useMeritIncentives } from 'src/hooks/useMeritIncentives';
 import { useRootStore } from 'src/store/root';
 import { GHO_SYMBOL } from 'src/utils/ghoUtilities';
 
-interface GhoBannerProps {
-  reserve?: FormattedReservesAndIncentives;
-}
-
-export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
+export const SavingsGhoBanner = () => {
   const theme = useTheme();
   const isCustomBreakpoint = useMediaQuery('(min-width:1125px)');
   const isMd = useMediaQuery(theme.breakpoints.up('xs'));
@@ -23,7 +18,7 @@ export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
   const downToSm = useMediaQuery('(max-width:780px)');
 
   const currentMarketData = useRootStore((store) => store.currentMarketData);
-  const currentMarket = useRootStore((store) => store.currentMarket);
+
   const { data: meritIncentives, isLoading: meritIncentivesLoading } = useMeritIncentives({
     symbol: GHO_SYMBOL,
     market: currentMarketData.market,
@@ -36,7 +31,7 @@ export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
   const stakeData = stakeGeneralResult?.[0];
 
   if (downToSm) {
-    return <GhoSavingsBannerMobile reserve={reserve} />;
+    return <GhoSavingsBannerMobile />;
   }
 
   return (
@@ -53,7 +48,7 @@ export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
     >
       <Stack
         component={Link}
-        href={ROUTES.reserveOverview(reserve?.underlyingAsset || '', currentMarket)}
+        href={ROUTES.sGHO}
         sx={(theme) => ({
           [theme.breakpoints.up(780)]: {
             height: '116px',
@@ -178,9 +173,8 @@ export const SavingsGhoBanner = ({ reserve }: GhoBannerProps) => {
   );
 };
 
-const GhoSavingsBannerMobile = ({ reserve }: GhoBannerProps) => {
+const GhoSavingsBannerMobile = () => {
   const currentMarketData = useRootStore((store) => store.currentMarketData);
-  const currentMarket = useRootStore((store) => store.currentMarket);
   const { data: meritIncentives, isLoading: meritIncentivesLoading } = useMeritIncentives({
     symbol: GHO_SYMBOL,
     market: currentMarketData.market,
@@ -206,7 +200,7 @@ const GhoSavingsBannerMobile = ({ reserve }: GhoBannerProps) => {
     >
       <Stack
         component={Link}
-        href={ROUTES.reserveOverview(reserve?.underlyingAsset || '', currentMarket)}
+        href={ROUTES.sGHO}
         sx={(theme) => ({
           [theme.breakpoints.up(780)]: {
             height: '116px',
@@ -279,13 +273,7 @@ const GhoSavingsBannerMobile = ({ reserve }: GhoBannerProps) => {
               </Typography>
             </Stack>
           </Stack>
-          <Button
-            variant="contained"
-            fullWidth
-            component={Link}
-            size="medium"
-            href={ROUTES.reserveOverview(reserve?.underlyingAsset || '', currentMarket)}
-          >
+          <Button variant="contained" fullWidth component={Link} size="medium" href={ROUTES.sGHO}>
             <Trans>View details</Trans>
           </Button>
         </Stack>

src/modules/markets/MarketAssetsListContainer.tsx

@@ -11,7 +11,7 @@ import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvide
 import MarketAssetsList from 'src/modules/markets/MarketAssetsList';
 import { useRootStore } from 'src/store/root';
 import { fetchIconSymbolAndName } from 'src/ui-config/reservePatches';
-import { getGhoReserve, GHO_MINTING_MARKETS, GHO_SYMBOL } from 'src/utils/ghoUtilities';
+import { GHO_MINTING_MARKETS, GHO_SYMBOL } from 'src/utils/ghoUtilities';
 import { useShallow } from 'zustand/shallow';
 
 import { GENERAL } from '../../utils/events';
@@ -48,14 +48,11 @@ export const MarketAssetsListContainer = () => {
   const { breakpoints } = useTheme();
   const sm = useMediaQuery(breakpoints.down('sm'));
 
-  const ghoReserve = getGhoReserve(reserves);
   const displayGhoBanner = shouldDisplayGhoBanner(currentMarket, searchTerm);
 
   const filteredData = reserves
     // Filter out any non-active reserves
     .filter((res) => res.isActive)
-    // Filter out GHO if the banner is being displayed
-    .filter((res) => (displayGhoBanner ? res !== ghoReserve : true))
     // filter out any that don't meet search term criteria
     .filter((res) => {
       if (!searchTerm) return true;
@@ -104,7 +101,7 @@ export const MarketAssetsListContainer = () => {
     >
       {displayGhoBanner && (
         <Box mb={4}>
-          <SavingsGhoBanner reserve={ghoReserve} />
+          <SavingsGhoBanner />
         </Box>
       )}