From ae230e6de6013712bf80a1a3b4180cec785b14f7 Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Wed, 1 Nov 2023 08:58:08 -0500
Subject: [PATCH 1/3] hide ClearinghouseV1 for users without positions (#3001)

---
 .../Cooler/hooks/useGetCoolerLoans.tsx        |  38 ++++---
 .../Lending/Cooler/positions/Positions.tsx    | 105 +++++++++++-------
 2 files changed, 86 insertions(+), 57 deletions(-)

diff --git a/src/views/Lending/Cooler/hooks/useGetCoolerLoans.tsx b/src/views/Lending/Cooler/hooks/useGetCoolerLoans.tsx
index 11dcf76a5a..725f5511e7 100644
--- a/src/views/Lending/Cooler/hooks/useGetCoolerLoans.tsx
+++ b/src/views/Lending/Cooler/hooks/useGetCoolerLoans.tsx
@@ -19,28 +19,32 @@ export const useGetCoolerLoans = ({
   const { data: signer } = useSigner();
 
   const { data, isFetched, isLoading } = useQuery(
-    ["getCoolerLoans", networks.MAINNET, factoryAddress, collateralAddress, debtAddress],
+    ["getCoolerLoans", networks.MAINNET, factoryAddress, collateralAddress, debtAddress, walletAddress],
     async () => {
-      if (!walletAddress || !factoryAddress || !collateralAddress || !debtAddress || !signer) return [];
-      const contract = CoolerFactory__factory.connect(factoryAddress, signer);
+      try {
+        if (!walletAddress || !factoryAddress || !collateralAddress || !debtAddress || !signer) return [];
+        const contract = CoolerFactory__factory.connect(factoryAddress, signer);
 
-      const coolerAddress = await contract.callStatic.generateCooler(collateralAddress, debtAddress);
-      const coolerContract = Cooler__factory.connect(coolerAddress, Providers.getStaticProvider(networks.MAINNET));
+        const coolerAddress = await contract.callStatic.generateCooler(collateralAddress, debtAddress);
+        const coolerContract = Cooler__factory.connect(coolerAddress, Providers.getStaticProvider(networks.MAINNET));
 
-      const loans = [];
-      let loanId = 0;
-      while (true) {
-        try {
-          const loanData = await coolerContract.loans(loanId);
-          // const newCollateralAmount = await coolerContract.newCollateralFor(loanId);
-          loans.push({ ...loanData, loanId });
-          loanId++;
-        } catch (e) {
-          break;
+        const loans = [];
+        let loanId = 0;
+        while (true) {
+          try {
+            const loanData = await coolerContract.loans(loanId);
+            // const newCollateralAmount = await coolerContract.newCollateralFor(loanId);
+            loans.push({ ...loanData, loanId });
+            loanId++;
+          } catch (e) {
+            break;
+          }
         }
-      }
 
-      return loans.filter(loan => !loan.collateral.isZero() && !loan.principal.isZero());
+        return loans.filter(loan => !loan.collateral.isZero() && !loan.principal.isZero());
+      } catch (e) {
+        return [];
+      }
     },
     { enabled: !!walletAddress && !!factoryAddress && !!collateralAddress && !!debtAddress && !!signer },
   );
diff --git a/src/views/Lending/Cooler/positions/Positions.tsx b/src/views/Lending/Cooler/positions/Positions.tsx
index da20cd9b47..580dc4153d 100644
--- a/src/views/Lending/Cooler/positions/Positions.tsx
+++ b/src/views/Lending/Cooler/positions/Positions.tsx
@@ -33,22 +33,45 @@ export const CoolerPositions = () => {
   const [currentClearingHouse, setCurrentClearingHouse] = useState<"clearingHouseV1" | "clearingHouseV2">(
     "clearingHouseV2",
   );
-  const { data: clearingHouse } = useGetClearingHouse({ clearingHouse: currentClearingHouse });
+  const { data: clearingHouseV1 } = useGetClearingHouse({ clearingHouse: "clearingHouseV1" });
+  const { data: clearingHouseV2 } = useGetClearingHouse({ clearingHouse: "clearingHouseV2" });
+
   const [createLoanModalOpen, setCreateLoanModalOpen] = useState(false);
-  const { data: loans, isFetched: isFetchedLoans } = useGetCoolerLoans({
+  const { data: loansV1, isFetched: isFetchedLoansV1 } = useGetCoolerLoans({
+    walletAddress: address,
+    factoryAddress: clearingHouseV1?.factory,
+    collateralAddress: clearingHouseV1?.collateralAddress,
+    debtAddress: clearingHouseV1?.debtAddress,
+  });
+
+  const { data: coolerAddressV1 } = useGetCoolerForWallet({
+    walletAddress: address,
+    factoryAddress: clearingHouseV1?.factory,
+    collateralAddress: clearingHouseV1?.collateralAddress,
+    debtAddress: clearingHouseV1?.debtAddress,
+    clearingHouseVersion: "clearingHouseV1",
+  });
+
+  const { data: loansV2, isFetched: isFetchedLoansV2 } = useGetCoolerLoans({
     walletAddress: address,
-    factoryAddress: clearingHouse?.factory,
-    collateralAddress: clearingHouse?.collateralAddress,
-    debtAddress: clearingHouse?.debtAddress,
+    factoryAddress: clearingHouseV2?.factory,
+    collateralAddress: clearingHouseV2?.collateralAddress,
+    debtAddress: clearingHouseV2?.debtAddress,
   });
 
-  const { data: coolerAddress } = useGetCoolerForWallet({
+  const { data: coolerAddressV2 } = useGetCoolerForWallet({
     walletAddress: address,
-    factoryAddress: clearingHouse?.factory,
-    collateralAddress: clearingHouse?.collateralAddress,
-    debtAddress: clearingHouse?.debtAddress,
-    clearingHouseVersion: currentClearingHouse,
+    factoryAddress: clearingHouseV2?.factory,
+    collateralAddress: clearingHouseV2?.collateralAddress,
+    debtAddress: clearingHouseV2?.debtAddress,
+    clearingHouseVersion: "clearingHouseV2",
   });
+
+  const coolerAddress = currentClearingHouse === "clearingHouseV1" ? coolerAddressV1 : coolerAddressV2;
+  const clearingHouse = currentClearingHouse === "clearingHouseV1" ? clearingHouseV1 : clearingHouseV2;
+  const loans = currentClearingHouse === "clearingHouseV1" ? loansV1 : loansV2;
+  const isFetchedLoans = currentClearingHouse === "clearingHouseV1" ? isFetchedLoansV1 : isFetchedLoansV2;
+
   const { data: delegationAddress } = useCheckDelegation({ coolerAddress });
 
   const [extendLoan, setExtendLoan] = useState<any>(null);
@@ -69,37 +92,39 @@ export const CoolerPositions = () => {
           <OutstandingPrincipal />
         </Grid>
       </Grid>
-      <Box display="flex" mt="16px" justifyContent="right">
-        <Select
-          value={currentClearingHouse}
-          label="ClearingHouse"
-          onChange={e => {
-            setCurrentClearingHouse(e.target.value as "clearingHouseV1" | "clearingHouseV2");
-          }}
-          sx={{
-            width: "200px",
-            height: "44px",
-            backgroundColor: theme.colors.gray[700],
-            border: "none",
-            ".MuiOutlinedInput-notchedOutline": {
-              border: "none",
-            },
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              border: "none",
-            },
-            "&:hover .MuiOutlinedInput-notchedOutline": {
+      {clearingHouseV1 && loansV1 && loansV1.length > 0 && (
+        <Box display="flex" mt="16px" justifyContent="right">
+          <Select
+            value={currentClearingHouse}
+            label="ClearingHouse"
+            onChange={e => {
+              setCurrentClearingHouse(e.target.value as "clearingHouseV1" | "clearingHouseV2");
+            }}
+            sx={{
+              width: "200px",
+              height: "44px",
+              backgroundColor: theme.colors.gray[700],
               border: "none",
-            },
-            "& .MuiSelect-select": {
-              display: "flex",
-              alignItems: "center",
-            },
-          }}
-        >
-          <MenuItem value="clearingHouseV1">ClearingHouse V1</MenuItem>
-          <MenuItem value="clearingHouseV2">ClearingHouse V2</MenuItem>
-        </Select>
-      </Box>
+              ".MuiOutlinedInput-notchedOutline": {
+                border: "none",
+              },
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                border: "none",
+              },
+              "&:hover .MuiOutlinedInput-notchedOutline": {
+                border: "none",
+              },
+              "& .MuiSelect-select": {
+                display: "flex",
+                alignItems: "center",
+              },
+            }}
+          >
+            <MenuItem value="clearingHouseV1">ClearingHouse V1</MenuItem>
+            <MenuItem value="clearingHouseV2">ClearingHouse V2</MenuItem>
+          </Select>
+        </Box>
+      )}
 
       <Box mb="21px" mt="66px">
         <Typography variant="h1">Your Positions</Typography>

From 74fe1f01a4c755520fb2102f2c8fafcd0b3354ec Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Wed, 1 Nov 2023 08:58:17 -0500
Subject: [PATCH 2/3] Hide BLV for Users that do not have active positions
 (#3000)

* hide BLV for users that dont have positions. remove vaults list

* revert

* remove console logs
---
 .../Lending/Cooler/positions/Positions.tsx    |   3 -
 src/views/Lending/index.tsx                   |   3 -
 src/views/Liquidity/LiquidityCTA.tsx          |  24 ---
 src/views/Liquidity/SingleSidedFarms.tsx      | 155 ------------------
 src/views/Liquidity/Vault.tsx                 |  23 +--
 src/views/Liquidity/Vaults.tsx                |  32 +---
 .../useGetSingleSidedLiquidityVaults.tsx      |   4 +-
 src/views/Liquidity/index.tsx                 |  64 +++++---
 8 files changed, 45 insertions(+), 263 deletions(-)
 delete mode 100644 src/views/Liquidity/LiquidityCTA.tsx
 delete mode 100644 src/views/Liquidity/SingleSidedFarms.tsx

diff --git a/src/views/Lending/Cooler/positions/Positions.tsx b/src/views/Lending/Cooler/positions/Positions.tsx
index 580dc4153d..c7079fd740 100644
--- a/src/views/Lending/Cooler/positions/Positions.tsx
+++ b/src/views/Lending/Cooler/positions/Positions.tsx
@@ -25,7 +25,6 @@ import { useGetCoolerLoans } from "src/views/Lending/Cooler/hooks/useGetCoolerLo
 import { CreateOrRepayLoan } from "src/views/Lending/Cooler/positions/CreateOrRepayLoan";
 import { DelegateVoting } from "src/views/Lending/Cooler/positions/DelegateVoting";
 import { ExtendLoan } from "src/views/Lending/Cooler/positions/ExtendLoan";
-import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
 import { useAccount } from "wagmi";
 
 export const CoolerPositions = () => {
@@ -293,8 +292,6 @@ export const CoolerPositions = () => {
           />
         </>
       )}
-
-      <LiquidityCTA />
     </div>
   );
 };
diff --git a/src/views/Lending/index.tsx b/src/views/Lending/index.tsx
index fdd9967e50..5c3b640e76 100644
--- a/src/views/Lending/index.tsx
+++ b/src/views/Lending/index.tsx
@@ -7,7 +7,6 @@ import { formatCurrency } from "src/helpers";
 import { useGetLendAndBorrowStats } from "src/hooks/useGetLendBorrowStats";
 import { useOhmPrice } from "src/hooks/usePrices";
 import { useCoolerSnapshotLatest } from "src/views/Lending/Cooler/hooks/useSnapshot";
-import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
 
 export const Lending = () => {
   const theme = useTheme();
@@ -114,8 +113,6 @@ export const Lending = () => {
             </Box>
           </Box>
         </Box>
-
-        <LiquidityCTA />
       </Box>
     </div>
   );
diff --git a/src/views/Liquidity/LiquidityCTA.tsx b/src/views/Liquidity/LiquidityCTA.tsx
deleted file mode 100644
index 1f21b4e0dc..0000000000
--- a/src/views/Liquidity/LiquidityCTA.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material";
-import { TertiaryButton } from "@olympusdao/component-library";
-
-export const LiquidityCTA = () => {
-  const theme = useTheme();
-  return (
-    <Box display="flex" flexDirection="row" justifyContent="center" textAlign="center" mt="66px">
-      <Box width="300px" display="flex" flexDirection="column" gap="9px">
-        <Typography fontSize="15px" lineHeight="18px" fontWeight={500}>
-          Borrow and Lend OHM{" "}
-        </Typography>
-        <Typography fontSize="15px" lineHeight="18px" color={theme.colors.gray[40]}>
-          Leverage OHM's treasury backing and Range Bound Stability for flexibility and capital efficiency.
-        </Typography>
-        <TertiaryButton
-          fullWidth
-          href="https://docs.olympusdao.finance/main/overview/boosted-liq-vaults/#benefits-by-stakeholder"
-        >
-          Learn How
-        </TertiaryButton>
-      </Box>
-    </Box>
-  );
-};
diff --git a/src/views/Liquidity/SingleSidedFarms.tsx b/src/views/Liquidity/SingleSidedFarms.tsx
deleted file mode 100644
index e06bfdd4c8..0000000000
--- a/src/views/Liquidity/SingleSidedFarms.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import {
-  LinearProgress,
-  Link,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { Box, styled } from "@mui/system";
-import { DataRow, OHMTokenStackProps, PrimaryButton, TokenStack, Tooltip } from "@olympusdao/component-library";
-import { Link as RouterLink } from "react-router-dom";
-import { formatCurrency, formatNumber } from "src/helpers";
-import { VaultInfo } from "src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults";
-
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  padding: "6px",
-}));
-
-export const SingleSidedFarms = ({ vaults }: { vaults: VaultInfo[] }) => {
-  const theme = useTheme();
-  const mobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  const MobileCard = ({ vault }: { vault: VaultInfo }) => {
-    return (
-      <Box mt="42px">
-        <Box>
-          <Box display="flex" alignItems="center" gap="10px">
-            <TokenStack
-              tokens={[vault.pairTokenName as keyof OHMTokenStackProps["tokens"], "OHM"]}
-              sx={{ fontSize: "27px" }}
-            />{" "}
-            {vault.pairTokenName}
-            -OHM
-          </Box>
-          <DataRow
-            title={"OHM Minted"}
-            balance={
-              <Box>
-                <Typography>{formatNumber(Number(vault.limit))} OHM</Typography>
-                <Box mt="3px" width="100%">
-                  <LinearProgress variant="determinate" value={(Number(vault.ohmMinted) / Number(vault.limit)) * 100} />
-                </Box>
-              </Box>
-            }
-          />
-          <DataRow
-            title={"APY"}
-            balance={
-              <Tooltip
-                message={
-                  <>
-                    <Box display="flex" alignItems="center" gap="4px" pt={"2px"}>
-                      Base APY: {formatNumber(Number(vault.apyBreakdown.baseApy), 2)}%
-                    </Box>
-                    <Box display="flex" alignItems="center" gap="4px" pt={"2px"}>
-                      Rewards APY: {formatNumber(Number(vault.apyBreakdown.rewardApy), 2)}%
-                    </Box>
-                  </>
-                }
-              >
-                {vault.totalApy}%
-              </Tooltip>
-            }
-          />
-          <div>
-            <Link component={RouterLink} to={`/liquidity/vaults/${vault.vaultAddress}`}>
-              <PrimaryButton fullWidth>Deposit Liquidity</PrimaryButton>
-            </Link>
-          </div>
-        </Box>
-      </Box>
-    );
-  };
-
-  if (mobile) {
-    return (
-      <>
-        {vaults.map((vault, index) => (
-          <MobileCard key={index} vault={vault} />
-        ))}
-      </>
-    );
-  } else {
-    return (
-      <>
-        <Table sx={{ minWidth: 650 }} aria-label="simple table">
-          <TableHead>
-            <TableRow sx={{ height: "31px" }}>
-              <StyledTableCell sx={{ fontSize: "12px", fontWeight: "450" }}>Pool</StyledTableCell>
-              <StyledTableCell sx={{ fontSize: "12px", fontWeight: "450" }}>Vault Limit</StyledTableCell>
-              <StyledTableCell sx={{ fontSize: "12px", fontWeight: "450" }}>TVL</StyledTableCell>
-              <StyledTableCell sx={{ fontSize: "12px", fontWeight: "450" }}>APY</StyledTableCell>
-              <StyledTableCell></StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {vaults?.map((vault, index) => (
-              <TableRow key={index} sx={{ height: "71px" }}>
-                <StyledTableCell component="th" scope="row">
-                  <Box display="flex" alignItems="center" gap="10px">
-                    <TokenStack
-                      tokens={[vault.pairTokenName as keyof OHMTokenStackProps["tokens"], "OHM"]}
-                      sx={{ fontSize: "27px" }}
-                    />{" "}
-                    {vault.pairTokenName}
-                    -OHM
-                  </Box>
-                </StyledTableCell>
-                <StyledTableCell>
-                  <Tooltip message={`${formatNumber(+vault.ohmMinted, 2)} OHM Minted`}>
-                    <Box>
-                      <Typography>{formatNumber(Number(vault.limit))} OHM</Typography>
-                      <Box mt="3px" width="100%">
-                        <LinearProgress
-                          variant="determinate"
-                          value={(Number(vault.ohmMinted) / Number(vault.limit)) * 100}
-                        />
-                      </Box>
-                    </Box>
-                  </Tooltip>
-                </StyledTableCell>
-                <StyledTableCell>{formatCurrency(Number(vault.tvlUsd))}</StyledTableCell>
-                <StyledTableCell>
-                  <Tooltip
-                    message={
-                      <>
-                        <Box display="flex" alignItems="center" gap="4px" pt={"2px"}>
-                          Base APY: {formatNumber(Number(vault.apyBreakdown.baseApy), 2)}%
-                        </Box>
-                        <Box display="flex" alignItems="center" gap="4px" pt={"2px"}>
-                          Rewards APY: {formatNumber(Number(vault.apyBreakdown.rewardApy), 2)}%
-                        </Box>
-                      </>
-                    }
-                  >
-                    {vault.totalApy}%
-                  </Tooltip>
-                </StyledTableCell>
-                <StyledTableCell>
-                  <Link component={RouterLink} to={`/liquidity/vaults/${vault.vaultAddress}`}>
-                    <PrimaryButton fullWidth>Deposit Liquidity</PrimaryButton>
-                  </Link>
-                </StyledTableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </>
-    );
-  }
-};
diff --git a/src/views/Liquidity/Vault.tsx b/src/views/Liquidity/Vault.tsx
index 9674d982ac..38a169fca5 100644
--- a/src/views/Liquidity/Vault.tsx
+++ b/src/views/Liquidity/Vault.tsx
@@ -30,10 +30,10 @@ import { ConfirmationModal } from "src/views/Liquidity/ConfirmationModal";
 import { DepositSteps } from "src/views/Liquidity/DepositStepsModal";
 import { useGetExpectedPairTokenAmount } from "src/views/Liquidity/hooks/useGetExpectedPairTokenAmount";
 import { useGetLastDeposit } from "src/views/Liquidity/hooks/useGetLastDeposit";
+import { useGetSingleSidedLiquidityVaults } from "src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults";
 import { useGetUserVault } from "src/views/Liquidity/hooks/useGetUserVault";
 import { useGetVault } from "src/views/Liquidity/hooks/useGetVault";
 import { useWithdrawLiquidity } from "src/views/Liquidity/hooks/useWithdrawLiquidity";
-import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
 import { WithdrawModal } from "src/views/Liquidity/WithdrawModal";
 import TokenModal, {
   ModalHandleSelectProps,
@@ -86,6 +86,9 @@ export const Vault = () => {
   const isWithdrawal = searchParams.get("withdraw") ? true : false;
   const theme = useTheme();
   const mobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const { data: vaults, isLoading: vaultsLoading } = useGetSingleSidedLiquidityVaults();
+  const vaultsWithDeposits = vaults && vaults.filter(vault => vault.lpTokenBalance !== "0");
   useEffect(() => {
     if (vault) {
       setSwapAssetType({ name: vault?.pairTokenName });
@@ -308,9 +311,6 @@ export const Vault = () => {
           <SwapCollection
             UpperSwapCard={isWithdrawal ? lpToken() : pairToken()}
             LowerSwapCard={isWithdrawal ? pairToken() : lpToken()}
-            arrowOnClick={() => {
-              isWithdrawal ? setSearchParams(undefined) : setSearchParams({ withdraw: "true" });
-            }}
           />
           {noAllowance && !isWithdrawal && (
             <Box display="flex" flexDirection="row" width="100%" justifyContent="center">
@@ -331,20 +331,6 @@ export const Vault = () => {
           <Box display="flex" flexDirection="row" width="100%" justifyContent="center">
             <Box display="flex" flexDirection="column" width="100%" maxWidth="476px">
               <Box mt="12px">
-                {isWithdrawal && !vault.canWithdraw && (
-                  <InfoNotification dismissible>
-                    <Typography>
-                      There is a 24 hour withdraw period from time of last deposit {date}. Learn more{" "}
-                      <Link
-                        href="https://docs.olympusdao.finance/main/overview/boosted-liq-vaults#for-users-1"
-                        target="_blank"
-                      >
-                        here
-                      </Link>
-                      .
-                    </Typography>
-                  </InfoNotification>
-                )}
                 <DataRow
                   title="Slippage Tolerance"
                   balance={
@@ -414,7 +400,6 @@ export const Vault = () => {
               vaultPairTokenName={vault.pairTokenName}
             />
           )}
-          <LiquidityCTA />
           <ConfirmationModal
             isOpen={isDepositModalOpen}
             setIsOpen={setIsDepositModalOpen}
diff --git a/src/views/Liquidity/Vaults.tsx b/src/views/Liquidity/Vaults.tsx
index 3f40719cfe..8d99ae3e50 100644
--- a/src/views/Liquidity/Vaults.tsx
+++ b/src/views/Liquidity/Vaults.tsx
@@ -1,11 +1,10 @@
 import { ArrowBack } from "@mui/icons-material";
-import { Box, Link, Skeleton, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { Metric, TextButton } from "@olympusdao/component-library";
+import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { Metric } from "@olympusdao/component-library";
 import { Link as RouterLink } from "react-router-dom";
 import PageTitle from "src/components/PageTitle";
 import { formatCurrency } from "src/helpers";
 import { useGetSingleSidedLiquidityVaults } from "src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults";
-import { SingleSidedFarms } from "src/views/Liquidity/SingleSidedFarms";
 import { VaultFAQ } from "src/views/Liquidity/VaultFAQ";
 import { YourAmoDeposits } from "src/views/Liquidity/YourAMODeposits";
 
@@ -43,33 +42,6 @@ export const Vaults = () => {
             <Metric label="TVL in Vaults" metric={totalTVL ? formatCurrency(totalTVL) : "$0"} isLoading={isLoading} />
           </Box>
         </Box>
-        <Box display="flex" justifyContent="space-between" alignItems="center" flexWrap="wrap">
-          <Box>
-            <Typography variant="h1">Boosted Liquidity Vaults</Typography>
-            <Box mb="18px" mt="9px">
-              <Typography>Single-asset deposits with double the rewards compared to traditional LP.</Typography>
-            </Box>
-          </Box>
-          <TextButton href="https://docs.olympusdao.finance/main/overview/boosted-liq-vaults" target="_blank">
-            What is Boosted Liquidity?
-          </TextButton>
-        </Box>
-        {isLoading ? (
-          <Skeleton height="64px" />
-        ) : (
-          <>
-            {vaults && vaults.length > 0 ? (
-              <>
-                <SingleSidedFarms vaults={vaults} />
-                <Box mb="33px" />
-              </>
-            ) : (
-              <Box display="flex" justifyContent="center" mt="100px">
-                <Typography variant="h1">No Active Vaults</Typography>
-              </Box>
-            )}
-          </>
-        )}
         {vaultsWithDeposits && vaultsWithDeposits.length > 0 && (
           <>
             <YourAmoDeposits vaults={vaultsWithDeposits} />
diff --git a/src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults.tsx b/src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults.tsx
index 6984177592..f6a2a1f3f5 100644
--- a/src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults.tsx
+++ b/src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults.tsx
@@ -34,8 +34,8 @@ export interface VaultInfo {
   totalApy: string;
   usdPricePerToken: string;
   apyBreakdown: {
-    baseApy: string;
-    rewardApy: string;
+    baseApy: number;
+    rewardApy: number;
   };
 }
 
diff --git a/src/views/Liquidity/index.tsx b/src/views/Liquidity/index.tsx
index 4dcbc5bc14..c1eb93e848 100644
--- a/src/views/Liquidity/index.tsx
+++ b/src/views/Liquidity/index.tsx
@@ -1,16 +1,17 @@
 import { ArrowForward } from "@mui/icons-material";
 import { Box, Link, Skeleton, Typography, useTheme } from "@mui/material";
-import { Chip, Metric, PrimaryButton } from "@olympusdao/component-library";
+import { Metric, PrimaryButton } from "@olympusdao/component-library";
 import { Link as RouterLink } from "react-router-dom";
 import PageTitle from "src/components/PageTitle";
 import { formatCurrency } from "src/helpers";
 import { useOhmPrice } from "src/hooks/usePrices";
-import { LiquidityCTA } from "src/views/Liquidity/LiquidityCTA";
+import { useGetSingleSidedLiquidityVaults } from "src/views/Liquidity/hooks/useGetSingleSidedLiquidityVaults";
 
 export const Liquidity = () => {
   const theme = useTheme();
   const { data: ohmPrice } = useOhmPrice();
-
+  const { data: vaults, isLoading: vaultsLoading } = useGetSingleSidedLiquidityVaults();
+  const vaultsWithDeposits = (vaults && vaults.filter(vault => Number(vault.lpTokenBalance) > 0)) || [];
   return (
     <div id="stake-view">
       <PageTitle name="Provide Liquidity" />
@@ -18,31 +19,41 @@ export const Liquidity = () => {
         <Box>
           <Metric label="OHM Price" metric={ohmPrice ? formatCurrency(ohmPrice, 2) : <Skeleton />} />
         </Box>
-        <Box display="flex" flexWrap="wrap" justifyContent="space-between" mt="50px" gap="20px">
-          <Box position="relative">
-            <Box position="absolute" display="flex" justifyContent="right" mt="-10px" right="33px">
-              <Chip template="success" label={<Typography fontWeight="500">New</Typography>} />
-            </Box>
-            <Box borderRadius="12px" padding="32px" sx={{ backgroundColor: theme.colors.paper.card }} maxWidth="427px">
-              <Typography fontSize="32px" fontWeight="500" lineHeight="36px" align="center">
-                Boosted <br />
-                Liquidity Vaults
-              </Typography>
-              <Typography align="center" color={theme.colors.gray[40]}>
-                Single-asset deposits with double the rewards compared to traditional LP.{" "}
-              </Typography>
-              <Box mt="18px">
-                <Link component={RouterLink} to="/liquidity/vaults">
-                  <PrimaryButton sx={{ width: "100%" }}>
-                    <Box display="flex" gap="6px">
-                      <Typography fontWeight="500">View Vaults</Typography>
-                      <ArrowForward sx={{ fontSize: "21px !important" }} />
-                    </Box>
-                  </PrimaryButton>
-                </Link>
+        <Box
+          display="flex"
+          flexWrap="wrap"
+          justifyContent={`${vaultsWithDeposits ? "center" : "space-between"}`}
+          mt="50px"
+          gap="20px"
+        >
+          {!vaultsLoading && vaultsWithDeposits.length > 0 && (
+            <Box position="relative">
+              <Box
+                borderRadius="12px"
+                padding="32px"
+                sx={{ backgroundColor: theme.colors.paper.card }}
+                maxWidth="427px"
+              >
+                <Typography fontSize="32px" fontWeight="500" lineHeight="36px" align="center">
+                  Boosted <br />
+                  Liquidity Vaults
+                </Typography>
+                <Typography align="center" color={theme.colors.gray[40]}>
+                  Single-asset deposits with double the rewards compared to traditional LP.{" "}
+                </Typography>
+                <Box mt="18px">
+                  <Link component={RouterLink} to="/liquidity/vaults">
+                    <PrimaryButton sx={{ width: "100%" }}>
+                      <Box display="flex" gap="6px">
+                        <Typography fontWeight="500">View Vaults</Typography>
+                        <ArrowForward sx={{ fontSize: "21px !important" }} />
+                      </Box>
+                    </PrimaryButton>
+                  </Link>
+                </Box>
               </Box>
             </Box>
-          </Box>
+          )}
           <Box
             borderRadius="12px"
             padding="32px"
@@ -70,7 +81,6 @@ export const Liquidity = () => {
             </Box>
           </Box>
         </Box>
-        <LiquidityCTA />
       </Box>
     </div>
   );

From f694d38bbf36d3a162ac60fe90e88fad8ae07aff Mon Sep 17 00:00:00 2001
From: brightiron <95196612+brightiron@users.noreply.github.com>
Date: Tue, 7 Nov 2023 11:56:09 -0600
Subject: [PATCH 3/3] ensure 18 decimals for approval checks (#3019)

---
 src/views/Lending/Cooler/positions/ExtendLoan.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Lending/Cooler/positions/ExtendLoan.tsx b/src/views/Lending/Cooler/positions/ExtendLoan.tsx
index c35c75718a..9baabb5f8f 100644
--- a/src/views/Lending/Cooler/positions/ExtendLoan.tsx
+++ b/src/views/Lending/Cooler/positions/ExtendLoan.tsx
@@ -169,7 +169,7 @@ export const ExtendLoan = ({
                 payment.
               </>
             }
-            spendAmount={new DecimalBigNumber(interestDue.toString())}
+            spendAmount={new DecimalBigNumber(interestDue.toString(), 18)}
           >
             <PrimaryButton
               fullWidth