+
+
+
+
+
+
Last selection: {selectedLabels.length > 0 ? selectedLabels.join(', ') : 'none'}
+
This one intentionally uses the live `MarketSelectionModal` data pipeline from the app.
+
+ {isOpen ? (
+
setSelectedMarkets(markets)}
+ />
+ ) : null}
+
+
Utilization target: {value[0]}%
+
+
+ setChecked(next === true)}
+ label="Enable Permit2 for this flow"
+ />
+ setChecked(next === true)}
+ label="Use highlighted style"
+ />
+
+ );
+}
+
+export function PopoverHarness(): JSX.Element {
+ return (
+
+
+
+
+
+
+ This area is useful for quick spacing/layout checks inside overlays.
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/ui-lab/harnesses/shared-harnesses.tsx b/src/features/ui-lab/harnesses/shared-harnesses.tsx
new file mode 100644
index 00000000..8d3f0be2
--- /dev/null
+++ b/src/features/ui-lab/harnesses/shared-harnesses.tsx
@@ -0,0 +1,361 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
+import { LuArrowRightLeft, LuLayoutGrid, LuMoon, LuRefreshCw, LuSun } from 'react-icons/lu';
+import { SectionTag } from '@/components/landing/SectionTag';
+import { TableContainerWithHeader } from '@/components/common/table-container-with-header';
+import { AccountIdentity } from '@/components/shared/account-identity';
+import { TablePagination } from '@/components/shared/table-pagination';
+import { TransactionIdentity } from '@/components/shared/transaction-identity';
+import { Button } from '@/components/ui/button';
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { IconSwitch } from '@/components/ui/icon-switch';
+import { RefetchIcon } from '@/components/ui/refetch-icon';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { CollateralIconsDisplay } from '@/features/positions/components/collateral-icons-display';
+import {
+ uiLabAccountAddressFixtures,
+ uiLabCollateralFixtures,
+ uiLabTransactionHashFixtures,
+} from '@/features/ui-lab/fixtures/component-fixtures';
+import { useStyledToast } from '@/hooks/useStyledToast';
+import { SupportedNetworks } from '@/utils/networks';
+
+export function AccountIdentityHarness(): JSX.Element {
+ const [primaryAddress, secondaryAddress] = uiLabAccountAddressFixtures;
+
+ return (
+
+ );
+}
+
+export function TransactionIdentityHarness(): JSX.Element {
+ return (
+
+
+
+
+ );
+}
+
+export function CollateralIconsDisplayHarness(): JSX.Element {
+ return (
+
+ );
+}
+
+export function SectionTagHarness(): JSX.Element {
+ return (
+
+ Market Snapshot
+ Risk Controls
+ Execution Layer
+
+ );
+}
+
+export function IconSwitchHarness(): JSX.Element {
+ const [plainEnabled, setPlainEnabled] = useState(true);
+ const [modeEnabled, setModeEnabled] = useState(false);
+
+ return (
+
+ );
+}
+
+export function RefetchIconHarness(): JSX.Element {
+ const [isLoading, setIsLoading] = useState(false);
+
+ const triggerRefresh = () => {
+ if (isLoading) return;
+ setIsLoading(true);
+ window.setTimeout(() => {
+ setIsLoading(false);
+ }, 1200);
+ };
+
+ return (
+
+
+
The icon completes the active spin cycle before stopping.
+
+
+
+
+
+
+ }>Refresh
+ }>Mark as reviewed
+
+ setShowRiskSignals(checked === true)}
+ >
+ Show risk signals
+
+
+ setViewMode(value as 'table' | 'cards')}
+ >
+ }
+ >
+ Table layout
+
+ }
+ >
+ Card layout
+
+
+
+
+
+
+ Current: {viewMode} / {showRiskSignals ? 'risk on' : 'risk off'}
+
+
+
+
+ Market
+ Supplied
+ Borrowed
+
+
+
+ {rows.map((row) => (
+
+ {row.market}
+ {row.supplied}
+ {row.borrowed}
+
+ ))}
+
+
+
+ );
+}
+
+export function TablePaginationHarness(): JSX.Element {
+ const totalEntries = 248;
+ const pageSize = 25;
+ const totalPages = Math.ceil(totalEntries / pageSize);
+ const [page, setPage] = useState(1);
+
+ return (
+
+ );
+}
+
+export function ToastHarness(): JSX.Element {
+ const { success, error, info } = useStyledToast();
+
+ return (
+
+
+
+
+
+ );
+}
diff --git a/src/features/ui-lab/harnesses/supply-modal-harness.tsx b/src/features/ui-lab/harnesses/supply-modal-harness.tsx
new file mode 100644
index 00000000..f89435d0
--- /dev/null
+++ b/src/features/ui-lab/harnesses/supply-modal-harness.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { SupplyModalV2 } from '@/modals/supply/supply-modal';
+import {
+ createUiLabMarketFixture,
+ createUiLabSupplyPositionFixture,
+ uiLabLiquiditySourcingFixture,
+} from '@/features/ui-lab/fixtures/market-fixtures';
+
+export function SupplyModalHarness(): JSX.Element {
+ const [isOpen, setIsOpen] = useState(true);
+ const [defaultMode, setDefaultMode] = useState<'supply' | 'withdraw'>('supply');
+ const [hasPosition, setHasPosition] = useState(true);
+
+ const market = useMemo(() => createUiLabMarketFixture(), []);
+ const position = useMemo(() => (hasPosition ? createUiLabSupplyPositionFixture(market) : null), [hasPosition, market]);
+
+ return (
+
+
+
+
+
+
+
+
+
+ Use this harness to tune `SupplyModalV2` layout while keeping market/position fixtures stable.
+
+
+ {isOpen ? (
+
{}}
+ defaultMode={defaultMode}
+ liquiditySourcing={uiLabLiquiditySourcingFixture}
+ />
+ ) : null}
+ UI Lab registry is empty.
;
+ }
+
+ const canvasBgClass = canvasBackgroundClasses[canvas.bg];
+ const isDarkTheme = theme === 'dark';
+ const selectedDataMode = selectedEntry.dataMode ?? 'fixture';
+
+ return (
+
+
+
+
+ {isSidebarMinimized ? null : (
+
+
UI Lab
+
Component sections
+
+ )}
+
+
+
+
+ {isSidebarMinimized ? (
+
+ {uiLabCategoryOrder.map((category) => (
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {selectedEntry.render()}
+
+
+
+
+
+