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

package/src/components/widgets/roblox/components/RobloxProductsGrid.tsx

@@ -0,0 +1,209 @@
+import { GridContainer, GridContainerProps } from "../../../ui/GridContainer";
+import { ProductCard } from "../../../productCard/ProductCard";
+import styled, { css } from "styled-components";
+import { Currencies } from "../../../currencyDisplay/CurrencyDisplay";
+import { useAccount, useIpfsContext } from "../../../../hooks";
+import React, { useCallback, useState } from "react";
+import { utils } from "ethers";
+import { CameraSlash } from "phosphor-react";
+import { colors } from "../../../../theme";
+import {
+  getFallbackImageUrl,
+  getImageUrl
+} from "../../../../lib/images/images";
+import { getOfferDetails } from "../../../../lib/offer/getOfferDetails";
+import { Bundle, isBundle, isProductV1 } from "../../../../lib/offer/filter";
+import { ProductCardSkeleton } from "../../../skeleton/ProductCardSkeleton";
+import { ProductType } from "../../../productCard/const";
+import { ConnectWalletWithLogic } from "./ConnectWalletWithLogic";
+import { BosonRobloxProductWithAvailability } from "@bosonprotocol/roblox-sdk";
+import { Typography } from "../../../ui/Typography";
+import { isTruthy } from "../../../../types/helpers";
+import { LoginWithRoblox } from "./LoginWithRoblox";
+import { ThemedCommitButtonView } from "../../../buttons/commit/ThemedCommitButtonView";
+import { isMobile } from "../../../../lib/userAgent/userAgent";
+
+import InfiniteScroll from "react-infinite-scroll-component";
+const Wrapper = styled.div`
+  width: 100%;
+  > * {
+    width: 100%;
+  }
+`;
+const commonCardStyles = css`
+  background: transparent;
+  box-shadow: unset;
+  padding: 0;
+  > * {
+    padding-top: 0;
+  }
+`;
+const TransparentProductCard = styled(ProductCard)`
+  ${commonCardStyles}
+`;
+const TransparentSkeletonProductCard = styled(ProductCardSkeleton)`
+  ${commonCardStyles}
+  height: 100%;
+`;
+
+export type RobloxProductsGridProps = {
+  isLoading: boolean;
+  products: BosonRobloxProductWithAvailability[] | undefined;
+  numProducts?: number;
+  itemsPerRow: GridContainerProps["itemsPerRow"];
+  handleSetProductUuid?: (uuid: string) => void;
+  handleSetBundleUuid?: (uuid: string) => void;
+  isLoggedInWithRoblox: boolean;
+  fetchNextPage: () => Promise<unknown> | unknown;
+  refetch: () => Promise<unknown> | unknown;
+  hasNextPage: boolean | undefined;
+};
+export const RobloxProductsGrid = ({
+  isLoading,
+  numProducts,
+  itemsPerRow,
+  products,
+  handleSetBundleUuid,
+  handleSetProductUuid,
+  isLoggedInWithRoblox,
+  fetchNextPage,
+  refetch,
+  hasNextPage
+}: RobloxProductsGridProps) => {
+  const { address } = useAccount();
+  const { ipfsImageGateway } = useIpfsContext();
+  const [isNextLoading, setNextLoading] = useState(false);
+  const fetchNextPageLoading = useCallback(async () => {
+    setNextLoading(true);
+    try {
+      await fetchNextPage();
+    } finally {
+      setNextLoading(false);
+    }
+  }, [fetchNextPage]);
+  const arrayOfLoadingCards = new Array(numProducts || 3)
+    .fill(null)
+    .map((_, index) => {
+      return <TransparentSkeletonProductCard key={index} />;
+    });
+  return (
+    <Wrapper>
+      <InfiniteScroll
+        style={{ width: "100%" }}
+        next={fetchNextPageLoading}
+        hasMore={!!hasNextPage}
+        loader={<></>}
+        dataLength={products?.length || 0}
+        refreshFunction={refetch}
+        pullDownToRefresh
+        pullDownToRefreshThreshold={50}
+        pullDownToRefreshContent={
+          <p style={{ textAlign: "center" }}>&#8595; Pull down to refresh</p>
+        }
+        releaseToRefreshContent={
+          <p style={{ textAlign: "center" }}>&#8593; Release to refresh</p>
+        }
+      >
+        <GridContainer
+          columnGap="2rem"
+          rowGap="2rem"
+          width="100%"
+          itemsPerRow={itemsPerRow}
+        >
+          {products?.length || isNextLoading ? (
+            <>
+              {products
+                ?.filter((robloxProduct) => robloxProduct.offer.metadata)
+                .map((robloxProduct) => {
+                  const { exchangeToken, uuid, offer, product, seller } =
+                    robloxProduct;
+                  const key = uuid;
+                  const { uuid: productUuid } = product;
+
+                  const { price, metadata } = offer;
+                  if (!(isProductV1(offer) || isBundle(offer))) {
+                    return null;
+                  }
+                  // if(isProductV1(offer)){
+                  //   offer.metadata
+                  // }
+                  const bundleUuid = isBundle(offer)
+                    ? // TODO: remove cast once @bosonprotocol/roblox-sdk uses the same version of @bosonprotocol/core-sdk that we use
+                      (offer as Bundle).metadata.bundleUuid
+                    : "";
+
+                  const { mainImage } = getOfferDetails(offer);
+                  const imageOptimizationOptions = {
+                    height: 500
+                  };
+                  const imageSrc = getImageUrl(
+                    (mainImage || metadata?.image) ?? "",
+                    ipfsImageGateway,
+                    imageOptimizationOptions
+                  );
+                  const onCardClick = () => {
+                    if (isProductV1(offer) && productUuid) {
+                      handleSetProductUuid?.(productUuid);
+                    } else if (isBundle(offer) && bundleUuid) {
+                      handleSetBundleUuid?.(bundleUuid);
+                    }
+                  };
+                  return (
+                    <TransparentProductCard
+                      key={key}
+                      productType={
+                        isBundle(offer)
+                          ? ProductType.phygital
+                          : isProductV1(offer)
+                            ? ProductType.physical
+                            : ProductType.digital
+                      }
+                      avatarName=""
+                      currency={exchangeToken.symbol as Currencies}
+                      price={utils.formatUnits(
+                        price || "0",
+                        exchangeToken.decimals
+                      )}
+                      isHoverDisabled
+                      isImageFitCover
+                      title={metadata?.name ?? ""}
+                      imageProps={{
+                        src: imageSrc,
+                        fallbackSrc: getFallbackImageUrl(
+                          imageSrc,
+                          ipfsImageGateway,
+                          imageOptimizationOptions
+                        ),
+                        withLoading: true,
+                        errorConfig: {
+                          errorIcon: (
+                            <CameraSlash size={32} color={colors.white} />
+                          )
+                        }
+                      }}
+                      onCardClick={isMobile ? onCardClick : undefined}
+                      CTAOnHover={
+                        !isLoggedInWithRoblox ? (
+                          <LoginWithRoblox sellerId={seller.id} />
+                        ) : !address ? (
+                          <ConnectWalletWithLogic
+                            connectWalletButtonDisabled={false}
+                          />
+                        ) : (
+                          <ThemedCommitButtonView onClick={onCardClick} />
+                        )
+                      }
+                    />
+                  );
+                })
+                .filter(isTruthy)}
+              {isNextLoading && arrayOfLoadingCards}
+            </>
+          ) : (
+            <Typography>No products found</Typography>
+          )}
+        </GridContainer>
+      </InfiniteScroll>
+    </Wrapper>
+  );
+};

