feat: seller and offer whitelist from env vars (#55)

* feat: seller and offer whitelist from env vars

* fix: add memoization to allow pagination

* style: disable unused vars

* tests: fix get sellers query mock

* fix: tests so that the mocks work in other chains

* chore: add lint-staged

* fix: memoized merged and sorted offers

* remove refactored hook

* tests: fix mock

* test: add mocks and fix slicing

* tests: fix e2e

* fix: offers slice end index

* fix: duplicate offers on infinite query

* review change requests

Co-authored-by: Albert Folch <[email protected]>

.env.example

@@ -1 +1,14 @@
-REACT_APP_CHAIN_ID=1234
+REACT_APP_CHAIN_ID=1234
+REACT_APP_WIDGETS_URL=
+
+# A Biconomy API key can be set here, to allow meta transactions in the widgets
+REACT_APP_META_TX_API_KEY=
+
+# Comma-separated default list of seller IDs that are shown in the app
+REACT_APP_SELLER_WHITELIST=
+
+# Comma-separated default list of offer IDs that are shown in the app
+REACT_APP_OFFER_WHITELIST=
+
+# 
+REACT_APP_ENABLE_WHITELISTS=false

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run prettier && npm run lint && git add -A .
+npx lint-staged

e2e-tests/Explore.spec.ts

@@ -286,7 +286,6 @@ test.describe("Explore page", () => {
         const numberOfOffers = 17;
 
         const offers: Offer[] = await getFirstNOffers(numberOfOffers);
-        const offers1stPage = offers.slice(0, offersPerPage);
         const offers2ndPage = offers.slice(offersPerPage);
         expect(offers2ndPage.length).toStrictEqual(
           numberOfOffers - offersPerPage
@@ -296,7 +295,7 @@ test.describe("Explore page", () => {
           options: {
             mockGetOffers: {
               offersPerPage: {
-                offersList: [offers1stPage, offers2ndPage],
+                offersList: [offers2ndPage],
                 countOffersPerPage: offersPerPage
               }
             }
@@ -432,9 +431,6 @@ test.describe("Explore page", () => {
 
       const offers1stPage = offers.slice(0, offersPerPage);
       const offers2ndPage = offers.slice(offersPerPage);
-      expect(offers2ndPage.length).toStrictEqual(
-        numberOfOffers - offersPerPage
-      );
 
       await mockSubgraph({
         page,
@@ -469,11 +465,11 @@ test.describe("Explore page", () => {
       uiOffers = page.locator("[data-testid=offer]");
 
       offerCount = await uiOffers.count();
-      expect(offerCount).toStrictEqual(offers.length - offersPerPage);
+      expect(offerCount).toStrictEqual(offers.length - visibleOffersPerPage);
 
       for (let i = 0; i < offerCount; i++) {
         const offer = uiOffers.nth(i);
-        const expectedOffer = offers[offersPerPage + i];
+        const expectedOffer = offers[visibleOffersPerPage + i];
         await assertOffer(offer, expectedOffer);
       }
     });

e2e-tests/PublicAccount.spec.ts

@@ -154,9 +154,7 @@ test.describe("Public Account page", () => {
       expect(offerCount).toStrictEqual(visibleOffersPerPage);
       await scrollDown(page);
       offerCount = await offers.count();
-      expect(offerCount).toStrictEqual(
-        visibleOffersPerPage + secondPageOffers.length
-      );
+      expect(offerCount).toStrictEqual(allOffers.length);
     });
 
     test("should filter out invalid offers", async ({ page }) => {

e2e-tests/environment.ts

@@ -1,4 +1,7 @@
 import { CONFIG } from "../src/lib/config";
 
 export const graphqlEndpoint =
-  "**/" + CONFIG.subgraphUrl.substring("https://".length);
+  "**/" +
+  (CONFIG.subgraphUrl.indexOf("https") !== -1
+    ? CONFIG.subgraphUrl.substring("https://".length)
+    : CONFIG.subgraphUrl.substring("http://".length));

e2e-tests/mocks/mockGetBase.ts

@@ -9,6 +9,10 @@ import {
   mockGetExchanges,
   MockProps as mockGetExchangesProps
 } from "./mockGetExchanges";
+import {
+  mockGetOfferById,
+  MockProps as mockGetOfferByIdProps
+} from "./mockGetOfferById";
 import {
   mockGetOffers,
   MockProps as mockGetOffersProps
@@ -26,6 +30,7 @@ interface MockSubgraphProps {
   page: Page;
   options?: Partial<{
     mockGetOffers?: mockGetOffersProps["options"];
+    mockGetOfferById?: mockGetOfferByIdProps["options"];
     mockGetBrands?: mockGetBrandsProps["options"];
     mockGetTokens?: mockGetTokensProps["options"];
     mockGetSellers?: mockGetSellersProps["options"];
@@ -46,16 +51,22 @@ export async function mockSubgraph({ page, options }: MockSubgraphProps) {
     const isBaseEntitiesRequest = postData?.includes("baseMetadataEntities(");
     const isBrandsRequest = postData?.includes("productV1MetadataEntities");
     const isExchangeTokensRequest = postData?.includes("exchangeTokens");
-    const isGetSingleBaseEntity = postData?.includes("GetOfferById("); // iframe widget makes this request
-    const isGetSellersReq = postData?.includes("GetSellers");
+    const isGetOfferByIdReq = postData?.includes("getOfferByIdQuery"); // iframe widget makes this request
+    const isGetSellersReq =
+      postData?.includes("getSellersQuery") || postData?.includes("GetSellers");
     const isGetExchangesReq = postData?.includes("GetExchanges");
 
     let mockResponse;
-    if (isBaseEntitiesRequest || isGetSingleBaseEntity) {
+    if (isBaseEntitiesRequest) {
       mockResponse = await mockGetOffers({
         postData,
         options: options?.mockGetOffers || {}
       });
+    } else if (isGetOfferByIdReq) {
+      mockResponse = await mockGetOfferById({
+        postData,
+        options: options?.mockGetOfferById || {}
+      });
     } else if (isBrandsRequest) {
       mockResponse = await mockGetBrands({
         postData,

e2e-tests/mocks/mockGetOfferById.ts

@@ -0,0 +1,25 @@
+import { Offer } from "../../src/lib/types/offer";
+import { defaultMockOffers } from "./defaultMockOffers";
+import { CustomResponse } from "./mockGetBase";
+
+export interface MockProps {
+  postData: string | null;
+  options?: {
+    offer?: Offer | null;
+    response?: Partial<CustomResponse>;
+  };
+}
+export async function mockGetOfferById({
+  options: { offer = defaultMockOffers[0], response } = {}
+}: MockProps) {
+  const options = {
+    status: 200,
+    body: JSON.stringify({
+      data: { offer }
+    }),
+    contentType: "application/json",
+    ...response
+  };
+
+  return options;
+}