build: removes borrow and provide liquidity links adds deprication me…

…ssage (#671)

apps/web/src/containers/App/index.tsx

@@ -24,9 +24,6 @@ import { StakeView } from '@notional-finance/stake-feature-shell';
 import LendCardView from '@notional-finance/lend-feature-shell/lend-card-view';
 import { LendFeatureShell } from '@notional-finance/lend-feature-shell';
 import { PortfolioFeatureShell } from '@notional-finance/portfolio-feature-shell';
-import BorrowCardView from '@notional-finance/borrow-feature-shell/borrow-card-view';
-import { BorrowFeatureShell } from '@notional-finance/borrow-feature-shell';
-import { LiquidityCurrencyView } from '@notional-finance/liquidity-feature-shell';
 import { TreasuryView } from '@notional-finance/treasury-feature-shell';
 import {
   VaultActionProvider,
@@ -36,7 +33,6 @@ import { AirdropView } from '../../containers/AirdropView';
 import { TermsView } from '../../containers/TermsView';
 import { PrivacyView } from '../../containers/PrivacyView';
 import { LandingPageView } from '../../containers/LandingPageView';
-import { ProvideLiquidityCards } from '@notional-finance/liquidity-feature-shell';
 const applicationId = process.env['NX_DD_APP_ID'] as string;
 const clientToken = process.env['NX_DD_API_KEY'] as string;
 const DD_SITE = process.env['NX_DD_SITE'];
@@ -107,26 +103,12 @@ export const App = () => {
             <RouteContainer onRouteChange={setRouteKey}>
               <Switch>
                 <AppLayoutRoute path="/airdrop" component={AirdropView} />
-                <AppLayoutRoute
-                  path="/borrow/:currency/:collateral"
-                  routeKey={routeKey}
-                  component={BorrowFeatureShell}
-                />
-                <AppLayoutRoute path="/borrow" component={BorrowCardView} />
                 <AppLayoutRoute
                   path="/lend/:currency"
+                  routeKey={routeKey}
                   component={LendFeatureShell}
                 />
                 <AppLayoutRoute path="/lend" component={LendCardView} />
-                <AppLayoutRoute
-                  path="/provide/:currency"
-                  routeKey={routeKey}
-                  component={LiquidityCurrencyView}
-                />
-                <AppLayoutRoute
-                  path="/provide"
-                  component={ProvideLiquidityCards}
-                />
                 <AppLayoutRoute
                   path="/stake/:ethOrWeth"
                   component={StakeView}

apps/web/src/containers/LandingPageView/components/our-products/hooks/use-product-cards.tsx

@@ -1,14 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 import { useVaultMaxRate } from './use-vault-max-rate';
-import { useProvideLiquidityMaxRate } from './use-provide-liquidity-max-rate';
 import { useLendBorrowRates } from './use-lend-borrow-rates';
 import { colors } from '@notional-finance/styles';
 import { Box } from '@mui/material';
 
 export const useProductCards = () => {
   const { maxVaultRateData, vaultDataloading } = useVaultMaxRate();
-  const { maxRateProvideLiquidityData, provideLiquidityLoading } =
-    useProvideLiquidityMaxRate();
   const {
     maxFixedLendRateData,
     minFixedBorrowRateData,
@@ -72,21 +69,6 @@ export const useProductCards = () => {
       variableRate: true,
       comingSoon: true,
     },
-    {
-      title: <FormattedMessage defaultMessage={'Provide Liquidity'} />,
-      link: '/provide',
-      text: (
-        <FormattedMessage
-          defaultMessage={`Earn NOTE incentives, interest, and trading fees from Notional's liquidity pools.`}
-        />
-      ),
-      apy: `${maxRateProvideLiquidityData.maxRate} APY`,
-      symbol: maxRateProvideLiquidityData.symbol,
-      groupedSymbols: 'eth_dai_usdc_wbtc',
-      apyTitle: <FormattedMessage defaultMessage={'as high as'} />,
-      loading: provideLiquidityLoading,
-      variableRate: true,
-    },
   ];
 
   const borrowData = [

apps/web/src/containers/LandingPageView/components/our-products/our-products.tsx

@@ -1,14 +1,12 @@
-import { useState } from 'react';
 import { Box, styled, useTheme } from '@mui/material';
 import { colors } from '@notional-finance/styles';
 import { FormattedMessage } from 'react-intl';
 import { useProductCards } from './hooks';
 import { ProductCards } from './components/product-cards';
-import { H5, H2, Toggle } from '@notional-finance/mui';
+import { H5, H2 } from '@notional-finance/mui';
 
 export const OurProducts = () => {
-  const [selectedTab, setSelectedTab] = useState<number>(0);
-  const { earnYieldData, borrowData } = useProductCards();
+  const { earnYieldData } = useProductCards();
   const theme = useTheme();
 
   return (
@@ -28,30 +26,12 @@ export const OurProducts = () => {
               <FormattedMessage defaultMessage={'With Notional You Can'} />
             </H2>
           </Box>
-          <Toggle
-            minHeight={theme.spacing(8)}
-            width="373px"
-            tabLabels={[
-              <Box sx={{ fontSize: '1.25rem' }}>
-                <FormattedMessage defaultMessage={'Earn Yield'} />
-              </Box>,
-              <Box sx={{ fontSize: '1.25rem' }}>
-                <FormattedMessage defaultMessage={'Borrow'} />
-              </Box>,
-            ]}
-            selectedTabIndex={selectedTab}
-            onChange={(_, v) => setSelectedTab(v as number)}
-          />
         </TitleContainer>
 
         <FlexWrapper>
-          {selectedTab === 0
-            ? earnYieldData.map((data, index) => (
-                <ProductCards key={index} {...data} />
-              ))
-            : borrowData.map((data, index) => (
-                <ProductCards key={index} {...data} />
-              ))}
+          {earnYieldData.map((data, index) => (
+            <ProductCards key={index} {...data} />
+          ))}
         </FlexWrapper>
       </Container>
     </Box>

packages/features/portfolio/src/components/portfolio-mobile-nav/use-portfolio-mobile-nav.tsx

@@ -4,8 +4,6 @@ import {
 } from '@notional-finance/shared-config';
 import {
   BarChartIcon,
-  CoinsIcon,
-  PieChartIcon,
   FourSquareIcon,
   MoneyMarketIcon,
   StakeIcon,
@@ -87,41 +85,6 @@ export const usePortfolioMobileNav = () => {
         />
       ),
     },
-    {
-      title: <FormattedMessage defaultMessage={'Borrows'} />,
-      id: PORTFOLIO_CATEGORIES.BORROWS,
-      to: `/portfolio/${PORTFOLIO_CATEGORIES.BORROWS}`,
-      Icon: (
-        <CoinsIcon
-          sx={{
-            width: theme.spacing(2),
-            stroke:
-              category === PORTFOLIO_CATEGORIES.BORROWS
-                ? theme.palette.typography.main
-                : theme.palette.typography.light,
-            fill: 'transparent',
-          }}
-        />
-      ),
-    },
-    {
-      title: <FormattedMessage defaultMessage={'Liquidity'} />,
-      id: PORTFOLIO_CATEGORIES.LIQUIDITY,
-      to: `/portfolio/${PORTFOLIO_CATEGORIES.LIQUIDITY}`,
-      Icon: (
-        <PieChartIcon
-          sx={{
-            width: theme.spacing(2),
-            fill:
-              category === PORTFOLIO_CATEGORIES.LIQUIDITY
-                ? theme.palette.typography.main
-                : theme.palette.typography.light,
-          }}
-        />
-      ),
-    },
-  ];
-  const optionSetTwo = [
     {
       title: <FormattedMessage defaultMessage={'Vaults'} />,
       id: PORTFOLIO_CATEGORIES.LEVERAGED_VAULTS,
@@ -154,6 +117,8 @@ export const usePortfolioMobileNav = () => {
         />
       ),
     },
+  ];
+  const optionSetTwo = [
     {
       title: <FormattedMessage defaultMessage={'History'} />,
       id: PORTFOLIO_CATEGORIES.TRANSACTION_HISTORY,

packages/features/portfolio/src/hooks/use-side-nav.tsx

@@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom';
 import {
   useAssetSummary,
   useMoneyMarket,
-  useNTokenHoldings,
   useYieldStrategies,
 } from '@notional-finance/notionable-hooks';
 import { useTheme } from '@mui/material';
@@ -12,8 +11,6 @@ import {
 } from '@notional-finance/shared-config';
 import {
   BarChartIcon,
-  CoinsIcon,
-  PieChartIcon,
   FourSquareIcon,
   MoneyMarketIcon,
   StakeIcon,
@@ -25,11 +22,9 @@ import { PortfolioParams } from '../portfolio-feature-shell';
 export const useSideNav = () => {
   const { category } = useParams<PortfolioParams>();
   const theme = useTheme();
-  const borrowSummary = useAssetSummary(LEND_BORROW.BORROW);
   const lendSummary = useAssetSummary(LEND_BORROW.LEND);
   const leveragedVaultPositions = useYieldStrategies(true);
   const moneyMarket = useMoneyMarket();
-  const nTokenHoldings = useNTokenHoldings();
 
   const sideNavOne = [
     {
@@ -44,23 +39,6 @@ export const useSideNav = () => {
       to: `/portfolio/${PORTFOLIO_CATEGORIES.LENDS}`,
       notifications: lendSummary?.length,
     },
-    {
-      Icon: (
-        <CoinsIcon
-          sx={{
-            stroke:
-              category === PORTFOLIO_CATEGORIES.BORROWS
-                ? theme.palette.common.white
-                : theme.palette.typography.light,
-            fill: 'transparent',
-            width: '17px',
-          }}
-        />
-      ),
-      id: PORTFOLIO_CATEGORIES.BORROWS,
-      to: `/portfolio/${PORTFOLIO_CATEGORIES.BORROWS}`,
-      notifications: borrowSummary.length,
-    },
     {
       Icon: <HistoryIcon sx={{ width: '17px' }} />,
       id: PORTFOLIO_CATEGORIES.TRANSACTION_HISTORY,
@@ -86,12 +64,6 @@ export const useSideNav = () => {
       to: `/portfolio/${PORTFOLIO_CATEGORIES.LEVERAGED_VAULTS}`,
       notifications: leveragedVaultPositions.length,
     },
-    {
-      Icon: <PieChartIcon sx={{ width: '17px' }} />,
-      id: PORTFOLIO_CATEGORIES.LIQUIDITY,
-      to: `/portfolio/${PORTFOLIO_CATEGORIES.LIQUIDITY}`,
-      notifications: nTokenHoldings.length,
-    },
     {
       Icon: (
         <StakeIcon

packages/shared/web/src/card-container/card-mobile-nav/card-mobile-nav.tsx

@@ -1,8 +1,4 @@
 import { useState } from 'react';
-import {
-  THEME_VARIANTS,
-  PORTFOLIO_CATEGORIES,
-} from '@notional-finance/shared-config';
 import { Box, styled, useTheme } from '@mui/material';
 import { MobileNav } from '@notional-finance/mui';
 import { useSwipeable } from 'react-swipeable';
@@ -22,7 +18,7 @@ interface CustomLinkProps {
 
 export function CardMobileNav() {
   const theme = useTheme();
-  const { optionSetOne, optionSetTwo, defaultOptionSet } = useCardMobileNav();
+  const { optionSetOne, defaultOptionSet } = useCardMobileNav();
   const { pathname } = useLocation();
 
   const [navOptions, setNavOptions] = useState<NAV_OPTIONS | null>(
@@ -76,21 +72,6 @@ export function CardMobileNav() {
               }}
             />
           </ArrowContainer>
-          {optionSetTwo.map(({ title, Icon, to, id }) => (
-            <NavOption key={id} sx={{ justifyContent: 'flex-start' }}>
-              <CustomLink
-                to={to}
-                theme={theme}
-                active={pathname === to}
-                sx={{ width: theme.spacing(11) }}
-              >
-                <Box sx={{ height: theme.spacing(3) }}>{Icon}</Box>
-                <Title theme={theme} active={pathname === to}>
-                  {title}
-                </Title>
-              </CustomLink>
-            </NavOption>
-          ))}
         </Box>
       </NavSlider>
     </MobileNavContainer>

packages/shared/web/src/card-container/card-mobile-nav/use-card-mobile-nav.tsx

@@ -1,10 +1,5 @@
 import { CARD_CATEGORIES } from '@notional-finance/shared-config';
-import {
-  PieChartIcon,
-  CoinsIcon,
-  BarChartLateralIcon,
-  VaultIcon,
-} from '@notional-finance/icons';
+import { BarChartLateralIcon, VaultIcon } from '@notional-finance/icons';
 import { useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -70,43 +65,9 @@ export const useCardMobileNav = () => {
         />
       ),
     },
-    {
-      title: <FormattedMessage defaultMessage={'Provide Liquidity'} />,
-      id: CARD_CATEGORIES.PROVIDE_LIQUIDITY,
-      to: `/provide`,
-      Icon: (
-        <PieChartIcon
-          sx={{
-            width: theme.spacing(2),
-            fill: CARD_CATEGORIES.PROVIDE_LIQUIDITY.includes(category)
-              ? theme.palette.typography.main
-              : theme.palette.typography.light,
-            stroke: 'transparent',
-          }}
-        />
-      ),
-    },
-  ];
-  const optionSetTwo = [
-    {
-      title: <FormattedMessage defaultMessage={'Fixed Borrow'} />,
-      id: CARD_CATEGORIES.BORROW_FIXED,
-      to: `/borrow`,
-      Icon: (
-        <CoinsIcon
-          sx={{
-            width: theme.spacing(2),
-            stroke: CARD_CATEGORIES.BORROW_FIXED.includes(category)
-              ? theme.palette.typography.main
-              : theme.palette.typography.light,
-            fill: 'transparent',
-          }}
-        />
-      ),
-    },
   ];
 
-  return { optionSetOne, optionSetTwo, defaultOptionSet };
+  return { optionSetOne, defaultOptionSet };
 };
 
 export default useCardMobileNav;

packages/shared/web/src/card-container/card-sub-nav/use-card-sub-nav.tsx

@@ -16,10 +16,6 @@ export const useCardSubNav = () => {
       title: <FormattedMessage defaultMessage={'Leveraged Vaults'} />,
       to: '/vaults',
     },
-    {
-      title: <FormattedMessage defaultMessage={'Provide Liquidity'} />,
-      to: '/provide',
-    },
   ];
   return { links };
 };