From 731b0e613c60b9a9becc19fc6837837466999d67 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 15:48:13 +0800
Subject: [PATCH 1/2] feat: market click dropdown

---
 .../shared/account-actions-popover.tsx        | 93 ++++++-------------
 .../components/market-id-actions-popover.tsx  | 59 ++++++++++++
 .../markets/components/market-id-badge.tsx    | 30 +++---
 3 files changed, 105 insertions(+), 77 deletions(-)
 create mode 100644 src/features/markets/components/market-id-actions-popover.tsx

diff --git a/src/components/shared/account-actions-popover.tsx b/src/components/shared/account-actions-popover.tsx
index e0120df6..3e7fe38c 100644
--- a/src/components/shared/account-actions-popover.tsx
+++ b/src/components/shared/account-actions-popover.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { useState, useCallback, type ReactNode } from 'react';
-import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
-import { motion, AnimatePresence } from 'framer-motion';
+import { useCallback, type ReactNode } from 'react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
 import { LuCopy, LuUser } from 'react-icons/lu';
 import { SiEthereum } from 'react-icons/si';
 import { useStyledToast } from '@/hooks/useStyledToast';
@@ -16,20 +15,18 @@ type AccountActionsPopoverProps = {
 };
 
 /**
- * Minimal popover showing account actions:
+ * Dropdown menu showing account actions:
  * - Copy address
  * - View account (positions page)
  * - View on Etherscan
  */
 export function AccountActionsPopover({ address, children }: AccountActionsPopoverProps) {
-  const [isOpen, setIsOpen] = useState(false);
   const toast = useStyledToast();
 
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(address);
       toast.success('Address copied', `${address.slice(0, 6)}...${address.slice(-4)}`);
-      setIsOpen(false);
     } catch (error) {
       console.error('Failed to copy address', error);
     }
