From 1ff293ff02cc4defe64df92c86fd65ab2e06e62b Mon Sep 17 00:00:00 2001 From: anton Date: Thu, 29 Jan 2026 17:45:43 +0800 Subject: [PATCH 1/4] fix: add market filter to rebalance market selection modal Fixes #342 - Users can now access market filters and settings when selecting markets in the rebalance modal. --- src/features/markets/components/market-selection-modal.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/features/markets/components/market-selection-modal.tsx b/src/features/markets/components/market-selection-modal.tsx index ac2aea57..1cd14d2a 100644 --- a/src/features/markets/components/market-selection-modal.tsx +++ b/src/features/markets/components/market-selection-modal.tsx @@ -6,6 +6,7 @@ import { MarketsTableWithSameLoanAsset } from '@/features/markets/components/mar import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal'; import { Spinner } from '@/components/ui/spinner'; import { useProcessedMarkets } from '@/hooks/useProcessedMarkets'; +import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; import type { SupportedNetworks } from '@/utils/networks'; import type { Market } from '@/utils/types'; @@ -109,6 +110,7 @@ export function MarketSelectionModal({ description={description} mainIcon={} onClose={() => onOpenChange(false)} + actions={} /> {marketsLoading ? ( From 8d4692ec1ec075217ce4958ac14bf59191f134d0 Mon Sep 17 00:00:00 2001 From: anton Date: Thu, 29 Jan 2026 17:58:30 +0800 Subject: [PATCH 2/4] Revert "fix: add market filter to rebalance market selection modal" This reverts commit 1ff293ff02cc4defe64df92c86fd65ab2e06e62b. --- src/features/markets/components/market-selection-modal.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/features/markets/components/market-selection-modal.tsx b/src/features/markets/components/market-selection-modal.tsx index 1cd14d2a..ac2aea57 100644 --- a/src/features/markets/components/market-selection-modal.tsx +++ b/src/features/markets/components/market-selection-modal.tsx @@ -6,7 +6,6 @@ import { MarketsTableWithSameLoanAsset } from '@/features/markets/components/mar import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal'; import { Spinner } from '@/components/ui/spinner'; import { useProcessedMarkets } from '@/hooks/useProcessedMarkets'; -import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; import type { SupportedNetworks } from '@/utils/networks'; import type { Market } from '@/utils/types'; @@ -110,7 +109,6 @@ export function MarketSelectionModal({ description={description} mainIcon={} onClose={() => onOpenChange(false)} - actions={} /> {marketsLoading ? ( From 1fc810ed8116ec82ff654e5f7d291f24610fb853 Mon Sep 17 00:00:00 2001 From: anton Date: Thu, 29 Jan 2026 18:00:41 +0800 Subject: [PATCH 3/4] fix: add market filter to selection modal with proper z-index - Added 'top' z-index level (3400) above 'selection' (3200) - MarketFilter now accepts zIndex prop for customization - Added filterZIndex prop to MarketsTableWithSameLoanAsset - MarketSelectionModal passes filterZIndex='top' to the table - Hidden table settings (GearIcon) inside nested modals Fixes the issue where filter dropdown was blocked by the modal. --- src/components/common/Modal/Modal.tsx | 3 ++- .../components/market-selection-modal.tsx | 3 +++ .../components/markets-table-same-loan.tsx | 27 ++++++++++++------- .../components/markets-filter-compact.tsx | 7 ++--- 4 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx index d6332aef..101ea6c4 100644 --- a/src/components/common/Modal/Modal.tsx +++ b/src/components/common/Modal/Modal.tsx @@ -6,7 +6,7 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden'; import { cn } from '@/utils/components'; export type ModalVariant = 'standard' | 'compact' | 'custom'; -export type ModalZIndex = 'base' | 'process' | 'selection' | 'settings' | 'custom'; +export type ModalZIndex = 'base' | 'process' | 'selection' | 'settings' | 'top' | 'custom'; type ModalProps = { isOpen: boolean; @@ -28,6 +28,7 @@ const Z_INDEX_MAP: Record = process: { wrapper: 'z-[2600]', backdrop: 'z-[2590]' }, settings: { wrapper: 'z-[3000]', backdrop: 'z-[2990]' }, selection: { wrapper: 'z-[3200]', backdrop: 'z-[3190]' }, + top: { wrapper: 'z-[3400]', backdrop: 'z-[3390]' }, custom: { wrapper: '', backdrop: '' }, }; diff --git a/src/features/markets/components/market-selection-modal.tsx b/src/features/markets/components/market-selection-modal.tsx index ac2aea57..8d9d271f 100644 --- a/src/features/markets/components/market-selection-modal.tsx +++ b/src/features/markets/components/market-selection-modal.tsx @@ -6,6 +6,7 @@ import { MarketsTableWithSameLoanAsset } from '@/features/markets/components/mar import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal'; import { Spinner } from '@/components/ui/spinner'; import { useProcessedMarkets } from '@/hooks/useProcessedMarkets'; +import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; import type { SupportedNetworks } from '@/utils/networks'; import type { Market } from '@/utils/types'; @@ -109,6 +110,7 @@ export function MarketSelectionModal({ description={description} mainIcon={} onClose={() => onOpenChange(false)} + actions={} /> {marketsLoading ? ( @@ -131,6 +133,7 @@ export function MarketSelectionModal({ disabled={false} uniqueCollateralTokens={undefined} showSelectColumn={multiSelect} + filterZIndex="top" /> )} diff --git a/src/features/markets/components/markets-table-same-loan.tsx b/src/features/markets/components/markets-table-same-loan.tsx index 88f4323d..955e6b00 100644 --- a/src/features/markets/components/markets-table-same-loan.tsx +++ b/src/features/markets/components/markets-table-same-loan.tsx @@ -7,6 +7,7 @@ import EmptyScreen from '@/components/status/empty-screen'; import AssetFilter from '@/features/markets/components/filters/asset-filter'; import OracleFilter from '@/features/markets/components/filters/oracle-filter'; import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; +import type { ModalZIndex } from '@/components/common/Modal'; import { ClearFiltersButton } from '@/components/shared/clear-filters-button'; import { TablePagination } from '@/components/shared/table-pagination'; import { useTokensQuery } from '@/hooks/queries/useTokensQuery'; @@ -53,6 +54,8 @@ type MarketsTableWithSameLoanAssetProps = { uniqueCollateralTokens?: ERC20Token[]; // Optional: Hide the select column (useful for single-select mode) showSelectColumn?: boolean; + // Optional: Override z-index for filter modal (use 'top' when inside another modal) + filterZIndex?: ModalZIndex; }; enum SortColumn { @@ -309,6 +312,7 @@ export function MarketsTableWithSameLoanAsset({ disabled = false, uniqueCollateralTokens, showSelectColumn = true, + filterZIndex, }: MarketsTableWithSameLoanAssetProps): JSX.Element { // Get global market settings const { showUnwhitelistedMarkets, isAprDisplay } = useAppSettings(); @@ -593,16 +597,19 @@ export function MarketsTableWithSameLoanAsset({ /> {hasActiveFilters && }
- - + + {/* Hide table settings when inside a nested modal (filterZIndex is set) */} + {!filterZIndex && ( + + )}
diff --git a/src/features/positions/components/markets-filter-compact.tsx b/src/features/positions/components/markets-filter-compact.tsx index 365aea29..f7a28719 100644 --- a/src/features/positions/components/markets-filter-compact.tsx +++ b/src/features/positions/components/markets-filter-compact.tsx @@ -6,7 +6,7 @@ import { Divider } from '@/components/ui/divider'; import { FilterRow, FilterSection } from '@/components/ui/filter-components'; import { IconSwitch } from '@/components/ui/icon-switch'; import { Tooltip } from '@/components/ui/tooltip'; -import { Modal, ModalBody, ModalFooter, ModalHeader } from '@/components/common/Modal'; +import { Modal, ModalBody, ModalFooter, ModalHeader, type ModalZIndex } from '@/components/common/Modal'; import { TooltipContent } from '@/components/shared/tooltip-content'; import { MONARCH_PRIMARY } from '@/constants/chartColors'; import { useDisclosure } from '@/hooks/useDisclosure'; @@ -21,11 +21,12 @@ import { parseNumericThreshold } from '@/utils/markets'; type MarketFilterProps = { className?: string; variant?: 'ghost' | 'button'; + zIndex?: ModalZIndex; }; type DetailViewType = 'filter-thresholds' | 'trusted-vaults' | 'custom-tag-config'; -export function MarketFilter({ className, variant = 'ghost' }: MarketFilterProps) { +export function MarketFilter({ className, variant = 'ghost', zIndex = 'settings' }: MarketFilterProps) { const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure(); const { open: openModal } = useModal(); @@ -105,7 +106,7 @@ export function MarketFilter({ className, variant = 'ghost' }: MarketFilterProps onOpenChange={onOpenChange} size="md" backdrop="opaque" - zIndex="settings" + zIndex={zIndex} > {(close) => ( <> From 84a5b999ccfbdae6329590a68e55f701586d5b6b Mon Sep 17 00:00:00 2001 From: anton Date: Thu, 29 Jan 2026 18:55:11 +0800 Subject: [PATCH 4/4] fix: restore GearIcon with proper z-index support - Removed duplicate MarketFilter from modal header - Added zIndex prop to marketSettings in modal store - MarketSettingsModal now accepts and uses zIndex prop - Table passes zIndex='top' when inside nested modal - Both filter and settings buttons now work in selection modal --- .../components/market-selection-modal.tsx | 2 -- .../components/market-settings-modal.tsx | 7 ++++--- .../components/markets-table-same-loan.tsx | 21 ++++++++----------- src/stores/useModalStore.ts | 4 +++- 4 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/features/markets/components/market-selection-modal.tsx b/src/features/markets/components/market-selection-modal.tsx index 8d9d271f..0057a7f8 100644 --- a/src/features/markets/components/market-selection-modal.tsx +++ b/src/features/markets/components/market-selection-modal.tsx @@ -6,7 +6,6 @@ import { MarketsTableWithSameLoanAsset } from '@/features/markets/components/mar import { Modal, ModalHeader, ModalBody, ModalFooter } from '@/components/common/Modal'; import { Spinner } from '@/components/ui/spinner'; import { useProcessedMarkets } from '@/hooks/useProcessedMarkets'; -import { MarketFilter } from '@/features/positions/components/markets-filter-compact'; import type { SupportedNetworks } from '@/utils/networks'; import type { Market } from '@/utils/types'; @@ -110,7 +109,6 @@ export function MarketSelectionModal({ description={description} mainIcon={} onClose={() => onOpenChange(false)} - actions={} /> {marketsLoading ? ( diff --git a/src/features/markets/components/market-settings-modal.tsx b/src/features/markets/components/market-settings-modal.tsx index 145fe5f3..1ea1f523 100644 --- a/src/features/markets/components/market-settings-modal.tsx +++ b/src/features/markets/components/market-settings-modal.tsx @@ -3,7 +3,7 @@ import { FiSliders } from 'react-icons/fi'; import { Button } from '@/components/ui/button'; import { IconSwitch } from '@/components/ui/icon-switch'; import { Input } from '@/components/ui/input'; -import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal'; +import { Modal, ModalBody, ModalHeader, type ModalZIndex } from '@/components/common/Modal'; import { useRateLabel } from '@/hooks/useRateLabel'; import { useMarketPreferences } from '@/stores/useMarketPreferences'; import { COLUMN_DESCRIPTIONS, COLUMN_LABELS, DEFAULT_COLUMN_VISIBILITY, type ColumnVisibility } from './column-visibility'; @@ -11,6 +11,7 @@ import { COLUMN_DESCRIPTIONS, COLUMN_LABELS, DEFAULT_COLUMN_VISIBILITY, type Col type MarketSettingsModalProps = { isOpen: boolean; onOpenChange: (isOpen: boolean) => void; + zIndex?: ModalZIndex; }; type SettingItemProps = { @@ -31,7 +32,7 @@ function SettingItem({ title, description, children }: SettingItemProps) { ); } -export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSettingsModalProps) { +export default function MarketSettingsModal({ isOpen, onOpenChange, zIndex = 'settings' }: MarketSettingsModalProps) { const { columnVisibility, setColumnVisibility, entriesPerPage, setEntriesPerPage } = useMarketPreferences(); const { short: rateShort } = useRateLabel(); @@ -67,7 +68,7 @@ export default function MarketSettingsModal({ isOpen, onOpenChange }: MarketSett onOpenChange={onOpenChange} backdrop="blur" size="md" - zIndex="settings" + zIndex={zIndex} > {(onClose) => ( <> diff --git a/src/features/markets/components/markets-table-same-loan.tsx b/src/features/markets/components/markets-table-same-loan.tsx index 955e6b00..cd78aa07 100644 --- a/src/features/markets/components/markets-table-same-loan.tsx +++ b/src/features/markets/components/markets-table-same-loan.tsx @@ -598,18 +598,15 @@ export function MarketsTableWithSameLoanAsset({ {hasActiveFilters && }
- {/* Hide table settings when inside a nested modal (filterZIndex is set) */} - {!filterZIndex && ( - - )} +
diff --git a/src/stores/useModalStore.ts b/src/stores/useModalStore.ts index da3e1e98..8499dd84 100644 --- a/src/stores/useModalStore.ts +++ b/src/stores/useModalStore.ts @@ -49,7 +49,9 @@ export type ModalProps = { }; // Settings & Configuration - marketSettings: Record; // No props needed - uses useMarketPreferences() store + marketSettings: { + zIndex?: 'settings' | 'top'; // Override z-index when opened from nested modals + }; monarchSettings: { initialCategory?: 'transaction' | 'display' | 'filters' | 'preferences' | 'experimental';