fix: tests

src/internal/components/BottomSheet.test.tsx

@@ -65,10 +65,10 @@ describe('BottomSheet', () => {
       </BottomSheet>,
     );
 
-    const tray = screen.getByTestId('ockBottomSheet');
-    expect(tray).toHaveAttribute('role', 'dialog');
-    expect(tray).toHaveAttribute('aria-label', 'Test Dialog');
-    expect(tray).toHaveAttribute('aria-describedby', 'desc');
-    expect(tray).toHaveAttribute('aria-labelledby', 'title');
+    const sheet = screen.getByTestId('ockBottomSheet');
+    expect(sheet).toHaveAttribute('role', 'dialog');
+    expect(sheet).toHaveAttribute('aria-label', 'Test Dialog');
+    expect(sheet).toHaveAttribute('aria-describedby', 'desc');
+    expect(sheet).toHaveAttribute('aria-labelledby', 'title');
   });
 });

src/internal/components/BottomSheet.tsx

@@ -51,7 +51,7 @@ export function BottomSheet({
             className={cn(
               componentTheme,
               background.default,
-              zIndex.tray,
+              zIndex.bottomSheet,
               'fixed right-0 bottom-0 left-0',
               'transform rounded-t-3xl p-2 transition-transform',
               'fade-in slide-in-from-bottom-1/2 animate-in',

src/styles/constants.ts

@@ -4,6 +4,6 @@ export const zIndex = {
   dropdown: 10,
   tooltip: 20,
   modal: 40,
-  tray: 45,
+  bottomSheet: 45,
   notification: 50,
 } as const;

src/wallet/components/WalletAdvancedContent.test.tsx

@@ -1,6 +1,6 @@
 import type { SwapDefaultReact } from '@/swap/types';
 import { useBreakpoints } from '@/ui-react/internal/hooks/useBreakpoints';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { WalletAdvancedContent } from './WalletAdvancedContent';
 import { useWalletAdvancedContext } from './WalletAdvancedProvider';
@@ -206,7 +206,7 @@ describe('WalletAdvancedContent', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('closes WalletAdvancedContent when mobile tray is closed', () => {
+  it('closes WalletAdvancedContent when a click outside bottom sheet happens and breakpoint is sm', () => {
     mockUseBreakpoints.mockReturnValue('sm');
     const setIsSubComponentOpen = vi.fn();
     mockUseWalletContext.mockReturnValue({
@@ -226,6 +226,26 @@ describe('WalletAdvancedContent', () => {
     expect(setIsSubComponentOpen).toHaveBeenCalledWith(false);
   });
 
+  it('does not close WalletAdvancedContent when a click outside bottom sheet happens and breakpoint is not sm', () => {
+    mockUseBreakpoints.mockReturnValue('md');
+    const setIsSubComponentOpen = vi.fn();
+    mockUseWalletContext.mockReturnValue({
+      isSubComponentOpen: true,
+      setIsSubComponentOpen,
+    });
+
+    render(
+      <WalletAdvancedContent>
+        <div>WalletAdvancedContent</div>
+      </WalletAdvancedContent>,
+    );
+
+    const overlay = screen.getByTestId('ockBottomSheetOverlay');
+    fireEvent.pointerDown(overlay);
+
+    expect(setIsSubComponentOpen).not.toHaveBeenCalled();
+  });
+
   it('handles animation end when closing', () => {
     const setIsSubComponentOpen = vi.fn();
     const setIsSubComponentClosing = vi.fn();
@@ -261,12 +281,12 @@ describe('WalletAdvancedContent', () => {
       </WalletAdvancedContent>,
     );
 
-    expect(screen.getByTestId('ockWalletAdvancedQrReceive')).toBeDefined();
+    const desktopContainer = screen.getByTestId('ockWalletAdvancedContent');
     expect(
-      screen.queryByTestId('ockWalletAdvancedQrReceive'),
+      within(desktopContainer).getByTestId('ockWalletAdvancedQrReceive'),
     ).toBeInTheDocument();
     expect(
-      screen.queryByTestId('ockWalletAdvancedSwap'),
+      within(desktopContainer).queryByTestId('ockWalletAdvancedSwap'),
     ).not.toBeInTheDocument();
   });
 
@@ -282,10 +302,12 @@ describe('WalletAdvancedContent', () => {
       </WalletAdvancedContent>,
     );
 
-    expect(screen.getByTestId('ockWalletAdvancedSwap')).toBeDefined();
-    expect(screen.queryByTestId('ockWalletAdvancedSwap')).toBeInTheDocument();
+    const desktopContainer = screen.getByTestId('ockWalletAdvancedContent');
     expect(
-      screen.queryByTestId('ockWalletAdvancedQrReceive'),
+      within(desktopContainer).getByTestId('ockWalletAdvancedSwap'),
+    ).toBeInTheDocument();
+    expect(
+      within(desktopContainer).queryByTestId('ockWalletAdvancedQrReceive'),
     ).not.toBeInTheDocument();
   });
 
@@ -323,7 +345,10 @@ describe('WalletAdvancedContent', () => {
       </WalletAdvancedContent>,
     );
 
-    const swapComponent = screen.getByTestId('ockWalletAdvancedSwap');
+    const desktopContainer = screen.getByTestId('ockWalletAdvancedContent');
+    const swapComponent = within(desktopContainer).getByTestId(
+      'ockWalletAdvancedSwap',
+    );
     const props = JSON.parse(
       swapComponent.getAttribute('data-props') as string,
     );
@@ -340,8 +365,7 @@ describe('WalletAdvancedContent', () => {
     );
   });
 
-  it('renders BottomSheet when breakpoint is sm', () => {
-    mockUseBreakpoints.mockReturnValue('sm');
+  it('renders BottomSheet and advanced content with the correct classes', () => {
     mockUseWalletContext.mockReturnValue({
       isSubComponentOpen: true,
       isSubComponentClosing: false,
@@ -353,6 +377,11 @@ describe('WalletAdvancedContent', () => {
       </WalletAdvancedContent>,
     );
 
-    expect(screen.getByTestId('ockBottomSheet')).toBeDefined();
+    const bottomSheet = screen.getByTestId('ockBottomSheet');
+    expect(bottomSheet).toHaveClass('md:hidden');
+
+    // Also verify desktop container is hidden on mobile
+    const desktopContainer = screen.getByTestId('ockWalletAdvancedContent');
+    expect(desktopContainer).toHaveClass('hidden', 'md:block');
   });
 });

src/wallet/components/WalletAdvancedContent.tsx

@@ -25,7 +25,7 @@ export function WalletAdvancedContent({
   const { showQr, showSwap, tokenBalances, animations } =
     useWalletAdvancedContext();
 
-  const handleMobileTrayClose = useCallback(() => {
+  const handleBottomSheetClose = useCallback(() => {
     if (breakpoint !== 'sm') {
       return;
     }
@@ -83,7 +83,7 @@ export function WalletAdvancedContent({
     <>
       <BottomSheet
         isOpen={isSubComponentOpen}
-        onClose={handleMobileTrayClose}
+        onClose={handleBottomSheetClose}
         className="md:hidden"
         overlayClassName="md:hidden"
       >