From 9b51bd1495d994c5a03d2500d6cf47e7a491edfe Mon Sep 17 00:00:00 2001 From: antoncoding Date: Tue, 13 Jan 2026 14:25:30 +0800 Subject: [PATCH 1/4] misc: icon usages --- .claude/skills/icons/SKILL.md | 58 +++++++++++++++++++ src/components/Info/info.tsx | 4 +- .../SearchOrConnect/SearchOrConnect.tsx | 5 +- src/components/common/Modal/ModalHeader.tsx | 4 +- src/components/common/ProcessModal.tsx | 4 +- .../layout/header/AccountDropdown.tsx | 5 +- src/components/layout/header/Navbar.tsx | 4 +- src/components/layout/header/NavbarMobile.tsx | 4 +- src/components/layout/notification-banner.tsx | 4 +- src/components/shared/account-identity.tsx | 9 +-- src/components/shared/table-pagination.tsx | 7 ++- src/components/shared/token-icon.tsx | 4 +- src/components/ui/calendar.tsx | 8 +-- src/components/ui/dropdown-menu.tsx | 5 +- src/components/ui/select.tsx | 9 +-- .../admin/components/asset-metrics-table.tsx | 4 +- .../admin/components/transactions-table.tsx | 4 +- .../modals/vault-settings-modal.tsx | 4 +- .../autovault/components/vault-identity.tsx | 4 +- src/features/autovault/vault-list-view.tsx | 5 +- .../components/card-warning-indicator.tsx | 5 +- .../components/market-warning-banner.tsx | 5 +- .../components/position-stats.tsx | 4 +- .../markets/components/market-indicators.tsx | 16 ++--- .../oracle/MarketOracle/OracleTypeInfo.tsx | 4 +- .../MarketOracle/RedstoneTypesModal.tsx | 4 +- .../markets/components/pending-market-cap.tsx | 4 +- .../markets/components/risk-indicator.tsx | 5 +- .../table/markets-table-actions.tsx | 4 +- .../components/table/markets-table.tsx | 4 +- .../components/vault-actions-dropdown.tsx | 4 +- .../settings/blacklisted-markets-modal.tsx | 5 +- src/modals/settings/trusted-vaults-modal.tsx | 4 +- 33 files changed, 147 insertions(+), 76 deletions(-) create mode 100644 .claude/skills/icons/SKILL.md diff --git a/.claude/skills/icons/SKILL.md b/.claude/skills/icons/SKILL.md new file mode 100644 index 00000000..330240b3 --- /dev/null +++ b/.claude/skills/icons/SKILL.md @@ -0,0 +1,58 @@ +--- +name: icons +description: Icon usage conventions and semantic mappings. Use when adding, modifying, or choosing icons. +--- + +# Icon Standards + +## Libraries +- **Radix** (`@radix-ui/react-icons`): UI primitives (dropdowns, modals, tables) +- **react-icons**: Domain icons (status, features) + +## Standard Icons + +| Concept | Icon | Import | +|---------|------|--------| +| Error | `MdError` | `react-icons/md` | +| Warning | `IoWarningOutline` | `react-icons/io5` | +| Success | `GrStatusGood` | `react-icons/gr` | +| Info | `FaRegLightbulb` | `react-icons/fa` | +| Help | `BsQuestionCircle` | `react-icons/bs` | +| Close | `Cross2Icon` | `@radix-ui/react-icons` | +| Search | `FiSearch` | `react-icons/fi` | +| External link | `ExternalLinkIcon` | `@radix-ui/react-icons` | +| Settings | `GearIcon` | `@radix-ui/react-icons` | +| Copy | `LuCopy` | `react-icons/lu` | +| Trash | `TrashIcon` | `@radix-ui/react-icons` | +| Chevrons | `ChevronDownIcon` etc | `@radix-ui/react-icons` | +| Arrows | `ArrowDownIcon` etc | `@radix-ui/react-icons` | +| Filter | `GoFilter` | `react-icons/go` | +| Star | `GoStar` / `GoStarFill` | `react-icons/go` | +| User | `LuUser` | `react-icons/lu` | +| Reload | `ReloadIcon` | `@radix-ui/react-icons` | + +## Domain Icons + +| Concept | Icon | Import | +|---------|------|--------| +| Swap | `LuArrowRightLeft` | `react-icons/lu` | +| Withdraw | `BsArrowUpCircle` | `react-icons/bs` | +| Deposit | `BsArrowDownCircle` | `react-icons/bs` | +| History | `GoHistory` | `react-icons/go` | +| Rewards | `FiGift` | `react-icons/fi` | +| Fire | `HiFire` | `react-icons/hi2` | +| Morpho | `PiButterflyDuotone` | `react-icons/pi` | + +## Custom Components + +| Component | Path | +|-----------|------| +| `SpinnerIcon` | `@/components/icons/SpinnerIcon` | +| `RefetchIcon` | `@/components/ui/refetch-icon` | +| `TokenIcon` | `@/components/shared/token-icon` | +| `NetworkIcon` | `@/components/shared/network-icon` | + +## Rules +1. Use standard icon for each concept (no alternatives) +2. Size: `16-18px` inline, `20-24px` standalone +3. Check this doc before adding new icons diff --git a/src/components/Info/info.tsx b/src/components/Info/info.tsx index b69720ec..92448b01 100644 --- a/src/components/Info/info.tsx +++ b/src/components/Info/info.tsx @@ -1,7 +1,7 @@ import { FaRegLightbulb } from 'react-icons/fa'; import { GrStatusGood } from 'react-icons/gr'; -import { MdWarning } from 'react-icons/md'; import { MdError } from 'react-icons/md'; +import { IoWarningOutline } from "react-icons/io5"; const levelToCellColor = (level: string) => { switch (level) { @@ -36,7 +36,7 @@ const levelToIcon = (level: string) => { ); case 'warning': return ( - diff --git a/src/components/SearchOrConnect/SearchOrConnect.tsx b/src/components/SearchOrConnect/SearchOrConnect.tsx index dfd053a0..6629102a 100644 --- a/src/components/SearchOrConnect/SearchOrConnect.tsx +++ b/src/components/SearchOrConnect/SearchOrConnect.tsx @@ -1,7 +1,8 @@ 'use client'; import { useState } from 'react'; -import { RiArrowRightLine, RiSearchLine } from 'react-icons/ri'; +import { RiArrowRightLine } from 'react-icons/ri'; +import { FiSearch } from 'react-icons/fi'; import Link from 'next/link'; import { isAddress } from 'viem'; import { useConnection } from 'wagmi'; @@ -96,7 +97,7 @@ export default function SearchOrConnect({ path, title }: SearchOrConnectProps) { ) : ( <> - + Search )} diff --git a/src/components/common/Modal/ModalHeader.tsx b/src/components/common/Modal/ModalHeader.tsx index eb671d37..880d4e78 100644 --- a/src/components/common/Modal/ModalHeader.tsx +++ b/src/components/common/Modal/ModalHeader.tsx @@ -1,5 +1,5 @@ import type React from 'react'; -import { Cross1Icon } from '@radix-ui/react-icons'; +import { Cross2Icon } from '@radix-ui/react-icons'; import { twMerge } from 'tailwind-merge'; export type ModalHeaderVariant = 'standard' | 'compact'; @@ -85,7 +85,7 @@ export function ModalHeader({ aria-label={closeButtonAriaLabel} className={iconButtonBaseClass} > - + )} diff --git a/src/components/common/ProcessModal.tsx b/src/components/common/ProcessModal.tsx index 8053adec..694aac1a 100644 --- a/src/components/common/ProcessModal.tsx +++ b/src/components/common/ProcessModal.tsx @@ -1,5 +1,5 @@ import type React from 'react'; -import { FiX } from 'react-icons/fi'; +import { Cross2Icon } from '@radix-ui/react-icons'; import { Modal, ModalBody } from '@/components/common/Modal'; import { ProcessStepList } from '@/components/common/ProcessStepList'; import type { ActiveTransaction } from '@/stores/useTransactionProcessStore'; @@ -75,7 +75,7 @@ export function ProcessModal({ transaction, onDismiss, title, description, child onClick={onDismiss} className="rounded p-1 text-secondary transition-colors hover:bg-foreground/10 hover:text-foreground" > - + diff --git a/src/components/layout/header/AccountDropdown.tsx b/src/components/layout/header/AccountDropdown.tsx index 3e0854dd..14a1e73e 100644 --- a/src/components/layout/header/AccountDropdown.tsx +++ b/src/components/layout/header/AccountDropdown.tsx @@ -1,7 +1,8 @@ 'use client'; import { useCallback } from 'react'; -import { ExitIcon, ExternalLinkIcon, CopyIcon } from '@radix-ui/react-icons'; +import { ExitIcon, ExternalLinkIcon } from '@radix-ui/react-icons'; +import { LuCopy } from 'react-icons/lu'; import { clsx } from 'clsx'; import { useConnection, useDisconnect } from 'wagmi'; import { useAppKit } from '@reown/appkit/react'; @@ -68,7 +69,7 @@ export function AccountDropdown() { } + endContent={} > Copy Address diff --git a/src/components/layout/header/Navbar.tsx b/src/components/layout/header/Navbar.tsx index 1f212873..578903b2 100644 --- a/src/components/layout/header/Navbar.tsx +++ b/src/components/layout/header/Navbar.tsx @@ -8,7 +8,7 @@ import Link from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; import { useTheme } from 'next-themes'; import { FaRegMoon } from 'react-icons/fa'; -import { FiSettings } from 'react-icons/fi'; +import { GearIcon } from '@radix-ui/react-icons'; import { LuSunMedium } from 'react-icons/lu'; import { RiBookLine, RiDiscordFill, RiGithubFill } from 'react-icons/ri'; import { TbReport } from 'react-icons/tb'; @@ -185,7 +185,7 @@ export function Navbar() { {theme === 'dark' ? 'Light Theme' : 'Dark Theme'} } + endContent={} onClick={() => router.push('/settings')} > Settings diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx index 5dfdbcf4..feea62b1 100644 --- a/src/components/layout/header/NavbarMobile.tsx +++ b/src/components/layout/header/NavbarMobile.tsx @@ -8,7 +8,7 @@ import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { useTheme } from 'next-themes'; import { FaRegMoon } from 'react-icons/fa'; -import { FiSettings } from 'react-icons/fi'; +import { GearIcon } from '@radix-ui/react-icons'; import { LuSunMedium } from 'react-icons/lu'; import { RiBookLine, RiDiscordFill, RiGithubFill, RiLineChartLine, RiBriefcaseLine, RiGiftLine } from 'react-icons/ri'; import { useConnection } from 'wagmi'; @@ -140,7 +140,7 @@ export default function NavbarMobile() { {mounted && (theme === 'dark' ? 'Light Theme' : 'Dark Theme')} } + startContent={} onClick={() => handleNavigation('/settings')} > Settings diff --git a/src/components/layout/notification-banner.tsx b/src/components/layout/notification-banner.tsx index d4fd889c..f49b53a3 100644 --- a/src/components/layout/notification-banner.tsx +++ b/src/components/layout/notification-banner.tsx @@ -1,7 +1,7 @@ 'use client'; import Link from 'next/link'; -import { RiCloseLine } from 'react-icons/ri'; +import { Cross2Icon } from '@radix-ui/react-icons'; import { useActiveNotifications } from '@/hooks/useActiveNotifications'; import { useNotificationStore } from '@/stores/useNotificationStore'; @@ -70,7 +70,7 @@ export function NotificationBanner() { className="absolute right-4 p-1 text-primary-foreground/80 transition-colors hover:text-primary-foreground sm:right-6 md:right-8" aria-label="Dismiss notification" > - + diff --git a/src/components/shared/account-identity.tsx b/src/components/shared/account-identity.tsx index e25906e4..24085549 100644 --- a/src/components/shared/account-identity.tsx +++ b/src/components/shared/account-identity.tsx @@ -5,7 +5,8 @@ import clsx from 'clsx'; import { motion } from 'framer-motion'; import Link from 'next/link'; import { FaCircle } from 'react-icons/fa'; -import { LuExternalLink, LuCopy } from 'react-icons/lu'; +import { ExternalLinkIcon } from '@radix-ui/react-icons'; +import { LuCopy } from 'react-icons/lu'; import { useConnection, useEnsName } from 'wagmi'; import { Avatar } from '@/components/Avatar/Avatar'; import { AccountActionsPopover } from '@/components/shared/account-actions-popover'; @@ -93,7 +94,7 @@ export function AccountIdentity({ const content = ( <> {vaultName ? {vaultName} : } - {linkTo === 'explorer' && } + {linkTo === 'explorer' && } {showCopy && ( {vaultName ? {vaultName} : } - {linkTo === 'explorer' && } + {linkTo === 'explorer' && } {showCopy && ( e.stopPropagation()} > - + )} diff --git a/src/components/shared/table-pagination.tsx b/src/components/shared/table-pagination.tsx index 6d16dc83..2d189d1f 100644 --- a/src/components/shared/table-pagination.tsx +++ b/src/components/shared/table-pagination.tsx @@ -2,7 +2,8 @@ import { useState, useEffect } from 'react'; import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'; import { Input } from '@/components/ui/input'; import { Tooltip } from '@/components/ui/tooltip'; -import { ChevronLeftIcon, ChevronRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons'; +import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; +import { FiSearch } from 'react-icons/fi'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { Button } from '@/components/ui/button'; import { cn } from '@/utils'; @@ -200,7 +201,7 @@ export function TablePagination({ } + icon={} /> } > @@ -211,7 +212,7 @@ export function TablePagination({ disabled={isLoading} className="h-8 w-8 font-zen !font-normal" > - + diff --git a/src/components/shared/token-icon.tsx b/src/components/shared/token-icon.tsx index 17f57157..e6425cde 100644 --- a/src/components/shared/token-icon.tsx +++ b/src/components/shared/token-icon.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { Tooltip } from '@/components/ui/tooltip'; import Image from 'next/image'; -import { FiExternalLink } from 'react-icons/fi'; +import { ExternalLinkIcon } from '@radix-ui/react-icons'; import { useTokensQuery } from '@/hooks/queries/useTokensQuery'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { getExplorerUrl } from '@/utils/networks'; @@ -74,7 +74,7 @@ export function TokenIcon({ title={title} detail={detail} secondaryDetail={secondaryDetail} - actionIcon={explorerUrl ? : undefined} + actionIcon={explorerUrl ? : undefined} actionHref={explorerUrl ?? undefined} onActionClick={(e) => e.stopPropagation()} /> diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 3cc6e337..718c32d0 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -1,7 +1,7 @@ 'use client'; import * as React from 'react'; -import { FiChevronDown, FiChevronLeft, FiChevronRight } from 'react-icons/fi'; +import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'; import { cn } from '@/utils/components'; @@ -98,14 +98,14 @@ function Calendar({ }, Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => { if (orientation === 'left') { - return ; + return ; } if (orientation === 'right') { - return ; + return ; } - return ; + return ; }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...weekProps }) => { diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 466432cc..17e9878a 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -1,7 +1,8 @@ import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { FaCheck } from "react-icons/fa6"; -import { GoChevronRight, GoCircle } from "react-icons/go"; +import { ChevronRightIcon } from "@radix-ui/react-icons"; +import { GoCircle } from "react-icons/go"; import { cn } from "@/utils/components" @@ -36,7 +37,7 @@ const DropdownMenuSubTrigger = React.forwardRef< {...props} > {children} - + )) DropdownMenuSubTrigger.displayName = diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx index 22910d93..a1f07713 100644 --- a/src/components/ui/select.tsx +++ b/src/components/ui/select.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; -import { GoCheck, GoChevronDown, GoChevronUp } from 'react-icons/go'; +import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; +import { GoCheck } from 'react-icons/go'; import { cn } from '@/utils/components'; @@ -27,7 +28,7 @@ const SelectTrigger = React.forwardRef< > {children} - + )); @@ -42,7 +43,7 @@ const SelectScrollUpButton = React.forwardRef< className={cn('flex cursor-default items-center justify-center py-1', className)} {...props} > - + )); SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; @@ -56,7 +57,7 @@ const SelectScrollDownButton = React.forwardRef< className={cn('flex cursor-default items-center justify-center py-1', className)} {...props} > - + )); SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName; diff --git a/src/features/admin/components/asset-metrics-table.tsx b/src/features/admin/components/asset-metrics-table.tsx index 4f31668e..aa4cbba9 100644 --- a/src/features/admin/components/asset-metrics-table.tsx +++ b/src/features/admin/components/asset-metrics-table.tsx @@ -1,5 +1,5 @@ import { useState, useMemo } from 'react'; -import { FiChevronUp, FiChevronDown } from 'react-icons/fi'; +import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons'; import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table'; import { TableContainerWithHeader } from '@/components/common/table-container-with-header'; import { TokenIcon } from '@/components/shared/token-icon'; @@ -35,7 +35,7 @@ function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, on
{label}
{currentSortKey === sortKeyValue && - (sortDirection === 'asc' ? : )} + (sortDirection === 'asc' ? : )}
); diff --git a/src/features/admin/components/transactions-table.tsx b/src/features/admin/components/transactions-table.tsx index 00fe8f30..be282f51 100644 --- a/src/features/admin/components/transactions-table.tsx +++ b/src/features/admin/components/transactions-table.tsx @@ -1,5 +1,5 @@ import { useState, useMemo } from 'react'; -import { FiChevronUp, FiChevronDown } from 'react-icons/fi'; +import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons'; import { Table, TableHeader, TableRow, TableHead } from '@/components/ui/table'; import { TablePagination } from '@/components/shared/table-pagination'; import type { SupportedNetworks } from '@/utils/networks'; @@ -50,7 +50,7 @@ function SortableHeader({ label, sortKeyValue, currentSortKey, sortDirection, on
{label}
{currentSortKey === sortKeyValue && - (sortDirection === 'asc' ? : )} + (sortDirection === 'asc' ? : )}
); diff --git a/src/features/autovault/components/vault-detail/modals/vault-settings-modal.tsx b/src/features/autovault/components/vault-detail/modals/vault-settings-modal.tsx index 3e0d4c4f..6698b146 100644 --- a/src/features/autovault/components/vault-detail/modals/vault-settings-modal.tsx +++ b/src/features/autovault/components/vault-detail/modals/vault-settings-modal.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react'; import { RefetchIcon } from '@/components/ui/refetch-icon'; -import { FiSettings } from 'react-icons/fi'; +import { GearIcon } from '@radix-ui/react-icons'; import type { Address } from 'viem'; import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal'; import { GeneralTab, AgentsTab, CapsTab, type SettingsTab } from '../settings'; @@ -86,7 +86,7 @@ export function VaultSettingsModal({ vaultAddress, chainId }: VaultSettingsModal } + mainIcon={} onClose={close} auxiliaryAction={{ icon: ( diff --git a/src/features/autovault/components/vault-identity.tsx b/src/features/autovault/components/vault-identity.tsx index 5351fd41..d2ee4628 100644 --- a/src/features/autovault/components/vault-identity.tsx +++ b/src/features/autovault/components/vault-identity.tsx @@ -3,7 +3,7 @@ import { useMemo, type ReactNode } from 'react'; import { Tooltip } from '@/components/ui/tooltip'; import Link from 'next/link'; -import { FiExternalLink } from 'react-icons/fi'; +import { ExternalLinkIcon } from '@radix-ui/react-icons'; import { TokenIcon } from '@/components/shared/token-icon'; import { TooltipContent } from '@/components/shared/tooltip-content'; import type { VaultCurator } from '@/constants/vaults/known_vaults'; @@ -146,7 +146,7 @@ export function VaultIdentity({ title={tooltipTitle} detail={resolvedDetail} secondaryDetail={tooltipSecondaryDetail} - actionIcon={} + actionIcon={} actionHref={vaultHref} onActionClick={(e) => e.stopPropagation()} /> diff --git a/src/features/autovault/vault-list-view.tsx b/src/features/autovault/vault-list-view.tsx index c0035e58..3185a21e 100644 --- a/src/features/autovault/vault-list-view.tsx +++ b/src/features/autovault/vault-list-view.tsx @@ -2,7 +2,8 @@ import { useState, useEffect, useMemo } from 'react'; import { GoPlusCircle } from 'react-icons/go'; -import { FiShield, FiZap, FiSettings } from 'react-icons/fi'; +import { FiShield, FiZap } from 'react-icons/fi'; +import { GearIcon } from '@radix-ui/react-icons'; import { ChevronDownIcon } from '@radix-ui/react-icons'; import { useRouter } from 'next/navigation'; import { useAppKit } from '@reown/appkit/react'; @@ -287,7 +288,7 @@ export default function AutovaultListContent() { {/* Benefits Section */}
} + icon={} title="Full Ownership" description="Your vault, your rules. No middlemen, no hidden fees. Complete control over your assets." /> diff --git a/src/features/market-detail/components/card-warning-indicator.tsx b/src/features/market-detail/components/card-warning-indicator.tsx index e23c60f5..3205a1df 100644 --- a/src/features/market-detail/components/card-warning-indicator.tsx +++ b/src/features/market-detail/components/card-warning-indicator.tsx @@ -1,6 +1,7 @@ 'use client'; -import { MdError, MdWarning } from 'react-icons/md'; +import { MdError } from 'react-icons/md'; +import { IoWarningOutline } from "react-icons/io5"; import { TooltipContent } from '@/components/shared/tooltip-content'; import { Tooltip } from '@/components/ui/tooltip'; import type { WarningWithDetail } from '@/utils/types'; @@ -13,7 +14,7 @@ export function CardWarningIndicator({ warnings }: CardWarningIndicatorProps) { if (warnings.length === 0) return null; const hasAlert = warnings.some((w) => w.level === 'alert'); - const Icon = hasAlert ? MdError : MdWarning; + const Icon = hasAlert ? MdError : IoWarningOutline; const iconColor = hasAlert ? 'text-red-500' : 'text-yellow-500'; const tooltipContent = ( diff --git a/src/features/market-detail/components/market-warning-banner.tsx b/src/features/market-detail/components/market-warning-banner.tsx index 66727b44..259b91ea 100644 --- a/src/features/market-detail/components/market-warning-banner.tsx +++ b/src/features/market-detail/components/market-warning-banner.tsx @@ -1,7 +1,8 @@ 'use client'; import { motion } from 'framer-motion'; -import { MdError, MdWarning } from 'react-icons/md'; +import { MdError } from 'react-icons/md'; +import { IoWarningOutline } from 'react-icons/io5'; import type { WarningWithDetail } from '@/utils/types'; type MarketWarningBannerProps = { @@ -12,7 +13,7 @@ export function MarketWarningBanner({ warnings }: MarketWarningBannerProps) { if (warnings.length === 0) return null; const hasAlert = warnings.some((w) => w.level === 'alert'); - const Icon = hasAlert ? MdError : MdWarning; + const Icon = hasAlert ? MdError : IoWarningOutline; const colorClasses = hasAlert ? 'border-red-500/20 bg-red-500/10 text-red-500' : 'border-yellow-500/20 bg-yellow-500/10 text-yellow-500'; diff --git a/src/features/market-detail/components/position-stats.tsx b/src/features/market-detail/components/position-stats.tsx index 309c22d8..43fbd522 100644 --- a/src/features/market-detail/components/position-stats.tsx +++ b/src/features/market-detail/components/position-stats.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Card } from '@/components/ui/card'; import { IconSwitch } from '@/components/ui/icon-switch'; import { RefetchIcon } from '@/components/ui/refetch-icon'; -import { FiUser } from 'react-icons/fi'; +import { LuUser } from 'react-icons/lu'; import { HiOutlineGlobeAsiaAustralia } from 'react-icons/hi2'; import { Spinner } from '@/components/ui/spinner'; import { TokenIcon } from '@/components/shared/token-icon'; @@ -25,7 +25,7 @@ type PositionStatsProps = { }; function ThumbIcon({ isSelected, className }: { isSelected?: boolean; className?: string }) { - return isSelected ? : ; + return isSelected ? : ; } const hasPosition = (position: MarketPosition) => { diff --git a/src/features/markets/components/market-indicators.tsx b/src/features/markets/components/market-indicators.tsx index 2945dc78..99ccdfad 100644 --- a/src/features/markets/components/market-indicators.tsx +++ b/src/features/markets/components/market-indicators.tsx @@ -1,6 +1,8 @@ import { Tooltip } from '@/components/ui/tooltip'; -import { FaShieldAlt, FaStar, FaUser } from 'react-icons/fa'; -import { FiAlertCircle } from 'react-icons/fi'; +import { FaShieldAlt } from 'react-icons/fa'; +import { GoStarFill } from 'react-icons/go'; +import { LuUser } from 'react-icons/lu'; +import { IoWarningOutline } from 'react-icons/io5'; import { AiOutlineFire } from 'react-icons/ai'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { useTrendingMarketKeys, getMetricsKey, useEverLiquidated } from '@/hooks/queries/useMarketMetricsQuery'; @@ -35,7 +37,7 @@ export function MarketIndicators({ market, showRisk = false, isStared = false, h content={ @@ -45,7 +47,7 @@ export function MarketIndicators({ market, showRisk = false, isStared = false, h } >
- @@ -57,13 +59,13 @@ export function MarketIndicators({ market, showRisk = false, isStared = false, h } + icon={} detail="You have supplied to this market" /> } >
- +
)} @@ -132,7 +134,7 @@ export function MarketIndicators({ market, showRisk = false, isStared = false, h } >
- diff --git a/src/features/markets/components/oracle/MarketOracle/OracleTypeInfo.tsx b/src/features/markets/components/oracle/MarketOracle/OracleTypeInfo.tsx index d9f9863c..748fabec 100644 --- a/src/features/markets/components/oracle/MarketOracle/OracleTypeInfo.tsx +++ b/src/features/markets/components/oracle/MarketOracle/OracleTypeInfo.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { FiExternalLink } from 'react-icons/fi'; +import { ExternalLinkIcon } from '@radix-ui/react-icons'; import { MarketOracleFeedInfo } from '@/features/markets/components/oracle'; import { getExplorerURL } from '@/utils/external'; import { getOracleType, getOracleTypeDescription, OracleType } from '@/utils/oracle'; @@ -29,7 +29,7 @@ export function OracleTypeInfo({ oracleData, oracleAddress, chainId, showLink, s className="flex items-center text-sm font-medium no-underline hover:underline" > {typeDescription} - + ) : ( {typeDescription} diff --git a/src/features/markets/components/oracle/MarketOracle/RedstoneTypesModal.tsx b/src/features/markets/components/oracle/MarketOracle/RedstoneTypesModal.tsx index 0e8f1163..97432176 100644 --- a/src/features/markets/components/oracle/MarketOracle/RedstoneTypesModal.tsx +++ b/src/features/markets/components/oracle/MarketOracle/RedstoneTypesModal.tsx @@ -1,5 +1,5 @@ import Image from 'next/image'; -import { MdWarning } from 'react-icons/md'; +import { IoWarningOutline } from 'react-icons/io5'; import { Modal, ModalHeader, ModalBody } from '@/components/common/Modal'; import { PriceFeedVendors, OracleVendorIcons } from '@/utils/oracle'; @@ -56,7 +56,7 @@ export function RedstoneTypesModal({ isOpen, onClose }: RedstoneTypesModalProps) {/* Warning Box */}
- diff --git a/src/features/markets/components/pending-market-cap.tsx b/src/features/markets/components/pending-market-cap.tsx index 623a8130..f89113d7 100644 --- a/src/features/markets/components/pending-market-cap.tsx +++ b/src/features/markets/components/pending-market-cap.tsx @@ -1,6 +1,6 @@ import type React from 'react'; import { useState } from 'react'; -import { LuX } from 'react-icons/lu'; +import { Cross2Icon } from '@radix-ui/react-icons'; import { formatUnits } from 'viem'; import { getTruncatedAssetName } from '@/utils/oracle'; import type { Market } from '@/utils/types'; @@ -122,7 +122,7 @@ export function PendingMarketCap({ className="flex h-8 w-8 items-center justify-center rounded-full bg-hovered text-secondary transition-colors hover:bg-red-500/10 hover:text-red-500 disabled:opacity-50" aria-label="Remove market" > - +
diff --git a/src/features/markets/components/risk-indicator.tsx b/src/features/markets/components/risk-indicator.tsx index 8799ddd8..b39026e4 100644 --- a/src/features/markets/components/risk-indicator.tsx +++ b/src/features/markets/components/risk-indicator.tsx @@ -1,6 +1,7 @@ import { Tooltip } from '@/components/ui/tooltip'; import { GrStatusGood } from 'react-icons/gr'; -import { MdWarning, MdError } from 'react-icons/md'; +import { MdError } from 'react-icons/md'; +import { IoWarningOutline } from 'react-icons/io5'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { useMarketWarnings } from '@/hooks/useMarketWarnings'; import type { WarningWithDetail, Market } from '@/utils/types'; @@ -24,7 +25,7 @@ const levelToIcon = (level: 'green' | 'yellow' | 'red') => { ); case 'yellow': return ( - diff --git a/src/features/markets/components/table/markets-table-actions.tsx b/src/features/markets/components/table/markets-table-actions.tsx index 4ac06acc..93cb9b4c 100644 --- a/src/features/markets/components/table/markets-table-actions.tsx +++ b/src/features/markets/components/table/markets-table-actions.tsx @@ -3,7 +3,7 @@ import moment from 'moment'; import { RefetchIcon } from '@/components/ui/refetch-icon'; import { CgDisplayFullwidth } from 'react-icons/cg'; -import { FiSettings } from 'react-icons/fi'; +import { GearIcon } from '@radix-ui/react-icons'; import { TbArrowAutofitWidth } from 'react-icons/tb'; import { Button } from '@/components/ui/button'; import { Tooltip } from '@/components/ui/tooltip'; @@ -105,7 +105,7 @@ export function MarketsTableActions({ onRefresh, isRefetching, isMobile, dataUpd className="text-secondary min-w-0 px-2" onClick={() => openModal('marketSettings', {})} > - + diff --git a/src/features/markets/components/table/markets-table.tsx b/src/features/markets/components/table/markets-table.tsx index f7e434d2..c8c77722 100644 --- a/src/features/markets/components/table/markets-table.tsx +++ b/src/features/markets/components/table/markets-table.tsx @@ -1,5 +1,5 @@ import { useCallback, useMemo, useState } from 'react'; -import { FaRegStar, FaStar } from 'react-icons/fa'; +import { GoStar, GoStarFill } from 'react-icons/go'; import { Table, TableHeader, TableRow, TableHead } from '@/components/ui/table'; import { TablePagination } from '@/components/shared/table-pagination'; import { TableContainerWithHeader } from '@/components/common/table-container-with-header'; @@ -137,7 +137,7 @@ function MarketsTable({ currentPage, setCurrentPage, className, tableClassName, : } + label={sortColumn === 0 ? : } sortColumn={sortColumn} titleOnclick={titleOnclick} sortDirection={sortDirection} diff --git a/src/features/positions/components/vault-actions-dropdown.tsx b/src/features/positions/components/vault-actions-dropdown.tsx index d4737836..5a3e55b5 100644 --- a/src/features/positions/components/vault-actions-dropdown.tsx +++ b/src/features/positions/components/vault-actions-dropdown.tsx @@ -4,7 +4,7 @@ import type React from 'react'; import { useRouter } from 'next/navigation'; // import { GoHistory } from 'react-icons/go'; import { IoEllipsisVertical } from 'react-icons/io5'; -import { MdOutlineSettings } from 'react-icons/md'; +import { GearIcon } from '@radix-ui/react-icons'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu'; @@ -55,7 +55,7 @@ export function VaultActionsDropdown({ vaultAddress, chainId, account }: VaultAc } + startContent={} > Manage diff --git a/src/modals/settings/blacklisted-markets-modal.tsx b/src/modals/settings/blacklisted-markets-modal.tsx index 291de3be..592480c8 100644 --- a/src/modals/settings/blacklisted-markets-modal.tsx +++ b/src/modals/settings/blacklisted-markets-modal.tsx @@ -2,7 +2,8 @@ import React, { useMemo } from 'react'; import { Divider } from '@/components/ui/divider'; -import { FiPlus, FiX } from 'react-icons/fi'; +import { FiPlus } from 'react-icons/fi'; +import { Cross2Icon } from '@radix-ui/react-icons'; import { MdBlockFlipped } from 'react-icons/md'; import { Button } from '@/components/ui/button'; import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal'; @@ -137,7 +138,7 @@ export function BlacklistedMarketsModal({ isOpen, onOpenChange }: BlacklistedMar disabled={isDefault} className="shrink-0" > - +
); diff --git a/src/modals/settings/trusted-vaults-modal.tsx b/src/modals/settings/trusted-vaults-modal.tsx index daf022c9..e83ebc89 100644 --- a/src/modals/settings/trusted-vaults-modal.tsx +++ b/src/modals/settings/trusted-vaults-modal.tsx @@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react'; import { Spinner } from '@/components/ui/spinner'; import { Divider } from '@/components/ui/divider'; import { Input } from '@/components/ui/input'; -import { FiChevronDown, FiChevronUp } from 'react-icons/fi'; +import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; import { GoShield, GoShieldCheck } from 'react-icons/go'; import { IoWarningOutline } from 'react-icons/io5'; import { Button } from '@/components/ui/button'; @@ -231,7 +231,7 @@ export default function TrustedVaultsModal({ isOpen, onOpenChange }: TrustedVaul onClick={() => setMorphoSectionOpen((prev) => !prev)} > All Morpho Vaults ({sortedMorphoVaults.length}) - {morphoSectionOpen ? : } + {morphoSectionOpen ? : } {morphoSectionOpen && (morphoLoading ? ( From ddb1a4e262c008c4eb68164e0662b16ee3c698a7 Mon Sep 17 00:00:00 2001 From: antoncoding Date: Tue, 13 Jan 2026 14:26:28 +0800 Subject: [PATCH 2/4] chore: lint --- src/components/Info/info.tsx | 2 +- .../market-detail/components/card-warning-indicator.tsx | 2 +- src/hooks/queries/useMerklCampaignsQuery.ts | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/Info/info.tsx b/src/components/Info/info.tsx index 92448b01..94d4616e 100644 --- a/src/components/Info/info.tsx +++ b/src/components/Info/info.tsx @@ -1,7 +1,7 @@ import { FaRegLightbulb } from 'react-icons/fa'; import { GrStatusGood } from 'react-icons/gr'; import { MdError } from 'react-icons/md'; -import { IoWarningOutline } from "react-icons/io5"; +import { IoWarningOutline } from 'react-icons/io5'; const levelToCellColor = (level: string) => { switch (level) { diff --git a/src/features/market-detail/components/card-warning-indicator.tsx b/src/features/market-detail/components/card-warning-indicator.tsx index 3205a1df..a495ce4a 100644 --- a/src/features/market-detail/components/card-warning-indicator.tsx +++ b/src/features/market-detail/components/card-warning-indicator.tsx @@ -1,7 +1,7 @@ 'use client'; import { MdError } from 'react-icons/md'; -import { IoWarningOutline } from "react-icons/io5"; +import { IoWarningOutline } from 'react-icons/io5'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { Tooltip } from '@/components/ui/tooltip'; import type { WarningWithDetail } from '@/utils/types'; diff --git a/src/hooks/queries/useMerklCampaignsQuery.ts b/src/hooks/queries/useMerklCampaignsQuery.ts index cf1af3da..31f5dc23 100644 --- a/src/hooks/queries/useMerklCampaignsQuery.ts +++ b/src/hooks/queries/useMerklCampaignsQuery.ts @@ -8,9 +8,7 @@ export const useMerklCampaignsQuery = () => { const query = useQuery({ queryKey: ['merkl-campaigns'], queryFn: async () => { - const settledResults = await Promise.allSettled( - CAMPAIGN_TYPES_TO_FETCH.map((type) => fetchActiveCampaigns({ type })), - ); + const settledResults = await Promise.allSettled(CAMPAIGN_TYPES_TO_FETCH.map((type) => fetchActiveCampaigns({ type }))); // Extract successful results, use empty array for failed fetches const results = settledResults.map((result, index) => { From b022c56dfd40361176990e73a6f4398e6eee7e27 Mon Sep 17 00:00:00 2001 From: antoncoding Date: Tue, 13 Jan 2026 14:29:23 +0800 Subject: [PATCH 3/4] misc: default agent icon --- src/components/shared/agent-icon.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/shared/agent-icon.tsx b/src/components/shared/agent-icon.tsx index 63692da7..c5a343b7 100644 --- a/src/components/shared/agent-icon.tsx +++ b/src/components/shared/agent-icon.tsx @@ -1,6 +1,6 @@ import { Tooltip } from '@/components/ui/tooltip'; import Image from 'next/image'; -import { HiQuestionMarkCircle } from 'react-icons/hi'; +import { BsQuestionCircle } from 'react-icons/bs'; import type { Address } from 'viem'; import { findAgent } from '@/utils/monarch-agent'; import { TooltipContent } from './tooltip-content'; @@ -18,7 +18,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) { return (
- @@ -46,7 +46,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) { className="hidden items-center justify-center" style={{ width, height }} > - @@ -82,7 +82,7 @@ export function AgentIcon({ address, width, height }: AgentIconProps) { className="hidden items-center justify-center" style={{ width, height }} > - From 9c2db91744dcdd63456ffba6b27786b0485ca38e Mon Sep 17 00:00:00 2001 From: antoncoding Date: Tue, 13 Jan 2026 14:33:52 +0800 Subject: [PATCH 4/4] chore: import --- src/components/layout/header/NavbarMobile.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/layout/header/NavbarMobile.tsx b/src/components/layout/header/NavbarMobile.tsx index feea62b1..f0947c87 100644 --- a/src/components/layout/header/NavbarMobile.tsx +++ b/src/components/layout/header/NavbarMobile.tsx @@ -1,14 +1,13 @@ 'use client'; import { useEffect, useState } from 'react'; -import { HamburgerMenuIcon } from '@radix-ui/react-icons'; +import { HamburgerMenuIcon, GearIcon } from '@radix-ui/react-icons'; import { clsx } from 'clsx'; import Image from 'next/image'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { useTheme } from 'next-themes'; import { FaRegMoon } from 'react-icons/fa'; -import { GearIcon } from '@radix-ui/react-icons'; import { LuSunMedium } from 'react-icons/lu'; import { RiBookLine, RiDiscordFill, RiGithubFill, RiLineChartLine, RiBriefcaseLine, RiGiftLine } from 'react-icons/ri'; import { useConnection } from 'wagmi';