feat: etherfi market [skip cypress] (#2172)

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@aave/contract-helpers": "1.30.2",
     "@aave/math-utils": "1.30.2",
-    "@bgd-labs/aave-address-book": "^3.0.1",
+    "@bgd-labs/aave-address-book": "^3.2.1",
     "@emotion/cache": "11.10.3",
     "@emotion/react": "11.10.4",
     "@emotion/server": "latest",

src/components/MarketSwitcher.tsx

@@ -30,18 +30,12 @@ import {
 import StyledToggleButton from './StyledToggleButton';
 import StyledToggleButtonGroup from './StyledToggleButtonGroup';
 
-export const MULTIPLE_MARKET_OPTIONS = [
-  CustomMarket.proto_mainnet_v3,
-  CustomMarket.proto_lido_v3,
-  'fork_proto_lido_v3',
-  'fork_proto_mainnet_v3',
-];
-
 export const getMarketInfoById = (marketId: CustomMarket) => {
   const market: MarketDataType = marketsData[marketId as CustomMarket];
   const network: BaseNetworkConfig = networkConfigs[market.chainId];
+  const logo = market.logo || network.networkLogoPath;
 
-  return { market, network };
+  return { market, logo };
 };
 
 export const getMarketHelpData = (marketName: string) => {
@@ -55,16 +49,9 @@ export const getMarketHelpData = (marketName: string) => {
     'Kovan',
     'Rinkeby',
   ];
-
   const arrayName = marketName.split(' ');
-
   const testChainName = arrayName.filter((el) => testChains.indexOf(el) > -1);
-
-  const marketTitle =
-    // Note: We keep Eth for Lido market and fetch Lido market data
-    marketName === 'Ethereum Lido Market'
-      ? 'Ethereum'
-      : arrayName.filter((el) => !testChainName.includes(el)).join(' ');
+  const marketTitle = arrayName.filter((el) => !testChainName.includes(el)).join(' ');
 
   return {
     name: marketTitle,
@@ -168,13 +155,13 @@ export const MarketSwitcher = () => {
           </SvgIcon>
         ),
         renderValue: (marketId) => {
-          const { market, network } = getMarketInfoById(marketId as CustomMarket);
+          const { market, logo } = getMarketInfoById(marketId as CustomMarket);
 
           return (
             <Box sx={{ display: 'flex', alignItems: 'center' }}>
               <MarketLogo
                 size={upToLG ? 32 : 28}
-                logo={network.networkLogoPath}
+                logo={logo}
                 testChainName={getMarketHelpData(market.marketTitle).testChainName}
               />
               <Box sx={{ mr: 1, display: 'inline-flex', alignItems: 'flex-start' }}>
@@ -187,8 +174,7 @@ export const MarketSwitcher = () => {
                   }}
                 >
                   {getMarketHelpData(market.marketTitle).name} {market.isFork ? 'Fork' : ''}
-                  {/* {upToLG && ' Market'} */}
-                  {upToLG && ''}
+                  {upToLG && ' Market'}
                 </Typography>
                 {market.v3 ? (
                   <Box
@@ -331,47 +317,35 @@ export const MarketSwitcher = () => {
           </StyledToggleButtonGroup>
         </Box>
       )}
-      {availableMarkets
-        .filter((marketId: CustomMarket) => {
-          const { market } = getMarketInfoById(marketId);
-
-          const excludedDropdownMarkets = ['proto_lido_v3'];
-
-          return !excludedDropdownMarkets.includes(marketId) && market;
-        })
-        .map((marketId: CustomMarket) => {
-          const { market, network } = 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={network.networkLogoPath}
-                testChainName={marketNaming.testChainName}
-              />
-              <ListItemText sx={{ mr: 0 }}>
-                {marketNaming.name} {market.isFork ? 'Fork' : ''}
-              </ListItemText>
-              <ListItemText sx={{ textAlign: 'right' }}>
-                <Typography color="text.muted" variant="description">
-                  {marketNaming.testChainName}
-                </Typography>
-              </ListItemText>
-            </MenuItem>
-          );
-        })}
+      {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 sx={{ textAlign: 'right' }}>
+              <Typography color="text.muted" variant="description">
+                {marketNaming.testChainName}
+              </Typography>
+            </ListItemText>
+          </MenuItem>
+        );
+      })}
     </TextField>
   );
 };

