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] 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 = () => { /> )} - - ); }; 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 = () => { - - ); 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 ( - - - - Borrow and Lend OHM{" "} - - - Leverage OHM's treasury backing and Range Bound Stability for flexibility and capital efficiency. - - - Learn How - - - - ); -}; 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 ( - - - - {" "} - {vault.pairTokenName} - -OHM - - - {formatNumber(Number(vault.limit))} OHM - - - - - } - /> - - - Base APY: {formatNumber(Number(vault.apyBreakdown.baseApy), 2)}% - - - Rewards APY: {formatNumber(Number(vault.apyBreakdown.rewardApy), 2)}% - - - } - > - {vault.totalApy}% - - } - /> -
- - Deposit Liquidity - -
- - - ); - }; - - if (mobile) { - return ( - <> - {vaults.map((vault, index) => ( - - ))} - - ); - } else { - return ( - <> - - - - Pool - Vault Limit - TVL - APY - - - - - {vaults?.map((vault, index) => ( - - - - {" "} - {vault.pairTokenName} - -OHM - - - - - - {formatNumber(Number(vault.limit))} OHM - - - - - - - {formatCurrency(Number(vault.tvlUsd))} - - - - Base APY: {formatNumber(Number(vault.apyBreakdown.baseApy), 2)}% - - - Rewards APY: {formatNumber(Number(vault.apyBreakdown.rewardApy), 2)}% - - - } - > - {vault.totalApy}% - - - - - Deposit Liquidity - - - - ))} - -
- - ); - } -}; 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 = () => { { - isWithdrawal ? setSearchParams(undefined) : setSearchParams({ withdraw: "true" }); - }} /> {noAllowance && !isWithdrawal && ( @@ -331,20 +331,6 @@ export const Vault = () => { - {isWithdrawal && !vault.canWithdraw && ( - - - There is a 24 hour withdraw period from time of last deposit {date}. Learn more{" "} - - here - - . - - - )} { vaultPairTokenName={vault.pairTokenName} /> )} - { - - - Boosted Liquidity Vaults - - Single-asset deposits with double the rewards compared to traditional LP. - - - - What is Boosted Liquidity? - - - {isLoading ? ( - - ) : ( - <> - {vaults && vaults.length > 0 ? ( - <> - - - - ) : ( - - No Active Vaults - - )} - - )} {vaultsWithDeposits && vaultsWithDeposits.length > 0 && ( <> 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 (
@@ -18,31 +19,41 @@ export const Liquidity = () => { } /> - - - - New} /> - - - - Boosted
- Liquidity Vaults - - - Single-asset deposits with double the rewards compared to traditional LP.{" "} - - - - - - View Vaults - - - - + + {!vaultsLoading && vaultsWithDeposits.length > 0 && ( + + + + Boosted
+ Liquidity Vaults + + + Single-asset deposits with double the rewards compared to traditional LP.{" "} + + + + + + View Vaults + + + + + - + )} { -
);