@bosonprotocol/react-kit 0.36.0-alpha.1 → 0.36.0-alpha.10

package/src/hooks/roblox/mutationKeys.ts

@@ -0,0 +1,42 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
+interface GetMutationKey
+  // This any will be infered, it is more like generic, will be never seen as any in use
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  extends Record<string, (...args: any[]) => readonly [string, ...unknown[]]> {}
+
+export const mutationKeys = {
+  getProducts: ({
+    backendOrigin,
+    sellerId,
+    pageSize,
+    statuses
+  }: {
+    backendOrigin: string;
+    sellerId: string;
+    pageSize: number;
+    statuses?: string[] | Readonly<string[]>;
+  }) =>
+    ["roblox-products", backendOrigin, sellerId, pageSize, statuses] as const,
+  getExchanges: ({
+    backendOrigin,
+    sellerId,
+    userWallet,
+    pageSize
+  }: {
+    backendOrigin: string;
+    sellerId: string;
+    userWallet: string;
+    pageSize: number;
+  }) =>
+    [
+      "roblox-exchanges",
+      backendOrigin,
+      sellerId,
+      userWallet,
+      pageSize
+    ] as const,
+  getWalletAuth: ({ backendOrigin }: { backendOrigin: string }) =>
+    ["get-wallet-auth", backendOrigin] as const
+} as const satisfies GetMutationKey;
+
+export type MutationKey = (typeof mutationKeys)[keyof typeof mutationKeys];

package/src/hooks/roblox/useGetRobloxWalletAuth.ts

@@ -0,0 +1,49 @@
+import { useQuery, useQueryClient } from "react-query";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+import { mutationKeys } from "./mutationKeys";
+import { GetWalletAuthResponse } from "@bosonprotocol/roblox-sdk";
+import { productsPageSize } from "../../components/widgets/roblox/components/const";
+type UseGetRobloxWalletAuthProps = {
+  sellerId: string;
+  options: { enabled: boolean };
+};
+export const useGetRobloxWalletAuth = ({
+  sellerId,
+  options
+}: UseGetRobloxWalletAuthProps) => {
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryClient = useQueryClient();
+  return useQuery(
+    mutationKeys.getWalletAuth({ backendOrigin }),
+    async () => {
+      const response = await fetch(`${backendOrigin}/wallet-auth`, {
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Error while calling GET /wallet-auth, status = ${response.status.toString()}`
+        );
+      }
+      return (await response.json()) as GetWalletAuthResponse;
+    },
+    {
+      ...options,
+      onSettled: (data, error) => {
+        if (data) {
+          console.log("useGetRobloxWalletAuth success", data);
+          // request products again
+          queryClient.invalidateQueries(
+            mutationKeys.getProducts({
+              backendOrigin,
+              sellerId,
+              pageSize: productsPageSize
+            })
+          );
+        }
+        if (error) {
+          console.error("useGetRobloxWalletAuth error: " + error);
+        }
+      }
+    }
+  );
+};

package/src/hooks/roblox/useIsRobloxLoggedIn.ts

@@ -0,0 +1,56 @@
+import { useQuery, useQueryClient } from "react-query";
+import { useRobloxLocalStorage } from "./useRobloxLocalStorage";
+import { robloxQueryKeys } from "./const";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+import { mutationKeys } from "./mutationKeys";
+import { GetLoggedInResponse } from "@bosonprotocol/roblox-sdk";
+import { productsPageSize } from "../../components/widgets/roblox/components/const";
+
+type UseIsRobloxLoggedInProps = {
+  sellerId: string;
+  options?: {
+    enabled?: boolean;
+    onSuccess?: ((data: GetLoggedInResponse | null) => void) | undefined;
+  };
+};
+export const useIsRobloxLoggedIn = ({
+  sellerId,
+  options
+}: UseIsRobloxLoggedInProps) => {
+  const [storedValue, setValue] = useRobloxLocalStorage();
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryClient = useQueryClient();
+  return useQuery(
+    robloxQueryKeys.loggedIn(backendOrigin),
+    async () => {
+      const response = await fetch(`${backendOrigin}/logged-in`, {
+        method: "GET",
+        credentials: "include"
+      });
+
+      if (response.ok) {
+        const data = (await response.json()) as GetLoggedInResponse;
+        setValue(data);
+        return data;
+      }
+      return null;
+    },
+    {
+      ...options,
+      initialData: storedValue,
+      onError: (error) => {
+        console.error("Error on /logged-in call:", error);
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries(
+          mutationKeys.getProducts({
+            backendOrigin,
+            sellerId,
+            pageSize: productsPageSize
+          }),
+          { exact: false }
+        );
+      }
+    }
+  );
+};

package/src/hooks/roblox/usePostRobloxWalletAuth.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQueryClient } from "react-query";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+import { mutationKeys } from "./mutationKeys";
+import { productsPageSize } from "../../components/widgets/roblox/components/const";
+
+type UsePostRobloxWalletAuthProps = {
+  sellerId: string;
+  address: string;
+  signature: string;
+};
+export const usePostRobloxWalletAuth = () => {
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryClient = useQueryClient();
+  return useMutation(
+    async ({ sellerId, address, signature }: UsePostRobloxWalletAuthProps) => {
+      const response = await fetch(`${backendOrigin}/wallet-auth`, {
+        method: "POST",
+        credentials: "include", // required to include Cookie in the request
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          address,
+          signature,
+          sellerId: sellerId.toString()
+        })
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Error while calling POST /wallet-auth, status = ${response.status.toString()}`
+        );
+      }
+      return;
+    },
+    {
+      onSettled: (data, error, variables) => {
+        if (data) {
+          console.log("usePostRobloxWalletAuth success", data);
+          // request products again
+          queryClient.invalidateQueries(
+            mutationKeys.getProducts({
+              backendOrigin,
+              sellerId: variables.sellerId,
+              pageSize: productsPageSize
+            })
+          );
+        }
+        if (error) {
+          console.error("usePostRobloxWalletAuth error: " + error);
+        }
+      }
+    }
+  );
+};

