Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 Walkthrough📝 WalkthroughWalkthroughThis pull request introduces several modifications across multiple files in the Monarch project. Key updates include a rebranding in the 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: 8
🧹 Outside diff range and nitpick comments (7)
app/settings/faq/page.tsx (1)
6-39: Move FAQ data to a separate fileExtract FAQ data to
app/settings/faq/data.tsfor better maintainability.README.md (1)
19-19: Consider adding a quick exampleThe overview explains the concept well. Adding a simple example of a lending strategy would make it more concrete.
src/components/layout/header/Navbar.tsx (2)
33-36: Extract common styles to a constantThe styling is clean but repeated across components. Consider extracting base styles to a constant.
+const baseNavLinkStyles = 'px-2 py-1 text-center font-zen text-base font-normal text-primary no-underline'; +const navLinkAnimationStyles = 'relative after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-full after:bg-primary transition-all duration-200 hover:-translate-y-[2px]'; className={clsx( - 'px-2 py-1 text-center font-zen text-base font-normal text-primary no-underline', - 'relative after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:w-full after:bg-primary', - 'transition-all duration-200 hover:-translate-y-[2px]', + baseNavLinkStyles, + navLinkAnimationStyles, isActive ? 'after:opacity-100' : 'after:opacity-0', )}
77-77: Remove or implement FAQ linkCommented code should be either removed or implemented.
src/components/layout/header/AccountDropdown.tsx (2)
24-26: Consider removing useCallbackThe
useCallbackhere might be unnecessary sincedisconnectis likely stable.- const handleDisconnectWallet = useCallback(() => { - disconnect(); - }, [disconnect]); + const handleDisconnectWallet = () => disconnect();
14-17: Avoid hardcoded margin for positioningUsing fixed negative margin for dropdown positioning could break on different screen sizes.
Consider using Radix UI's built-in positioning system:
-const DropdownMenuContentStyle = { - marginTop: '-22px', -}; // Then remove style={DropdownMenuContentStyle} from DropdownMenu.Contentapp/home/HomePage.tsx (1)
111-114: Handle undefined 'address' in 'Get Started' buttonIf
addressis undefined, the href becomes/positions/. Consider disabling the button or prompting the user to connect.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (17)
README.md(2 hunks)app/home/HomePage.tsx(1 hunks)app/home/_components/Home.module.css(0 hunks)app/home/_components/HomeHeader.tsx(0 hunks)app/home/_components/WhyUseIt.tsx(0 hunks)app/page.tsx(1 hunks)app/positions/components/FromAndToMarkets.tsx(2 hunks)app/positions/components/PositionsContent.tsx(1 hunks)app/positions/components/PositionsSummaryTable.tsx(1 hunks)app/positions/components/RebalanceActionInput.tsx(2 hunks)app/positions/components/RebalanceModal.tsx(1 hunks)app/settings/faq/page.tsx(1 hunks)src/components/common/PrimaryButton.tsx(1 hunks)src/components/layout/header/AccountConnect.tsx(1 hunks)src/components/layout/header/AccountDropdown.tsx(1 hunks)src/components/layout/header/AccountInfoPanel.tsx(0 hunks)src/components/layout/header/Navbar.tsx(2 hunks)
💤 Files with no reviewable changes (4)
- app/home/_components/Home.module.css
- app/home/_components/HomeHeader.tsx
- app/home/_components/WhyUseIt.tsx
- src/components/layout/header/AccountInfoPanel.tsx
✅ Files skipped from review due to trivial changes (4)
- app/page.tsx
- app/positions/components/PositionsSummaryTable.tsx
- app/positions/components/RebalanceModal.tsx
- src/components/common/PrimaryButton.tsx
🔇 Additional comments (8)
src/components/layout/header/AccountConnect.tsx (1)
48-50: Clean consolidation of account UI
Good move merging account info into the dropdown. Simpler code, same features.
README.md (1)
4-4: LGTM: Clear tagline
The new tagline accurately reflects the product focus.
app/positions/components/RebalanceActionInput.tsx (2)
31-31: Container styling looks good
Changed from orange-specific to primary color scheme. Matches the new branding.
62-62: Nice button animation
Added scale and opacity transitions. Makes the UI more engaging.
src/components/layout/header/AccountDropdown.tsx (2)
1-12: LGTM!
Imports are well-organized and all dependencies are used.
61-63: 🛠️ Refactor suggestion
Handle undefined chainId case
The fallback to chainId 1 might not be ideal if the network isn't Ethereum mainnet.
- <Link href={getExplorerURL(address, chainId ?? 1)} target="_blank">
+ <Link href={chainId ? getExplorerURL(address, chainId) : '#'} target="_blank">✅ Verification successful
Fallback to chainId 1 is correct
The current implementation is safe. The getExplorerURL function handles only Mainnet (1) and Base (8453), defaulting to Etherscan for any other chain. The fallback to chainId ?? 1 aligns with this design.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if getExplorerURL is used elsewhere with similar pattern
rg "getExplorerURL.*\?\?" --type typescript
Length of output: 80
Script:
#!/bin/bash
# Search for getExplorerURL usage
rg "getExplorerURL" -A 2
# Find the implementation of getExplorerURL
ast-grep --pattern 'function getExplorerURL'
Length of output: 4111
Script:
#!/bin/bash
# Find the type definition of SupportedNetworks
rg "enum SupportedNetworks" -A 5
# Find getExplorerURL implementation with export
ast-grep --pattern 'export const getExplorerURL'
Length of output: 794
app/positions/components/PositionsContent.tsx (1)
32-32: Check alignment after flex removal
The h1 element lost its flex alignment properties. This might affect its positioning relative to the buttons.
Consider this alternative that maintains alignment:
-<h1 className="py-8 font-zen"> Portfolio </h1>
+<h1 className="flex items-center py-8 font-zen"> Portfolio </h1>app/positions/components/FromAndToMarkets.tsx (1)
183-184: LGTM: Proper BigInt handling
Good use of BigInt for comparing large numbers.
| <div className="flex hidden md:block"> | ||
| <AccountDropdown /> | ||
| </div> |
There was a problem hiding this comment.
💡 Codebase verification
Mobile account access needs attention
The Connect button is visible on all screens, but the account dropdown only shows on desktop (md:block). No alternative mobile UI was found for logged-in users.
- Add mobile-friendly account access or document why it's desktop-only
🔗 Analysis chain
Check mobile account access
The dropdown is hidden on mobile screens. Make sure users can access account functions through another way on small screens.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if there's a mobile-specific account component
rg -g '*.tsx' -g '*.jsx' 'md:hidden.*Account'
Length of output: 47
Script:
#!/bin/bash
# Let's check for any mobile-specific account UI patterns
rg -g '*.tsx' -g '*.jsx' 'block md:hidden.*Account|md:hidden.*Account|Account.*block md:hidden|Account.*md:hidden'
# Also check the AccountConnect component for any mobile handling
rg -g 'AccountConnect.tsx' 'md:'
Length of output: 250
Script:
#!/bin/bash
# Let's check the entire AccountConnect component to understand mobile handling
rg -g 'AccountConnect.tsx' . -A 5 -B 5
Length of output: 4717
| <NavbarLink href="/markets">Markets</NavbarLink> | ||
| <NavbarLink href={`/positions/${address ?? ''}`}>Portfolio</NavbarLink> |
There was a problem hiding this comment.
💡 Codebase verification
Add address check before showing portfolio link
The positions pages have no guard for undefined addresses. Either:
- Hide the portfolio link when address is undefined
- Redirect to connect wallet when clicked without address
🔗 Analysis chain
Consider a better fallback for missing address
Empty string fallback might cause routing issues. Consider redirecting or disabling links when address is undefined.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if there's handling for undefined address in route handlers
rg -A 5 "positions/\[\[...params\]\]"
Length of output: 39
Script:
#!/bin/bash
# Check route handling for positions pages
rg -A 5 "positions/\[.*\]"
# Check if there's any handling for undefined address in positions related files
fd "positions" --type f --exec rg -A 5 "undefined.*address|!address|address\s+===\s+undefined"
Length of output: 123
Script:
#!/bin/bash
# Look for positions page components and routing
fd -e tsx -e ts positions
# Check for any address validation or guards in the app
rg -A 5 "router.push|router.replace|redirect"
Length of output: 5292
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (8)
app/global.css (2)
127-129: Avoid !importantThe transparent border trick is good, but let's avoid
!important. Consider increasing selector specificity instead.-.table-body-focused { +.table-body tr.table-body-focused { background-color: var(--palette-bg-hovered); - border-left: 2px solid var(--palette-orange) !important; + border-left: 2px solid var(--palette-orange); }Also applies to: 138-138
Line range hint
13-13: Move shared color to single definitionOrange color is defined twice with same value. Move it to root level only.
:root { --quick-nav-display: none; --component-highlights-item-width: calc(100vw - 100px); --developer-experience-code-window-background: var(--slate-12); --palette-orange: #f45f2d; } .dark { --quick-nav-display: none; - --palette-orange: #f45f2d; --palette-bg-black: #16181a;Also applies to: 28-28
app/markets/components/AssetFilter.tsx (2)
6-6: Fix import orderMove
framer-motionimport beforenext/imageto match project conventions.import { ChevronDownIcon, TrashIcon } from '@radix-ui/react-icons'; +import { motion, AnimatePresence } from 'framer-motion'; import Image from 'next/image'; -import { motion, AnimatePresence } from 'framer-motion';🧰 Tools
🪛 eslint (1.23.1)
[error] 6-6:
framer-motionimport should occur before import ofnext/image(import/order)
119-127: Add layout prop for better performanceAdd
layoutprop to motion.div to optimize list animations.<motion.div + layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.15 }} className="bg-surface absolute z-10 mt-1 w-full rounded-sm shadow-lg" >app/markets/components/MarketTableBody.tsx (1)
1-1: Fix import orderMove framer-motion import before next/image.
import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; import { Tooltip } from '@nextui-org/tooltip'; import Image from 'next/image'; -import { motion, AnimatePresence } from 'framer-motion';Also applies to: 14-14
app/positions/components/SuppliedMarketsDetail.tsx (2)
10-10: Fix import issues
- Move framer-motion import before next/link
- Remove unused AnimatePresence import
-import { motion, AnimatePresence } from 'framer-motion'; +import { motion } from 'framer-motion';🧰 Tools
🪛 eslint (1.23.1)
[error] 10-10:
framer-motionimport should occur before import ofnext/link(import/order)
[error] 10-10: 'AnimatePresence' is defined but never used.
(@typescript-eslint/no-unused-vars)
61-67: Consider smoother animationAnimation feels abrupt at 0.1s. Try:
- Increase duration to 0.2-0.3s
- Add easing function
<motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} exit={{ height: 0 }} - transition={{ duration: 0.1 }} + transition={{ duration: 0.3, ease: 'easeInOut' }} className="overflow-hidden" >app/positions/components/PositionsSummaryTable.tsx (1)
237-242: Add tooltip for collateral tokensUsers might not recognize token icons by image alone.
<TokenIcon key={`${collateral.address}-${index}`} address={collateral.address} chainId={groupedPosition.chainId} width={20} height={20} + title={collateral.symbol} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
app/global.css(3 hunks)app/markets/components/AssetFilter.tsx(2 hunks)app/markets/components/MarketTableBody.tsx(4 hunks)app/positions/components/PositionsContent.tsx(1 hunks)app/positions/components/PositionsSummaryTable.tsx(8 hunks)app/positions/components/SuppliedMarketsDetail.tsx(2 hunks)src/components/layout/header/Navbar.tsx(2 hunks)src/components/layout/header/NavbarMobile.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- app/positions/components/PositionsContent.tsx
- src/components/layout/header/Navbar.tsx
🧰 Additional context used
🪛 eslint (1.23.1)
app/markets/components/AssetFilter.tsx
[error] 6-6: framer-motion import should occur before import of next/image
(import/order)
app/markets/components/MarketTableBody.tsx
[error] 14-14: framer-motion import should occur before import of next/image
(import/order)
[error] 41-41: 'visibleRowId' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
app/positions/components/PositionsSummaryTable.tsx
[error] 18-18: framer-motion import should occur before import of next/image
(import/order)
app/positions/components/SuppliedMarketsDetail.tsx
[error] 10-10: framer-motion import should occur before import of next/link
(import/order)
[error] 10-10: 'AnimatePresence' is defined but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (6)
src/components/layout/header/NavbarMobile.tsx (1)
40-52: Verify route matching behavior
The matchKey values match their href paths. Double check that:
- '/' correctly highlights only the home page
- '/markets' doesn't conflict with deeper market routes
- '/positions' works with dynamic addresses
app/markets/components/AssetFilter.tsx (1)
154-156:
Fix aria-selected syntax and improve keyboard nav
The aria-selected attribute is missing a closing quote. Also consider adding arrow key navigation.
aria-selected={selectedAssets.includes(
token.networks.map((n) => infoToKey(n.address, n.chain.id)).join('|'),
-)}
+)}Likely invalid or redundant comment.
app/markets/components/MarketTableBody.tsx (1)
181-200: Nice animation implementation
Clean implementation of expand/collapse animation with framer-motion.
app/positions/components/SuppliedMarketsDetail.tsx (1)
107-225: Table implementation looks good
Clean structure with good accessibility and error handling.
app/positions/components/PositionsSummaryTable.tsx (2)
199-202: LGTM: Position mapping looks good
The mapping logic correctly handles grouped positions and calculates average APY.
283-304: Good use of Framer Motion
The animation implementation provides smooth transitions for expanded rows.
| } from 'app/markets/components/RiskIndicator'; | ||
| import { RebalanceModal } from './RebalanceModal'; | ||
| import { SuppliedMarketsDetail } from './SuppliedMarketsDetail'; | ||
| import { motion, AnimatePresence } from 'framer-motion'; |
There was a problem hiding this comment.
Fix import order
Move framer-motion import before next/image.
-import { motion, AnimatePresence } from 'framer-motion';
import Image from 'next/image';
+import { motion, AnimatePresence } from 'framer-motion';Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 eslint (1.23.1)
[error] 18-18: framer-motion import should occur before import of next/image
(import/order)
| src={getNetworkImg(groupedPosition.chainId) ?? ''} | ||
| alt={`Chain ${groupedPosition.chainId}`} |
There was a problem hiding this comment.
💡 Codebase verification
Add error handling for network images
The getNetworkImg function can return undefined, and there's no fallback handling in the Image components. Add onError handlers to prevent broken image displays.
app/positions/components/PositionsSummaryTable.tsx:213-214app/rewards/components/UniformProgram.tsxapp/rewards/components/MarketProgram.tsx- Other instances using network images
🔗 Analysis chain
Consider error handling for network images
Add fallback for missing network images and token icons.
Also applies to: 222-226
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for image fallbacks in the codebase
rg -A 2 "getNetworkImg.*\?\?" .
Length of output: 972
Script:
#!/bin/bash
# Check for the implementation of getNetworkImg function
ast-grep --pattern 'function getNetworkImg($_) { $$$ }'
# Also check for any error handling or fallback components for images
rg -A 3 'onError.*Image|fallback.*Image' .
Length of output: 102
Script:
#!/bin/bash
# Let's try a different pattern to find getNetworkImg
rg -A 5 "getNetworkImg" .
# Also check for any image-related utilities or helpers
fd "image|img" --type f
Length of output: 9854
Script:
#!/bin/bash
# Check NextImage component for any built-in error handling
cat src/components/NextImage/NextImage.tsx
Length of output: 498
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (2)
app/positions/components/SuppliedMarketsDetail.tsx (2)
61-67: Height animation might cause layout shiftsThe auto height animation can be janky. Consider using a fixed height or transform instead.
<motion.div - initial={{ height: 0 }} - animate={{ height: 'auto' }} - exit={{ height: 0 }} + initial={{ transform: 'translateY(-20px)', opacity: 0 }} + animate={{ transform: 'translateY(0)', opacity: 1 }} + exit={{ transform: 'translateY(-20px)', opacity: 0 }} transition={{ duration: 0.1 }} className="overflow-hidden" >
149-156: Remove commented tooltip codeClean up the commented tooltip code around the market link.
- {/* <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> */}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
app/markets/components/AssetFilter.tsx(2 hunks)app/markets/components/MarketTableBody.tsx(2 hunks)app/positions/components/PositionsContent.tsx(1 hunks)app/positions/components/PositionsSummaryTable.tsx(8 hunks)app/positions/components/SuppliedMarketsDetail.tsx(2 hunks)src/components/layout/header/AccountConnect.tsx(1 hunks)src/components/layout/header/NavbarMobile.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- app/markets/components/AssetFilter.tsx
- app/positions/components/PositionsContent.tsx
- app/positions/components/PositionsSummaryTable.tsx
- src/components/layout/header/AccountConnect.tsx
- src/components/layout/header/NavbarMobile.tsx
🧰 Additional context used
🪛 eslint (1.23.1)
app/markets/components/MarketTableBody.tsx
[error] 1-1: 'useState' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 1-1: 'useEffect' is defined but never used.
(@typescript-eslint/no-unused-vars)
🔇 Additional comments (1)
app/markets/components/MarketTableBody.tsx (1)
173-192: Nice animation implementation
Clean implementation of expandable rows using framer-motion. The height animation provides smooth transitions.
| @@ -1,5 +1,6 @@ | |||
| import React from 'react'; | |||
| import React, { useState, useEffect } from 'react'; | |||
There was a problem hiding this comment.
Remove unused imports
-import React, { useState, useEffect } from 'react';
+import React from 'react';📝 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.
| import React, { useState, useEffect } from 'react'; | |
| import React from 'react'; |
🧰 Tools
🪛 eslint (1.23.1)
[error] 1-1: 'useState' is defined but never used.
(@typescript-eslint/no-unused-vars)
[error] 1-1: 'useEffect' is defined but never used.
(@typescript-eslint/no-unused-vars)
| <button | ||
| type="button" | ||
| className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500" | ||
| onClick={() => { | ||
| setSelectedPosition(position); | ||
| setShowWithdrawModal(true); | ||
| }} | ||
| > | ||
| Withdraw | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500" | ||
| onClick={() => { | ||
| setSelectedPosition(position); | ||
| setShowSupplyModal(true); | ||
| }} | ||
| > | ||
| Supply | ||
| </button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve button accessibility and feedback
Add focus styles and loading states to action buttons.
<button
type="button"
- className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500"
+ className="bg-hovered rounded-sm p-1 text-xs duration-300 ease-in-out hover:bg-orange-500 focus:ring-2 focus:ring-orange-500 focus:outline-none disabled:opacity-50"
+ disabled={isLoading}
onClick={() => {
setSelectedPosition(position);
setShowWithdrawModal(true);
}}
>
- Withdraw
+ {isLoading ? 'Loading...' : 'Withdraw'}
</button>Committable suggestion skipped: line range outside the PR's diff.
| <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200"> | ||
| {groupedPosition.processedCollaterals.map((collateral, colIndex) => ( | ||
| <div | ||
| key={`${collateral.address}-${colIndex}`} | ||
| className="h-full opacity-70" | ||
| style={{ | ||
| color: | ||
| width: `${collateral.percentage}%`, | ||
| backgroundColor: | ||
| collateral.symbol === 'Others' | ||
| ? '#A0AEC0' | ||
| : getCollateralColor(collateral.address), | ||
| }} | ||
| > | ||
| ■ | ||
| </span>{' '} | ||
| {collateral.symbol}: {formatReadable(collateral.percentage)}% | ||
| </span> | ||
| ))} | ||
| title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`} | ||
| /> | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add accessibility attributes to chart
The collateral exposure bar chart needs aria labels for screen readers.
<div
key={`${collateral.address}-${colIndex}`}
className="h-full opacity-70"
+ role="progressbar"
+ aria-valuenow={collateral.percentage}
+ aria-valuemin="0"
+ aria-valuemax="100"
+ aria-label={`${collateral.symbol} collateral: ${collateral.percentage.toFixed(2)}%`}
style={{
width: `${collateral.percentage}%`,
backgroundColor: collateral.symbol === 'Others' ? '#A0AEC0' : getCollateralColor(collateral.address),
}}
- title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`}
/>📝 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.
| <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200"> | |
| {groupedPosition.processedCollaterals.map((collateral, colIndex) => ( | |
| <div | |
| key={`${collateral.address}-${colIndex}`} | |
| className="h-full opacity-70" | |
| style={{ | |
| color: | |
| width: `${collateral.percentage}%`, | |
| backgroundColor: | |
| collateral.symbol === 'Others' | |
| ? '#A0AEC0' | |
| : getCollateralColor(collateral.address), | |
| }} | |
| > | |
| ■ | |
| </span>{' '} | |
| {collateral.symbol}: {formatReadable(collateral.percentage)}% | |
| </span> | |
| ))} | |
| title={`${collateral.symbol}: ${collateral.percentage.toFixed(2)}%`} | |
| /> | |
| ))} | |
| <div className="flex h-3 w-full overflow-hidden rounded-full bg-gray-200"> | |
| {groupedPosition.processedCollaterals.map((collateral, colIndex) => ( | |
| <div | |
| key={`${collateral.address}-${colIndex}`} | |
| className="h-full opacity-70" | |
| role="progressbar" | |
| aria-valuenow={collateral.percentage} | |
| aria-valuemin="0" | |
| aria-valuemax="100" | |
| aria-label={`${collateral.symbol} collateral: ${collateral.percentage.toFixed(2)}%`} | |
| style={{ | |
| width: `${collateral.percentage}%`, | |
| backgroundColor: | |
| collateral.symbol === 'Others' | |
| ? '#A0AEC0' | |
| : getCollateralColor(collateral.address), | |
| }} | |
| /> | |
| ))} |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
app/markets/components/MarketTableBody.tsx (1)
173-192: Consider slightly longer transition0.1s might feel abrupt. Try 0.2s for smoother expand/collapse.
- transition={{ duration: 0.1 }} + transition={{ duration: 0.2 }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
app/markets/components/MarketTableBody.tsx(2 hunks)src/components/layout/header/NavbarMobile.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/layout/header/NavbarMobile.tsx
🔇 Additional comments (1)
app/markets/components/MarketTableBody.tsx (1)
3-3: LGTM!
Clean import of framer-motion for animations.
1 participant
Summary by CodeRabbit
Release Notes
New Features
Improvements
FromAndToMarketscomponent for clearer button conditions and pagination logic.Bug Fixes
Style