Skip to content

Commit

Permalink
fix: show loading on strategy performance instead of 0 value (#907)
Browse files Browse the repository at this point in the history 
* fix: show loading on strategy performance instead of 0 value

* refactor: separate into separate components

Co-authored-by: nikhil arora <[email protected]>
  • Loading branch information
@rushikeshakhare @nikkaroraa
rushikeshakhare and nikkaroraa authored Jan 9, 2023
1 parent 3fcfacf commit 28b91cb
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 71 deletions.
95 changes: 58 additions & 37 deletions packages/frontend/src/components/Strategies/Bull/StrategyPerformance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<StrategyPerformanceProps> = ({ 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: '%',
Expand Down Expand Up @@ -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 (
<Box display="flex" flexDirection="column" gridGap="8px">
<Typography variant="h3" className={classes.sectionTitle}>
Strategy Performance
</Typography>
<>
<Box display="flex" alignItems="baseline" gridColumnGap="12px" gridRowGap="4px" flexWrap="wrap">
<Typography
variant="h2"
Expand Down Expand Up @@ -279,16 +259,57 @@ const StrategyPerformance: React.FC = () => {
</Box>

<Box marginTop="12px">
{bullEthPnlSeries ? (
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
) : (
<Box display="flex" height="346px" width={1} alignItems="center" justifyContent="center">
<CircularProgress size={40} className={classes.loadingSpinner} />
</Box>
)}
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
</Box>
</>
)
}

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 (
<Box display="flex" flexDirection="column" gridGap="8px">
<Typography variant="h3" className={classes.sectionTitle}>
Strategy Performance
</Typography>

{isLoading ? (
<Box display="flex" alignItems="flex-start" marginTop="8px" height="500px">
<Box display="flex" alignItems="center" gridGap="15px">
<CircularProgress size={15} className={classes.loadingSpinner} />
<Typography className={classes.text}>Fetching strategy performance...</Typography>
</Box>
</Box>
) : (
<StrategyPerformance strategyPnLSeries={strategyPnLSeries} tvl={tvl.toNumber()} />
)}
</Box>
)
}

export default StrategyPerformance
export default Wrapper
88 changes: 54 additions & 34 deletions packages/frontend/src/components/Strategies/Crab/StrategyPerformance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,22 +116,20 @@ const TooltipTitle = () => (
</>
)

const StrategyPerformance: React.FC = () => {
interface StrategyPerformanceProps {
strategyPnLSeries: Array<[number, number]>
tvl: number
}

const StrategyPerformance: React.FC<StrategyPerformanceProps> = ({ 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: '%',
Expand Down Expand Up @@ -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 (
<Box display="flex" flexDirection="column" gridGap="8px">
<Typography variant="h3" className={classes.sectionTitle}>
Strategy Performance
</Typography>
<>
<Box display="flex" alignItems="baseline" gridColumnGap="12px" gridRowGap="4px" flexWrap="wrap">
<Typography
variant="h2"
Expand All @@ -219,9 +206,7 @@ const StrategyPerformance: React.FC = () => {
</Box>

<Box display="flex" gridGap="12px">
<Typography className={clsx(classes.description, classes.textMonospace)}>
{formatCurrency(tvl.toNumber(), 0)}
</Typography>
<Typography className={clsx(classes.description, classes.textMonospace)}>{formatCurrency(tvl, 0)}</Typography>
<Typography className={classes.description}>TVL</Typography>
</Box>

Expand Down Expand Up @@ -269,16 +254,51 @@ const StrategyPerformance: React.FC = () => {
</Box>

<Box marginTop="12px">
{crabUsdPnlSeries ? (
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
) : (
<Box display="flex" height="346px" width={1} alignItems="center" justifyContent="center">
<CircularProgress size={40} className={classes.loadingSpinner} />
</Box>
)}
<HighchartsReact highcharts={Highcharts} options={chartOptions} />
</Box>
</>
)
}

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 (
<Box display="flex" flexDirection="column" gridGap="8px">
<Typography variant="h3" className={classes.sectionTitle}>
Strategy Performance
</Typography>

{isLoading ? (
<Box display="flex" alignItems="flex-start" marginTop="8px" height="500px">
<Box display="flex" alignItems="center" gridGap="15px">
<CircularProgress size={15} className={classes.loadingSpinner} />
<Typography className={classes.text}>Fetching strategy performance...</Typography>
</Box>
</Box>
) : (
<StrategyPerformance strategyPnLSeries={strategyPnLSeries} tvl={tvl.toNumber()} />
)}
</Box>
)
}

export default StrategyPerformance
export default Wrapper

1 comment on commit 28b91cb

@vercel
Copy link

@vercel vercel bot commented on 28b91cb Jan 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

continuouscall – ./

squeeth.com
www.squeeth.com
continuouscall-git-main-opynfinance.vercel.app
squeeth.opyn.co
continuouscall-opynfinance.vercel.app
levbev.squeeth.com

Please sign in to comment.