@bosonprotocol/react-kit 0.29.0-alpha.9 → 0.29.1-alpha.0

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/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/Redeem/ExchangeView/cancellation/CancelExchange.tsx

@@ -233,9 +233,8 @@ export function CancelExchange({
               const [, { exchangeId }] = args;
               await poll(
                 async () => {
-                  const canceledExchange = await coreSDK.getExchangeById(
-                    exchangeId
-                  );
+                  const canceledExchange =
+                    await coreSDK.getExchangeById(exchangeId);
                   return canceledExchange.cancelledDate;
                 },
                 (cancelledDate) => {

package/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx

@@ -236,9 +236,8 @@ export default function ExpireVoucher({
               const [, { exchangeId }] = args;
               await poll(
                 async () => {
-                  const expiredExchange = await coreSDK.getExchangeById(
-                    exchangeId
-                  );
+                  const expiredExchange =
+                    await coreSDK.getExchangeById(exchangeId);
                   return expiredExchange.expired;
                 },
                 (expired) => {

package/src/components/modal/components/Redeem/MyItems/WithExchangesData.tsx

@@ -52,8 +52,8 @@ export function WithExchangesData(
         ? sellerIds.filter((s) => sellerCurationList?.includes(s))
         : sellerIds
       : enableCurationLists
-      ? sellerCurationList
-      : undefined;
+        ? sellerCurationList
+        : undefined;
     const committedExchanges = useExchanges(
       {
         ...orderProps,

package/src/components/modal/components/Redeem/RedeemNonModal.tsx

@@ -257,14 +257,14 @@ const getInitialStep = (
   return showRedemptionOverview
     ? ActiveStep.STEPS_OVERVIEW
     : widgetAction === RedemptionWidgetAction.SELECT_EXCHANGE
-    ? ActiveStep.MY_ITEMS
-    : widgetAction === RedemptionWidgetAction.REDEEM_FORM
-    ? ActiveStep.REDEEM_FORM
-    : widgetAction === RedemptionWidgetAction.CANCEL_FORM
-    ? ActiveStep.CANCELLATION_VIEW
-    : widgetAction === RedemptionWidgetAction.EXCHANGE_DETAILS
-    ? ActiveStep.EXCHANGE_VIEW
-    : ActiveStep.REDEEM_FORM_CONFIRMATION;
+      ? ActiveStep.MY_ITEMS
+      : widgetAction === RedemptionWidgetAction.REDEEM_FORM
+        ? ActiveStep.REDEEM_FORM
+        : widgetAction === RedemptionWidgetAction.CANCEL_FORM
+          ? ActiveStep.CANCELLATION_VIEW
+          : widgetAction === RedemptionWidgetAction.EXCHANGE_DETAILS
+            ? ActiveStep.EXCHANGE_VIEW
+            : ActiveStep.REDEEM_FORM_CONFIRMATION;
 };
 const getPreviousSteps = (
   widgetAction: RedemptionWidgetAction,

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/OfferFullDescription/DigitalProductData.tsx

@@ -102,12 +102,12 @@ export const DigitalProductData: React.FC<DigitalProductDataProps> = ({
                             attribute.value as keyof typeof digitalTypeMappingDisplay
                           ]
                         : digitalNftTypeMapping[
-                            attribute.value as keyof typeof digitalNftTypeMapping
-                          ]
-                        ? digitalNftTypeMapping[
-                            attribute.value as keyof typeof digitalNftTypeMapping
-                          ]
-                        : attribute.value}
+                              attribute.value as keyof typeof digitalNftTypeMapping
+                            ]
+                          ? digitalNftTypeMapping[
+                              attribute.value as keyof typeof digitalNftTypeMapping
+                            ]
+                          : attribute.value}
                     </Typography>
                   )
                 })),

package/src/components/modal/components/common/OfferFullDescription/OfferFullDescription.tsx

@@ -31,7 +31,7 @@ export type OfferFullDescriptionProps = OnClickBuyOrSwapHandler & {
   includeGeneralProductDataTab: boolean;
   exchange: Exchange | null;
   className?: string;
-  defaultSelectedTabId?: typeof ids[number];
+  defaultSelectedTabId?: (typeof ids)[number];
 } & Pick<UseGetOfferDetailDataProps, "onExchangePolicyClick"> &
   Pick<TabsProps, "withFullViewportWidth">;
 

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/Detail.style.tsx

@@ -506,8 +506,11 @@ export const BaseWidget = styled.div`
   }
 
   box-shadow: 0px 4.318px 107.946px rgba(21, 30, 52, 0.1);
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05), 0px 0px 16px rgba(0, 0, 0, 0.05),
-    0px 0px 32px rgba(0, 0, 0, 0.05), 0px 0px 64px rgba(0, 0, 0, 0.05),
+  box-shadow:
+    0px 0px 0px rgba(0, 0, 0, 0.05),
+    0px 0px 16px rgba(0, 0, 0, 0.05),
+    0px 0px 32px rgba(0, 0, 0, 0.05),
+    0px 0px 64px rgba(0, 0, 0, 0.05),
     0px 0px 128px rgba(0, 0, 0, 0.05);
 
   > div {

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

@@ -125,8 +125,8 @@ export default function DetailSlider({
     outerShowArrows === false
       ? false
       : sumMediaFiles !== 1 && (sliderOptions.perView ?? 1) === 1
-      ? true
-      : sumMediaFiles > (sliderOptions.perView ?? 1);
+        ? true
+        : sumMediaFiles > (sliderOptions.perView ?? 1);
   const draggable = showArrows;
   useEffect(() => {
     if (mediaFiles.length !== 0 && ref.current !== null) {
@@ -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/components/common/detail/DetailViewWithProvider.tsx

@@ -111,7 +111,7 @@ export const DetailViewWithProvider: React.FC<
             )
           : "",
         [swapQueryParameters.exactField]: Field.OUTPUT.toLowerCase()
-      } as const),
+      }) as const,
     [
       minNeededBalance,
       offer.exchangeToken.address,

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

@@ -216,16 +216,16 @@ export const TokenGatedItem = ({
       !chainId || !condition
         ? null
         : condition.tokenAddress === ethers.constants.AddressZero
-        ? nativeOnChain(chainId)
-        : erc20TokenInfo
-        ? new Token(
-            chainId,
-            condition.tokenAddress,
-            Number(erc20TokenInfo.decimals),
-            erc20TokenInfo.symbol,
-            erc20TokenInfo.name
-          )
-        : null,
+          ? nativeOnChain(chainId)
+          : erc20TokenInfo
+            ? new Token(
+                chainId,
+                condition.tokenAddress,
+                Number(erc20TokenInfo.decimals),
+                erc20TokenInfo.symbol,
+                erc20TokenInfo.name
+              )
+            : null,
     [chainId, condition, erc20TokenInfo]
   );
 

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/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"};

package/src/components/ui/ThemedButton.tsx

@@ -207,7 +207,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     outline: {
       color: colors.black,
       borderColor: colors.border,
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         background: colors.border,
         color: "var(--accent)"
@@ -222,7 +222,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blank: {
       color: `${colors.black}4d`,
-      padding: "0.75rem 0.5rem",
       hover: {
         color: colors.black
       },
@@ -233,7 +232,6 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondary: {
       color: "var(--accent)",
-      padding: "0.75rem 0.5rem",
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -242,7 +240,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankSecondaryOutline: {
       color: "var(--accent)",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.secondary,
       hover: {
         borderColor: colors.secondary,
@@ -252,8 +250,7 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     },
     blankOutline: {
       color: colors.black,
-      padding: "1rem 2rem",
-      borderWidth: 1,
+      borderWidth: 2,
       hover: {
         borderColor: colors.secondary,
         background: colors.border,
@@ -263,14 +260,23 @@ const allThemes = ({ withBosonStyle }: { withBosonStyle?: boolean }) => {
     white: {
       color: colors.black,
       background: colors.white,
-      padding: "1rem",
-      borderWidth: 1,
+      borderWidth: 2,
       borderColor: colors.border,
       hover: {
         color: colors.white,
         background: colors.black
       }
     },
+    black: {
+      color: colors.white,
+      background: colors.black,
+      borderWidth: 2,
+      borderColor: colors.black,
+      hover: {
+        color: colors.black,
+        background: colors.white
+      }
+    },
     warning: {
       color: colors.black,
       borderColor: colors.orange,

package/src/components/ui/Video.tsx

@@ -96,6 +96,7 @@ interface IVideo {
   showPlaceholderText?: boolean;
   noPreload?: boolean;
   videoProps?: VideoHTMLAttributes<HTMLElement>;
+  withMuteButton?: boolean;
   componentWhileLoading?: () => ReactElement;
 }
 const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
@@ -105,6 +106,7 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
   showPlaceholderText = true,
   noPreload = false,
   videoProps,
+  withMuteButton,
   componentWhileLoading: ComponentWhileLoading,
   ...rest
 }) => {
@@ -222,10 +224,12 @@ const Video: React.FC<IVideo & React.HTMLAttributes<HTMLDivElement>> = ({
       {children || ""}
       {videoSrc && (
         <>
-          <StyledMuteButton
-            muted={muted}
-            onClick={() => setMuted((prev) => !prev)}
-          />
+          {withMuteButton && (
+            <StyledMuteButton
+              muted={muted}
+              onClick={() => setMuted((prev) => !prev)}
+            />
+          )}
           <VideoHtml
             ref={videoRef}
             data-testid={dataTestId}

package/src/components/ui/styles.ts

@@ -14,7 +14,7 @@ export const button = css`
   align-items: center;
   padding: 1rem 1.5px;
   gap: 0.5rem;
-  margin: 1px;
+  margin: 0;
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;

package/src/components/widgets/commit/CommitModalWithOffer.tsx

@@ -82,7 +82,7 @@ function WithProductOrOffer(
                   ({
                     variations: productV1Item.variations,
                     offer: bundle.offer
-                  } as VariantV1)
+                  }) as VariantV1
               );
             })
             .filter(isTruthy);

package/src/components/widgets/finance/FinanceWidget.tsx

@@ -7,32 +7,20 @@ import styled from "styled-components";
 import { useAccount } from "../../../hooks/connection/connection";
 import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
-import { CONFIG } from "../../../lib/config/config";
-import {
-  ConfigProvider,
-  ConfigProviderProps
-} from "../../config/ConfigProvider";
-import { MagicProvider } from "../../magicLink/MagicProvider";
-import ModalProvider from "../../modal/ModalProvider";
-import { SignerProvider } from "../../signer/SignerProvider";
-import GlobalStyle from "../../styles/GlobalStyle";
 import { Grid } from "../../ui/Grid";
 import Loading from "../../ui/loading/Loading";
 import ConnectButton from "../../wallet/ConnectButton";
-import WalletConnectionProvider from "../../wallet/WalletConnectionProvider";
-import { getParentWindowOrigin } from "../common";
-import { CommonWidgetTypes } from "../types";
 import Finance, { Props } from "./Finance";
-import ConvertionRateProvider, {
-  ConvertionRateProviderProps
-} from "./convertion-rate/ConvertionRateProvider";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";
 import { useExchangeTokens } from "./exchange-tokens/useExchangeTokens";
 import useFunds from "./useFunds";
 import { useOffersBacked } from "./useOffersBacked";
 import { useSellerDeposit } from "./useSellerDeposit";
 import { useSellerRoles } from "./useSellerRoles";
-import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import {
+  FinanceWidgetProviders,
+  FinanceWidgetProvidersProps
+} from "./FinanceWidgetProviders";
 dayjs.extend(isBetween);
 
 const StyledConnectButton = styled(ConnectButton)`
@@ -146,49 +134,20 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-type FinanceWidgetProps = {
-  walletConnectProjectId: string;
-} & Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  CommonWidgetTypes &
-  ConvertionRateProviderProps & {
-    sellerId: string | null | undefined;
-  };
-
-const { infuraKey, magicLinkKey } = CONFIG;
+type FinanceWidgetProps = FinanceWidgetProvidersProps & {
+  sellerId: string | null | undefined;
+};
 
 export function FinanceWidget(props: FinanceWidgetProps) {
-  const parentOrigin = getParentWindowOrigin();
-  const { walletConnectProjectId, sellerId, withExternalSigner } = props;
+  const { sellerId, withExternalSigner } = props;
   return (
-    <ConfigProvider
-      magicLinkKey={magicLinkKey}
-      infuraKey={infuraKey}
-      {...props}
-    >
-      <GlobalStyle />
-      <SignerProvider
-        parentOrigin={parentOrigin}
-        withExternalSigner={withExternalSigner}
-      >
-        <MagicProvider>
-          <WalletConnectionProvider
-            walletConnectProjectId={walletConnectProjectId}
-          >
-            <ConvertionRateProvider>
-              <ModalProvider>
-                {!withExternalSigner && (
-                  <Grid justifyContent="flex-end">
-                    <StyledConnectButton showChangeWallet />
-                  </Grid>
-                )}
-                <Component sellerId={sellerId ?? undefined} />
-              </ModalProvider>
-            </ConvertionRateProvider>
-          </WalletConnectionProvider>
-        </MagicProvider>
-      </SignerProvider>
-    </ConfigProvider>
+    <FinanceWidgetProviders {...props}>
+      {!withExternalSigner && (
+        <Grid justifyContent="flex-end">
+          <StyledConnectButton showChangeWallet />
+        </Grid>
+      )}
+      <Component sellerId={sellerId ?? undefined} />
+    </FinanceWidgetProviders>
   );
 }
-
-export default withQueryClientProvider(FinanceWidget);

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { CONFIG } from "../../../lib/config/config";
+import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
+import { Omit } from "utility-types";
+import { CommonWidgetTypes } from "../types";
+import { SignerProvider } from "../../signer/SignerProvider";
+import GlobalStyle from "../../styles/GlobalStyle";
+import {
+  ConfigProvider,
+  ConfigProviderProps
+} from "../../config/ConfigProvider";
+import ConvertionRateProvider, {
+  ConvertionRateProviderProps
+} from "./convertion-rate/ConvertionRateProvider";
+import WalletConnectionProvider, {
+  WalletConnectionProviderProps
+} from "../../wallet/WalletConnectionProvider";
+import ModalProvider from "../../modal/ModalProvider";
+import { MagicProvider } from "../../magicLink/MagicProvider";
+import { getParentWindowOrigin } from "../common";
+
+export type FinanceWidgetProvidersProps = Omit<
+  WalletConnectionProviderProps,
+  "children" | "envName"
+> &
+  Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
+  CommonWidgetTypes &
+  ConvertionRateProviderProps & {
+    children: ReactNode;
+  };
+
+const { infuraKey, magicLinkKey } = CONFIG;
+
+export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
+  withQueryClientProvider(({ children, ...props }) => {
+    const parentOrigin = getParentWindowOrigin();
+    return (
+      <ConfigProvider
+        magicLinkKey={magicLinkKey}
+        infuraKey={infuraKey}
+        {...props}
+      >
+        <GlobalStyle />
+        <SignerProvider
+          parentOrigin={parentOrigin}
+          withExternalSigner={props.withExternalSigner}
+        >
+          <MagicProvider>
+            <WalletConnectionProvider
+              walletConnectProjectId={props.walletConnectProjectId}
+            >
+              <ConvertionRateProvider>
+                <ModalProvider>{children}</ModalProvider>
+              </ConvertionRateProvider>
+            </WalletConnectionProvider>
+          </MagicProvider>
+        </SignerProvider>
+      </ConfigProvider>
+    );
+  });

package/src/hooks/useCtaClickHandler.ts

@@ -135,9 +135,14 @@ export function useCtaClickHandler<T>({
         onSuccess?.(receipt as providers.TransactionReceipt, payload);
       }
     } catch (error) {
-      onError?.(error as Error, {
-        txResponse: txResponse as providers.TransactionResponse
-      });
+      onError?.(
+        typeof error === "object"
+          ? (coreSdk.parseError(error as object) as Error)
+          : (error as Error),
+        {
+          txResponse: txResponse as providers.TransactionResponse
+        }
+      );
     } finally {
       setIsLoading(false);
     }