Touch devices

__tests__/FooterWrapper.test.tsx

@@ -8,7 +8,9 @@ jest.mock("@/hooks/useDeviceInfo", () => ({
   default: jest.fn(() => ({
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
     isApp: false,
+    isAppleMobile: false,
   })),
 }));
 jest.mock("next/navigation", () => ({ usePathname: jest.fn() }));

__tests__/components/brain/left-sidebar/waves/UnifiedWavesList.test.tsx

@@ -1,47 +1,67 @@
-import { act, render, screen } from '@testing-library/react';
-import React from 'react';
-import UnifiedWavesList from '@/components/brain/left-sidebar/waves/UnifiedWavesList';
-import useDeviceInfo from '@/hooks/useDeviceInfo';
-import { createMockMinimalWave } from '@/__tests__/utils/mockFactories';
+import { createMockMinimalWave } from "@/__tests__/utils/mockFactories";
+import UnifiedWavesList from "@/components/brain/left-sidebar/waves/UnifiedWavesList";
+import useDeviceInfo from "@/hooks/useDeviceInfo";
+import { act, render, screen } from "@testing-library/react";
+import React from "react";
 
-jest.mock('@/hooks/useDeviceInfo');
-jest.mock('@/components/brain/left-sidebar/waves/UnifiedWavesListLoader', () => ({
-  UnifiedWavesListLoader: ({ isFetchingNextPage }: any) => <div data-testid="loader">{String(isFetchingNextPage)}</div>
-}));
-jest.mock('@/components/brain/left-sidebar/waves/UnifiedWavesListEmpty', () => ({
-  __esModule: true,
-  default: ({ sortedWaves }: any) => <div data-testid="empty">{sortedWaves.length}</div>
-}));
+jest.mock("@/hooks/useDeviceInfo");
+jest.mock(
+  "@/components/brain/left-sidebar/waves/UnifiedWavesListLoader",
+  () => ({
+    UnifiedWavesListLoader: ({ isFetchingNextPage }: any) => (
+      <div data-testid="loader">{String(isFetchingNextPage)}</div>
+    ),
+  })
+);
+jest.mock(
+  "@/components/brain/left-sidebar/waves/UnifiedWavesListEmpty",
+  () => ({
+    __esModule: true,
+    default: ({ sortedWaves }: any) => (
+      <div data-testid="empty">{sortedWaves.length}</div>
+    ),
+  })
+);
 
 let sentinel: HTMLElement | null = null;
 
-jest.mock('@/components/brain/left-sidebar/waves/UnifiedWavesListWaves', () => {
+jest.mock("@/components/brain/left-sidebar/waves/UnifiedWavesListWaves", () => {
   return {
     __esModule: true,
     default: React.forwardRef((props: any, ref: any) => {
       const sentinelRef = React.useRef<HTMLDivElement>(null);
       const containerRef = React.useRef<HTMLDivElement>(null);
       React.useImperativeHandle(ref, () => ({ sentinelRef, containerRef }));
-      React.useEffect(() => { sentinel = sentinelRef.current; }, []);
-      return <div data-testid="waves"><div ref={sentinelRef} /></div>;
-    })
+      React.useEffect(() => {
+        sentinel = sentinelRef.current;
+      }, []);
+      return (
+        <div data-testid="waves">
+          <div ref={sentinelRef} />
+        </div>
+      );
+    }),
   };
 });
 
 type DeviceInfo = {
   isApp: boolean;
   isMobileDevice: boolean;
   hasTouchScreen: boolean;
+  shouldUseTouchUI: boolean;
   isAppleMobile: boolean;
 };
-const useDeviceInfoMock = useDeviceInfo as jest.MockedFunction<typeof useDeviceInfo>;
+const useDeviceInfoMock = useDeviceInfo as jest.MockedFunction<
+  typeof useDeviceInfo
+>;
 
 beforeEach(() => {
   sentinel = null;
   useDeviceInfoMock.mockReturnValue({
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
     isAppleMobile: false,
   } as DeviceInfo);
 });
@@ -50,8 +70,8 @@ afterEach(() => {
   jest.resetAllMocks();
 });
 
