@superlogic/spree-pay 0.1.31 → 0.1.35

package/build/index.cjs

@@ -44,7 +44,7 @@ var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // package.json
-var version = "0.1.31";
+var version = "0.1.35";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -96,7 +96,8 @@ var SpreePayProvider = ({ children, env }) => {
     }
   }, []);
   const value = {
-    env,
+    // Set default to true for web3 points to backward compatibility
+    env: { ...env, useWeb3Points: env.useWeb3Points ?? true },
     enabled: Boolean(selectedPaymentMethod.method),
     isInternalProcessing,
     process,
@@ -150,6 +151,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.dev.air.shop",
       keycloakUrl: "https://login.dev.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keycloakUrl: "https://sso.dev.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.dev.umusicpassport.com",
+      keycloakUrl: "https://auth.dev.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
@@ -162,6 +173,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.stg.air.shop",
       keycloakUrl: "https://login.stg.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.stg.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.stg.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.stg.umusicpassport.com",
+      keycloakUrl: "https://auth.stg.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
@@ -174,6 +195,16 @@ var CONFIG = {
       slapiUrl: "https://slapi.air.shop",
       keycloakUrl: "https://login.air.shop",
       keycloakClientId: "oneof-next"
+    },
+    qiibee: {
+      slapiUrl: "https://slapi.tickets.qiibeefoundation.org",
+      keycloakUrl: "https://sso.tickets.qiibeefoundation.org",
+      keycloakClientId: "oneof-next"
+    },
+    umhp: {
+      slapiUrl: "https://slapi.umusicpassport.com",
+      keycloakUrl: "https://auth.umusicpassport.com",
+      keycloakClientId: "oneof-next"
     }
   }
 };
