Activity Filters - use common dropdown

__tests__/components/latest-activity/ActivityFilters.test.tsx

@@ -44,7 +44,7 @@ describe("ActivityFilters", () => {
         screen.getByRole("button", { name: /Collection:/i })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: /Filter:/i })
+        screen.getByRole("button", { name: /Transaction Type:/i })
       ).toBeInTheDocument();
     });
 
@@ -56,7 +56,7 @@ describe("ActivityFilters", () => {
         })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: `Filter: ${TypeFilter.ALL}` })
+        screen.getByRole("button", { name: `Transaction Type: ${TypeFilter.ALL}` })
       ).toBeInTheDocument();
     });
 
@@ -73,7 +73,7 @@ describe("ActivityFilters", () => {
         })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole("button", { name: `Filter: ${TypeFilter.SALES}` })
+        screen.getByRole("button", { name: `Transaction Type: ${TypeFilter.SALES}` })
       ).toBeInTheDocument();
     });
   });
@@ -118,7 +118,7 @@ describe("ActivityFilters", () => {
         const props = { ...mockProps, typeFilter };
         const { unmount } = render(<ActivityFilters {...props} />);
         expect(
-          screen.getByRole("button", { name: `Filter: ${typeFilter}` })
+          screen.getByRole("button", { name: `Transaction Type: ${typeFilter}` })
         ).toBeInTheDocument();
         unmount();
       }
@@ -157,7 +157,7 @@ describe("ActivityFilters", () => {
       render(<ActivityFilters {...mockProps} />);
 
       const typeButton = screen.getByRole("button", {
-        name: `Filter: ${TypeFilter.ALL}`,
+        name: `Transaction Type: ${TypeFilter.ALL}`,
       });
       await user.click(typeButton);
 
@@ -199,7 +199,7 @@ describe("ActivityFilters", () => {
       );
 
       const typeButton = screen.getByRole("button", {
-        name: `Filter: ${TypeFilter.ALL}`,
+        name: `Transaction Type: ${TypeFilter.ALL}`,
       });
       await user.click(typeButton);
 
@@ -232,7 +232,7 @@ describe("ActivityFilters", () => {
       render(<ActivityFilters {...mockProps} />);
 
       const typeButton = screen.getByRole("button", {
-        name: `Filter: ${TypeFilter.ALL}`,
+        name: `Transaction Type: ${TypeFilter.ALL}`,
       });
       await user.click(typeButton);
 
@@ -252,7 +252,7 @@ describe("ActivityFilters", () => {
       expect(col).toBeInTheDocument();
 
       const buttons = within(col as HTMLElement).getAllByRole("button", {
-        name: /Collection:|Filter:/i,
+        name: /Collection:|Transaction Type:/i,
       });
       expect(buttons).toHaveLength(2);
     });
@@ -273,7 +273,7 @@ describe("ActivityFilters", () => {
       render(<ActivityFilters {...mockProps} />);
 
       const buttons = screen.getAllByRole("button", {
-        name: /Collection:|Filter:/i,
+        name: /Collection:|Transaction Type:/i,
       });
       for (const button of buttons) {
         expect(button).toHaveAttribute("aria-haspopup", "true");

__tests__/components/memelab/MemeLabPage.test.tsx

@@ -149,6 +149,10 @@ require("@/components/cookies/CookieConsentContext").useCookieConsent =
   mockUseCookieConsent;
 require("@/hooks/useCapacitor").default = mockUseCapacitor;
 
+const expectAbortSignalOptions = expect.objectContaining({
+  signal: expect.objectContaining({ aborted: false }),
+});
+
 beforeEach(() => {
   jest.clearAllMocks();
 
@@ -335,7 +339,8 @@ describe("MemeLabPageComponent", () => {
 
     await waitFor(() => {
       expect(mockFetchUrl).toHaveBeenCalledWith(
-        "https://api.test.6529.io/api/lab_extended_data?id=1"
+        "https://api.test.6529.io/api/lab_extended_data?id=1",
+        expect.objectContaining({ signal: expect.anything() })
       );
     });
   });
@@ -349,7 +354,8 @@ describe("MemeLabPageComponent", () => {
 
     await waitFor(() => {
       expect(mockFetchUrl).toHaveBeenCalledWith(
-        "https://api.test.6529.io/api/nfts_memelab?id=1"
+        "https://api.test.6529.io/api/nfts_memelab?id=1",
+        expect.objectContaining({ signal: expect.anything() })
       );
     });
   });
@@ -363,7 +369,8 @@ describe("MemeLabPageComponent", () => {
 
     await waitFor(() => {
       expect(mockFetchUrl).toHaveBeenCalledWith(
-        expect.stringContaining("transactions_memelab?wallet=0xabc&id=1")
+        expect.stringContaining("transactions_memelab?wallet=0xabc&id=1"),
+        expectAbortSignalOptions
       );
     });
   });
@@ -398,7 +405,8 @@ describe("MemeLabPageComponent", () => {
     await waitFor(
       () => {
         expect(mockFetchUrl).toHaveBeenCalledWith(
-          expect.stringContaining("transactions_memelab?wallet=0xabc")
+          expect.stringContaining("transactions_memelab?wallet=0xabc"),
+          expectAbortSignalOptions
         );
       },
       { timeout: 5000 }
@@ -416,7 +424,8 @@ describe("MemeLabPageComponent", () => {
       expect(mockFetchUrl).toHaveBeenCalledWith(
         expect.stringMatching(
           /transactions_memelab.*id=1.*page_size=25.*page=1/
-        )
+        ),
+        expectAbortSignalOptions
       );
     });
   });
@@ -432,7 +441,8 @@ describe("MemeLabPageComponent", () => {
       expect(mockFetchAllPages).toHaveBeenCalledWith(
         expect.stringContaining(
           "nft_history/0x4db52a61dc491e15a2f78f5ac001c14ffe3568cb/1"
-        )
+        ),
+        expectAbortSignalOptions
       );
     });
   });
@@ -535,7 +545,8 @@ describe("MemeLabPageComponent", () => {
 
     await waitFor(() => {
       expect(mockFetchUrl).toHaveBeenCalledWith(
-        expect.stringContaining("transactions_memelab?wallet=0xabc&id=1")
+        expect.stringContaining("transactions_memelab?wallet=0xabc&id=1"),
+        expectAbortSignalOptions
       );
     });
   });

__tests__/components/the-memes/MemePageActivity.test.tsx

@@ -124,9 +124,9 @@ describe("MemePageActivity", () => {
 
       await waitFor(() => expect(fetchUrlMock).toHaveBeenCalledTimes(1));
 
-      await userEvent.click(screen.getByRole("button", { name: /Filter/ }));
+      await userEvent.click(screen.getByRole("button", { name: /Transaction Type/ }));
       await userEvent.click(
-        screen.getByRole("button", { name: TypeFilter.SALES })
+        screen.getByRole("menuitem", { name: TypeFilter.SALES })
       );
 
       await waitFor(() => {
@@ -168,8 +168,8 @@ describe("MemePageActivity", () => {
       ];
 
       for (const { filter, param } of filterTypes) {
-        await userEvent.click(screen.getByRole("button", { name: /Filter/ }));
-        await userEvent.click(screen.getByRole("button", { name: filter }));
+        await userEvent.click(screen.getByRole("button", { name: /Transaction Type/ }));
+        await userEvent.click(screen.getByRole("menuitem", { name: filter }));
 
         await waitFor(() => {
           expect(fetchUrlMock).toHaveBeenLastCalledWith(
@@ -201,9 +201,9 @@ describe("MemePageActivity", () => {
       });
 
       // Change filter - should reset to page 1
-      await userEvent.click(screen.getByRole("button", { name: /Filter/ }));
+      await userEvent.click(screen.getByRole("button", { name: /Transaction Type/ }));
       await userEvent.click(
-        screen.getByRole("button", { name: TypeFilter.SALES })
+        screen.getByRole("menuitem", { name: TypeFilter.SALES })
       );
 
       await waitFor(() => {

components/latest-activity/ActivityFilters.tsx

@@ -2,7 +2,6 @@
 
 import CommonDropdown from "@/components/utils/select/dropdown/CommonDropdown";
 import { ContractFilter, TypeFilter } from "@/hooks/useActivityData";
-import { useMemo } from "react";
 import { Col } from "react-bootstrap";
 
 interface ActivityFiltersProps {
@@ -13,33 +12,29 @@ interface ActivityFiltersProps {
   readonly isMobile: boolean;
 }
 
+export const ActivityContractItems = Object.freeze(
+  Object.values(ContractFilter).map((contract) => ({
+    key: contract,
+    label: contract,
+    value: contract,
+  }))
+);
+
+export const ActivityTypeItems = Object.freeze(
+  Object.values(TypeFilter).map((type) => ({
+    key: type,
+    label: type,
+    value: type,
+  }))
+);
+
 export default function ActivityFilters({
   typeFilter,
   selectedContract,
   onTypeFilterChange,
   onContractFilterChange,
   isMobile,
 }: ActivityFiltersProps) {
-  const contractItems = useMemo(
-    () =>
-      Object.values(ContractFilter).map((contract) => ({
-        key: contract,
-        label: contract,
-        value: contract,
-      })),
-    []
-  );
-
-  const typeItems = useMemo(
-    () =>
-      Object.values(TypeFilter).map((type) => ({
-        key: type,
-        label: type,
-        value: type,
-      })),
-    []
-  );
-
   return (
     <Col
       sm={12}
@@ -48,15 +43,15 @@ export default function ActivityFilters({
         isMobile ? "justify-content-center" : "justify-content-end"
       }`}>
       <CommonDropdown
-        items={contractItems}
+        items={ActivityContractItems}
         activeItem={selectedContract}
         filterLabel="Collection"
         setSelected={onContractFilterChange}
       />
       <CommonDropdown
-        items={typeItems}
+        items={ActivityTypeItems}
         activeItem={typeFilter}
-        filterLabel="Filter"
+        filterLabel="Transaction Type"
         setSelected={onTypeFilterChange}
       />
     </Col>