@@ -37,72 +34,38 @@ export function AccountActionsPopover({ address, children }: AccountActionsPopov
 
   const handleViewAccount = useCallback(() => {
     window.location.href = `/positions/${address}`;
-    setIsOpen(false);
   }, [address]);
 
   const handleViewExplorer = useCallback(() => {
     const explorerUrl = getExplorerURL(address, SupportedNetworks.Mainnet);
     window.open(explorerUrl, '_blank', 'noopener,noreferrer');
-    setIsOpen(false);
   }, [address]);
 
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={setIsOpen}
-    >
-      <PopoverTrigger>
-        <div className="cursor-pointer outline-none focus:outline-none">{children}</div>
-      </PopoverTrigger>
-      <PopoverContent className="p-0 bg-surface shadow-lg border-none">
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95, y: -10 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: -10 }}
-              transition={{ type: 'spring', stiffness: 500, damping: 30 }}
-              className="flex min-w-[180px] flex-col rounded-sm bg-surface font-zen"
-            >
-              {/* Copy Address */}
-              <motion.button
-                type="button"
-                onClick={() => void handleCopy()}
-                className="flex items-center gap-3 px-4 py-2.5 text-sm text-secondary transition-colors hover:bg-hovered hover:text-primary"
-                whileHover={{ x: 2 }}
-                whileTap={{ scale: 0.98 }}
-              >
-                <LuCopy className="h-4 w-4" />
-                <span>Copy Address</span>
-              </motion.button>
-
-              {/* View Account */}
-              <motion.button
-                type="button"
-                onClick={handleViewAccount}
-                className="flex items-center gap-3 px-4 py-2.5 text-sm text-secondary transition-colors hover:bg-hovered hover:text-primary"
-                whileHover={{ x: 2 }}
-                whileTap={{ scale: 0.98 }}
-              >
-                <LuUser className="h-4 w-4" />
-                <span>View Account</span>
-              </motion.button>
-
-              {/* View on Explorer */}
-              <motion.button
-                type="button"
-                onClick={handleViewExplorer}
-                className="flex items-center gap-3 px-4 py-2.5 text-sm text-secondary transition-colors hover:bg-hovered hover:text-primary"
-                whileHover={{ x: 2 }}
-                whileTap={{ scale: 0.98 }}
-              >
-                <SiEthereum className="h-4 w-4" />
-                <span>View on Explorer</span>
-              </motion.button>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </PopoverContent>
-    </Popover>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="cursor-pointer">{children}</div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem
+          onClick={() => void handleCopy()}
+          startContent={<LuCopy className="h-4 w-4" />}
+        >
+          Copy Address
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={handleViewAccount}
+          startContent={<LuUser className="h-4 w-4" />}
+        >
+          View Account
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={handleViewExplorer}
+          startContent={<SiEthereum className="h-4 w-4" />}
+        >
+          View on Explorer
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }
diff --git a/src/features/markets/components/market-id-actions-popover.tsx b/src/features/markets/components/market-id-actions-popover.tsx
new file mode 100644
index 00000000..4e2d5af8
--- /dev/null
+++ b/src/features/markets/components/market-id-actions-popover.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useCallback, type ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { LuCopy } from 'react-icons/lu';
+import { GoGraph } from 'react-icons/go';
+import { useStyledToast } from '@/hooks/useStyledToast';
+
+type MarketIdActionsPopoverProps = {
+  marketId: string;
+  chainId: number;
+  children: ReactNode;
+};
+
+/**
+ * Dropdown menu showing market ID actions:
+ * - Copy ID
+ * - View Market
+ */
+export function MarketIdActionsPopover({ marketId, chainId, children }: MarketIdActionsPopoverProps) {
+  const toast = useStyledToast();
+  const router = useRouter();
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(marketId);
+      toast.success('Market ID copied', `${marketId.slice(0, 10)}...${marketId.slice(-6)}`);
+    } catch (error) {
+      console.error('Failed to copy market ID', error);
+    }
+  }, [marketId, toast]);
+
+  const handleViewMarket = useCallback(() => {
+    router.push(`/market/${chainId}/${marketId}`);
+  }, [chainId, marketId, router]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="cursor-pointer">{children}</div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start">
+        <DropdownMenuItem
+          onClick={() => void handleCopy()}
+          startContent={<LuCopy className="h-4 w-4" />}
+        >
+          Copy ID
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={handleViewMarket}
+          startContent={<GoGraph className="h-4 w-4" />}
+        >
+          View Market
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/features/markets/components/market-id-badge.tsx b/src/features/markets/components/market-id-badge.tsx
index 657d0e75..f507f8cb 100644
--- a/src/features/markets/components/market-id-badge.tsx
+++ b/src/features/markets/components/market-id-badge.tsx
@@ -1,6 +1,8 @@
-import Link from 'next/link';
+'use client';
+
 import Image from 'next/image';
 import { getNetworkImg } from '@/utils/networks';
+import { MarketIdActionsPopover } from './market-id-actions-popover';
 
 type MarketIdBadgeProps = {
   marketId: string;
@@ -13,7 +15,7 @@ export function MarketIdBadge({ marketId, chainId, showNetworkIcon = false, show
   const displayId = marketId.slice(2, 8);
   const chainImg = getNetworkImg(chainId);
 
-  return (
+  const badge = (
     <div className="flex items-center gap-1.5">
       {showNetworkIcon && chainImg && (
         <Image
@@ -23,16 +25,20 @@ export function MarketIdBadge({ marketId, chainId, showNetworkIcon = false, show
           height={15}
         />
       )}
-      {showLink ? (
-        <Link
-          className="group flex items-center justify-center no-underline hover:underline"
-          href={`/market/${chainId}/${marketId}`}
-        >
-          <span className="rounded bg-gray-100 px-1 py-0.5 text-xs font-monospace opacity-70 dark:bg-gray-800">{displayId}</span>
-        </Link>
-      ) : (
-        <span className="rounded bg-gray-100 px-1 py-0.5 text-xs font-monospace opacity-70 dark:bg-gray-800">{displayId}</span>
-      )}
+      <span className="rounded bg-gray-100 px-1 py-0.5 font-monospace text-xs opacity-70 dark:bg-gray-800">{displayId}</span>
     </div>
   );
+
+  if (showLink) {
+    return (
+      <MarketIdActionsPopover
+        marketId={marketId}
+        chainId={chainId}
+      >
+        {badge}
+      </MarketIdActionsPopover>
+    );
+  }
+
+  return badge;
 }

From f02f7c81309c268101613cee9794496bbf8c6ed3 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 15:56:55 +0800
Subject: [PATCH 2/2] feat: action dropdown

---
 .../components/market-id-actions-popover.tsx  | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/features/markets/components/market-id-actions-popover.tsx b/src/features/markets/components/market-id-actions-popover.tsx
index 4e2d5af8..96656c78 100644
--- a/src/features/markets/components/market-id-actions-popover.tsx
+++ b/src/features/markets/components/market-id-actions-popover.tsx
@@ -36,24 +36,29 @@ export function MarketIdActionsPopover({ marketId, chainId, children }: MarketId
   }, [chainId, marketId, router]);
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <div className="cursor-pointer">{children}</div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start">
-        <DropdownMenuItem
-          onClick={() => void handleCopy()}
-          startContent={<LuCopy className="h-4 w-4" />}
-        >
-          Copy ID
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          onClick={handleViewMarket}
-          startContent={<GoGraph className="h-4 w-4" />}
-        >
-          View Market
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div className="cursor-pointer">{children}</div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            onClick={() => void handleCopy()}
+            startContent={<LuCopy className="h-4 w-4" />}
+          >
+            Copy ID
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={handleViewMarket}
+            startContent={<GoGraph className="h-4 w-4" />}
+          >
+            View Market
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   );
 }