DRAFT: add asset context menu

package.json

@@ -161,6 +161,7 @@
     "@noble/hashes": "1.5.0",
     "@noble/secp256k1": "2.1.0",
     "@octokit/types": "12.4.0",
+    "@radix-ui/react-context-menu": "2.2.6",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-tooltip": "1.0.7",

src/app/components/context-menu/asset-context-menu.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { css } from 'leather-styles/css';
+import { HStack } from 'leather-styles/jsx';
+
+import { ArrowsRepeatLeftRightIcon, InboxIcon, PaperPlaneIcon } from '@leather.io/ui';
+
+import { analytics } from '@shared/utils/analytics';
+
+import { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
+import { useToast } from '@app/features/toasts/use-toast';
+import { useConfigSwapsEnabled } from '@app/query/common/remote-config/remote-config.query';
+
+interface AssetContextMenuProps {
+  assetSymbol: string;
+  contractId?: string;
+  address: string;
+  children: React.ReactNode;
+}
+
+const menuStyles = css({
+  backgroundColor: 'ink.background-primary',
+  borderRadius: 'sm',
+  boxShadow: 'menu',
+  border: '1px solid',
+  borderColor: 'ink.border-default',
+  minWidth: '140px',
+  overflow: 'hidden',
+  padding: 'space.01',
+});
+
+const menuItemStyles = css({
+  opacity: 1,
+  width: '100%',
+  cursor: 'pointer',
+  display: 'block',
+  outline: 'none',
+  borderRadius: 'xs',
+  _hover: {
+    backgroundColor: 'ink.component-background-hover',
+  },
+  '&[data-disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    _hover: {
+      backgroundColor: 'transparent',
+    },
+  },
+});
+
+const menuItemContentStyles = css({
+  width: '100%',
+  px: 'space.03',
+  py: 'space.02',
+  gap: 'space.02',
+});
+
+interface AssetContextMenuItemProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick?(): void;
+  disabled?: boolean;
+}
+
+function AssetContextMenuItem({ icon, label, onClick, disabled }: AssetContextMenuItemProps) {
+  return (
+    <ContextMenu.Item className={menuItemStyles} onClick={onClick} disabled={disabled}>
+      <HStack className={menuItemContentStyles}>
+        {icon}
+        {label}
+      </HStack>
+    </ContextMenu.Item>
+  );
+}
+
+export function AssetContextMenu({
+  assetSymbol,
+  contractId,
+  address,
+  children,
+}: AssetContextMenuProps) {
+  const navigate = useNavigate();
+  const toast = useToast();
+  const isSwapEnabled = useConfigSwapsEnabled();
+
+  const handleReceiveClick = async () => {
+    // Track analytics based on asset type
+    const lowerCaseSymbol = assetSymbol.toLowerCase();
+
+    if (lowerCaseSymbol === 'btc') {
+      // For BTC, we need to include the type parameter
+      void analytics.track('copy_btc_address_to_clipboard', { type: 'btc' });
+    } else {
+      // For STX and other tokens, no second parameter is needed
+      void analytics.track('copy_stx_address_to_clipboard');
+    }
+
+    await copyToClipboard(address);
+    toast.success('Address copied to clipboard');
+  };
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content
+          className={menuStyles}
+          style={{
+            zIndex: 999,
+          }}
+          onPointerDownOutside={e => {
+            e.preventDefault();
+          }}
+        >
+          <ContextMenu.Group>
+            <AssetContextMenuItem
+              icon={<PaperPlaneIcon variant="small" />}
+              label="Send"
+              onClick={() => {
+                navigate(`/send/${assetSymbol}${contractId ? `/${contractId}` : ''}`);
+              }}
+            />
+            <AssetContextMenuItem
+              icon={<InboxIcon variant="small" />}
+              label="Receive"
+              onClick={handleReceiveClick}
+            />
+            <AssetContextMenuItem
+              icon={<ArrowsRepeatLeftRightIcon variant="small" />}
+              label="Swap"
+              onClick={() => {
+                if (!isSwapEnabled) return;
+
+                // Normalize the asset symbol for URL construction
+                // This handles special characters and ensures consistent casing
+                const normalizedSymbol = assetSymbol.toLowerCase().trim();
+
+                // Determine chain based on normalized asset symbol
+                const chain = normalizedSymbol === 'btc' ? 'bitcoin' : 'stacks';
+
+                // Construct the URL with the normalized symbol
+                const url = `/swap/${chain}/${normalizedSymbol}`;
+
+                navigate(url);
+              }}
+              disabled={!isSwapEnabled}
+            />
+          </ContextMenu.Group>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}