package/src/components/widgets/roblox/components/const.ts

@@ -0,0 +1,7 @@
+export const productsPageSize = 4;
+export const purchasedProductsPageSize = 4;
+
+export const statuses = {
+  availableProducts: ["AVAILABLE", "POTENTIALLY", "PENDING"],
+  unavailableProducts: ["NOT_AVAILABLE", "UNKNOWN"]
+} as const;

package/src/components/widgets/roblox/components/styles.tsx

@@ -0,0 +1,10 @@
+import { Power } from "phosphor-react";
+import styled from "styled-components";
+
+export const StyledPower = styled(Power)`
+  && {
+    stroke: initial;
+  }
+`;
+
+export const maxWidthStepper = "22.125rem";

package/src/components/widgets/roblox/components/types.ts

@@ -0,0 +1,33 @@
+import { CSSProperties } from "styled-components";
+import { BaseButtonTheme } from "../../../buttons/BaseButton";
+
+export type CardThemeProps = {
+  title: {
+    color: CSSProperties["color"];
+  };
+  subtitle: {
+    color: CSSProperties["color"];
+  };
+  check: {
+    color: CSSProperties["color"];
+  };
+  number: {
+    active: {
+      backgroundColor: CSSProperties["color"];
+      stroke: CSSProperties["color"];
+    };
+    inactive: {
+      backgroundColor: CSSProperties["color"];
+      stroke: CSSProperties["color"];
+    };
+  };
+  padding: CSSProperties["padding"];
+  button: ButtonThemeProps;
+};
+
+export type ButtonThemeProps = {
+  active: Omit<BaseButtonTheme, "color" | "background"> &
+    Required<Pick<BaseButtonTheme, "color" | "background">>;
+  inactive: Omit<BaseButtonTheme, "color" | "background"> &
+    Required<Pick<BaseButtonTheme, "color" | "background">>;
+};