package/src/hooks/roblox/useRobloxBackendLogin.ts

@@ -0,0 +1,114 @@
+import { formatBytes32String } from "ethers/lib/utils";
+import { useAccount, useWeb3SignTypedData } from "../connection/connection";
+import { GetLoggedInResponse } from "@bosonprotocol/roblox-sdk";
+import { useMutation } from "react-query";
+import { useDisconnect } from "../connection/useDisconnect";
+import { usePostRobloxWalletAuth } from "./usePostRobloxWalletAuth";
+
+const domainValues = {
+  name: "Boson-Roblox-Bridge",
+  version: "1"
+};
+
+export function prepareAuthSignature(
+  claims: { sub: string; name: string },
+  nonce: string,
+  sellerId: string
+) {
+  const domain = {
+    ...domainValues,
+    salt: formatBytes32String(nonce.slice(0, 31))
+  };
+  const AuthSignature = [
+    {
+      name: "value",
+      type: "string"
+    }
+  ];
+  const types = { AuthSignature };
+  const message = {
+    value: `Authentication Roblox User: ${claims.name}, Id: ${claims.sub}, Nonce: ${nonce}, Seller: ${sellerId}`
+  };
+  const EIP712Domain = [
+    { name: "name", type: "string" },
+    { name: "version", type: "string" },
+    { name: "salt", type: "bytes32" }
+  ];
+  const dataToSign = {
+    types: {
+      EIP712Domain,
+      AuthSignature
+    },
+    domain,
+    primaryType: "AuthSignature" as const,
+    message
+  }; // Message to be signed by the wallet on Frontend
+  return { domain, types, message, dataToSign };
+}
+
+type UseRobloxBackendLoginProps = {
+  loggedInData: GetLoggedInResponse | undefined | null;
+  sellerId: string;
+  mutationKey: unknown[];
+
+  options?: {
+    onError?:
+      | ((
+          error: unknown,
+          variables: void,
+          context: unknown
+        ) => Promise<unknown> | void)
+      | undefined;
+  };
+};
+
+export const useRobloxBackendLogin = ({
+  loggedInData,
+  sellerId,
+  mutationKey,
+  options
+}: UseRobloxBackendLoginProps) => {
+  const { mutateAsync: signTypedDataAsync } = useWeb3SignTypedData();
+  const { mutateAsync: verifySignature } = usePostRobloxWalletAuth();
+  const { address = "" } = useAccount();
+  const disconnect = useDisconnect();
+  return useMutation(
+    mutationKey,
+    async () => {
+      if (!loggedInData?.claims) {
+        throw new Error(
+          `[useRobloxBackendLogin] loggedInData.claims is falsy (${loggedInData?.claims})`
+        );
+      }
+      if (!loggedInData.nonce) {
+        throw new Error(
+          `[useRobloxBackendLogin] loggedInData.nonce is falsy (${loggedInData.nonce})`
+        );
+      }
+      const { dataToSign } = prepareAuthSignature(
+        loggedInData.claims,
+        loggedInData.nonce,
+        sellerId.toString()
+      );
+
+      const signature = await signTypedDataAsync({
+        dataToSign: JSON.stringify(dataToSign)
+      });
+      return signature;
+    },
+    {
+      ...options,
+      onSettled: (data, error) => {
+        if (data) {
+          console.log("useSignTypedData success", data);
+          verifySignature({ signature: data, sellerId, address });
+        }
+        if (error) {
+          console.error("useSignTypedData error: " + error);
+          // When all attempt have failed, force the wallet disconnection to avoid a dead end state of the app
+          disconnect({ isUserDisconnecting: false });
+        }
+      }
+    }
+  );
+};

