From 28b91cb7a12bcc7ba9f9660d4cd34a1ffe638619 Mon Sep 17 00:00:00 2001 From: Rushikesh Akhare <52928941+rushikeshakhare@users.noreply.github.com> Date: Tue, 10 Jan 2023 02:50:42 +0530 Subject: [PATCH] fix: show loading on strategy performance instead of 0 value (#907) * fix: show loading on strategy performance instead of 0 value * refactor: separate into separate components Co-authored-by: nikhil arora --- .../Strategies/Bull/StrategyPerformance.tsx | 95 +++++++++++-------- .../Strategies/Crab/StrategyPerformance.tsx | 88 ++++++++++------- 2 files changed, 112 insertions(+), 71 deletions(-) diff --git a/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx b/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx index e8c0c00ab..d0753e41a 100644 --- a/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx +++ b/packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx @@ -119,24 +119,20 @@ const TooltipTitle = () => ( ) -const StrategyPerformance: React.FC = () => { - const ethDepositedInEuler = useAtomValue(bullDepositedEthInEulerAtom) - const bullCrabBalance = useAtomValue(bullCrabBalanceAtom) - const eulerUSDCDebt = useAtomValue(bullEulerUSDCDebtAtom) - const crabUSDValue = useAtomValue(crabUSDValueAtom) - const ethPrice = useOnChainETHPrice() +interface StrategyPerformanceProps { + strategyPnLSeries: Array<[number, number]> + tvl: number +} +const StrategyPerformance: React.FC = ({ strategyPnLSeries, tvl }) => { const [startDate, setStartDate] = useAtom(bullStrategyFilterStartDateAtom) const [endDate, setEndDate] = useAtom(bullStrategyFilterEndDateAtom) - const query = useBullPnLChartData() - const bullEthPnlSeries = query?.data?.data.map((x: ChartDataInfo) => [x.timestamp * 1000, x.bullEthPnl]) - const series = [ { name: 'Bull/ETH 🧘🐂 % Return', yAxis: 0, - data: bullEthPnlSeries, + data: strategyPnLSeries, tooltip: { valueDecimals: 2, valueSuffix: '%', @@ -179,31 +175,15 @@ const StrategyPerformance: React.FC = () => { const classes = useStyles() const numberOfDays = differenceInCalendarDays(endDate, startDate) - const hasData = bullEthPnlSeries?.length > 0 ?? false + const hasData = strategyPnLSeries?.length > 0 - const historicalReturns = hasData ? bullEthPnlSeries[bullEthPnlSeries.length - 1][1] : 0 + const historicalReturns = hasData ? strategyPnLSeries[strategyPnLSeries.length - 1][1] : 0 const annualizedReturns = useMemo(() => { return (Math.pow(1 + historicalReturns / 100, 365 / numberOfDays) - 1) * 100 }, [historicalReturns, numberOfDays]) - // tvl = ethInEuler + (crabInBull * crabPriceInETH) - (debtInEuler / ethPrice) - const crabPriceInETH = toTokenAmount(crabUSDValue, 18).div(ethPrice) - const collateralValue = ethDepositedInEuler.plus(bullCrabBalance.times(crabPriceInETH)) - const debtValue = eulerUSDCDebt.div(ethPrice) - - const isLoadingTVL = - ethDepositedInEuler.isZero() || - bullCrabBalance.isZero() || - crabUSDValue.isZero() || - eulerUSDCDebt.isZero() || - ethPrice.isZero() - const tvl = isLoadingTVL ? 0 : collateralValue.minus(debtValue).integerValue().toNumber() - return ( - - - Strategy Performance - + <> { - {bullEthPnlSeries ? ( - - ) : ( - - - - )} + + + ) +} + +const Wrapper: React.FC = () => { + const ethDepositedInEuler = useAtomValue(bullDepositedEthInEulerAtom) + const bullCrabBalance = useAtomValue(bullCrabBalanceAtom) + const eulerUSDCDebt = useAtomValue(bullEulerUSDCDebtAtom) + const crabUSDValue = useAtomValue(crabUSDValueAtom) + const ethPrice = useOnChainETHPrice() + const query = useBullPnLChartData() + + const strategyPnLSeries = query?.data?.data.map((x: ChartDataInfo) => [x.timestamp * 1000, x.bullEthPnl]) + const isLoadingPnLSeries = typeof strategyPnLSeries === 'undefined' + + // tvl = ethInEuler + (crabInBull * crabPriceInETH) - (debtInEuler / ethPrice) + const crabPriceInETH = toTokenAmount(crabUSDValue, 18).div(ethPrice) + const collateralValue = ethDepositedInEuler.plus(bullCrabBalance.times(crabPriceInETH)) + const debtValue = eulerUSDCDebt.div(ethPrice) + const tvl = collateralValue.minus(debtValue).integerValue() + const isLoadingTVL = + ethDepositedInEuler.isZero() || + bullCrabBalance.isZero() || + crabUSDValue.isZero() || + eulerUSDCDebt.isZero() || + ethPrice.isZero() + + const isLoading = isLoadingPnLSeries || isLoadingTVL + + const classes = useStyles() + + return ( + + + Strategy Performance + + + {isLoading ? ( + + + + Fetching strategy performance... + + + ) : ( + + )} ) } -export default StrategyPerformance +export default Wrapper diff --git a/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx b/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx index d2a6b503e..6913177d6 100644 --- a/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx +++ b/packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx @@ -116,22 +116,20 @@ const TooltipTitle = () => ( ) -const StrategyPerformance: React.FC = () => { +interface StrategyPerformanceProps { + strategyPnLSeries: Array<[number, number]> + tvl: number +} + +const StrategyPerformance: React.FC = ({ strategyPnLSeries, tvl }) => { const [startDate, setStartDate] = useAtom(crabv2StrategyFilterStartDateAtom) const [endDate, setEndDate] = useAtom(crabv2StrategyFilterEndDateAtom) - const vault = useAtomValue(crabStrategyVaultAtomV2) - const ethPrice = useETHPrice() - const { data: osqthPrice } = useOSQTHPrice() - const query = useCrabPnLV2ChartData() - - const crabUsdPnlSeries = query?.data?.data.map((x: ChartDataInfo) => [x.timestamp * 1000, x.crabPnL * 100]) - const series = [ { name: 'Crab/USDC 🦀 % Return', yAxis: 0, - data: crabUsdPnlSeries, + data: strategyPnLSeries, tooltip: { valueDecimals: 2, valueSuffix: '%', @@ -172,28 +170,17 @@ const StrategyPerformance: React.FC = () => { }) const classes = useStyles() - const isLoadingChartData = typeof crabUsdPnlSeries === 'undefined' const numberOfDays = differenceInCalendarDays(endDate, startDate) - const hasData = isLoadingChartData ? false : crabUsdPnlSeries.length > 0 + const hasData = strategyPnLSeries.length > 0 - const historicalReturns = hasData ? crabUsdPnlSeries[crabUsdPnlSeries.length - 1][1] : 0 + const historicalReturns = hasData ? strategyPnLSeries[strategyPnLSeries.length - 1][1] : 0 const annualizedReturns = useMemo(() => { // compounded annually return (Math.pow(1 + historicalReturns / 100, 365 / numberOfDays) - 1) * 100 }, [historicalReturns, numberOfDays]) - const vaultCollateral = vault?.collateralAmount ?? BIG_ZERO - const vaultDebt = vault?.shortAmount ?? BIG_ZERO - - const collateralValue = vaultCollateral.multipliedBy(ethPrice) - const debtValue = vaultDebt.multipliedBy(osqthPrice) - const tvl = collateralValue.minus(debtValue).integerValue() - return ( - - - Strategy Performance - + <> { - - {formatCurrency(tvl.toNumber(), 0)} - + {formatCurrency(tvl, 0)} TVL @@ -269,16 +254,51 @@ const StrategyPerformance: React.FC = () => { - {crabUsdPnlSeries ? ( - - ) : ( - - - - )} + + + ) +} + +const Wrapper: React.FC = () => { + const vault = useAtomValue(crabStrategyVaultAtomV2) + const ethPrice = useETHPrice() + const { data: osqthPrice } = useOSQTHPrice() + const query = useCrabPnLV2ChartData() + + const strategyPnLSeries = query?.data?.data.map((x: ChartDataInfo) => [x.timestamp * 1000, x.crabPnL * 100]) + const isLoadingPnLSeries = typeof strategyPnLSeries === 'undefined' + + const vaultCollateral = vault?.collateralAmount ?? BIG_ZERO + const vaultDebt = vault?.shortAmount ?? BIG_ZERO + + const collateralValue = vaultCollateral.multipliedBy(ethPrice) + const debtValue = vaultDebt.multipliedBy(osqthPrice) + const tvl = collateralValue.minus(debtValue).integerValue() + const isLoadingTVL = tvl.isZero() + + const isLoading = isLoadingPnLSeries || isLoadingTVL + + const classes = useStyles() + + return ( + + + Strategy Performance + + + {isLoading ? ( + + + + Fetching strategy performance... + + + ) : ( + + )} ) } -export default StrategyPerformance +export default Wrapper