Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 Walkthrough📝 WalkthroughWalkthroughThis pull request introduces various changes across multiple files, primarily focusing on styling updates, component enhancements, and the addition of new features. Key modifications include adjusting ESLint rules for TypeScript, updating font paths, renaming CSS classes, and introducing new React components for visualizing market data. The changes also encompass the addition of new GraphQL queries and custom hooks for fetching market data, along with improvements in button and modal styling throughout the application. Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 21
🧹 Outside diff range and nitpick comments (21)
src/components/common/PrimaryButton.tsx (1)
Line range hint 17-24: Add aria-label to button
Add aria-label when children contain non-text content.
<button
type="button"
+ aria-label={typeof children === 'string' ? undefined : 'Navigation button'}
className={`${
isSecondary ? 'bg-surface' : 'bg-monarch-orange'
} rounded-sm p-4 px-10 font-zen opacity-80 transition-all duration-200 ease-in-out hover:opacity-100 ${className} hover:scale-105`}
>src/utils/balance.ts (1)
41-42: Improve error logging
Log should include the input value for better debugging.
- console.log('Error formatting number', e, typeof num);
+ console.log('Error formatting number:', { error: e, value: num, type: typeof num });src/components/Button/Button.tsx (1)
Found inconsistent background class usage
bg-primary is still used in several components:
- ButtonGroup.tsx
- Navbar.tsx
- MarketTableBody.tsx
- PositionsSummaryTable.tsx
These need to be updated to bg-main for consistency with the new styling approach.
🔗 Analysis chain
Line range hint 33-37: Class name change looks good.
The switch from 'bg-primary' to 'bg-main' aligns with the app-wide styling updates.
Let's check if this change is consistent across the app:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any remaining bg-primary classes that might need updating
rg 'bg-primary' --type css --type tsx --type jsx
# Check usage of the new bg-main class
rg 'bg-main' --type css --type tsx --type jsx
Length of output: 150
Script:
#!/bin/bash
# Search for bg-primary without file type restrictions
rg "bg-primary"
# Search for bg-main without file type restrictions
rg "bg-main"
Length of output: 2474
app/home/HomePage.tsx (1)
22-22: Reorder Tailwind classes for consistency
Move layout utilities before background:
- <div className="bg-main flex min-h-screen flex-col">
+ <div className="flex min-h-screen flex-col bg-main">app/info/components/risk.tsx (2)
63-63: LGTM! Class name updates align with the new styling system.
The transition from specific color names to semantic classes (text-primary, text-secondary, etc.) improves maintainability.
Consider extracting common classes into Tailwind components to reduce repetition:
+ /* in tailwind.config.js */
+ theme: {
+ extend: {
+ textStyles: {
+ 'link': 'text-primary underline',
+ 'highlight': 'font-bold text-primary',
+ }
+ }
+ }Also applies to: 72-72, 79-79, 83-83
74-81: Add ARIA labels to improve accessibility.
The risk sections could benefit from better screen reader support.
-<div key={section.mainTitle} className="mb-8">
+<div
+ key={section.mainTitle}
+ className="mb-8"
+ role="region"
+ aria-labelledby={`section-${section.mainTitle}`}>
- <h2 className="text-2xl font-semibold">{section.mainTitle}</h2>
+ <h2 id={`section-${section.mainTitle}`} className="text-2xl font-semibold">{section.mainTitle}</h2>src/components/RiskNotificationModal.tsx (1)
Line range hint 28-29: Consider allowing modal dismissal.
The empty onClose handler and hideCloseButton make the modal too restrictive. Consider allowing users to dismiss and reopen it later.
- <Modal isOpen={isOpen} onClose={() => {}} hideCloseButton size="3xl" scrollBehavior="inside">
+ <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="3xl" scrollBehavior="inside">src/components/ButtonGroup.tsx (1)
44-44: Add type safety to event handler
Add explicit types for the event handler.
- onClick={() => onChange(option.value)}
+ onClick={(e: React.MouseEvent<HTMLButtonElement>) => onChange(option.value)}app/markets/components/Pagination.tsx (3)
Line range hint 13-13: Rename isDataLoaded to isMarketDataLoaded
The current prop name is too generic. A more specific name would better indicate what data we're waiting for.
Also applies to: 16-21
Line range hint 39-44: Add missing dependency to useEffect
The effect depends on isDataLoaded but it's not in the dependency array. This could cause stale closures.
useEffect(() => {
if (isDataLoaded) {
onPageChange(1);
}
- }, [isDataLoaded, onPageChange]);
+ }, [isDataLoaded, onPageChange]);Line range hint 29-34: Add max entries limit and error feedback
The custom entries validation needs:
- Upper limit check (e.g., max 100 entries)
- User feedback for invalid inputs
const handleCustomEntriesChange = () => {
const value = parseInt(customEntries, 10);
- if (!isNaN(value) && value > 0) {
+ if (!isNaN(value) && value > 0 && value <= 100) {
handleEntriesChange(value);
+ } else {
+ setCustomEntries(entriesPerPage.toString());
+ // Add toast or error message here
}
};package.json (1)
63-63: LGTM, but note the bundle size.
Recharts is a solid choice for the market graphs. Just keep in mind it adds ~42kB to your bundle.
app/markets/components/OracleFilter.tsx (1)
117-117: Consider adding aria-label to clear button
While the styling changes look good, the clear button could benefit from an aria-label for better screen reader support.
<button
className="hover:bg-main flex w-full items-center justify-between rounded-sm p-2 text-left text-xs text-secondary"
onClick={clearSelection}
type="button"
+ aria-label="Clear oracle selection"
>Also applies to: 119-119
app/global.css (1)
Line range hint 7-67: Clean up theme variables.
Two suggestions:
- Remove duplicate --quick-nav-display from dark theme
- Use consistent naming for palette colors (either all with -bg prefix or none)
:root {
--quick-nav-display: none;
/* ... */
}
.dark {
- --quick-nav-display: none;
/* Palette - black */
--palette-orange: #f45f2d;
- --palette-bg-black: #16181a;
- --palette-bg-black-secondary: #202426;
- --palette-bg-hovered: #313537;
+ --palette-black: #16181a;
+ --palette-black-secondary: #202426;
+ --palette-hovered: #313537;
/* ... */
}app/history/components/HistoryTable.tsx (1)
89-96: Add accessibility attributes to Link
Add aria-label for better screen reader support.
<Link
href={`/market/${tx.data.market.morphoBlue.chain.id}/${tx.data.market.uniqueKey}`}
+ aria-label={`View market ${tx.data.market.uniqueKey}`}
>app/info/components/info.tsx (1)
Line range hint 1-2: Add keyboard support instead of disabling ESLint.
Remove ESLint disables and handle keyboard events properly.
-// eslint-disable jsx-a11y/click-events-have-key-events
-// eslint-disable jsx-a11y/no-static-element-interactions
+'use client';
+
+import { useCallback } from 'react';Add to your click handlers:
const handleKeyPress = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
// your click handler logic
}
}, []);src/utils/types.ts (1)
301-301: Remove unnecessary comment.
The comment about additional fields doesn't provide value. Remove it if there are no immediate plans to add more fields.
app/markets/components/MarketTableBody.tsx (1)
165-165: Consider preserving hover opacity
The hover state might need opacity adjustment to match the base state's 50% opacity.
- className="bg-hovered items-center justify-between rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary "
+ className="bg-hovered items-center justify-between rounded-sm bg-opacity-50 p-2 text-xs duration-300 ease-in-out hover:bg-primary hover:bg-opacity-50"app/positions/components/SuppliedMarketsDetail.tsx (1)
140-146: Remove commented tooltip code
Clean up the commented tooltip code since it's no longer needed.
- {/* <Tooltip content="View on Explorer" placement="top"> */}
<Link
className="group flex items-center justify-center no-underline hover:underline"
href={`/market/${position.market.morphoBlue.chain.id}/${position.market.uniqueKey}`}
>
{position.market.uniqueKey.slice(2, 8)}
</Link>
- {/* </Tooltip> */}src/components/supplyModal.tsx (1)
239-241: Market ID now links to details page
Good UX improvement making the market ID clickable. Consider adding a visual hover state to indicate it's interactive.
- <Link href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}>
- <p className="text-right font-monospace text-sm">{market.uniqueKey.slice(2, 8)}</p>
+ <Link
+ href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
+ className="hover:opacity-80"
+ >
+ <p className="text-right font-monospace text-sm">{market.uniqueKey.slice(2, 8)}</p>app/rewards/components/MarketProgram.tsx (1)
311-314: Consider adding aria-label to the Link
The market ID link could benefit from descriptive aria text for accessibility.
-<Link href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}>
+<Link
+ href={`/market/${market.morphoBlue.chain.id}/${market.uniqueKey}`}
+ aria-label={`View details for market ${market.uniqueKey}`}>📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (19)
src/fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Bold.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-BoldItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBold.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraBoldItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLight.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-ExtraLightItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Italic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Light.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-LightItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Medium.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-MediumItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Regular.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBold.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-SemiBoldItalic.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-Thin.ttfis excluded by!**/*.ttfsrc/fonts/JetBrains_Mono/static/JetBrainsMono-ThinItalic.ttfis excluded by!**/*.ttfyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (51)
- .eslintrc.js (1 hunks)
- app/fonts.ts (1 hunks)
- app/global.css (1 hunks)
- app/history/components/HistoryTable.tsx (3 hunks)
- app/home/HomePage.tsx (1 hunks)
- app/info/components/info.tsx (2 hunks)
- app/info/components/risk.tsx (2 hunks)
- app/info/components/sectionData.tsx (1 hunks)
- app/market/[chainId]/[marketid]/RateChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/VolumeChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/content.tsx (1 hunks)
- app/market/[chainId]/[marketid]/page.tsx (1 hunks)
- app/markets/components/AdvancedSearchBar.tsx (1 hunks)
- app/markets/components/AssetFilter.tsx (3 hunks)
- app/markets/components/CheckFilter.tsx (1 hunks)
- app/markets/components/MarketTableBody.tsx (3 hunks)
- app/markets/components/NetworkFilter.tsx (1 hunks)
- app/markets/components/OracleFilter.tsx (3 hunks)
- app/markets/components/Pagination.tsx (2 hunks)
- app/positions/components/PositionsContent.tsx (1 hunks)
- app/positions/components/PositionsSummaryTable.tsx (1 hunks)
- app/positions/components/RebalanceProcessModal.tsx (1 hunks)
- app/positions/components/SuppliedMarketsDetail.tsx (3 hunks)
- app/rewards/components/MarketProgram.tsx (3 hunks)
- app/rewards/components/RewardContent.tsx (3 hunks)
- app/rewards/components/UniformProgram.tsx (1 hunks)
- docs/Styling.md (1 hunks)
- package.json (1 hunks)
- src/components/Button/Button.tsx (1 hunks)
- src/components/ButtonGroup.tsx (1 hunks)
- src/components/Input/Input.tsx (1 hunks)
- src/components/OracleVendorBadge.tsx (1 hunks)
- src/components/RiskNotificationModal.tsx (2 hunks)
- src/components/SearchOrConnect/SearchOrConnect.tsx (2 hunks)
- src/components/Status/EmptyScreen.tsx (1 hunks)
- src/components/Status/LoadingScreen.tsx (1 hunks)
- src/components/SupplyProcessModal.tsx (1 hunks)
- src/components/common/PrimaryButton.tsx (1 hunks)
- src/components/layout/footer/Footer.tsx (1 hunks)
- src/components/layout/header/AccountDropdown.tsx (1 hunks)
- src/components/layout/header/Navbar.tsx (1 hunks)
- src/components/layout/header/NavbarMobile.tsx (1 hunks)
- src/components/supplyModal.tsx (3 hunks)
- src/components/withdrawModal.tsx (1 hunks)
- src/constants/chartColors.ts (1 hunks)
- src/fonts/JetBrains_Mono/OFL.txt (1 hunks)
- src/fonts/JetBrains_Mono/README.txt (1 hunks)
- src/graphql/queries.ts (1 hunks)
- src/hooks/useMarket.ts (1 hunks)
- src/utils/balance.ts (1 hunks)
- src/utils/types.ts (1 hunks)
✅ Files skipped from review due to trivial changes (19)
- app/markets/components/AdvancedSearchBar.tsx
- app/markets/components/AssetFilter.tsx
- app/markets/components/CheckFilter.tsx
- app/markets/components/NetworkFilter.tsx
- app/positions/components/PositionsContent.tsx
- app/positions/components/PositionsSummaryTable.tsx
- app/positions/components/RebalanceProcessModal.tsx
- app/rewards/components/UniformProgram.tsx
- docs/Styling.md
- src/components/Input/Input.tsx
- src/components/SearchOrConnect/SearchOrConnect.tsx
- src/components/Status/EmptyScreen.tsx
- src/components/Status/LoadingScreen.tsx
- src/components/SupplyProcessModal.tsx
- src/components/layout/footer/Footer.tsx
- src/components/layout/header/AccountDropdown.tsx
- src/components/layout/header/Navbar.tsx
- src/components/withdrawModal.tsx
- src/constants/chartColors.ts
🧰 Additional context used
🪛 LanguageTool
src/fonts/JetBrains_Mono/OFL.txt
[typographical] ~9-~9: If you want to indicate numerical ranges or time ranges, consider using an en dash.
Context: ...-----
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
----------------------...
(DASH_RULE)
src/fonts/JetBrains_Mono/README.txt
[formatting] ~14-~14: Consider inserting a comma after an introductory phrase for better readability.
Context: ...ot all apps support variable fonts, and in those cases you can use the static font files for J...
(IN_THAT_CASE_COMMA)
🔇 Additional comments (40)
app/market/[chainId]/[marketid]/page.tsx (1)
1-2: Clean imports
src/components/common/PrimaryButton.tsx (1)
21-21: CSS class change looks good
The bg-surface class aligns with the new styling system.
app/fonts.ts (2)
38-38: Good choice switching to JetBrains Mono.
JetBrains Mono is optimized for readability and coding. The variable font format will help with performance.
38-38: Verify font file existence.
Let's ensure the font file is present in the specified location.
✅ Verification successful
Font file exists at the correct location
The JetBrains Mono font file is present at src/fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf, which matches the relative path in the code.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the JetBrains Mono font file exists
fd JetBrainsMono-VariableFont_wght.ttf
Length of output: 101
src/utils/balance.ts (1)
31-39: LGTM: Number formatting logic
Clean implementation with consistent decimal places and proper handling of negative values.
src/components/OracleVendorBadge.tsx (3)
31-31: CSS class update looks good
Changed from bg-primary to bg-main as planned.
34-34: Text cleanup looks good
Simpler text without colon.
23-23: Verify impact of showText prop change
Changing default from true to false will hide text in existing implementations.
✅ Verification successful
Change is safe - most usages explicitly set showText
Looking at actual usage:
- 5 places use OracleVendorBadge with explicit
showTextprop - 3 places use it without
showText, defaulting to false (which matches new default) - No breaking changes found
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find components using OracleVendorBadge without explicit showText prop
ast-grep --pattern 'OracleVendorBadge $$$'
Length of output: 44
Script:
#!/bin/bash
# Search for OracleVendorBadge usage with ripgrep for better context
rg "OracleVendorBadge" -A 2 -B 2
# Also find the component's import statements
rg "import.*OracleVendorBadge"
Length of output: 7157
app/home/HomePage.tsx (1)
Line range hint 31-39: Clean implementation of text animation
Good job with the interval cleanup and smooth transitions.
src/components/layout/header/NavbarMobile.tsx (1)
17-17: LGTM: Background color class updates look consistent.
The change from bg-primary to bg-main aligns with the PR's CSS standardization goals.
Also applies to: 23-23
app/rewards/components/RewardContent.tsx (2)
5-5: LGTM!
Clean import following project conventions.
66-71: LGTM!
Clean ButtonGroup implementation with proper typing.
src/components/RiskNotificationModal.tsx (1)
50-50: Styling changes look good.
Changes align with the CSS standardization effort.
Also applies to: 68-68, 73-73
src/components/ButtonGroup.tsx (1)
20-24: LGTM!
Clean size configuration using Tailwind classes.
app/markets/components/Pagination.tsx (1)
77-77: LGTM!
The bg-surface class changes align with the PR's CSS update objectives.
Also applies to: 104-104
app/info/components/sectionData.tsx (2)
9-9: CSS class name change looks good.
Changed from bg-primary to bg-main to fix Tailwind conflicts.
Line range hint 1-140: Content structure needs review.
The file describes Monarch as a Morpho Blue interface, but the sections focus on future features rather than the market page being added.
Let's check if this content matches the actual features:
app/markets/components/OracleFilter.tsx (2)
54-55: LGTM: Background class updates look correct
The change from bg-secondary to bg-surface aligns with the PR's CSS standardization goals.
92-92: LGTM: Dropdown container styling is consistent
Background class update matches the main dropdown changes.
app/global.css (2)
73-77: Good class renaming.
The new names are clearer and avoid Tailwind conflicts.
Line range hint 236-254: Good scrollbar implementation.
Clean cross-browser styling that follows theme colors.
src/graphql/queries.ts (2)
200-207: Clean implementation of market detail query
Good use of the existing MarketFields fragment.
209-256: Verify TimeseriesOptions type definition
The query looks good but relies on TimeseriesOptions type.
✅ Verification successful
TimeseriesOptions type is properly defined and used
The type is defined in src/utils/types.ts with required fields:
type TimeseriesOptions = {
startTimestamp: number;
endTimestamp: number;
interval: 'HOUR' | 'DAY' | 'WEEK';
}🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find TimeseriesOptions type definition
ast-grep --pattern 'type TimeseriesOptions'
Length of output: 45
Script:
#!/bin/bash
# Search for TimeseriesOptions in schema files and type definitions
rg -t ts "TimeseriesOptions" -A 3
# Also check for interface definition
ast-grep --pattern 'interface TimeseriesOptions'
Length of output: 3663
app/history/components/HistoryTable.tsx (2)
3-3: LGTM!
Import aligns with NextUI component usage.
36-37: Verify bg-surface class definition
Let's confirm the bg-surface class exists in the codebase.
✅ Verification successful
bg-surface class exists and is properly defined
The class maps to --color-background-secondary CSS variable, making this change valid.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for bg-surface class definition
rg -g '*.css' -g '*.scss' 'bg-surface'
Length of output: 67
Script:
#!/bin/bash
# Check the definition of bg-surface class
rg -A 3 'bg-surface' app/global.css
Length of output: 107
app/info/components/info.tsx (2)
101-101: Good class rename.
Changed from bg-primary to bg-main. Better naming.
111-111: Check other bg-surface usage.
Good rename. Let's check if it's used consistently.
✅ Verification successful
bg-surface is used consistently across the codebase
No instances of bg-secondary found. The bg-surface class is used correctly for card-like and modal elements throughout the application.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Find any remaining bg-secondary classes that should be bg-surface
rg "bg-secondary" --type tsx --type jsx
Length of output: 67
Script:
#!/bin/bash
# Search for bg-secondary and bg-surface classes in all files
rg "bg-secondary|bg-surface" --type-add 'tsx:*.tsx' --type-add 'jsx:*.jsx' --type tsx --type jsx
Length of output: 5891
.eslintrc.js (1)
73-73: Consider using targeted eslint-disable comments instead of relaxing the rule globally.
While this change helps with market page development, it could lead to unchecked any usage across the codebase. Consider:
- Keep the error level and use
// eslint-disable-next-linewhere needed - Document valid use cases in a comment
src/utils/types.ts (2)
282-285: LGTM!
Clean and standard time series point structure.
287-299: LGTM!
Well-structured extension of Market type with comprehensive historical data points.
app/markets/components/MarketTableBody.tsx (2)
4-4: LGTM!
Appropriate import for Next.js Link component.
92-98: LGTM!
Clean implementation of Next.js Link with proper event handling.
app/positions/components/SuppliedMarketsDetail.tsx (3)
3-3: LGTM: Next.js Link import
Good switch to Next.js Link for internal navigation.
140-145: Verify market route pattern
Let's confirm the market route pattern matches the Next.js configuration.
#!/bin/bash
# Look for route pattern definition
fd "page.tsx" app/market60-60: Verify consistent bg-surface usage
The class rename from bg-secondary to bg-surface needs verification across the codebase.
✅ Verification successful
bg-surface class is used consistently
The change from bg-secondary to bg-surface aligns with the codebase. bg-surface is properly defined in global.css and used throughout the app. No instances of bg-secondary were found.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any remaining bg-secondary classes
rg "bg-secondary" --type=tsx --type=jsx --type=css
# Check new bg-surface usage
rg "bg-surface" --type=tsx --type=jsx --type=css
Length of output: 159
Script:
#!/bin/bash
# Search for bg-secondary usage with proper quoting
rg 'bg-secondary' --type=tsx --type=jsx --type=css
# Search for bg-surface usage with proper quoting
rg 'bg-surface' --type=tsx --type=jsx --type=css
# Also check for these classes in Tailwind config
fd 'tailwind.config' --exec cat {}
Length of output: 1724
Script:
#!/bin/bash
# Search without file type restrictions since rg doesn't recognize tsx
rg 'bg-secondary'
rg 'bg-surface'
# Check if these are defined in any CSS files
fd '\.(css|scss)$' --exec cat {}
Length of output: 12499
src/components/supplyModal.tsx (2)
216-216: Style changes align with new design system
The background class changes from bg-secondary to bg-surface and bg-primary to bg-main match the PR objectives of resolving Tailwind CSS conflicts.
Also applies to: 220-220
Line range hint 1-365: Verify error handling in transaction flow
The component handles complex transaction flows with permit2. Ensure errors are properly caught and displayed.
✅ Verification successful
Error handling in transaction flow is properly implemented
The code shows consistent error handling patterns across transaction flows:
- All critical transaction steps have try-catch blocks
- User-facing error messages via toast notifications
- State cleanup on errors (e.g.
setShowProcessModal(false)) - Error logging for debugging
- Graceful fallbacks
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check error handling patterns in transaction flows
rg -A 2 "catch.*error" src/
Length of output: 2831
app/rewards/components/MarketProgram.tsx (2)
6-6: LGTM: Link import added for client-side navigation
Aligns with Next.js best practices for internal navigation.
101-101: Verify CSS class name changes
Changed from bg-secondary to bg-surface. Check if this matches the new design system.
Also applies to: 105-107
✅ Verification successful
CSS class change is consistent with design system
The change from bg-secondary to bg-surface aligns with the current codebase. bg-surface is widely used across components and documented in docs/Styling.md, while bg-secondary is not used anywhere.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for any remaining bg-secondary usage
rg "bg-secondary" --type css
rg "bg-secondary" --type tsx
Length of output: 85
Script:
#!/bin/bash
# Search for bg-secondary and bg-surface in all files
rg "bg-secondary"
rg "bg-surface"
# Check for any Tailwind or CSS config files
fd -e config.js
fd -e config.ts
Length of output: 6022
app/market/[chainId]/[marketid]/content.tsx (1)
78-84: Loading spinner looks good
There was a problem hiding this comment.
Actionable comments posted: 13
🧹 Outside diff range and nitpick comments (3)
app/market/[chainId]/[marketid]/content.tsx (1)
86-88: Improve error message readability
The raw error message might be confusing for users.
- return <div className="text-center text-red-500">Error: {(marketError as Error).message}</div>;
+ return (
+ <div className="text-center">
+ <p className="text-red-500 font-medium">Unable to load market data</p>
+ <p className="text-sm text-gray-500">{(marketError as Error).message}</p>
+ </div>
+ );app/market/[chainId]/[marketid]/VolumeChart.tsx (2)
98-100: Make volume threshold configurable
The 100B USD threshold is hardcoded. Consider making it configurable via props or constants.
-if (historicalData.supplyAssetsUsd[index].y >= 100_000_000_000) {
+const MAX_VOLUME_THRESHOLD = 100_000_000_000;
+if (historicalData.supplyAssetsUsd[index].y >= MAX_VOLUME_THRESHOLD) {212-213: Add accessibility attributes to chart
The chart lacks proper accessibility attributes for screen readers.
-<ResponsiveContainer width="100%" height={400}>
- <AreaChart data={getVolumeChartData()}>
+<ResponsiveContainer width="100%" height={400}>
+ <AreaChart
+ data={getVolumeChartData()}
+ aria-label="Volume chart"
+ role="img">📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
- app/market/[chainId]/[marketid]/RateChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/VolumeChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/content.tsx (1 hunks)
- app/rewards/components/RewardContent.tsx (3 hunks)
- src/components/ButtonGroup.tsx (1 hunks)
- src/hooks/useMarket.ts (1 hunks)
🧰 Additional context used
📓 Learnings (1)
app/market/[chainId]/[marketid]/RateChart.tsx (1)
Learnt from: antoncoding
PR: antoncoding/monarch#79
File: app/market/[chainId]/[marketid]/RateChart.tsx:240-240
Timestamp: 2024-10-29T09:41:20.361Z
Learning: In this project, 'font-monospace' is the correct class to use for applying monospace fonts.
🪛 eslint
app/market/[chainId]/[marketid]/RateChart.tsx
[error] 182-190: Unsafe return of an any typed value.
(@typescript-eslint/no-unsafe-return)
app/market/[chainId]/[marketid]/VolumeChart.tsx
[error] 352-359: Unsafe return of an any typed value.
(@typescript-eslint/no-unsafe-return)
app/market/[chainId]/[marketid]/content.tsx
[error] 284-284: Unsafe assignment of an any value.
(@typescript-eslint/no-unsafe-assignment)
app/rewards/components/RewardContent.tsx
[error] 69-69: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
src/components/ButtonGroup.tsx
[error] 45-45: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
src/hooks/useMarket.ts
[error] 122-122: Unsafe assignment of an any value.
(@typescript-eslint/no-unsafe-assignment)
🔇 Additional comments (6)
app/rewards/components/RewardContent.tsx (2)
5-5: LGTM: ButtonGroup import
Clean import from absolute path.
15-18: Skip comment: programOptions extraction
src/components/ButtonGroup.tsx (1)
20-24: LGTM!
Clean size configuration using Tailwind classes.
src/hooks/useMarket.ts (2)
72-80: LGTM
Clean implementation with proper caching.
121-122:
Type the refetch functions
Fix the TypeScript error by adding proper types.
refetch: {
- rates: rateQuery.refetch,
- volumes: volumeQuery.refetch,
+ rates: () => Promise<void>,
+ volumes: () => Promise<void>,
},Likely invalid or redundant comment.
🧰 Tools
🪛 eslint
[error] 122-122: Unsafe assignment of an any value.
(@typescript-eslint/no-unsafe-assignment)
app/market/[chainId]/[marketid]/RateChart.tsx (1)
1-50: LGTM: Props and setup are well-typed
| <ButtonGroup | ||
| options={programOptions} | ||
| value={activeProgram} | ||
| onChange={(value) => setActiveProgram(value as 'market' | 'uniform')} | ||
| size="md" | ||
| /> |
There was a problem hiding this comment.
Fix type safety in onChange handler
The type assertion can be avoided by properly typing the ButtonGroup props.
- onChange={(value) => setActiveProgram(value as 'market' | 'uniform')}
+ onChange={(value: 'market' | 'uniform') => setActiveProgram(value)}🧰 Tools
🪛 eslint
[error] 69-69: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
| variant === 'default' | ||
| ? [ | ||
| isSelected ? 'bg-hovered hover:bg-surface z-10' : 'bg-surface hover:bg-hovered', | ||
| 'border border-divider', | ||
| 'shadow-sm', | ||
| ] | ||
| : [ | ||
| // Primary variant with enhanced styling | ||
| isSelected | ||
| ? [ | ||
| 'z-10 bg-primary hover:bg-primary/90', | ||
| 'shadow-[0_2px_8px_-2px] shadow-primary/30', | ||
| 'border-primary/80', | ||
| ] | ||
| : [ | ||
| 'bg-surface hover:bg-surface/90', | ||
| 'hover:shadow-[0_2px_8px_-2px] hover:shadow-primary/20', | ||
| 'border-primary/60 hover:border-primary/80', | ||
| ], | ||
| 'border', | ||
| // Subtle gradient overlay | ||
| 'before:absolute before:inset-0 before:rounded-[inherit]', | ||
| isSelected | ||
| ? 'before:bg-gradient-to-b before:from-white/10 before:to-transparent' | ||
| : 'before:bg-gradient-to-b before:from-transparent before:to-black/5', | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify variant styling logic
Extract variant styles to a separate object for better maintainability:
+const variantStyles = {
+ default: (isSelected: boolean) => [
+ isSelected ? 'bg-hovered hover:bg-surface z-10' : 'bg-surface hover:bg-hovered',
+ 'border border-divider',
+ 'shadow-sm',
+ ],
+ primary: (isSelected: boolean) => [
+ isSelected
+ ? [
+ 'z-10 bg-primary hover:bg-primary/90',
+ 'shadow-[0_2px_8px_-2px] shadow-primary/30',
+ 'border-primary/80',
+ ]
+ : [
+ 'bg-surface hover:bg-surface/90',
+ 'hover:shadow-[0_2px_8px_-2px] hover:shadow-primary/20',
+ 'border-primary/60 hover:border-primary/80',
+ ],
+ 'border',
+ 'before:absolute before:inset-0 before:rounded-[inherit]',
+ isSelected
+ ? 'before:bg-gradient-to-b before:from-white/10 before:to-transparent'
+ : 'before:bg-gradient-to-b before:from-transparent before:to-black/5',
+ ],
+};
// Then in className:
variant === 'default' ? variantStyles.default(isSelected) : variantStyles.primary(isSelected),Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Outside diff range and nitpick comments (4)
src/utils/balance.ts (1)
43-43: Add input value to error log
Include the actual value in error log for better debugging.
- console.log('Error formatting number', e, typeof num);
+ console.log('Error formatting number', { error: e, type: typeof num, value: num });app/market/[chainId]/[marketid]/RateChart.tsx (2)
1-1: Remove ESLint disable comment
The ESLint warning about unstable nested components can be fixed by moving the formatter function outside the component.
-/* eslint-disable react/no-unstable-nested-components */
+const formatLegendValue = (value: string, isVisible: boolean) => (
+ <span style={{ color: isVisible ? undefined : '#999' }}>{value}</span>
+);101-101: Extract magic number
Replace 86400 with a named constant for better readability.
+const ONE_DAY_IN_SECONDS = 86400;
+
-if (rateTimeRange.endTimestamp - rateTimeRange.startTimestamp <= 86400) {
+if (rateTimeRange.endTimestamp - rateTimeRange.startTimestamp <= ONE_DAY_IN_SECONDS) {app/market/[chainId]/[marketid]/VolumeChart.tsx (1)
98-100: Add logging for filtered data points
Silent filtering of high-value data points could hide important information.
if (historicalData.supplyAssetsUsd[index].y >= 100_000_000_000) {
+ console.warn(`Filtering out data point at ${point.x} due to high USD value`);
return null;
}📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
- app/market/[chainId]/[marketid]/RateChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/VolumeChart.tsx (1 hunks)
- app/market/[chainId]/[marketid]/content.tsx (1 hunks)
- src/components/ButtonGroup.tsx (1 hunks)
- src/utils/balance.ts (1 hunks)
- src/utils/types.ts (1 hunks)
🧰 Additional context used
📓 Learnings (1)
app/market/[chainId]/[marketid]/RateChart.tsx (1)
Learnt from: antoncoding
PR: antoncoding/monarch#79
File: app/market/[chainId]/[marketid]/RateChart.tsx:240-240
Timestamp: 2024-10-29T09:41:20.361Z
Learning: In this project, 'font-monospace' is the correct class to use for applying monospace fonts.
🪛 eslint
app/market/[chainId]/[marketid]/RateChart.tsx
[error] 198-206: Unsafe return of an any typed value.
(@typescript-eslint/no-unsafe-return)
app/market/[chainId]/[marketid]/VolumeChart.tsx
[error] 352-359: Unsafe return of an any typed value.
(@typescript-eslint/no-unsafe-return)
app/market/[chainId]/[marketid]/content.tsx
[error] 286-286: Unsafe assignment of an any value.
(@typescript-eslint/no-unsafe-assignment)
src/components/ButtonGroup.tsx
[error] 71-71: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
🪛 Biome
src/utils/balance.ts
[error] 28-28: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
🔇 Additional comments (8)
src/components/ButtonGroup.tsx (2)
52-98: Clean component implementation
Good job on:
- Proper ARIA attributes
- Consistent state management
- Smooth transitions
- Responsive sizing
🧰 Tools
🪛 eslint
[error] 71-71: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
85-87:
Add keyboard focus styles
// Hover & Focus styles
'hover:relative hover:z-20',
+'focus:outline-none',
+'focus-visible:z-20 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-0',Likely invalid or redundant comment.
src/utils/types.ts (3)
282-285: LGTM!
Clean and straightforward data point structure.
293-307: LGTM!
Good separation of concerns between rates and volumes data.
309-316: LGTM!
Clean type composition using MarketRates and MarketVolumes.
app/market/[chainId]/[marketid]/RateChart.tsx (1)
190-196:
Improve type safety in Legend onClick
The event type should be properly typed instead of using type assertion.
-onClick={(e) => {
- const dataKey = e.dataKey as keyof typeof visibleLines;
+onClick={(e: { dataKey: string }) => {
+ const dataKey = e.dataKey;
+ if (dataKey in visibleLines) {
setVisibleLines((prev) => ({
...prev,
[dataKey]: !prev[dataKey],
}));
+ }
}}Likely invalid or redundant comment.
app/market/[chainId]/[marketid]/content.tsx (2)
28-78: MarketContent component looks good
The MarketContent component is well-structured and effectively manages state and data fetching.
279-287:
Address TypeScript error in RateChart
Similar to the previous comment, ensure setTimeRangeAndRefetch is correctly typed.
Apply this diff:
<RateChart
historicalData={historicalData?.rates}
market={market}
rateTimeRange={rateTimeRange}
isLoading={isHistoricalLoading.rates}
apyTimeframe={apyTimeframe}
setApyTimeframe={setApyTimeframe}
- setTimeRangeAndRefetch={setTimeRangeAndRefetch}
+ setTimeRangeAndRefetch={setTimeRangeAndRefetch as (days: number, type: 'rate' | 'volume') => void}
/>Likely invalid or redundant comment.
🧰 Tools
🪛 eslint
[error] 286-286: Unsafe assignment of an any value.
(@typescript-eslint/no-unsafe-assignment)
| export function formatReadable(num: number | string): string { | ||
| if (typeof num === 'string') { | ||
| const parsed = parseFloat(num); | ||
| if (isNaN(parsed)) return num; |
There was a problem hiding this comment.
Replace isNaN with Number.isNaN
Global isNaN does type coercion. Use Number.isNaN for safer number validation.
- if (isNaN(parsed)) return num;
+ if (Number.isNaN(parsed)) return num;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (isNaN(parsed)) return num; | |
| if (Number.isNaN(parsed)) return num; |
🧰 Tools
🪛 Biome
[error] 28-28: isNaN is unsafe. It attempts a type coercion. Use Number.isNaN instead.
See the MDN documentation for more details.
Unsafe fix: Use Number.isNaN instead.
(lint/suspicious/noGlobalIsNan)
| key={option.key} | ||
| type="button" | ||
| onClick={() => onChange(option.value)} | ||
| className={clsx( |
There was a problem hiding this comment.
Fix clsx type safety
-className={clsx(
+className={clsx as (...args: unknown[]) => string}(📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={clsx( | |
| className={clsx as (...args: unknown[]) => string}( |
🧰 Tools
🪛 eslint
[error] 71-71: Unsafe call of an any typed value.
(@typescript-eslint/no-unsafe-call)
| export type TimeseriesOptions = { | ||
| startTimestamp: number; | ||
| endTimestamp: number; | ||
| interval: 'MINUTE' | 'HALF_HOUR' | 'HOUR' | 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR' | 'ALL'; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add runtime validation for timestamp range.
The type doesn't enforce that startTimestamp < endTimestamp. Consider adding a validation function:
export function validateTimeseriesOptions(options: TimeseriesOptions): void {
if (options.startTimestamp >= options.endTimestamp) {
throw new Error('startTimestamp must be less than endTimestamp');
}
}| formatter={(value, entry) => ( | ||
| <span | ||
| style={{ | ||
| color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines] | ||
| ? undefined | ||
| : '#999', | ||
| }} | ||
| > | ||
| {value} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
Fix unsafe any type in formatter
Replace any with proper type for the entry parameter.
-formatter={(value, entry) => (
+formatter={(value, entry: { dataKey: keyof typeof visibleLines }) => (
<span
style={{
- color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines]
+ color: visibleLines[entry.dataKey]
? undefined
: '#999',
}}
>
{value}
</span>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formatter={(value, entry) => ( | |
| <span | |
| style={{ | |
| color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines] | |
| ? undefined | |
| : '#999', | |
| }} | |
| > | |
| {value} | |
| </span> | |
| )} | |
| formatter={(value, entry: { dataKey: keyof typeof visibleLines }) => ( | |
| <span | |
| style={{ | |
| color: visibleLines[entry.dataKey] | |
| ? undefined | |
| : '#999', | |
| }} | |
| > | |
| {value} | |
| </span> | |
| )} |
🧰 Tools
🪛 eslint
[error] 198-206: Unsafe return of an any typed value.
(@typescript-eslint/no-unsafe-return)
| formatter={(value, entry) => ( | ||
| <span | ||
| style={{ | ||
| color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines] | ||
| ? undefined | ||
| : '#999', | ||
| }} | ||
| > | ||
| {value} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
Fix type safety in Legend formatter
The formatter uses unsafe type casting with any.
-formatter={(value, entry) => (
+formatter={(value, entry: { dataKey: keyof typeof visibleLines }) => (
<span
style={{
- color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines]
+ color: visibleLines[entry.dataKey]
? undefined
: '#999',
}}
>
{value}
</span>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formatter={(value, entry) => ( | |
| <span | |
| style={{ | |
| color: visibleLines[(entry as any).dataKey as keyof typeof visibleLines] | |
| ? undefined | |
| : '#999', | |
| }} | |
| > | |
| {value} | |
| </span> | |
| )} | |
| formatter={(value, entry: { dataKey: keyof typeof visibleLines }) => ( | |
| <span | |
| style={{ | |
| color: visibleLines[entry.dataKey] | |
| ? undefined | |
| : '#999', | |
| }} | |
| > | |
| {value} | |
| </span> | |
| )} |
| stopColor={CHART_COLORS.rateAtUTarget.gradient.start} | ||
| stopOpacity={CHART_COLORS.rateAtUTarget.gradient.startOpacity} |
There was a problem hiding this comment.
Fix inconsistent color naming
Liquidity gradient uses rateAtUTarget colors instead of dedicated liquidity colors.
-stopColor={CHART_COLORS.rateAtUTarget.gradient.start}
-stopOpacity={CHART_COLORS.rateAtUTarget.gradient.startOpacity}
+stopColor={CHART_COLORS.liquidity.gradient.start}
+stopOpacity={CHART_COLORS.liquidity.gradient.startOpacity}Committable suggestion was skipped due to low confidence.
| const getVolumeChartData = () => { | ||
| if (!historicalData) return []; | ||
|
|
||
| const supplyData = | ||
| volumeView === 'USD' ? historicalData.supplyAssetsUsd : historicalData.supplyAssets; | ||
| const borrowData = | ||
| volumeView === 'USD' ? historicalData.borrowAssetsUsd : historicalData.borrowAssets; | ||
| const liquidityData = | ||
| volumeView === 'USD' ? historicalData.liquidityAssetsUsd : historicalData.liquidityAssets; | ||
|
|
||
| // Process all data in a single loop | ||
| return supplyData | ||
| .map((point: TimeseriesDataPoint, index: number) => { | ||
| // Get corresponding points from other series | ||
| const borrowPoint = borrowData[index]; | ||
| const liquidityPoint = liquidityData[index]; | ||
|
|
||
| // Convert values based on view type | ||
| const supplyValue = | ||
| volumeView === 'USD' | ||
| ? point.y | ||
| : Number(formatUnits(BigInt(point.y), market.loanAsset.decimals)); | ||
| const borrowValue = | ||
| volumeView === 'USD' | ||
| ? borrowPoint?.y || 0 | ||
| : Number(formatUnits(BigInt(borrowPoint?.y || 0), market.loanAsset.decimals)); | ||
| const liquidityValue = | ||
| volumeView === 'USD' | ||
| ? liquidityPoint?.y || 0 | ||
| : Number(formatUnits(BigInt(liquidityPoint?.y || 0), market.loanAsset.decimals)); | ||
|
|
||
| // Check if any timestamps has USD value exceeds 100B | ||
| if (historicalData.supplyAssetsUsd[index].y >= 100_000_000_000) { | ||
| return null; | ||
| } | ||
|
|
||
| return { | ||
| x: point.x, | ||
| supply: supplyValue, | ||
| borrow: borrowValue, | ||
| liquidity: liquidityValue, | ||
| }; | ||
| }) | ||
| .filter((point): point is NonNullable<typeof point> => point !== null); | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Memoize chart data processing
getVolumeChartData runs on every render. Consider using useMemo.
+const chartData = useMemo(() => {
if (!historicalData) return [];
// ... existing processing logic
return processedData;
+}, [historicalData, volumeView, market.loanAsset.decimals]);Committable suggestion was skipped due to low confidence.
| const averageLTV = | ||
| !market.state.collateralAssetsUsd || | ||
| !market.state.borrowAssetsUsd || | ||
| market.state.collateralAssetsUsd <= 0 | ||
| ? 0 | ||
| : (parseFloat(market.state.borrowAssetsUsd) / market.state.collateralAssetsUsd) * 100; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Simplify average LTV calculation
Since market.state.borrowAssetsUsd and market.state.collateralAssetsUsd are numbers, parseFloat may be unnecessary.
Apply this diff:
const averageLTV =
!market.state.collateralAssetsUsd ||
!market.state.borrowAssetsUsd ||
market.state.collateralAssetsUsd <= 0
? 0
- : (parseFloat(market.state.borrowAssetsUsd) / market.state.collateralAssetsUsd) * 100;
+ : (market.state.borrowAssetsUsd / market.state.collateralAssetsUsd) * 100;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const averageLTV = | |
| !market.state.collateralAssetsUsd || | |
| !market.state.borrowAssetsUsd || | |
| market.state.collateralAssetsUsd <= 0 | |
| ? 0 | |
| : (parseFloat(market.state.borrowAssetsUsd) / market.state.collateralAssetsUsd) * 100; | |
| const averageLTV = | |
| !market.state.collateralAssetsUsd || | |
| !market.state.borrowAssetsUsd || | |
| market.state.collateralAssetsUsd <= 0 | |
| ? 0 | |
| : (market.state.borrowAssetsUsd / market.state.collateralAssetsUsd) * 100; |
| <VolumeChart | ||
| historicalData={historicalData?.volumes} | ||
| market={market} | ||
| volumeTimeRange={volumeTimeRange} | ||
| isLoading={isHistoricalLoading.volumes} | ||
| volumeView={volumeView} | ||
| volumeTimeframe={volumeTimeframe} | ||
| setVolumeTimeframe={setVolumeTimeframe} | ||
| setTimeRangeAndRefetch={setTimeRangeAndRefetch} | ||
| setVolumeView={setVolumeView} | ||
| /> |
There was a problem hiding this comment.
Ensure proper typing for setTimeRangeAndRefetch
To fix the TypeScript error, explicitly type setTimeRangeAndRefetch when passing it as a prop.
Apply this diff:
<VolumeChart
historicalData={historicalData?.volumes}
market={market}
volumeTimeRange={volumeTimeRange}
isLoading={isHistoricalLoading.volumes}
volumeView={volumeView}
volumeTimeframe={volumeTimeframe}
setVolumeTimeframe={setVolumeTimeframe}
- setTimeRangeAndRefetch={setTimeRangeAndRefetch}
+ setTimeRangeAndRefetch={setTimeRangeAndRefetch as (days: number, type: 'rate' | 'volume') => void}
setVolumeView={setVolumeView}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <VolumeChart | |
| historicalData={historicalData?.volumes} | |
| market={market} | |
| volumeTimeRange={volumeTimeRange} | |
| isLoading={isHistoricalLoading.volumes} | |
| volumeView={volumeView} | |
| volumeTimeframe={volumeTimeframe} | |
| setVolumeTimeframe={setVolumeTimeframe} | |
| setTimeRangeAndRefetch={setTimeRangeAndRefetch} | |
| setVolumeView={setVolumeView} | |
| /> | |
| <VolumeChart | |
| historicalData={historicalData?.volumes} | |
| market={market} | |
| volumeTimeRange={volumeTimeRange} | |
| isLoading={isHistoricalLoading.volumes} | |
| volumeView={volumeView} | |
| volumeTimeframe={volumeTimeframe} | |
| setVolumeTimeframe={setVolumeTimeframe} | |
| setTimeRangeAndRefetch={setTimeRangeAndRefetch as (days: number, type: 'rate' | 'volume') => void} | |
| setVolumeView={setVolumeView} | |
| /> |
1 participant
Core feature of the market page
Misc
Summary by CodeRabbit
Release Notes
New Features
RateChartandVolumeChartcomponents for visualizing market rates and volume data.MarketContentcomponent to display detailed market information.ButtonGroupcomponent for improved button selection in the rewards section.Styling Updates
AccountDropdown,Navbar, andFootercomponents for improved visual consistency.Documentation
Bug Fixes
These updates enhance the user experience by improving navigation, visual consistency, and data presentation.