package/src/hooks/roblox/useRobloxExchanges.ts

@@ -0,0 +1,49 @@
+import { useInfiniteQuery } from "react-query";
+import { GetExchangesResponse } from "@bosonprotocol/roblox-sdk";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+import { mutationKeys } from "./mutationKeys";
+
+type UseRobloxProductsProps = {
+  sellerId: string;
+  userWallet: string;
+  pageSize: number;
+  options: {
+    enabled?: boolean;
+  };
+};
+export const useRobloxExchanges = ({
+  sellerId,
+  userWallet,
+  pageSize,
+  options
+}: UseRobloxProductsProps) => {
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryKey = mutationKeys.getExchanges({
+    backendOrigin,
+    pageSize,
+    sellerId,
+    userWallet
+  });
+  return useInfiniteQuery(
+    queryKey,
+    async ({ pageParam = 0 }) => {
+      const response = await fetch(
+        `${backendOrigin}/exchanges?${new URLSearchParams({ bosonSellerId: sellerId, first: pageSize.toString(), skip: (pageParam * pageSize).toString(), userWallet }).toString()}`
+      );
+      if (!response.ok) {
+        throw new Error(
+          `Error while fetching roblox exchanges, status = ${response.status.toString()}`
+        );
+      }
+      const data = (await response.json()) as GetExchangesResponse;
+      return data;
+    },
+    {
+      ...options,
+      getNextPageParam: ({ hasMore }, pages) => {
+        const result = hasMore ? pages.length : undefined;
+        return result;
+      }
+    }
+  );
+};

package/src/hooks/roblox/useRobloxGetItemDetails.ts

@@ -0,0 +1,39 @@
+import { useQuery } from "react-query";
+import * as yup from "yup";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+
+type UseRobloxGetItemDetailsProps = {
+  itemId: string;
+  options: {
+    enabled?: boolean;
+  };
+};
+
+const responseSchema = yup.object({
+  name: yup.string().required()
+});
+type PayloadResponse = yup.InferType<typeof responseSchema>;
+export const useRobloxGetItemDetails = ({
+  itemId,
+  options
+}: UseRobloxGetItemDetailsProps) => {
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryKey = ["roblox-item-details", itemId, backendOrigin];
+  return useQuery(
+    queryKey,
+    async (): Promise<PayloadResponse> => {
+      const response = await fetch(
+        `${backendOrigin}/asset-details?assetId=${itemId}`
+      );
+      if (!response.ok) {
+        const errorMessage = `Error while fetching /asset-details, status = ${response.status.toString()}`;
+        console.error(errorMessage);
+        throw new Error(errorMessage);
+      }
+      const jsonData = await response.json();
+      const validatedData = await responseSchema.validate(jsonData);
+      return validatedData;
+    },
+    options
+  );
+};

package/src/hooks/roblox/useRobloxLocalStorage.ts

@@ -0,0 +1,17 @@
+import { useLocalStorage } from "../storage/useLocalStorage";
+import { GetLoggedInResponse } from "@bosonprotocol/roblox-sdk";
+import { robloxLocalStorageKey } from "./const";
+
+export const useRobloxLocalStorage = () => {
+  return useLocalStorage<typeof robloxLocalStorageKey, GetLoggedInResponse>(
+    robloxLocalStorageKey,
+    {
+      isLoggedIn: false,
+      claims: {
+        sub: "",
+        name: ""
+      },
+      nonce: ""
+    }
+  );
+};

package/src/hooks/roblox/useRobloxLogout.ts

@@ -0,0 +1,29 @@
+import { useMutation, useQueryClient } from "react-query";
+import { useRobloxLocalStorage } from "./useRobloxLocalStorage";
+import { robloxQueryKeys } from "./const";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+
+export const useRobloxLogout = () => {
+  const [, , removeFromStorage] = useRobloxLocalStorage();
+  const queryClient = useQueryClient();
+  const { backendOrigin } = useRobloxConfigContext();
+  return useMutation(
+    robloxQueryKeys.logout(backendOrigin),
+    async () => {
+      const response = await fetch(`${backendOrigin}/logout`, {
+        method: "POST",
+        credentials: "include"
+      });
+      if (response.ok) {
+        removeFromStorage();
+        queryClient.removeQueries(robloxQueryKeys.loggedIn(backendOrigin));
+      }
+      return null;
+    },
+    {
+      onError: (error) => {
+        console.error("Error logging out:", error);
+      }
+    }
+  );
+};