package/src/hooks/connection/connection.ts

@@ -1,38 +1,22 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-// source: https://wagmi.sh/react/ethers-adapters
-
 import { useMemo } from "react";
-import { useNetwork, useAccount as useWagmiAccount } from "wagmi";
 import { useUser } from "../../components/magicLink/UserContext";
 import {
   useIsMagicLoggedIn,
   useMagicChainId,
   useMagicProvider
 } from "../magic";
-import { useEthersSigner } from "../ethers/useEthersSigner";
 import { useConfigContext } from "../../components/config/ConfigContext";
 import { useExternalSigner } from "../../components/signer/useExternalSigner";
 import { useSignerAddress } from "../useSignerAddress";
-import { useEthersProvider } from "../ethers/useEthersProvider";
-import { useQuery } from "react-query";
+import { useMutation, useQuery } from "react-query";
 import { useExternalSignerChainId } from "../../lib/signer/externalSigner";
 import { Signer, providers } from "ethers";
 import { useWeb3ReactWrapper } from "../web3React/useWeb3ReactWrapper";
+import { useCoreSDKWithContext } from "../core-sdk/useCoreSdkWithContext";
 
 export function useAccount() {
-  let wagmiAccount: `0x${string}` | undefined, error: unknown;
   const { account: web3ReactAccount } = useWeb3ReactWrapper() || {};
-  const {
-    withExternalConnectionProps,
-    externalConnectedAccount,
-    withWeb3React
-  } = useConfigContext();
-  try {
-    const { address: account } = useWagmiAccount();
-    wagmiAccount = account;
-  } catch (err) {
-    error = err;
-  }
+  const { externalConnectedAccount } = useConfigContext();
 
   const { user } = useUser();
   const { externalWeb3LibAdapter } = useExternalSigner() ?? {};
@@ -44,21 +28,11 @@ export function useAccount() {
       address:
         externalConnectedAccount ??
         externalSignerAddress ??
-        wagmiAccount ??
         web3ReactAccount ??
         user
     }),
-    [
-      wagmiAccount,
-      user,
-      web3ReactAccount,
-      externalSignerAddress,
-      externalConnectedAccount
-    ]
+    [user, web3ReactAccount, externalSignerAddress, externalConnectedAccount]
   );