-describe('UnifiedWavesList', () => {
-  it('shows create link when not in app', () => {
+describe("UnifiedWavesList", () => {
+  it("shows create link when not in app", () => {
     render(
       <UnifiedWavesList
         waves={[]}
@@ -63,29 +83,33 @@ describe('UnifiedWavesList', () => {
         scrollContainerRef={React.createRef()}
       />
     );
-    expect(screen.getByText('Create Wave')).toBeInTheDocument();
-    expect(screen.getByTestId('loader')).toHaveTextContent('false');
+    expect(screen.getByText("Create Wave")).toBeInTheDocument();
+    expect(screen.getByTestId("loader")).toHaveTextContent("false");
   });
 
-  it('triggers fetchNextPage when sentinel intersects', () => {
+  it("triggers fetchNextPage when sentinel intersects", () => {
     useDeviceInfoMock.mockReturnValue({
       isApp: true,
       isMobileDevice: false,
       hasTouchScreen: false,
+      shouldUseTouchUI: false,
       isAppleMobile: false,
     } as DeviceInfo);
     const fetchNextPage = jest.fn();
     const observerInstances: any[] = [];
     (global as any).IntersectionObserver = class {
       callback: any;
-      constructor(cb: any) { this.callback = cb; observerInstances.push(this); }
+      constructor(cb: any) {
+        this.callback = cb;
+        observerInstances.push(this);
+      }
       observe() {}
       disconnect() {}
     };
 
     render(
       <UnifiedWavesList
-        waves={[createMockMinimalWave({ id: '1', isPinned: false })]}
+        waves={[createMockMinimalWave({ id: "1", isPinned: false })]}
         fetchNextPage={fetchNextPage}
         hasNextPage={true}
         isFetching={false}

__tests__/components/header/HeaderSearchModal.test.tsx

@@ -162,6 +162,7 @@ function setup(options: SetupOptions = {}) {
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
     isAppleMobile: false,
   });
   useAppWalletsMock.mockReturnValue({ appWalletsSupported: true });

__tests__/components/header/HeaderSearchModalItem.test.tsx

@@ -16,6 +16,8 @@ jest.mock("@/hooks/useDeviceInfo", () => ({
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
+    isAppleMobile: false,
   })),
 }));
 

__tests__/components/memes/drops/MemesLeaderboardDrop.test.tsx

@@ -70,7 +70,7 @@ beforeEach(() => {
 });
 
 test('calls onDropClick when not touch screen', async () => {
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: false });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(false);
   const onClick = jest.fn();
   const { container } = render(
@@ -81,7 +81,7 @@ test('calls onDropClick when not touch screen', async () => {
 });
 
 test('does not call onDropClick on touch devices', async () => {
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: true });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: true, shouldUseTouchUI: true, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(false);
   const onClick = jest.fn();
   const { container } = render(
@@ -92,7 +92,7 @@ test('does not call onDropClick on touch devices', async () => {
 });
 
 test('opens voting modal on desktop', async () => {
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: false });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(false);
   render(<MemesLeaderboardDrop drop={drop} onDropClick={jest.fn()} />);
   expect(screen.getByTestId('modal')).toHaveTextContent('closed');
@@ -101,7 +101,7 @@ test('opens voting modal on desktop', async () => {
 });
 
 test('uses mobile modal on small screens', async () => {
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: false });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(true);
   render(<MemesLeaderboardDrop drop={drop} onDropClick={jest.fn()} />);
   await userEvent.click(screen.getByTestId('vote-btn'));

__tests__/components/navigation/BackButton.test.tsx

@@ -27,6 +27,8 @@ jest.mock("@/hooks/useDeviceInfo", () => ({
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
+    isAppleMobile: false,
   }),
 }));
 

__tests__/components/navigation/ViewContext.test.tsx

@@ -12,6 +12,8 @@ jest.mock("@/hooks/useDeviceInfo", () => ({
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
+    isAppleMobile: false,
   }),
 }));
 

__tests__/components/network/NetworkPageLayout.test.tsx

@@ -46,6 +46,8 @@ describe("NetworkPageLayout", () => {
       isApp: false,
       isMobileDevice: false,
       hasTouchScreen: false,
+      shouldUseTouchUI: false,
+      isAppleMobile: false,
     });
   });
 
@@ -73,6 +75,8 @@ describe("NetworkPageLayout", () => {
       isApp: true,
       isMobileDevice: false,
       hasTouchScreen: false,
+      shouldUseTouchUI: false,
+      isAppleMobile: false,
     });
 
     renderComponent();

__tests__/components/utils/tooltip/UserProfileTooltipWrapper.test.tsx

@@ -39,6 +39,10 @@ jest.mock('@/hooks/useDeviceInfo', () => ({
   __esModule: true,
   default: () => ({
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
+    isMobileDevice: false,
+    isApp: false,
+    isAppleMobile: false,
   }),
 }));
 
@@ -72,6 +76,10 @@ describe('UserProfileTooltipWrapper', () => {
     // Mock touch device
     const mockUseDeviceInfo = jest.fn(() => ({
       hasTouchScreen: true,
+      shouldUseTouchUI: true,
+      isMobileDevice: false,
+      isApp: false,
+      isAppleMobile: false,
     }));
 
     jest.doMock('../../../../hooks/useDeviceInfo', () => ({

__tests__/components/waves/drop/SingleWaveDropChat.test.tsx

@@ -4,6 +4,7 @@ import { act, fireEvent, render } from "@testing-library/react";
 jest.mock("@/hooks/useDeviceInfo", () => () => ({
   isMobileDevice: true,
   hasTouchScreen: true,
+  shouldUseTouchUI: true,
   isApp: true,
   isAppleMobile: false,
 }));

__tests__/components/waves/drops/DropMobileMenuHandler.test.tsx

@@ -4,9 +4,9 @@ import DropMobileMenuHandler from "@/components/waves/drops/DropMobileMenuHandle
 import { DropSize } from "@/helpers/waves/drop.helpers";
 
 jest.mock("@/hooks/isMobileDevice", () => () => true);
-jest.mock("@/hooks/useIsTouchDevice", () => ({
+jest.mock("@/hooks/useDeviceInfo", () => ({
   __esModule: true,
-  default: () => true,
+  default: () => ({ shouldUseTouchUI: true }),
 }));
 
 jest.mock("@/components/waves/drops/WaveDropMobileMenu", () => ({

__tests__/components/waves/drops/WaveDrop.test.tsx

@@ -32,9 +32,9 @@ jest.mock("@/components/waves/drops/WaveDropMobileMenu", () => () => (
 ));
 
 jest.mock("@/hooks/isMobileDevice");
-jest.mock("@/hooks/useIsTouchDevice", () => ({
+jest.mock("@/hooks/useDeviceInfo", () => ({
   __esModule: true,
-  default: jest.fn(() => false),
+  default: jest.fn(() => ({ shouldUseTouchUI: false })),
 }));
 
 jest.mock("next/navigation", () => ({

__tests__/components/waves/drops/WaveDropReactions.test.tsx

@@ -23,9 +23,9 @@ jest.mock("@/services/api/common-api", () => ({
   commonApiDelete: jest.fn(),
 }));
 
-jest.mock("@/hooks/useIsTouchDevice", () => ({
+jest.mock("@/hooks/useDeviceInfo", () => ({
   __esModule: true,
-  default: jest.fn(() => false),
+  default: jest.fn(() => ({ shouldUseTouchUI: false })),
 }));
 
 jest.mock("@/hooks/useLongPressInteraction", () => ({
@@ -345,8 +345,8 @@ describe("WaveDropReactions", () => {
   });
 
   it("adds touch handlers for long press on touch devices", () => {
-    const mockUseIsTouchDevice = require("@/hooks/useIsTouchDevice").default;
-    mockUseIsTouchDevice.mockReturnValue(true);
+    const mockUseDeviceInfo = require("@/hooks/useDeviceInfo").default;
+    mockUseDeviceInfo.mockReturnValue({ shouldUseTouchUI: true });
 
     mockUseEmoji.mockReturnValue(
       createEmojiContextValue(
@@ -378,7 +378,7 @@ describe("WaveDropReactions", () => {
     const reactionButton = screen.getAllByRole("button")[0];
     expect(reactionButton).toBeInTheDocument();
 
-    mockUseIsTouchDevice.mockReturnValue(false);
+    mockUseDeviceInfo.mockReturnValue({ shouldUseTouchUI: false });
   });
 
   it("renders profile handles as clickable links in tooltip", async () => {

__tests__/components/waves/drops/WaveDropsAll.test.tsx

@@ -193,6 +193,7 @@ interface MockSetupOptions {
         isAppleMobile?: boolean | undefined;
         isMobileDevice?: boolean | undefined;
         hasTouchScreen?: boolean | undefined;
+        shouldUseTouchUI?: boolean | undefined;
         isApp?: boolean | undefined;
       }
     | undefined;
@@ -279,6 +280,7 @@ function setupMocks(options: MockSetupOptions = {}) {
     isAppleMobile: options.deviceInfo?.isAppleMobile ?? false,
     isMobileDevice: options.deviceInfo?.isMobileDevice ?? false,
     hasTouchScreen: options.deviceInfo?.hasTouchScreen ?? false,
+    shouldUseTouchUI: options.deviceInfo?.shouldUseTouchUI ?? false,
     isApp: options.deviceInfo?.isApp ?? false,
   });
 

__tests__/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.interaction.test.tsx

@@ -54,7 +54,7 @@ beforeEach(() => {
 test('opens voting modal when button clicked', async () => {
   const user = userEvent.setup();
   useRules.mockReturnValue({ canShowVote: true, canDelete: true });
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: false });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(false);
   render(<DefaultWaveLeaderboardDrop drop={drop} wave={wave} onDropClick={jest.fn()} />);
   expect(screen.getByTestId('modal')).toHaveTextContent('false');
@@ -65,7 +65,7 @@ test('opens voting modal when button clicked', async () => {
 
 test('uses mobile modal and hides options when cannot delete', () => {
   useRules.mockReturnValue({ canShowVote: true, canDelete: false });
-  useDeviceInfo.mockReturnValue({ hasTouchScreen: false });
+  useDeviceInfo.mockReturnValue({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false });
   useIsMobileScreen.mockReturnValue(true);
   useLongPressInteraction.mockReturnValue({ isActive: false, setIsActive: jest.fn(), touchHandlers: {} });
   render(<DefaultWaveLeaderboardDrop drop={drop} wave={wave} onDropClick={jest.fn()} />);

__tests__/components/waves/leaderboard/drops/DefaultWaveLeaderboardDrop.test.tsx

@@ -4,7 +4,7 @@ import { DefaultWaveLeaderboardDrop } from '@/components/waves/leaderboard/drops
 import type { ApiWave } from '@/generated/models/ObjectSerializer';
 
 jest.mock('@/hooks/drops/useDropInteractionRules', () => ({ useDropInteractionRules: () => ({ canShowVote: true, canDelete: true }) }));
-jest.mock('@/hooks/useDeviceInfo', () => ({ __esModule: true, default: () => ({ hasTouchScreen: false }) }));
+jest.mock('@/hooks/useDeviceInfo', () => ({ __esModule: true, default: () => ({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false }) }));
 jest.mock('@/hooks/isMobileScreen', () => ({ __esModule: true, default: () => false }));
 jest.mock('@/hooks/useLongPressInteraction', () => ({ __esModule: true, default: () => ({ isActive:false, setIsActive: jest.fn(), touchHandlers:{} }) }));
 

__tests__/components/waves/winners/drops/MemesWaveWinnerDrop.test.tsx

@@ -15,7 +15,7 @@ jest.mock('@fortawesome/react-fontawesome', () => ({ FontAwesomeIcon: () => <svg
 jest.mock('next/link', () => ({ __esModule: true, default: ({href,children,onClick,className}:any) => <a href={href} onClick={onClick} className={className}>{children}</a> }));
 jest.mock('@/components/memes/drops/MemeDropTraits', () => () => <div data-testid="traits" />);
 jest.mock('@/components/drops/view/item/content/media/DropListItemContentMedia', () => () => <div data-testid="media" />);
-jest.mock('@/hooks/useDeviceInfo', () => ({ __esModule: true, default: () => ({ hasTouchScreen: false }) }));
+jest.mock('@/hooks/useDeviceInfo', () => ({ __esModule: true, default: () => ({ hasTouchScreen: false, shouldUseTouchUI: false, isMobileDevice: false, isApp: false, isAppleMobile: false }) }));
 jest.mock('@/hooks/useLongPressInteraction', () => ({ __esModule: true, default: () => ({ isActive:false, setIsActive: jest.fn(), touchHandlers:{} }) }));
 jest.mock('@/components/waves/drops/WaveDropActionsOpen', () => () => <div data-testid="actions" />);
 jest.mock('@/components/utils/select/dropdown/CommonDropdownItemsMobileWrapper', () => (p:any) => <div>{p.children}</div>);

__tests__/contexts/wave/hooks/useActiveWaveManager.test.tsx

@@ -8,6 +8,7 @@ jest.mock("@/hooks/useDeviceInfo", () => ({
     isApp: false,
     isMobileDevice: false,
     hasTouchScreen: false,
+    shouldUseTouchUI: false,
     isAppleMobile: false,
   }),
 }));