package/src/hooks/roblox/useRobloxProducts.ts

@@ -0,0 +1,65 @@
+import { useInfiniteQuery, useQueryClient } from "react-query";
+import {
+  GetProductsResponse,
+  ProductAvailabilityStatus
+} from "@bosonprotocol/roblox-sdk";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
+import { mutationKeys } from "./mutationKeys";
+
+type UseRobloxProductsProps = {
+  sellerId: string;
+  pageSize: number;
+  statuses:
+    | ProductAvailabilityStatus["status"][]
+    | Readonly<ProductAvailabilityStatus["status"][]>;
+  options: { enabled?: boolean };
+};
+export const useRobloxProducts = ({
+  sellerId,
+  pageSize,
+  statuses,
+  options = {}
+}: UseRobloxProductsProps) => {
+  const queryClient = useQueryClient();
+  const { backendOrigin } = useRobloxConfigContext();
+  const queryKey = mutationKeys.getProducts({
+    backendOrigin,
+    sellerId,
+    pageSize,
+    statuses
+  });
+  return useInfiniteQuery(
+    queryKey,
+    async ({ pageParam = 0 }) => {
+      const response = await fetch(
+        `${backendOrigin}/products?${new URLSearchParams({ bosonSellerId: sellerId, first: pageSize.toString(), skip: (pageParam * pageSize).toString(), only: statuses.join(",") }).toString()}`,
+        { credentials: "include" } // required to include Cookie in the request
+      );
+      if (!response.ok) {
+        throw new Error(
+          `Error while fetching roblox products, status = ${response.status.toString()}`
+        );
+      }
+      const data = (await response.json()) as GetProductsResponse;
+      if (
+        data.products.some(
+          (product) => product.availability.status === "PENDING"
+        )
+      ) {
+        console.log(
+          "Some products are in PENDING state. Refresh products in a short while..."
+        );
+        // Wait a short delay and refresh products
+        setTimeout(() => queryClient.invalidateQueries(queryKey), 1000);
+      }
+      return data;
+    },
+    {
+      ...options,
+      getNextPageParam: ({ hasMore }, pages) => {
+        const result = hasMore ? pages.length : undefined;
+        return result;
+      }
+    }
+  );
+};

package/src/hooks/storage/useBosonLocalStorage.ts

@@ -7,7 +7,6 @@ import {
 } from "./useLocalStorage";
 
 export type GetItemFromStorageKey =
-  | "wagmi.store"
   | "isChainUnsupported"
   | "tracing-url"
   | "isConnectWalletFromCommit"

package/src/hooks/tokenGated/BosonSnapshotGate/typechain/BosonSnapshotGate.js

@@ -1,2 +1 @@
-"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });

package/src/hooks/tokenGated/BosonSnapshotGate/typechain/common.js

@@ -1,2 +1 @@
-"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });

package/src/hooks/tokenGated/BosonSnapshotGate/typechain/factories/BosonSnapshotGate__factory.js

@@ -1,4 +1,3 @@
-"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BosonSnapshotGate__factory = void 0;
 /* Autogenerated file. Do not edit manually. */

package/src/hooks/tokenGated/BosonSnapshotGate/typechain/factories/index.js

@@ -1,4 +1,3 @@
-"use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BosonSnapshotGate__factory = void 0;
 /* Autogenerated file. Do not edit manually. */

