Skip to content

Conversation

@OnlyJousting
Copy link
Contributor

@OnlyJousting OnlyJousting commented Oct 21, 2025

The new bands chart is available on market pages with BETA mode enabled.

Changes:

  • Completely rebuilt bands chart in Echarts (in order to match the design requirements)
  • Refactored bands data fetching to react-queries (🚀)
  • Unified bands chart into one reusable component between /lend and /loan
  • Disabled zustand bands data fetching when in BETA (we can delete all old bands related UI and data fetching code when we exit BETA)

Still to do:

  • The user range area gets a little offset when zoomed out, find either a fix or a workaround
  • Add "bundle band" (will add at a later stage)
  • Use application slider component in bands chart
  • Refactor tooltip when hovering over bands when we have design (currently has placeholder)
  • Add error state (currently has placeholder)
  • Add loading state (currently has placeholder) (will update at the same time as the candle chart)
  • Fix resizing of chart when viewport changes
  • Ensure oracle price band exists in market bands array even if the band is empty

@vercel
Copy link

vercel bot commented Oct 21, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
curve-dapp Ready Ready Preview Comment Nov 10, 2025 5:33pm
curve-dapp-storybook Ready Ready Preview Comment Nov 10, 2025 5:33pm

Copy link
Collaborator

@DanielSchiavini DanielSchiavini left a comment

Choose a reason for hiding this comment

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

I didn't manage to get through the PR yet, but I'm leaving a few ideas already

Comment on lines +64 to +78
market && collateralTokenAddress
? {
symbol: market.collateral_token.symbol,
address: collateralTokenAddress,
chain: networks[rChainId].id,
}
: undefined
const borrowToken =
market && borrowedTokenAddress
? {
symbol: market.borrowed_token.symbol,
address: borrowedTokenAddress,
chain: networks[rChainId].id,
}
: undefined
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
market && collateralTokenAddress
? {
symbol: market.collateral_token.symbol,
address: collateralTokenAddress,
chain: networks[rChainId].id,
}
: undefined
const borrowToken =
market && borrowedTokenAddress
? {
symbol: market.borrowed_token.symbol,
address: borrowedTokenAddress,
chain: networks[rChainId].id,
}
: undefined
market && collateralTokenAddress && {
symbol: market.collateral_token.symbol,
address: collateralTokenAddress,
chain: networks[rChainId].id,
}
const borrowToken =
market && borrowedTokenAddress && {
symbol: market.borrowed_token.symbol,
address: borrowedTokenAddress,
chain: networks[rChainId].id,
}

Copy link
Contributor Author

@OnlyJousting OnlyJousting Nov 6, 2025

Choose a reason for hiding this comment

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

they will return this type if I make that change

const collateralToken: "" | {
    symbol: string;
    address: string;
    chain: INetworkName;
} | undefined

Copy link
Collaborator

Choose a reason for hiding this comment

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

argh this is ugly 😢 but I we actually don't need to check collateralTokenAddress, it will never be null, only market needs to be checked. And it could just be

Suggested change
market && collateralTokenAddress
? {
symbol: market.collateral_token.symbol,
address: collateralTokenAddress,
chain: networks[rChainId].id,
}
: undefined
const borrowToken =
market && borrowedTokenAddress
? {
symbol: market.borrowed_token.symbol,
address: borrowedTokenAddress,
chain: networks[rChainId].id,
}
: undefined
const chain = rChainId
const collateralToken = market && { ...market.collateral_token, chain }
const borrowToken = market && {...market.borrowed_token.symbol, chain }

Copy link
Collaborator

@DanielSchiavini DanielSchiavini left a comment

Choose a reason for hiding this comment

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

Sorry, it's a huge PR so there is a lot to review. If you prefer comments as a PR please let me know

// Parsed bands balance type used in chart data
export type ParsedBandsBalances = {
borrowed: string
collateral: string
Copy link
Collaborator

Choose a reason for hiding this comment

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

Should we use Decimal type here?

<TooltipItem title={t`Your share of band`}>{userBandShare}</TooltipItem>
<TooltipItem variant="subItem" title={collateralToken?.symbol}>
{formatAbbreviatedNumber(data.userBandCollateralAmount)}
{`${formatUsd(data.userBandCollateralValueUsd ?? 0)}`}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Showing $0 just because we don't have the token price seems incorrect.
Also, the template string is not needed here

Suggested change
{`${formatUsd(data.userBandCollateralValueUsd ?? 0)}`}
{formatUsd(data.userBandCollateralValueUsd ?? 0)}

const price = Number(oraclePrice)
if (!Number.isFinite(price)) return []

return [createMarkLine(price, `${formatUsd(+oraclePrice)}`, 'end', palette.oraclePriceLineColor)]
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
return [createMarkLine(price, `${formatUsd(+oraclePrice)}`, 'end', palette.oraclePriceLineColor)]
return [createMarkLine(price, formatUsd(+oraclePrice), 'end', palette.oraclePriceLineColor)]

collateralTokenAddress,
borrowedTokenAddress,
})
const collateralToken =
Copy link
Collaborator

Choose a reason for hiding this comment

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

this conversion is repeated, it should be a helper somewhere

? {
symbol: llamma.collateralSymbol,
address: collateralTokenAddress,
chain: networks[chainId].id,
Copy link
Collaborator

Choose a reason for hiding this comment

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

why do we need the networks mapping for this?

Suggested change
chain: networks[chainId].id,
chain: chainId,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants