@bosonprotocol/react-kit 0.29.0-alpha.2 → 0.29.0-alpha.20

package/src/components/cta/offer/VoidButton.tsx

@@ -9,6 +9,7 @@ import { Loading } from "../../Loading";
 import { ButtonSize } from "../../ui/buttonSize";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 
 type Props = {
   /**
@@ -19,89 +20,91 @@ type Props = {
   offerId: BigNumberish;
 }>;
 
-export const VoidButton = ({
-  offerId,
-  disabled = false,
-  showLoading = false,
-  extraInfo,
-  onSuccess,
-  onError,
-  onPendingSignature,
-  onPendingTransaction,
-  waitBlocks = 1,
-  size = ButtonSize.Large,
-  variant = "secondaryFill",
-  children,
-  coreSdkConfig,
-  ...rest
-}: Props) => {
-  const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+export const VoidButton = withQueryClientProvider(
+  ({
+    offerId,
+    disabled = false,
+    showLoading = false,
+    extraInfo,
+    onSuccess,
+    onError,
+    onPendingSignature,
+    onPendingTransaction,
+    waitBlocks = 1,
+    size = ButtonSize.Large,
+    variant = "secondaryFill",
+    children,
+    coreSdkConfig,
+    ...rest
+  }: Props) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const { isMetaTx } = useMetaTx(coreSdk);
+    const { isMetaTx } = useMetaTx(coreSdk);
 
-  return (
-    <Button
-      variant={variant}
-      disabled={disabled}
-      size={size}
-      onClick={async () => {
-        if (!isLoading) {
-          let txResponse: TransactionResponse | undefined = undefined;
-          try {
-            setIsLoading(true);
-            onPendingSignature?.();
+    return (
+      <Button
+        variant={variant}
+        disabled={disabled}
+        size={size}
+        onClick={async () => {
+          if (!isLoading) {
+            let txResponse: TransactionResponse | undefined = undefined;
+            try {
+              setIsLoading(true);
+              onPendingSignature?.();
 
-            if (isMetaTx) {
-              const nonce = Date.now();
+              if (isMetaTx) {
+                const nonce = Date.now();
 
-              const { r, s, v, functionName, functionSignature } =
-                await coreSdk.signMetaTxVoidOffer({
-                  offerId,
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxVoidOffer({
+                    offerId,
+                    nonce
+                  });
+
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
                   nonce
                 });
+              } else {
+                txResponse = await coreSdk.voidOffer(offerId);
+              }
+
+              onPendingTransaction?.(txResponse.hash, isMetaTx);
+              const receipt = await txResponse.wait(waitBlocks);
 
-              txResponse = await coreSdk.relayMetaTransaction({
-                functionName,
-                functionSignature,
-                sigR: r,
-                sigS: s,
-                sigV: v,
-                nonce
+              onSuccess?.(receipt as providers.TransactionReceipt, { offerId });
+            } catch (error) {
+              onError?.(error as Error, {
+                txResponse: txResponse as providers.TransactionResponse
               });
-            } else {
-              txResponse = await coreSdk.voidOffer(offerId);
+            } finally {
+              setIsLoading(false);
             }
-
-            onPendingTransaction?.(txResponse.hash, isMetaTx);
-            const receipt = await txResponse.wait(waitBlocks);
-
-            onSuccess?.(receipt as providers.TransactionReceipt, { offerId });
-          } catch (error) {
-            onError?.(error as Error, {
-              txResponse: txResponse as providers.TransactionResponse
-            });
-          } finally {
-            setIsLoading(false);
           }
-        }
-      }}
-      {...rest}
-    >
-      <ButtonTextWrapper>
-        {children || "Void"}
-        {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
-          <ExtraInfo>{extraInfo}</ExtraInfo>
-        ) : (
-          <>
-            {isLoading && showLoading && (
-              <LoadingWrapper>
-                <Loading />
-              </LoadingWrapper>
-            )}
-          </>
-        )}
-      </ButtonTextWrapper>
-    </Button>
-  );
-};
+        }}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Void"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

package/src/components/cta/seller/CreateSellerButton.tsx

@@ -9,6 +9,7 @@ import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common";
 import { ButtonSize } from "../../ui/buttonSize";
 import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides";
 import { useMetaTx } from "../../../hooks/useMetaTx";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 export type ICreateSellerButton = {
   exchangeId: BigNumberish;
   createSellerArgs: CreateSellerArgs;
@@ -16,93 +17,95 @@ export type ICreateSellerButton = {
   exchangeId: BigNumberish;
 }>;
 
-export const CreateSellerButton = ({
-  exchangeId,
-  disabled = false,
-  showLoading = false,
-  extraInfo,
-  onSuccess,
-  onError,
-  onPendingSignature,
-  onPendingTransaction,
-  waitBlocks = 1,
-  children,
-  size = ButtonSize.Large,
-  variant = "accentInverted",
-  createSellerArgs,
-  coreSdkConfig,
-  ...rest
-}: ICreateSellerButton) => {
-  const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+export const CreateSellerButton = withQueryClientProvider(
+  ({
+    exchangeId,
+    disabled = false,
+    showLoading = false,
+    extraInfo,
+    onSuccess,
+    onError,
+    onPendingSignature,
+    onPendingTransaction,
+    waitBlocks = 1,
+    children,
+    size = ButtonSize.Large,
+    variant = "accentInverted",
+    createSellerArgs,
+    coreSdkConfig,
+    ...rest
+  }: ICreateSellerButton) => {
+    const coreSdk = useCoreSdkOverrides({ coreSdkConfig });
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const { isMetaTx } = useMetaTx(coreSdk);
+    const { isMetaTx } = useMetaTx(coreSdk);
 
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      disabled={disabled}
-      onClick={async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        e.stopPropagation();
-        if (!isLoading) {
-          let txResponse: TransactionResponse | undefined = undefined;
-          try {
-            setIsLoading(true);
-            onPendingSignature?.();
+    return (
+      <Button
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        onClick={async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          e.stopPropagation();
+          if (!isLoading) {
+            let txResponse: TransactionResponse | undefined = undefined;
+            try {
+              setIsLoading(true);
+              onPendingSignature?.();
 
-            if (isMetaTx) {
-              const nonce = Date.now();
+              if (isMetaTx) {
+                const nonce = Date.now();
 
-              const { r, s, v, functionName, functionSignature } =
-                await coreSdk.signMetaTxCreateSeller({
-                  createSellerArgs,
+                const { r, s, v, functionName, functionSignature } =
+                  await coreSdk.signMetaTxCreateSeller({
+                    createSellerArgs,
+                    nonce
+                  });
+
+                txResponse = await coreSdk.relayMetaTransaction({
+                  functionName,
+                  functionSignature,
+                  sigR: r,
+                  sigS: s,
+                  sigV: v,
                   nonce
                 });
+              } else {
+                txResponse = await coreSdk.createSeller(createSellerArgs);
+              }
+
+              onPendingTransaction?.(txResponse.hash);
+              const receipt = await txResponse.wait(waitBlocks);
 
-              txResponse = await coreSdk.relayMetaTransaction({
-                functionName,
-                functionSignature,
-                sigR: r,
-                sigS: s,
-                sigV: v,
-                nonce
+              onSuccess?.(receipt as providers.TransactionReceipt, {
+                exchangeId
+              });
+            } catch (error) {
+              onError?.(error as Error, {
+                txResponse: txResponse as providers.TransactionResponse
               });
-            } else {
-              txResponse = await coreSdk.createSeller(createSellerArgs);
+            } finally {
+              setIsLoading(false);
             }
-
-            onPendingTransaction?.(txResponse.hash);
-            const receipt = await txResponse.wait(waitBlocks);
-
-            onSuccess?.(receipt as providers.TransactionReceipt, {
-              exchangeId
-            });
-          } catch (error) {
-            onError?.(error as Error, {
-              txResponse: txResponse as providers.TransactionResponse
-            });
-          } finally {
-            setIsLoading(false);
           }
-        }
-      }}
-      {...rest}
-    >
-      <ButtonTextWrapper>
-        {children || "Create Seller"}
-        {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
-          <ExtraInfo>{extraInfo}</ExtraInfo>
-        ) : (
-          <>
-            {isLoading && showLoading && (
-              <LoadingWrapper>
-                <Loading />
-              </LoadingWrapper>
-            )}
-          </>
-        )}
-      </ButtonTextWrapper>
-    </Button>
-  );
-};
+        }}
+        {...rest}
+      >
+        <ButtonTextWrapper>
+          {children || "Create Seller"}
+          {extraInfo && ((!isLoading && showLoading) || !showLoading) ? (
+            <ExtraInfo>{extraInfo}</ExtraInfo>
+          ) : (
+            <>
+              {isLoading && showLoading && (
+                <LoadingWrapper>
+                  <Loading />
+                </LoadingWrapper>
+              )}
+            </>
+          )}
+        </ButtonTextWrapper>
+      </Button>
+    );
+  }
+);

package/src/components/modal/components/Commit/CommitNonModal.tsx

@@ -121,9 +121,9 @@ function CommitNonModal({
     setStep((prev) => {
       const { previousStep } = prev;
       const currentStep = previousStep.length
-        ? (previousStep.pop() as CommitStep)
+        ? (previousStep[previousStep.length - 1] as CommitStep)
         : prev.currentStep;
-      const previousWithoutLast = previousStep;
+      const previousWithoutLast = previousStep.slice(0, -1);
       return {
         previousStep: previousWithoutLast,
         currentStep: currentStep

package/src/components/modal/components/Commit/DetailView/ExternalCommitDetailView.tsx

@@ -8,12 +8,15 @@ import {
   CommitDetailViewWithProviderProps
 } from "./CommitDetailViewWithProvider";
 import { ResetStylesForNonWidgets } from "../../../../styles/ResetStylesForNonWidgets";
+export {
+  CommitWidgetReduxProvider,
+  CommitWidgetReduxUpdaters
+} from "../../../../widgets/commit/CommitWidgetProviders";
 
 export type ExternalCommitDetailViewProps =
   CommitDetailViewWithProviderProps & {
     providerProps: Omit<CommitWidgetProvidersProps, "children">;
   };
-
 export const ExternalCommitDetailView: React.FC<
   ExternalCommitDetailViewProps
 > = (props) => {

package/src/components/modal/components/PurchaseOverview/PurchaseOverview.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode, useCallback } from "react";
+import { PurchaseOverviewView } from "../common/StepsOverview/PurchaseOverviewView";
+import NonModal from "../../nonModal/NonModal";
+import { BosonFooter } from "../common/BosonFooter";
+import { theme } from "../../../../theme";
+import { CSSProperties } from "styled-components";
+const colors = theme.colors.light;
+
+export type PurchaseOverviewProps = {
+  lookAndFeel: "regular" | "modal";
+  hideModal: () => void;
+  modalMargin?: CSSProperties["margin"];
+};
+
+export const PurchaseOverview: React.FC<PurchaseOverviewProps> = ({
+  lookAndFeel,
+  hideModal,
+  modalMargin
+}) => {
+  const Wrapper = useCallback(
+    ({ children }: { children: ReactNode }) => {
+      return lookAndFeel === "regular" ? (
+        <>{children}</>
+      ) : (
+        <div style={{ margin: modalMargin }}>{children}</div>
+      );
+    },
+    [lookAndFeel, modalMargin]
+  );
+  return (
+    <Wrapper>
+      <NonModal
+        hideModal={hideModal}
+        footerComponent={<BosonFooter />}
+        contentStyle={{
+          background: colors.white
+        }}
+        lookAndFeel={lookAndFeel}
+        showConnectButton={false}
+      >
+        <PurchaseOverviewView />
+      </NonModal>
+    </Wrapper>
+  );
+};

package/src/components/modal/components/SellerFinance/FinanceDeposit.tsx

@@ -15,7 +15,10 @@ import {
   extractUserFriendlyError,
   getHasUserRejectedTx
 } from "../../../../lib/errors/transactions";
-import { getNumberWithoutDecimals } from "../../../../lib/numbers/numbers";
+import {
+  getNumberWithDecimals,
+  getNumberWithoutDecimals
+} from "../../../../lib/numbers/numbers";
 import { poll } from "../../../../lib/promises/promises";
 import { DepositFundsButton } from "../../../cta/funds/DepositFundsButton";
 import { useEnvContext } from "../../../environment/EnvironmentContext";
@@ -75,6 +78,9 @@ export default function FinanceDeposit({
 
   const tokenStep = 10 ** -Number(tokenDecimals);
   const step = 0.01;
+  const balanceWithDecimals = dataBalance
+    ? getNumberWithDecimals(dataBalance.toString(), tokenDecimals)
+    : Number.MAX_SAFE_INTEGER;
 
   const handleChangeDepositAmount = (
     e: React.ChangeEvent<HTMLInputElement>
@@ -84,7 +90,7 @@ export default function FinanceDeposit({
     const value = e.target.valueAsNumber || 0;
     setIsDepositInvalid(false);
     setDepositError(null);
-    if (value < tokenStep || value > Number.MAX_SAFE_INTEGER) {
+    if (value < tokenStep || value > balanceWithDecimals) {
       setIsDepositInvalid(true);
     }
     setAmountToDeposit(valueStr);

package/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx

@@ -97,12 +97,16 @@ export default function FinanceWithdraw({
     const value = e.target.valueAsNumber || 0;
     setIsWithdrawInvalid(false);
 
-    const availableFundsBig = getNumberWithDecimals(
-      availableAmount,
-      tokenDecimals
-    );
+    try {
+      const availableFundsBig = getNumberWithDecimals(
+        availableAmount,
+        tokenDecimals
+      );
 
-    if (value < tokenStep || value > availableFundsBig || !value) {
+      if (value < tokenStep || value > availableFundsBig || !value) {
+        setIsWithdrawInvalid(true);
+      }
+    } catch (e) {
       setIsWithdrawInvalid(true);
     }
 

package/src/components/modal/components/common/StepsOverview/PurchaseOverview.tsx

@@ -35,9 +35,9 @@ const CommitStepWrapper = styled.div`
 const COMMIT_STEPS = [
   {
     icon: ShoppingCart,
-    header: "Commit",
+    header: "Commit to Buy",
     description:
-      "Commit to an Offer to receive a Redeemable NFT (rNFT) that can be exchanged for the real-world item it represents"
+      "Commit to buy an offer to receive a Redeemable NFT (rNFT) that can be exchanged for the real-world item it represents"
   },
   {
     icon: CurrencyCircleDollar,
@@ -63,9 +63,9 @@ export default function PurchaseOverview() {
           <b>How does the purchase process work?</b>
         </Typography>
         <Typography tag="p">
-          When Committing, the item price will be transferred into escrow and
-          you will receive a redeemable NFT (rNFT) that can be exchanged for the
-          real-world item it represents.
+          When Committing to Buy, the item price will be transferred into escrow
+          and you will receive a redeemable NFT (rNFT) that can be exchanged for
+          the real-world item it represents.
         </Typography>
       </Grid>
       <CommitStepWrapper>

package/src/components/modal/components/common/StepsOverview/PurchaseOverviewView.tsx

@@ -7,7 +7,7 @@ import { Grid } from "../../../../ui/Grid";
 
 const colors = theme.colors.light;
 type Props = {
-  onBackClick: () => void;
+  onBackClick?: () => void;
 };
 export function PurchaseOverviewView({ onBackClick }: Props) {
   const dispatch = useNonModalContext();
@@ -16,11 +16,15 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
       payload: {
         headerComponent: (
           <Grid style={{ flex: "1" }}>
-            <ArrowLeft
-              onClick={onBackClick}
-              size={32}
-              style={{ cursor: "pointer" }}
-            />
+            {onBackClick && (
+              <ArrowLeft
+                onClick={() => {
+                  onBackClick();
+                }}
+                size={32}
+                style={{ cursor: "pointer" }}
+              />
+            )}
           </Grid>
         ),
         contentStyle: {
@@ -28,7 +32,6 @@ export function PurchaseOverviewView({ onBackClick }: Props) {
         }
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, [dispatch, onBackClick]);
   return <PurchaseOverview />;
 }

package/src/components/modal/components/common/detail/DetailSlider.tsx

@@ -294,6 +294,7 @@ export default function DetailSlider({
                       style={{ cursor: "pointer" }}
                       dataTestId="offerAnimationUrl"
                       videoProps={{ muted: true, loop: true, autoPlay: true }}
+                      withMuteButton
                     />
                   )}
                 </>

package/src/components/modal/nonModal/Header.tsx

@@ -9,6 +9,7 @@ import { useBreakpoints } from "../../../hooks/useBreakpoints";
 
 const colors = theme.colors.light;
 const Wrapper = styled.div<{ $flexWrap: string }>`
+  box-sizing: border-box;
   container-type: inline-size;
   position: relative;
   width: 100%;

package/src/components/queryClient/QueryClientProviderCustom.tsx

@@ -0,0 +1,27 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};

package/src/components/queryClient/withQueryClientProvider.tsx

@@ -0,0 +1,50 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryClientProviderProps
+} from "react-query";
+
+import React from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+
+type QueryClientProviderCustomProps = Partial<QueryClientProviderProps>;
+
+export const QueryClientProviderCustom: React.FC<
+  QueryClientProviderCustomProps
+> = ({ ...props }) => {
+  return (
+    <QueryClientProvider client={queryClient} {...props}>
+      {props.children}
+    </QueryClientProvider>
+  );
+};
+
+export const withQueryClientProvider = <P extends object>(
+  WrappedComponent: React.ComponentType<P>
+) => {
+  // Define the props type for the wrapped component
+  type Props = P;
+
+  // Return a new component
+  const WithQueryClientProvider: React.FC<Props> = (props) => {
+    return (
+      <QueryClientProviderCustom>
+        <WrappedComponent {...props} />
+      </QueryClientProviderCustom>
+    );
+  };
+
+  // Set display name for debugging purposes
+  const displayName =
+    WrappedComponent.displayName || WrappedComponent.name || "Component";
+  WithQueryClientProvider.displayName = `withQueryClientProviderCustom(${displayName})`;
+
+  return WithQueryClientProvider;
+};

package/src/components/styles/GlobalStyle.tsx

@@ -117,7 +117,6 @@ const GlobalStyle = createGlobalStyle<
     margin: 0;
     padding: 0;
 
-    background-color: var(--primaryBgColor);
     color: var(--textColor);
 
     font-family: ${(props) => props.$fontFamily || "Plus Jakarta Sans"};