package/src/hooks/tokenGated/BosonSnapshotGate/typechain/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-"use strict";
+
 var __createBinding =
   (this && this.__createBinding) ||
   (Object.create

package/src/hooks/uniswap/useInterval.ts

@@ -3,9 +3,9 @@ import { useEffect } from "react";
 /**
  * Invokes callback repeatedly over an interval defined by the delay
  *
- * @param callback
- * @param delay if null, the callback will not be invoked
- * @param leading by default, the callback will be invoked immediately (on the leading edge);
+ * @param callback -
+ * @param delay - if null, the callback will not be invoked
+ * @param leading - by default, the callback will be invoked immediately (on the leading edge);
  *                if false, the callback will not be invoked until a first delay
  */
 export function useInterval(

package/src/hooks/useCtaClickHandler.ts

@@ -96,6 +96,7 @@ export function useCtaClickHandler<T>({
           try {
             onPendingTransaction?.(txResponse.hash, isMetaTx, name);
             receipt = await txResponse.wait(waitBlocks);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
           } catch (error: any) {
             // Handle transaction that was replaced, canceled or repriced.
             // See https://docs.ethers.io/v5/api/utils/logger/#errors--transaction-replaced

package/src/hooks/useCurrentSellers.ts

@@ -105,7 +105,7 @@ const getSellersByIds =
  * This hook returns the current seller or sellers in a list. It will return more than one
  * seller if you have more than one Lens profile and you had sent your Lens NFT that
  * identifies your profile to another user.
- * @param
+ * @param arg0 -
  * @returns
  */
 export function useCurrentSellers(

package/src/hooks/useLast.ts

@@ -2,8 +2,8 @@ import { useEffect, useState } from "react";
 
 /**
  * Returns the last value of type T that passes a filter function
- * @param value changing value
- * @param filterFn function that determines whether a given value should be considered for the last value
+ * @param value - changing value
+ * @param filterFn - function that determines whether a given value should be considered for the last value
  */
 export function useLast<T>(value: T, filterFn?: (value: T) => boolean): T {
   const [last, setLast] = useState<T>(value);

package/src/hooks/useRefundData.ts

@@ -7,9 +7,12 @@ import {
   getCalcPercentage,
   useDisplayFloatWithConfig
 } from "../lib/price/prices";
-import { Exchange } from "../types/exchange";
+import { subgraph } from "@bosonprotocol/core-sdk";
 
-export default function useRefundData(exchange: Exchange, price: string) {
+export default function useRefundData(
+  exchange: subgraph.ExchangeFieldsFragment,
+  price: string
+) {
   const { store } = useContext(ConvertionRateContext);
   const { offer } = exchange;
   const { defaultCurrency } = useConfigContext();

package/src/index.tsx

@@ -1,7 +1,7 @@
 export * from "./components/buttons/BaseButton";
 export * from "./components/buttons/BurgerButton";
 export * from "./components/buttons/Button";
-export * from "./components/buttons/CommitButtonView";
+export * from "./components/buttons/commit/CommitButtonView";
 export * from "./components/config/ConfigProvider";
 export * from "./components/cta/common/types";
 export * from "./components/cta/dispute/DecideDisputeButton";
@@ -24,6 +24,7 @@ export * from "./components/cta/funds/WithdrawAllFundsButton";
 export * from "./components/cta/funds/WithdrawFundsButton";
 export * from "./components/cta/offer/BatchVoidButton";
 export * from "./components/cta/offer/CommitButton";
+export * from "./components/cta/offer/ThemedCommitButton";
 export * from "./components/cta/offer/CreateOfferButton";
 export * from "./components/cta/offer/VoidButton";
 export * from "./components/currencyDisplay/CurrencyDisplay";
@@ -40,8 +41,6 @@ export * from "./components/magicLink/UserContext";
 export * from "./components/modal/components/Commit/DetailView/ExternalCommitDetailView";
 export * from "./components/modal/components/common/detail/useGetOfferDetailData";
 export * from "./components/modal/components/common/OfferFullDescription/ExternalOfferFullDescription";
-export * from "./components/modal/components/common/StepsOverview/PurchaseOverview";
-export * from "./components/modal/components/PurchaseOverview/PurchaseOverview";
 export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeDetailView";
 export * from "./components/portal/Portal";
 export * from "./components/productCard/const";
@@ -50,6 +49,8 @@ export * from "./components/queryClient/withQueryClientProvider";
 export * from "./components/queryClient/QueryClientProviderCustom";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
+export * from "./components/styles/GlobalStyledThemed";
+export * from "./components/styles/ResetStylesForNonWidgets";
 export * from "./components/searchBar/SearchBar";
 export * from "./components/skeleton/CollectionsCardSkeleton";
 export { LoadingBubble } from "./components/skeleton/common";
@@ -71,7 +72,6 @@ export {
 export * from "./components/ui/Typography";
 export { Video, VideoProps } from "./components/ui/Video";
 export * from "./components/ui/zIndex";
-export { default as ConnectButton } from "./components/wallet/ConnectButton";
 export * from "./components/wallet2/accountDrawer/index";
 export * from "./components/wallet2/selector/ChainSelector";
 export * from "./components/wallet2/web3Provider/index";

package/src/lib/address/address.ts

@@ -21,7 +21,7 @@ export function isAddress(value: any): string | false {
 
 /**
  * Returns true if the string value is zero in hex
- * @param hexNumberString
+ * @param hexNumberString -
  */
 export function isZero(hexNumberString: string) {
   return /^0x0*$/.test(hexNumberString);