src/components/StyledToggleButton.tsx

@@ -1,69 +1,58 @@
 import { styled, ToggleButton, ToggleButtonProps } from '@mui/material';
 import React from 'react';
 
-interface CustomToggleButtonProps extends ToggleButtonProps {
-  unselectedBackgroundColor?: string;
-  maxWidth?: string;
-}
-
-const CustomToggleButton = styled(ToggleButton)<CustomToggleButtonProps>(
-  ({ theme, unselectedBackgroundColor }) => ({
-    border: '0px',
-    flex: 1,
-    backgroundColor: unselectedBackgroundColor || '#383D51',
-    borderRadius: '4px',
-
-    '&.Mui-selected, &.Mui-selected:hover': {
-      backgroundColor: '#FFFFFF',
-      borderRadius: '4px !important',
+const CustomToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
+  border: '0px',
+  flex: 1,
+  backgroundColor: '#383D51',
+  borderRadius: '4px',
+
+  '&.Mui-selected, &.Mui-selected:hover': {
+    backgroundColor: '#FFFFFF',
+    borderRadius: '4px !important',
+  },
+
+  '&.Mui-selected, &.Mui-disabled': {
+    zIndex: 100,
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+
+    '.MuiTypography-subheader1': {
+      background: theme.palette.gradients.aaveGradient,
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
     },
-
-    '&.Mui-selected, &.Mui-disabled': {
-      zIndex: 100,
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-
-      '.MuiTypography-subheader1': {
-        background: theme.palette.gradients.aaveGradient,
-        backgroundClip: 'text',
-        textFillColor: 'transparent',
-      },
-      '.MuiTypography-secondary14': {
-        background: theme.palette.gradients.aaveGradient,
-        backgroundClip: 'text',
-        textFillColor: 'transparent',
-      },
+    '.MuiTypography-secondary14': {
+      background: theme.palette.gradients.aaveGradient,
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
     },
-  })
-) as typeof ToggleButton;
-
-const CustomTxModalToggleButton = styled(ToggleButton)<CustomToggleButtonProps>(
-  ({ theme, unselectedBackgroundColor, maxWidth }) => ({
-    border: '0px',
-    flex: 1,
-    color: theme.palette.text.muted,
-    borderRadius: '4px',
-    backgroundColor: unselectedBackgroundColor || '#383D51',
-    maxWidth: maxWidth || '100%',
-
-    '&.Mui-selected, &.Mui-selected:hover': {
-      border: `1px solid ${theme.palette.other.standardInputLine}`,
-      backgroundColor: '#FFFFFF',
-      borderRadius: '4px !important',
-    },
-
-    '&.Mui-selected, &.Mui-disabled': {
-      zIndex: 100,
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      color: theme.palette.background.header,
-    },
-  })
-) as typeof ToggleButton;
-
-export function StyledTxModalToggleButton(props: CustomToggleButtonProps) {
+  },
+})) as typeof ToggleButton;
+
+const CustomTxModalToggleButton = styled(ToggleButton)<ToggleButtonProps>(({ theme }) => ({
+  border: '0px',
+  flex: 1,
+  color: theme.palette.text.muted,
+  borderRadius: '4px',
+
+  '&.Mui-selected, &.Mui-selected:hover': {
+    border: `1px solid ${theme.palette.other.standardInputLine}`,
+    backgroundColor: '#FFFFFF',
+    borderRadius: '4px !important',
+  },
+
+  '&.Mui-selected, &.Mui-disabled': {
+    zIndex: 100,
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    color: theme.palette.background.header,
+  },
+})) as typeof ToggleButton;
+
+export function StyledTxModalToggleButton(props: ToggleButtonProps) {
   return <CustomTxModalToggleButton {...props} />;
 }
 

src/components/TopInfoPanel/TopInfoPanel.tsx

