misc: allow ctrl + click to open market

src/features/market-detail/components/market-header.tsx

@@ -10,6 +10,7 @@ import { IoWarningOutline, IoEllipsisVertical } from 'react-icons/io5';
 import { MdError } from 'react-icons/md';
 import { BsArrowUpCircle, BsArrowDownLeftCircle } from 'react-icons/bs';
 import { FiExternalLink } from 'react-icons/fi';
+import { LuCopy } from 'react-icons/lu';
 import { Button } from '@/components/ui/button';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { TokenIcon } from '@/components/shared/token-icon';
@@ -20,6 +21,7 @@ import { CampaignBadge } from '@/features/market-detail/components/campaign-badg
 import { PositionPill } from '@/features/market-detail/components/position-pill';
 import { OracleTypeInfo } from '@/features/markets/components/oracle/MarketOracle/OracleTypeInfo';
 import { useRateLabel } from '@/hooks/useRateLabel';
+import { useStyledToast } from '@/hooks/useStyledToast';
 import { useAppSettings } from '@/stores/useAppSettings';
 import { convertApyToApr } from '@/utils/rateMath';
 import { getIRMTitle } from '@/utils/morpho';
@@ -134,8 +136,18 @@ export function MarketHeader({
   const [isExpanded, setIsExpanded] = useState(false);
   const { short: rateLabel } = useRateLabel();
   const { isAprDisplay } = useAppSettings();
+  const toast = useStyledToast();
   const networkImg = getNetworkImg(network);
 
+  const handleCopyMarketId = async () => {
+    try {
+      await navigator.clipboard.writeText(marketId);
+      toast.success('Market ID copied', `${marketId.slice(0, 10)}...${marketId.slice(-6)}`);
+    } catch {
+      // Clipboard API not available
+    }
+  };
+
   const formatRate = (rate: number) => {
     const displayRate = isAprDisplay ? convertApyToApr(rate) : rate;
     return `${(displayRate * 100).toFixed(2)}%`;
@@ -236,8 +248,15 @@ export function MarketHeader({
             </div>
 
             <div>
-              <div className="text-2xl pt-4">
+              <div className="flex items-center gap-2 pt-4 text-2xl">
                 {market.loanAsset.symbol}/{market.collateralAsset.symbol}
+                <button
+                  type="button"
+                  onClick={handleCopyMarketId}
+                  className="text-secondary transition-colors hover:text-primary"
+                >
+                  <LuCopy className="h-4 w-4" />
+                </button>
               </div>
               <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-secondary">
                 {networkImg && (

src/features/markets/components/market-id-badge.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import Image from 'next/image';
+import Link from 'next/link';
+import { LuCopy } from 'react-icons/lu';
+import { Tooltip } from '@/components/ui/tooltip';
+import { useStyledToast } from '@/hooks/useStyledToast';
 import { getNetworkImg } from '@/utils/networks';
-import { MarketIdActionsPopover } from './market-id-actions-popover';
 
 type MarketIdBadgeProps = {
   marketId: string;
@@ -12,11 +15,19 @@ type MarketIdBadgeProps = {
 };
 
 export function MarketIdBadge({ marketId, chainId, showNetworkIcon = false, showLink = true }: MarketIdBadgeProps) {
+  const toast = useStyledToast();
   const displayId = marketId.slice(2, 8);
   const chainImg = getNetworkImg(chainId);
 
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    await navigator.clipboard.writeText(marketId);
+    toast.success('Market ID copied', `${marketId.slice(0, 10)}...${marketId.slice(-6)}`);
+  };
+
   const badge = (
-    <div className="flex items-center gap-1.5">
+    <div className="flex cursor-pointer items-center gap-1.5">
       {showNetworkIcon && chainImg && (
         <Image
           src={chainImg}
@@ -25,18 +36,42 @@ export function MarketIdBadge({ marketId, chainId, showNetworkIcon = false, show
           height={15}
         />
       )}
-      <span className="rounded bg-gray-100 px-1 py-0.5 font-monospace text-xs opacity-70 dark:bg-gray-800">{displayId}</span>
+      <span className="rounded bg-gray-100 px-1 py-0.5 font-monospace text-xs underline decoration-dotted decoration-gray-400 underline-offset-2 opacity-70 dark:bg-gray-800 dark:decoration-gray-500">
+        {displayId}
+      </span>
     </div>
   );
 
   if (showLink) {
+    const tooltipContent = (
+      <div className="flex items-center gap-3">
+        <div>
+          <p className="text-xs uppercase tracking-wider text-secondary">Market ID</p>
+          <span className="font-monospace text-xs">{`${marketId.slice(0, 10)}...`}</span>
+        </div>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="rounded-sm p-1 text-secondary transition-colors hover:bg-hovered hover:text-primary"
+        >
+          <LuCopy className="h-4 w-4" />
+        </button>
+      </div>
+    );
+
     return (
-      <MarketIdActionsPopover
-        marketId={marketId}
-        chainId={chainId}
+      <Tooltip
+        delay={1000}
+        content={tooltipContent}
       >
-        {badge}
-      </MarketIdActionsPopover>
+        <Link
+          href={`/market/${chainId}/${marketId}`}
+          className="no-underline"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {badge}
+        </Link>
+      </Tooltip>
     );
   }