@@ -827,7 +858,11 @@ async function longPollCardStatus(paymentId) {
     if (detail.status === "FAILED" /* FAILED */) {
       throw new Error(`Something went wrong with the ${detail.validationType} payment`);
     }
-    if (detail.validationType === "POINTS") {
+    if (
+      // Process to points payment
+      detail.validationType === "POINTS" || // early card payment completion
+      ["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(detail.status)
+    ) {
       return detail.status;
     }
     if (!shown3ds && detail.card?.redirectUrl) {
@@ -844,7 +879,7 @@ async function longPollCardStatus(paymentId) {
 }
 
 // src/hooks/payments/usePointsPayment.ts
-var usePointsPayment = () => {
+var usePointsPayment = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
   const pointsPayment = async (params) => {
@@ -854,31 +889,42 @@ var usePointsPayment = () => {
     const { hash, capture, metadata } = params;
     const { data: paymentResData } = await SlapiPaymentService.createPayment({
       hash,
-      capture,
+      // capture should be always true for web2 points payments
+      capture: mode === "web2" ? true : capture,
       metadata,
       type: "POINTS" /* POINTS */
     });
-    const wallet = peekAirWallet();
-    if (!wallet || !spreePayConfig?.pointsChain) {
-      throw new Error("AirWallet not found");
-    }
-    const transaction = await handleSendErc20({
-      amount: params.points,
-      token: spreePayConfig.pointsChain.pointsCoin,
-      recipient: spreePayConfig.pointsChain.recipientAddress
-    });
-    if (!transaction) {
-      throw new Error("Points transaction failed");
+    if (mode === "web3") {
+      const wallet = peekAirWallet();
+      if (!wallet || !spreePayConfig?.pointsChain) {
+        throw new Error("AirWallet not found");
+      }
+      const transaction = await handleSendErc20({
+        amount: params.points,
+        token: spreePayConfig.pointsChain.pointsCoin,
+        recipient: spreePayConfig.pointsChain.recipientAddress
+      });
+      if (!transaction) {
+        throw new Error("Points transaction failed");
+      }
+      await SlapiPaymentService.validatePoints({
+        paymentId: paymentResData.id,
+        txHash: transaction.txHash
+      });
+      const pointsStatus2 = await longPollPoints(paymentResData.id);
+      return {
+        status: pointsStatus2,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash,
+        paymentId: paymentResData.id,
+        paymentType: "POINTS" /* POINTS */
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
     const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       status: pointsStatus,
       txId: paymentResData.txId,
-      txHash: transaction.txHash,
+      txHash: null,
       paymentId: paymentResData.id,
       paymentType: "POINTS" /* POINTS */
     };
@@ -887,7 +933,7 @@ var usePointsPayment = () => {
 };
 
 // src/hooks/payments/useSplitCardPayments.ts
-var useSplitCardPayments = () => {
+var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
@@ -921,30 +967,39 @@ var useSplitCardPayments = () => {
         amount: points
       }
     });
-    await longPollCardStatus(paymentResData.id);
-    const wallet = peekAirWallet();
-    if (!wallet || !spreePayConfig?.pointsChain) {
-      throw new Error("AirWallet not found");
-    }
-    const transaction = await handleSendErc20({
-      amount: params.points,
-      token: spreePayConfig.pointsChain.pointsCoin,
-      recipient: spreePayConfig.pointsChain.recipientAddress
-    });
-    if (!transaction) {
-      throw new Error("Points transaction failed");
+    const cardStatus = await longPollCardStatus(paymentResData.id);
+    if (mode === "web3") {
+      const wallet = peekAirWallet();
+      if (!wallet || !spreePayConfig?.pointsChain) {
+        throw new Error("AirWallet not found");
+      }
+      const transaction = await handleSendErc20({
+        amount: params.points,
+        token: spreePayConfig.pointsChain.pointsCoin,
+        recipient: spreePayConfig.pointsChain.recipientAddress
+      });
+      if (!transaction) {
+        throw new Error("Points transaction failed");
+      }
+      await SlapiPaymentService.validatePoints({
+        paymentId: paymentResData.id,
+        txHash: transaction.txHash
+      });
+      const pointsStatus = await longPollPoints(paymentResData.id);
+      return {
+        paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
+        status: pointsStatus,
+        paymentId: paymentResData.id,
+        txId: paymentResData.txId,
+        txHash: transaction.txHash
+      };
     }
-    await SlapiPaymentService.validatePoints({
-      paymentId: paymentResData.id,
-      txHash: transaction.txHash
-    });
-    const pointsStatus = await longPollPoints(paymentResData.id);
     return {
       paymentType: "SPLIT" /* CREDIT_CARD_SPLIT */,
-      status: pointsStatus,
+      status: cardStatus,
       paymentId: paymentResData.id,
       txId: paymentResData.txId,
-      txHash: transaction.txHash
+      txHash: null
     };
   };
   return { splitPayment };
@@ -984,7 +1039,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
@@ -998,7 +1053,7 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
       "div",
       {
         className: cn(
-          "flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 border-transparent px-3",
+          "flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
           {
             "border-primary": isSelected
           }
@@ -1041,8 +1096,8 @@ var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-md" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
     ] });
   }
   if (cards.length === 0) return null;
@@ -1402,7 +1457,7 @@ function clamp(value, [min, max]) {
   return Math.min(max, Math.max(min, value));
 }
 
-// ../../node_modules/@radix-ui/react-slider/node_modules/@radix-ui/primitive/dist/index.mjs
+// ../../node_modules/@radix-ui/primitive/dist/index.mjs
 var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -1585,7 +1640,6 @@ function useUncontrolledState({
 function isFunction(value) {
   return typeof value === "function";
 }
-var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
 // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
 var React6 = __toESM(require("react"), 1);
@@ -1676,7 +1730,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
@@ -2305,14 +2359,8 @@ function cn2(...inputs) {
 
 // src/ui/slider.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function Slider2({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}) {
+function Slider2(props) {
+  const { className, defaultValue, value, min = 0, max = 100, ...rest } = props;
   const _values = React12.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
@@ -2329,20 +2377,20 @@ function Slider2({
         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className
       ),
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
-              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+              "relative grow overflow-hidden rounded-full bg-black/15 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               Range,
               {
                 "data-slot": "slider-range",
-                className: cn2("bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
+                className: cn2("absolute bg-black data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full")
               }
             )
           }
@@ -2351,7 +2399,7 @@ function Slider2({
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            className: "border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border-1 border-white bg-black shadow-sm shadow-[#00000033] transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
           },
           index
         ))
@@ -2385,7 +2433,7 @@ var PointsSelector = (props) => {
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border-1 border-transparent", {
         "border-primary": isSelected,
         "cursor-not-allowed opacity-50": isDisabled
       }),
@@ -2459,6 +2507,7 @@ var SplitBlock = (props) => {
   const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { env } = useSpreePayEnv();
+  const prevPointsChainRef = (0, import_react11.useRef)(spreePayConfig?.pointsChain);
   const initWallet = (0, import_react11.useCallback)(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2480,11 +2529,20 @@ var SplitBlock = (props) => {
     [onToggle, env.environment]
   );
   (0, import_react11.useEffect)(() => {
-    setAddress(null);
-    setWalletReady(false);
-    initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig?.pointsChain, initWallet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
+    if (!env.useWeb3Points) return;
+    const pointsChainChanged = prevPointsChainRef.current !== spreePayConfig?.pointsChain;
+    prevPointsChainRef.current = spreePayConfig?.pointsChain;
+    const doInit = async () => {
+      if (pointsChainChanged) {
+        setAddress(null);
+        setWalletReady(false);
+      }
+      await initWallet(spreePayConfig?.pointsChain);
+    };
+    doInit();
+  }, [spreePayConfig?.pointsChain, initWallet, env.useWeb3Points]);
+  const isPointsSelectorDisabled = env.useWeb3Points ? !walletReady : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2537,14 +2595,16 @@ var Points = () => {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
+  const { env } = useSpreePayEnv();
   const { appProps } = useStaticConfig();
   const { spreePayConfig } = useSpreePayConfig();
   const { register } = useSpreePayRegister();
   const { mutateCards } = useCards();
   const { mutateBalance } = useSlapiBalance();
+  const isWeb3Enabled = Boolean(env.useWeb3Points);
   const { cardPayment } = useCardPayment();
-  const { splitPayment } = useSplitCardPayments();
-  const { pointsPayment } = usePointsPayment();
+  const { splitPayment } = useSplitCardPayments(isWeb3Enabled ? "web3" : "web2");
+  const { pointsPayment } = usePointsPayment(isWeb3Enabled ? "web3" : "web2");
   const handlePay = (0, import_react13.useCallback)(
     async (data) => {
       try {
@@ -2565,7 +2625,9 @@ var CreditCardTab = () => {
       } catch (_) {
         return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
       } finally {
-        setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        if ("token" in (selectedPaymentMethod.method || {})) {
+          setSelectedPaymentMethod({ ...selectedPaymentMethod, type: "CREDIT_CARD" /* CREDIT_CARD */, method: null });
+        }
         mutateCards();
         mutateBalance();
       }
@@ -2586,7 +2648,7 @@ var CreditCardTab = () => {
     register(handlePay);
   }, [register, handlePay]);
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreditCard, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CreditCard, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Points, {}) })
   ] });
 };
@@ -2634,10 +2696,13 @@ async function waitForTransactionReceipt(config, parameters) {
   const receipt = await action({ ...rest, timeout });
   if (receipt.status === "reverted") {
     const action_getTransaction = getAction(client, import_actions2.getTransaction, "getTransaction");
-    const txn = await action_getTransaction({ hash: receipt.transactionHash });
+    const { from: account, ...txn } = await action_getTransaction({
+      hash: receipt.transactionHash
+    });
     const action_call = getAction(client, import_actions2.call, "call");
     const code = await action_call({
       ...txn,
+      account,
       data: txn.input,
       gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
       maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
@@ -2950,18 +3015,58 @@ function Input2({ className, type, ...props }) {
 }
 
 // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+var React14 = __toESM(require("react"), 1);
+
+// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
 var React13 = __toESM(require("react"), 1);
+var ReactDOM2 = __toESM(require("react-dom"), 1);
+var import_react_slot5 = require("@radix-ui/react-slot");
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var NODES2 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive2 = NODES2.reduce((primitive, node) => {
+  const Slot2 = (0, import_react_slot5.createSlot)(`Primitive.${node}`);
+  const Node2 = React13.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot2 : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var NAME = "Separator";
 var DEFAULT_ORIENTATION = "horizontal";
 var ORIENTATIONS = ["horizontal", "vertical"];
-var Separator = React13.forwardRef((props, forwardedRef) => {
+var Separator = React14.forwardRef((props, forwardedRef) => {
   const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
   const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
   const ariaOrientation = orientation === "vertical" ? orientation : void 0;
   const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    Primitive.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    Primitive2.div,
     {
       "data-orientation": orientation,
       ...semanticProps,
@@ -2977,14 +3082,14 @@ function isValidOrientation(orientation) {
 var Root6 = Separator;
 
 // ../ui/src/components/separator.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Root6,
     {
       "data-slot": "separator",
@@ -3000,17 +3105,17 @@ function Separator2({
 }
 
 // src/hooks/useBaseERC20Token.ts
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_viem5 = require("viem");
 var import_wagmi2 = require("wagmi");
 function useBaseERC20Token() {
   const { address } = (0, import_wagmi2.useAccount)();
   const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
   const defaultClient = (0, import_wagmi2.usePublicClient)();
-  const [rows, setRows] = React14.useState([]);
-  const [isLoading, setLoading] = React14.useState(false);
-  const [error, setError] = React14.useState(null);
-  React14.useEffect(() => {
+  const [rows, setRows] = React15.useState([]);
+  const [isLoading, setLoading] = React15.useState(false);
+  const [error, setError] = React15.useState(null);
+  React15.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -3091,7 +3196,7 @@ var useBaseTokens = () => {
 };
 
 // src/modals/CryptoSelectModal.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
   const modal = (0, import_nice_modal_react4.useModal)();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
@@ -3110,14 +3215,14 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
   };
   const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
   const userCoinSymbols = userCoins.map((c) => c.symbol);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "path",
             {
               fill: "#000",
@@ -3125,22 +3230,22 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Separator2, { className: "hidden md:block" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+          isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "button",
             {
               className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
               onClick: () => handleSelect(nativeBalance),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     "img",
                     {
                       className: "h-8 w-8 shrink-0",
@@ -3148,53 +3253,53 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
                       alt: `${nativeBalance.symbol} logo`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "button",
               {
                 className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
                 onClick: () => handleSelect(coin),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
             );
           })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-          tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+          tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
-          filteredCoins.map((token) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          filteredCoins.map((token) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             "button",
             {
               disabled: !userCoinSymbols.includes(token.symbol),
               onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
               className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-                token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
+                token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
               ] })
             },
             token.symbol
@@ -3207,44 +3312,44 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var SelectCoinButton = () => {
   const openModal = () => {
     import_nice_modal_react5.default.show(CryptoSelectModal);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-1", children: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "font-semibold text-black", children: coin }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-black", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Crypto = () => {
   const { address } = (0, import_wagmi4.useAccount)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -3268,14 +3373,14 @@ var Crypto = () => {
   (0, import_react15.useEffect)(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
-    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    !isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -3283,13 +3388,13 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SelectCoinButton, {})
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
 var CHAINS = [import_chains.base];
 var wagmiConfigCache = /* @__PURE__ */ new Map();
@@ -3304,36 +3409,34 @@ function getCachedWagmiConfig(projectId, appName) {
 }
 var CryptoWrapper = () => {
   const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-  const [wagmiConfig, setWagmiConfig] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
-    if (!spreePayConfig) return;
-    const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
-    setWagmiConfig((prev) => prev ? prev : cfg2);
+  const wagmiConfig = (0, import_react16.useMemo)(() => {
+    if (!spreePayConfig) return null;
+    return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
   }, [spreePayConfig]);
   if (configIsLoading || !wagmiConfig) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var CryptoTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CryptoWrapper, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "button",
     {
       disabled: isDisabled,
       onClick,
       className: cn(
-        "flex w-[132px] flex-col items-baseline rounded-sm border-1 border-black/50 px-2.5 py-1.5 text-sm text-black",
+        "flex w-[132px] flex-col items-baseline rounded-sm border border-black/50 px-2.5 py-1.5 text-sm text-black",
         { "opacity-50": !isActive || isDisabled },
         { "cursor-not-allowed": isDisabled },
         { "bg-primary/7 border-primary text-primary": isActive }
@@ -3344,83 +3447,71 @@ var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
 };
 var TabButtons = (props) => {
   const { value, onChange } = props;
-  const { spreePayConfig } = useSpreePayConfig();
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
   const handleChange = (type) => () => {
     if (value !== type) {
       onChange({ type, method: null });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
-        onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
-        isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            "path",
-            {
-              fill: "currentColor",
-              d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.crypto.enabled,
-        onClick: handleChange("CRYPTO" /* CRYPTO */),
-        isActive: value === "CRYPTO" /* CRYPTO */,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "path",
-              {
-                fill: "currentColor",
-                d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              "path",
-              {
-                fill: "currentColor",
-                d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
-        ]
-      }
-    )
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2", children: [
+    configIsLoading && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
+    ] }),
+    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium", children: "Card" })
+    ] }),
+    spreePayConfig?.crypto.enabled && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
+    ] })
   ] });
 };
 
 // src/components/Tabs.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Tabs = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
-    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CreditCardTab, {}),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CryptoTab, {})
   ] });
 };
 
 // src/SpreePayContent.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var SpreePayContent = ({ isLoggedIn }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tabs, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreeLegal, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tabs, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CheckoutButton, { isLoggedIn }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
   ] });
 };
 
@@ -3433,6 +3524,8 @@ function useKeycloakSSO(config) {
   const initRef = (0, import_react17.useRef)(false);
   const kcRef = (0, import_react17.useRef)(null);
   const refreshTimerRef = (0, import_react17.useRef)(null);
+  const scheduleRefreshRef = (0, import_react17.useRef)(() => {
+  });
   const [error, setError] = (0, import_react17.useState)(null);
   const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
   const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
@@ -3450,17 +3543,19 @@ function useKeycloakSSO(config) {
       kc.updateToken(refreshAheadSeconds).then((refreshed) => {
         if (refreshed) {
           setAccessToken(kc.token ?? null);
-          scheduleRefresh();
+          scheduleRefreshRef.current();
         }
       }).catch((_) => {
         kc.login().catch(console.error);
       });
     }, delayMs);
   }, []);
+  (0, import_react17.useEffect)(() => {
+    scheduleRefreshRef.current = scheduleRefresh;
+  }, [scheduleRefresh]);
   (0, import_react17.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
-    setIsChecking(true);
     const kc = new import_keycloak_js.default({ url, realm, clientId });
     kcRef.current = kc;
     kc.onTokenExpired = () => {
@@ -3492,13 +3587,12 @@ function useKeycloakSSO(config) {
 }
 
 // src/SpreePay.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var SpreePayInner = () => {
-  const rootRef = (0, import_react18.useRef)(null);
   const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
-  (0, import_react18.useLayoutEffect)(() => {
-    if (!rootRef.current) return;
-    const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
+  const rootRef = (0, import_react18.useCallback)((node) => {
+    if (!node) return;
+    const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
   (0, import_react18.useEffect)(() => {
@@ -3506,7 +3600,7 @@ var SpreePayInner = () => {
   }, []);
   const { env } = useSpreePayEnv();
   const { staticConfig, appProps } = useStaticConfig();
-  const tenantId = env?.tenantId || "bookit";
+  const tenantId = env?.tenantId;
   const { isChecking, accessToken } = useKeycloakSSO({
     realm: tenantId,
     url: staticConfig.keycloakUrl,
@@ -3526,13 +3620,13 @@ var SpreePayInner = () => {
   }, [_accessToken, staticConfig, tenantId]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreeLegal, {})
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_swr5.SWRConfig,
       {
         value: {
@@ -3541,17 +3635,17 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayInner, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SpreePayInner, {}) });
 };
 
 // src/hooks/useCapture3DS.ts