Skip to content

Commit

Permalink
fix: strategies not being displayed with debt > 0 (#392)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Majorfi
Majorfi authored Oct 30, 2023
1 parent 33eb18f commit c1a9365
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 104 deletions.
53 changes: 28 additions & 25 deletions apps/vaults/components/details/tabs/VaultDetailsStrategies.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,17 +180,14 @@ function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {
</div>

<div className={'mt-auto pt-8'}>
<p className={'text-neutral-600'}>{'Historical APR'}</p>
<div className={'mt-4 flex flex-row border-b border-l border-neutral-300'}>
<Renderable shouldRender={isMounted()}>
<GraphForStrategyReports
vaultChainID={currentVault.chainID}
vaultDecimals={currentVault.decimals}
vaultTicker={currentVault?.token?.symbol || 'token'}
strategy={strategy}
/>
</Renderable>
</div>
<Renderable shouldRender={isMounted()}>
<GraphForStrategyReports
vaultChainID={currentVault.chainID}
vaultDecimals={currentVault.decimals}
vaultTicker={currentVault?.token?.symbol || 'token'}
strategy={strategy}
/>
</Renderable>
</div>
</div>
</div>
Expand All @@ -201,28 +198,34 @@ function VaultDetailsStrategy({currentVault, strategy}: TProps): ReactElement {

function isExceptionStrategy(strategy: TYDaemonVaultStrategy): boolean {
// Curve DAO Fee and Bribes Reinvest
return strategy.address.toString() === '0x23724D764d8b3d26852BA20d3Bc2578093d2B022' && !!strategy.details?.inQueue;
return strategy.address.toString() === '0x23724D764d8b3d26852BA20d3Bc2578093d2B022';
}

export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVault}): ReactElement {
const [searchValue, set_searchValue] = useState<string>('');
const [shouldHide0DebtStrategies, set_shouldHide0DebtStrategies] = useState(true);

const hide0DebtStrategyFilter = (strategy: TYDaemonVaultStrategy): boolean => {
return !shouldHide0DebtStrategies || Number(strategy.details?.totalDebt) > 0 || isExceptionStrategy(strategy);
};

const nameSearchFilter = ({name, displayName}: TYDaemonVaultStrategy): boolean => {
return !searchValue || `${name} ${displayName}`.toLowerCase().includes(searchValue);
};
const [shouldDisplayInactiveStrategies, set_shouldDisplayInactiveStrategies] = useState(true);

const sortedStrategies = useMemo((): TYDaemonVault['strategies'] => {
return (currentVault.strategies || []).sort(
(a, b): number => (b.details?.debtRatio || 0) - (a.details?.debtRatio || 0)
);
}, [currentVault.strategies]);

const filteredStrategies = (sortedStrategies || []).filter(hide0DebtStrategyFilter).filter(nameSearchFilter);
const filteredStrategies = useMemo((): TYDaemonVault['strategies'] => {
return (sortedStrategies || [])
.filter((strategy): boolean => {
if (!searchValue) {
return true;
}
return `${strategy.name} ${strategy.displayName}`.toLowerCase().includes(searchValue);
})
.filter((strategy): boolean => {
if (!shouldDisplayInactiveStrategies) {
return Number(strategy.details?.totalDebt) > 0 || isExceptionStrategy(strategy);
}
return true;
});
}, [searchValue, shouldDisplayInactiveStrategies, sortedStrategies]);

return (
<div className={'grid grid-cols-1 bg-neutral-100'}>
Expand All @@ -239,16 +242,16 @@ export function VaultDetailsStrategies({currentVault}: {currentVault: TYDaemonVa
<div className={'mt-4 flex h-full min-w-fit flex-row md:mr-4 md:mt-7'}>
<small className={'mr-2'}>{'Hide 0 debt strategies'}</small>
<Switch
isEnabled={shouldHide0DebtStrategies}
isEnabled={shouldDisplayInactiveStrategies}
onSwitch={(): void => {
set_shouldHide0DebtStrategies((prev): boolean => !prev);
set_shouldDisplayInactiveStrategies((prev): boolean => !prev);
}}
/>
</div>
</div>
</div>
<div className={'col-span-1 w-full border-t border-neutral-300'}>
{filteredStrategies.map(
{(filteredStrategies || []).map(
(strategy): ReactElement => (
<VaultDetailsStrategy
currentVault={currentVault}
Expand Down
163 changes: 84 additions & 79 deletions apps/vaults/components/graphs/GraphForStrategyReports.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,85 +64,90 @@ export function GraphForStrategyReports({
}

return (
<ResponsiveContainer
width={'100%'}
height={height}>
<LineChart
margin={{top: 0, right: -28, bottom: 0, left: 0}}
data={strategyData}>
<Line
className={'text-primary-600'}
type={'step'}
strokeWidth={2}
dataKey={'value'}
stroke={'currentcolor'}
dot={false}
activeDot={(e: any): ReactElement => {
e.className = `${e.className} activeDot`;
delete e.dataKey;
return <circle {...e}></circle>;
}}
/>
<XAxis
dataKey={'name'}
hide
/>
<YAxis
orientation={'right'}
hide={false}
tick={(e): ReactElement => {
const {
payload: {value}
} = e;
e.fill = '#5B5B5B';
e.className = 'text-xxs md:text-xs font-number z-10 ';
e.alignmentBaseline = 'middle';
delete e.verticalAnchor;
delete e.visibleTicksCount;
delete e.tickFormatter;
const formatedValue = formatPercent(value);
return <text {...e}>{formatedValue}</text>;
}}
/>
<Tooltip
content={(e): ReactElement => {
const {active: isTooltipActive, payload, label} = e;
if (!isTooltipActive || !payload) {
return <></>;
}
if (payload.length > 0) {
const [{value, payload: innerPayload}] = payload;
const {gain, loss} = innerPayload;
const diff = toBigInt(gain) - toBigInt(loss);
const normalizedDiff = formatToNormalizedValue(diff, vaultDecimals);
<>
<p className={'text-neutral-600'}>{'Historical APR'}</p>
<div className={'mt-4 flex flex-row border-b border-l border-neutral-300'}>
<ResponsiveContainer
width={'100%'}
height={height}>
<LineChart
margin={{top: 0, right: -28, bottom: 0, left: 0}}
data={strategyData}>
<Line
className={'text-primary-600'}
type={'step'}
strokeWidth={2}
dataKey={'value'}
stroke={'currentcolor'}
dot={false}
activeDot={(e: any): ReactElement => {
e.className = `${e.className} activeDot`;
delete e.dataKey;
return <circle {...e}></circle>;
}}
/>
<XAxis
dataKey={'name'}
hide
/>
<YAxis
orientation={'right'}
hide={false}
tick={(e): ReactElement => {
const {
payload: {value}
} = e;
e.fill = '#5B5B5B';
e.className = 'text-xxs md:text-xs font-number z-10 ';
e.alignmentBaseline = 'middle';
delete e.verticalAnchor;
delete e.visibleTicksCount;
delete e.tickFormatter;
const formatedValue = formatPercent(value);
return <text {...e}>{formatedValue}</text>;
}}
/>
<Tooltip
content={(e): ReactElement => {
const {active: isTooltipActive, payload, label} = e;
if (!isTooltipActive || !payload) {
return <></>;
}
if (payload.length > 0) {
const [{value, payload: innerPayload}] = payload;
const {gain, loss} = innerPayload;
const diff = toBigInt(gain) - toBigInt(loss);
const normalizedDiff = formatToNormalizedValue(diff, vaultDecimals);

return (
<div className={'recharts-tooltip'}>
<div className={'mb-4'}>
<p className={'text-xs'}>{formatDate(label)}</p>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-xs text-neutral-600'}>{'APR'}</p>
<b className={'font-number text-xs font-bold text-neutral-900'}>
{formatPercent(Number(value))}
</b>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-xs text-neutral-600'}>
{normalizedDiff > 0 ? 'Gain' : 'Loss'}
</p>
<b
className={
'font-number text-xs font-bold text-neutral-900'
}>{`${formatAmount(normalizedDiff)} ${vaultTicker}`}</b>
</div>
</div>
);
}
return <div />;
}}
/>
</LineChart>
</ResponsiveContainer>
return (
<div className={'recharts-tooltip'}>
<div className={'mb-4'}>
<p className={'text-xs'}>{formatDate(label)}</p>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-xs text-neutral-600'}>{'APR'}</p>
<b className={'font-number text-xs font-bold text-neutral-900'}>
{formatPercent(Number(value))}
</b>
</div>
<div className={'flex flex-row items-center justify-between'}>
<p className={'text-xs text-neutral-600'}>
{normalizedDiff > 0 ? 'Gain' : 'Loss'}
</p>
<b
className={
'font-number text-xs font-bold text-neutral-900'
}>{`${formatAmount(normalizedDiff)} ${vaultTicker}`}</b>
</div>
</div>
);
}
return <div />;
}}
/>
</LineChart>
</ResponsiveContainer>
</div>
</>
);
}

1 comment on commit c1a9365

@vercel
Copy link

@vercel vercel bot commented on c1a9365 Oct 30, 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:

yearnfi – ./

yearn.fi
ybribe.com
ydraft.vercel.app
www.yearn.fi
yearn.finance
vote.yearn.finance
y.finance
www.y.finance
www.ybribe.com
beta.yearn.farm
yearnfi.yearn.farm
yearnfi-git-main.yearn.farm

Please sign in to comment.