src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx

@@ -1,3 +1,5 @@
+import { useRef, useState } from 'react';
+
 import { sanitize } from 'dompurify';
 import { Box, Flex } from 'leather-styles/jsx';
 
@@ -12,7 +14,11 @@
 } from '@leather.io/ui';
 
 import { useSpamFilterWithWhitelist } from '@app/common/spam-filter/use-spam-filter';
+import { AssetContextMenu } from '@app/components/context-menu/asset-context-menu';
 import { PrivateTextLayout } from '@app/components/privacy/private-text.layout';
+import { useCurrentAccountIndex } from '@app/store/accounts/account';
+import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils';
@@ -33,6 +39,7 @@
   titleRightBulletInfo?: React.ReactNode;
   dataTestId: string;
 }
+
 export function CryptoAssetItemLayout({
   availableBalance,
   balanceSuffix,
@@ -49,9 +56,16 @@
   titleRightBulletInfo,
   dataTestId,
 }: CryptoAssetItemLayoutProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
   const { availableBalanceString, formattedBalance } = parseCryptoAssetBalance(availableBalance);
-
   const spamFilter = useSpamFilterWithWhitelist();
+  const currentAccountIndex = useCurrentAccountIndex();
+  const currentStacksAccount = useCurrentStacksAccount();
+  const btcAddress = useNativeSegwitAccountIndexAddressIndexZero(currentAccountIndex);
+
+  const isBtcToken = availableBalance.symbol.toLowerCase() === 'btc';
+  const address = isBtcToken ? btcAddress : currentStacksAccount?.address;
 
   const titleRight = (
     <SkeletonLoader width="126px" isLoading={isLoading}>
@@ -94,8 +108,6 @@
     </SkeletonLoader>
   );
 
-  const isInteractive = !!onSelectAsset;
-
   const content = (
     <ItemLayout
       img={icon}
@@ -106,20 +118,45 @@
     />
   );
 
-  if (isInteractive)
-    return (
-      <Pressable
-        data-testid={dataTestId}
-        onClick={() => onSelectAsset(availableBalance.symbol, contractId)}
-        my="space.02"
-      >
-        {content}
-      </Pressable>
-    );
-
   return (
-    <Box my="space.02" data-testid={sanitize(dataTestId)}>
-      {content}
+    <Box data-testid={sanitize(dataTestId)} ref={menuRef}>
+      <AssetContextMenu
+        assetSymbol={availableBalance.symbol}
+        contractId={contractId}
+        address={address || ''}
+      >
+        <Pressable
+          className="group"
+          borderRadius="sm"
+          width="100%"
+          py="space.02"
+          position="relative"
+          _before={{
+            content: '""',
+            rounded: 'xs',
+            position: 'absolute',
+            top: '-space.01',
+            left: '-space.03',
+            bottom: '-space.01',
+            right: '-space.03',
+          }}
+          _hover={{
+            _before: {
+              bg: 'ink.component-background-hover',
+              borderColor: 'transparent',
+            },
+          }}
+          onClick={(e: React.MouseEvent) => {
+            if (onSelectAsset) {
+              onSelectAsset(availableBalance.symbol, contractId);
+              e.stopPropagation();
+              return;
+            }
+          }}
+        >
+          {content}
+        </Pressable>
+      </AssetContextMenu>
     </Box>
   );
 }