-  if (!withExternalConnectionProps && error && !withWeb3React) {
-    throw error;
-  }
   return account;
 }
 
@@ -67,22 +41,15 @@ export function useChainId(): number | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedChainId,
-    withWeb3React,
     withMagicLink
   } = useConfigContext();
   const externalSigner = useExternalSigner();
   const { data: externalSignerChainId } = useExternalSignerChainId();
   const isMagicLoggedIn = useIsMagicLoggedIn();
-  let networkChainId: number | undefined;
   let magicChainId: number | undefined;
-  let error: unknown;
   let magicError: unknown;
   try {
-    networkChainId = useNetwork().chain?.id;
-  } catch (wagmiError) {
-    error = wagmiError; // error if the provider is not there
-  }
-  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     magicChainId = useMagicChainId();
   } catch (error) {
     magicError = error; // error if the provider is not there
@@ -99,13 +66,7 @@ export function useChainId(): number | undefined {
   if (isMagicLoggedIn && withMagicLink) {
     return magicChainId;
   }
-  if (web3ReactChainId) {
-    return web3ReactChainId;
-  }
-  if (!withExternalConnectionProps && error && !withWeb3React) {
-    throw error;
-  }
-  return networkChainId;
+  return web3ReactChainId;
 }
 
 export function useIsConnectedToWrongChain(): boolean {
@@ -121,17 +82,13 @@ export function useProvider():
   const { withExternalConnectionProps, withWeb3React, withMagicLink } =
     useConfigContext();
   const { provider: web3Provider } = useWeb3ReactWrapper() || {};
-  let provider, magicProvider;
+  let magicProvider;
   let error: unknown;
-  try {
-    provider = useEthersProvider();
-  } catch (wagmiError) {
-    error = wagmiError; // error if the provider is not there
-  }
   if (!withExternalConnectionProps && error && !withWeb3React) {
     throw error;
   }
   try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     magicProvider = useMagicProvider();
   } catch (magicError) {
     error = magicError; // error if the provider is not there
@@ -143,29 +100,22 @@ export function useProvider():
   const magicLinkProvider = magicProvider!; // it should always be not null at this point
   const isMagicLoggedIn = useIsMagicLoggedIn();
   return isMagicLoggedIn
-    ? magicLinkProvider ?? web3Provider ?? provider
+    ? (magicLinkProvider ?? web3Provider)
     : withWeb3React
-      ? web3Provider ?? magicLinkProvider ?? provider
-      : provider ?? magicLinkProvider ?? web3Provider;
+      ? (web3Provider ?? magicLinkProvider)
+      : (magicLinkProvider ?? web3Provider);
 }
 
 export function useSigner(): Signer | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedSigner,
-    withWeb3React,
     withMagicLink
   } = useConfigContext();
-  let wagmiSigner: ReturnType<typeof useEthersSigner>, error: unknown;
-  try {
-    const ethersSigner = useEthersSigner();
-    wagmiSigner = ethersSigner;
-  } catch (wagmiError) {
-    error = wagmiError; // error if the provider is not there
-  }
   let magicProvider: providers.Web3Provider | undefined, magicError: unknown;
 
   try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     magicProvider = useMagicProvider();
   } catch (err) {
     magicError = err; // error if the provider is not there
@@ -181,21 +131,14 @@ export function useSigner(): Signer | undefined {
         ? externalSigner
         : isMagicLoggedIn
           ? magicProvider?.getSigner()
-          : withWeb3React
-            ? web3Provider?.getSigner()
-            : wagmiSigner;
+          : web3Provider?.getSigner();
   }, [
     externalConnectedSigner,
     externalSigner,
-    wagmiSigner,
     magicProvider,
     isMagicLoggedIn,
-    web3Provider,
-    withWeb3React
+    web3Provider
   ]);
-  if (!withExternalConnectionProps && error && !withWeb3React) {
-    throw error;
-  }
   if (!withExternalConnectionProps && magicError && withMagicLink) {
     throw magicError;
   }