@@ -7,7 +7,6 @@ interface TopInfoPanelProps extends PageTitleProps {
   children?: ReactNode;
   titleComponent?: ReactNode;
   containerProps?: ContainerProps;
-  multiMarket?: boolean;
 }
 
 export const TopInfoPanel = ({
@@ -16,7 +15,6 @@ export const TopInfoPanel = ({
   withMarketSwitcher,
   withMigrateButton,
   bridge,
-  multiMarket,
   children,
   containerProps = {},
 }: TopInfoPanelProps) => {
@@ -49,7 +47,6 @@ export const TopInfoPanel = ({
               gap: { xs: 3, xsm: 8 },
               flexWrap: 'wrap',
               width: '100%',
-              ...(multiMarket && { flexDirection: 'column' }),
             }}
           >
             {children}

src/layouts/MainLayout.tsx

@@ -9,16 +9,16 @@ import { AppHeader } from './AppHeader';
 import TopBarNotify from './TopBarNotify';
 
 export function MainLayout({ children }: { children: ReactNode }) {
-  const APP_BANNER_VERSION = '1.0.0';
+  const APP_BANNER_VERSION = '2.0.0';
 
   return (
     <>
       <TopBarNotify
-        learnMoreLink="/markets/?marketName=proto_lido_v3"
+        learnMoreLink="/markets/?marketName=proto_etherfi_v3"
         buttonText="View Market"
-        notifyText="Aave Governance has deployed a new Lido market on Ethereum V3"
+        notifyText="Aave Governance has deployed a new EtherFi market on Ethereum V3"
         bannerVersion={APP_BANNER_VERSION}
-        icon={'/icons/tokens/ldo.svg'}
+        icon={'/icons/markets/etherfi.svg'}
       />
       <AppHeader />
       <Box component="main" sx={{ display: 'flex', flexDirection: 'column', flex: 1 }}>

src/locales/en/messages.po

@@ -380,7 +380,6 @@ msgstr "At a discount"
 #: src/components/transactions/Withdraw/WithdrawModalContent.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsList.tsx
 #: src/modules/dashboard/lists/BorrowAssetsList/GhoBorrowAssetsListItem.tsx
-#: src/modules/markets/MarketsTopPanel.tsx
 msgid "Available"
 msgstr "Available"
 
@@ -592,10 +591,6 @@ msgstr "Borrowing this amount will reduce your health factor and increase risk o
 msgid "Borrowing {symbol}"
 msgstr "Borrowing {symbol}"
 
-#: src/modules/markets/MarketsTopPanel.tsx
-msgid "Borrows"
-msgstr "Borrows"
-
 #: src/components/transactions/GovDelegation/DelegationTypeSelector.tsx
 msgid "Both"
 msgstr "Both"
@@ -1103,11 +1098,6 @@ msgstr "Estimated compounding interest, including discount for Staking {0}AAVE i
 msgid "Estimated time"
 msgstr "Estimated time"
 
-#: src/modules/dashboard/DashboardContentWrapper.tsx
-#: src/modules/markets/MarketsTopPanel.tsx
-msgid "Ethereum Main"
-msgstr "Ethereum Main"
-
 #: src/modules/reserve-overview/Gho/GhoPieChartContainer.tsx
 msgid "Exceeds the discount"
 msgstr "Exceeds the discount"
@@ -1414,11 +1404,6 @@ msgstr "Learn more."
 msgid "Let us know how we can make the app better for you. For user support related inquiries please reach out on"
 msgstr "Let us know how we can make the app better for you. For user support related inquiries please reach out on"
 
-#: src/modules/dashboard/DashboardContentWrapper.tsx
-#: src/modules/markets/MarketsTopPanel.tsx
-msgid "Lido"
-msgstr "Lido"
-
 #: src/modules/governance/RepresentativesInfoPanel.tsx
 msgid "Linked addresses"
 msgstr "Linked addresses"
@@ -1492,15 +1477,10 @@ msgstr "MAI has been paused due to a community decision. Supply, borrows and rep
 msgid "MAX"
 msgstr "MAX"
 
-#: src/modules/markets/MarketsTopPanel.tsx
-msgid "Main"
-msgstr "Main"
-
 #: src/layouts/AppFooter.tsx
 msgid "Manage analytics"
 msgstr "Manage analytics"
 
-#: src/modules/markets/MarketsTopPanel.tsx
 #: src/modules/reserve-overview/ReserveTopDetailsWrapper.tsx
 msgid "Market"
 msgstr "Market"