@@ -217,3 +160,19 @@ export function useBalance(
     }
   );
 }
+
+type UseWeb3SignTypedDataProps = {
+  dataToSign: string;
+};
+export function useWeb3SignTypedData() {
+  const { address } = useAccount();
+  const coreSDK = useCoreSDKWithContext();
+
+  return useMutation(async ({ dataToSign }: UseWeb3SignTypedDataProps) => {
+    const signature = await coreSDK.web3Lib.send("eth_signTypedData_v4", [
+      address,
+      dataToSign
+    ]);
+    return signature;
+  });
+}

package/src/hooks/connection/useDisconnect.ts

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { useDisconnect as useDisconnectWagmi } from "wagmi";
 import { useUser } from "../../components/magicLink/UserContext";
 import { useIsMagicLoggedIn, useMagic, useWalletInfo } from "../magic";
 import { getMagicLogout } from "../../lib/magicLink/logout";
@@ -24,12 +23,6 @@ export const useDisconnect = () => {
   const magicLogout = getMagicLogout(magic);
   const isMagicLoggedIn = useIsMagicLoggedIn();
   const dispatch = useAppDispatch();
-  const { disconnectAsync, status } = useDisconnectWagmi();
-  const disconnect = useCallback(() => {
-    if (disconnectAsync && status !== "loading") {
-      disconnectAsync();
-    }
-  }, [disconnectAsync, status]);
 
   return useCallback(
     async ({ isUserDisconnecting, onUserDisconnect }: DisconnectProps) => {
@@ -47,18 +40,8 @@ export const useDisconnect = () => {
       dispatch(updateSelectedWallet({ wallet: undefined }));
       if (isMagicLoggedIn) {
         await magicLogout(setUser);
-      } else {
-        await disconnect();
       }
     },
-    [
-      magicLogout,
-      remove,
-      setUser,
-      isMagicLoggedIn,
-      disconnect,
-      connector,
-      dispatch
-    ]
+    [magicLogout, remove, setUser, isMagicLoggedIn, connector, dispatch]
   );
 };

package/src/hooks/connection/useSelectChain.tsx

@@ -13,12 +13,12 @@ import {
 import { isSupportedChain } from "../../lib/const/chains";
 import { configQueryParameters } from "../../lib/const/parameters";
 import { didUserReject } from "../../components/connection/utils";
-import { theme } from "../../theme";
+import { colors } from "../../theme";
 import { Typography } from "../../components/ui/Typography";
 import ErrorToast from "../../components/toasts/common/ErrorToast";
 import { useSwitchChain } from "./useSwitchChain";
 import { getEnvConfigsFilteredByEnv } from "../../lib/config/getConfigsByChainId";
-const colors = theme.colors.light;
+
 export function useSelectChain(
   { throwErrors, doConnect }: { throwErrors: boolean; doConnect: boolean } = {
     throwErrors: false,

package/src/hooks/connection/useSwitchChain.ts

@@ -26,7 +26,10 @@ function getRpcUrl(
     case ChainId.MAINNET:
     case ChainId.GOERLI:
     case ChainId.SEPOLIA:
-    case 80002:
+    case ChainId.POLYGON:
+    case 80002: // POLYGON AMOY
+    case ChainId.BASE:
+    case 84532: // BASE SEPOLIA
       return RPC_URLS[chainId][0];
     case localChainId: {
       if (localRpcUrl) {
@@ -34,6 +37,10 @@ function getRpcUrl(
       }
       throw new Error(`chain ${localChainId} is not supported`);
     }
+    case ChainId.ZORA:
+    case ChainId.ZORA_SEPOLIA:
+    case ChainId.ROOTSTOCK:
+    case ChainId.BLAST:
     case ChainId.OPTIMISM_SEPOLIA:
     case ChainId.ARBITRUM_SEPOLIA:
       throw new Error(`${chainId} is not supported`);

package/src/hooks/ens/useENSAddress.ts

@@ -46,7 +46,7 @@ export default function useENSAddress(ensName?: string | null): {
   const changed = debouncedName !== ensName;
   return useMemo(
     () => ({
-      address: changed ? null : addr.result?.[0] ?? null,
+      address: changed ? null : (addr.result?.[0] ?? null),
       loading: changed || resolverAddress.loading || addr.loading
     }),
     [addr.loading, addr.result, changed, resolverAddress.loading]

package/src/hooks/ens/useENSAvatar.ts

@@ -51,7 +51,7 @@ export default function useENSAvatar(
   const changed = debouncedAddress !== address;
   return useMemo(
     () => ({
-      avatar: changed ? null : http ?? null,
+      avatar: changed ? null : (http ?? null),
       loading:
         changed ||
         addressAvatar.loading ||

package/src/hooks/form/useFixSelectFont.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from "react";
+import { inputStyles } from "../../components/form/styles";
+
+export const useFixSelectFont = ({
+  selectClassName
+}: {
+  selectClassName: string;
+}) => {
+  const inputFontSize = useRef<string>();
+  useEffect(() => {
+    const input = document.createElement("input");
+    input.type = "hidden";
+
+    document.body.appendChild(input);
+
+    const fontSizeInPx = window.getComputedStyle(input).fontSize;
+    inputFontSize.current = fontSizeInPx;
+
+    document.body.removeChild(input);
+  }, []);
+  return {
+    jsx: (
+      <style>{`.${selectClassName}{
+        [class*="-placeholder"],[class*="-singleValue"],[class*="-option"]{
+          font-size: ${inputFontSize.current || "13.3333px"};
+        }
+        [class*="-singleValue"]{
+          color: ${inputStyles.color};
+        }
+        [class*="-placeholder"]{
+          color: ${inputStyles.placeholder.color};
+        }
+      }`}</style>
+    ),
+    selectClassName
+  };
+};

package/src/hooks/roblox/const.ts

@@ -0,0 +1,6 @@
+export const robloxLocalStorageKey = "roblox";
+
+export const robloxQueryKeys = {
+  loggedIn: (origin: string) => ["roblox-logged-in", origin],
+  logout: (origin: string) => ["roblox-loggout", origin]
+} as const;

package/src/hooks/roblox/context/RobloxContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+export const RobloxContext = createContext<{ backendOrigin: string } | null>(
+  null
+);

package/src/hooks/roblox/context/RobloxProvider.tsx

@@ -0,0 +1,23 @@
+import { useEnvContext } from "../../../components/environment/EnvironmentContext";
+import { RobloxContext } from "./RobloxContext";
+import { envConfigs } from "@bosonprotocol/roblox-sdk";
+import React from "react";
+
+export type RobloxProviderProps = {
+  children: React.ReactNode;
+};
+export const RobloxProvider: React.FC<RobloxProviderProps> = ({ children }) => {
+  const { configId, envName } = useEnvContext();
+  const backendOrigin =
+    // @ts-expect-error import.meta.env only exists in vite environments
+    import.meta?.env?.STORYBOOK_ROBLOX_BACKEND_ORIGIN ||
+    process?.env?.STORYBOOK_ROBLOX_BACKEND_ORIGIN ||
+    envConfigs[envName].find((conf) => conf.configId === configId)
+      ?.backendOrigin ||
+    "";
+  return (
+    <RobloxContext.Provider value={{ backendOrigin }}>
+      {children}
+    </RobloxContext.Provider>
+  );
+};

package/src/hooks/roblox/context/useRobloxConfigContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { RobloxContext } from "./RobloxContext";
+
+export const useRobloxConfigContext = () => {
+  const context = useContext(RobloxContext);
+  if (!context)
+    throw new Error(
+      "useRobloxConfigContext must be used within a RobloxProvider"
+    );
+  return context;
+};