npm - @superlogic/spree-pay - Versions diffs - 0.1.34 → 0.1.36 - Mend

@superlogic/spree-pay 0.1.34 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/build/index.js CHANGED Viewed

@@ -1,10 +1,10 @@
 // src/SpreePay.tsx
-import { useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useMemo as useMemo9, useRef as useRef7, useState as useState15 } from "react";
-import NiceModal7 from "@ebay/nice-modal-react";
+import { useCallback as useCallback8, useEffect as useEffect11, useMemo as useMemo10, useState as useState14 } from "react";
+import NiceModal8 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 // package.json
-var version = "0.1.34";
+var version = "0.1.36";
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -99,8 +99,9 @@ var useSpreePayRegister = () => {
 // src/context/StaticConfigContext.tsx
 import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState as useState2 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var CONFIG = {
+// src/context/config.ts
+var config = {
   dev: {
     bookit: {
       slapiUrl: "https://slapi.dev.superlogic.com",
@@ -116,6 +117,16 @@ var CONFIG = {
       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"
+    },
+    cdc: {
+      slapiUrl: "https://slapi.dev.superlogic.com",
+      keycloakUrl: "https://auth.dev02.superlogic.com",
+      keycloakClientId: "oneof-next"
     }
   },
   stg: {
@@ -133,6 +144,16 @@ var CONFIG = {
       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"
+    },
+    cdc: {
+      slapiUrl: "https://slapi.stg.superlogic.com",
+      keycloakUrl: "https://auth.stg02.superlogic.com",
+      keycloakClientId: "oneof-next"
     }
   },
   prod: {
@@ -150,9 +171,22 @@ var CONFIG = {
       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"
+    },
+    cdc: {
+      slapiUrl: "https://slapi.superlogic.com",
+      keycloakUrl: "https://auth.superlogic.com",
+      keycloakClientId: "oneof-next"
     }
   }
 };
+// src/context/StaticConfigContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var StaticConfigContext = createContext2(null);
 var StaticConfigProvider = ({ children, props }) => {
   const { env } = useSpreePayEnv();
@@ -161,8 +195,12 @@ var StaticConfigProvider = ({ children, props }) => {
     setAppProps(props);
   }, [props]);
   const staticConfig = useMemo(() => {
-    const envConfig = CONFIG[env.environment];
-    const appKey = env.tenantId in envConfig ? env.tenantId : "moca";
+    const envConfig = config[env.environment];
+    const isKnownTenant = env.tenantId in envConfig;
+    if (!isKnownTenant) {
+      console.warn(`[spree-pay] Unknown tenantId "${env.tenantId}", falling back to "moca"`);
+    }
+    const appKey = isKnownTenant ? env.tenantId : "moca";
     return envConfig[appKey];
   }, [env.environment, env.tenantId]);
   return /* @__PURE__ */ jsx2(StaticConfigContext.Provider, { value: { staticConfig, appProps }, children });
@@ -330,50 +368,38 @@ var CheckoutButton = ({ isLoggedIn }) => {
     }
     return "Checkout";
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col overflow-hidden rounded-3xl border border-black/25 bg-white text-xs font-medium", children: [
-    /* @__PURE__ */ jsx4("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs2("p", { className: "text-black/50", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-4 bg-white p-6 text-xs font-medium text-[#45505B] md:px-7", children: [
+    /* @__PURE__ */ jsxs2("p", { className: "text-center", children: [
       "By clicking on the button below I acknowledge that I have read and accepted the",
       " ",
       /* @__PURE__ */ jsx4("a", { className: "underline", href: spreePayConfig?.termsConditionsUrl, target: "_blank", rel: "noreferrer", children: "Terms and Conditions" }),
       "."
-    ] }) }),
+    ] }),
     isLoggedIn ? /* @__PURE__ */ jsx4(Fragment, { children: onProcess && /* @__PURE__ */ jsx4(
       "button",
       {
         disabled: isDisabled,
         onClick: onProcess,
-        className: "bg-primary h-[60px] w-full cursor-pointer text-xl font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
+        className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
         children: getCheckoutContent()
       }
     ) }) : /* @__PURE__ */ jsx4(
       "a",
       {
         href: `${staticConfig.keycloakUrl}/realms/${env.tenantId}/protocol/openid-connect/auth?client_id=${staticConfig.keycloakClientId}&response_type=code&redirect_uri=${window.location.href}`,
-        className: "bg-primary h-[60px] w-full cursor-pointer text-center text-xl leading-[60px] font-semibold text-white disabled:cursor-not-allowed disabled:opacity-50",
+        className: "bg-primary w-full cursor-pointer rounded-4xl p-4 text-center text-xl leading-6 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50",
         children: "Log in / Sign up for an AIR account"
       }
-    )
-  ] });
-};
-// src/components/SpreeLegal.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var SpreeLegal = () => {
-  return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex items-center gap-4", children: [
-    /* @__PURE__ */ jsx5("svg", { className: "flex-shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx5(
-      "path",
-      {
-        fill: "#000",
-        fillOpacity: ".5",
-        d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs3("p", { className: "text-xs text-black/50", children: [
-      "Spree enables seamless crypto payments for real-world goods, travel, and experiences. Enjoy secure, fast transactions and earn rewards.",
-      " ",
-      /* @__PURE__ */ jsx5("a", { className: "underline", href: "https://www.spree.finance/", target: "_blank", rel: "noreferrer", children: "Learn more" }),
-      " ",
-      "about Spree."
+    ),
+    /* @__PURE__ */ jsxs2("a", { href: "https://www.spree.finance/", className: "flex items-center justify-center gap-2 hover:underline", children: [
+      /* @__PURE__ */ jsx4("p", { children: "Powered by" }),
+      /* @__PURE__ */ jsx4("svg", { className: "shrink-0", xmlns: "http://www.w3.org/2000/svg", width: "66", height: "30", fill: "none", children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M57.79 25.48a4.82 4.82 0 0 1-1.55-.25l.55-1.86c.34.1.65.15.92.15s.51-.1.72-.26c.21-.16.39-.43.53-.81l.2-.55-3.65-10.3h2.52l2.32 7.62h.1l2.34-7.62h2.53l-4.04 11.31c-.19.54-.44 1-.75 1.38-.31.38-.7.68-1.14.88-.45.2-.98.3-1.6.3ZM48.95 21.9a4.2 4.2 0 0 1-1.73-.35c-.5-.23-.9-.57-1.2-1.02a3 3 0 0 1-.44-1.67 2.44 2.44 0 0 1 1.18-2.3c.35-.23.76-.4 1.22-.5.46-.13.93-.21 1.42-.27l1.44-.16c.37-.05.64-.13.8-.24.18-.1.26-.27.26-.5v-.04c0-.5-.15-.88-.44-1.15-.3-.27-.72-.4-1.27-.4-.58 0-1.04.12-1.38.37-.34.26-.57.56-.69.9l-2.22-.31a3.54 3.54 0 0 1 2.35-2.47 6.29 6.29 0 0 1 3.38-.14c.48.1.92.3 1.32.56.4.26.72.6.96 1.06.25.44.37 1 .37 1.67v6.75h-2.29v-1.38h-.08a2.9 2.9 0 0 1-1.59 1.37c-.39.14-.84.22-1.37.22Zm.62-1.75c.48 0 .89-.1 1.24-.28.35-.2.62-.45.8-.77.2-.31.3-.65.3-1.03V16.9c-.08.06-.2.11-.38.17a18.34 18.34 0 0 1-1.8.32c-.36.05-.68.12-.96.23-.28.11-.5.27-.66.46-.16.2-.24.45-.24.75 0 .44.16.77.48 1 .32.22.72.33 1.22.33ZM34.43 21.7V8.23h5.05c1.03 0 1.9.2 2.6.58.7.38 1.23.91 1.6 1.59.36.67.54 1.43.54 2.28 0 .87-.18 1.63-.55 2.3a3.9 3.9 0 0 1-1.6 1.59c-.72.38-1.59.57-2.63.57H36.1v-2h3.01c.6 0 1.1-.11 1.49-.32.38-.21.67-.5.85-.87.2-.37.29-.79.29-1.27 0-.47-.1-.9-.29-1.26a1.92 1.92 0 0 0-.86-.84c-.38-.2-.88-.31-1.49-.31h-2.23v11.41h-2.44ZM14.54.46a14.54 14.54 0 1 1 0 29.08 14.54 14.54 0 0 1 0-29.08ZM5.59 18.12l-.84 3.35h.83l.84-3.35h-.83Zm1.66 0-.83 3.35h1.66l.84-3.35H7.25Zm3.35-9.58c-1.03 0-2.08.84-2.34 1.87l-1.1 4.4c-.26 1.03.37 1.87 1.4 1.87h9.64l-.34 1.44h-8.1l-.85 3.35h9.6c1.04 0 2.1-.85 2.35-1.89l1.05-4.4c.25-1.03-.38-1.85-1.4-1.85h-9.63l.36-1.44h8.13l.84-3.35H10.6Zm10.44 0-.84 3.35h1.67l.83-3.35h-1.66Zm2.5 0-.84 3.35h.83l.84-3.35h-.83Z"
+        }
+      ) })
     ] })
   ] });
 };
@@ -420,17 +446,17 @@ function usePortalContainer() {
 }
 // src/ui/dialog.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Dialog({ ...props }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx5(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
   const container = usePortalContainer();
   const safeContainer = container && document.body.contains(container) ? container : void 0;
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { container: safeContainer, "data-slot": "dialog-portal", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -448,9 +474,9 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsx6(DialogOverlay, {}),
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx5(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs3(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -461,14 +487,14 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs4(
+          showCloseButton && /* @__PURE__ */ jsxs3(
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
               className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
-                /* @__PURE__ */ jsx6(XIcon, {}),
-                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx5(XIcon, {}),
+                /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -478,7 +504,7 @@ function DialogContent({
   ] });
 }
 function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -488,7 +514,7 @@ function DialogTitle({ className, ...props }) {
   );
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -499,7 +525,7 @@ function DialogDescription({ className, ...props }) {
 }
 // src/modals/Iframe3ds.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Iframe3ds = NiceModal.create(({ url }) => {
   const modal = useModal();
   useEffect2(() => {
@@ -512,9 +538,9 @@ var Iframe3ds = NiceModal.create(({ url }) => {
     modal.reject();
     modal.remove();
   };
-  return /* @__PURE__ */ jsx7(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs5(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
-    /* @__PURE__ */ jsx7(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
-    /* @__PURE__ */ jsx7("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
+  return /* @__PURE__ */ jsx6(Dialog, { open: modal.visible, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs4(DialogContent, { className: "max-h-[600px] w-full max-w-[680px] p-0", children: [
+    /* @__PURE__ */ jsx6(DialogTitle, { className: "hidden", children: "3D Secure Verification" }),
+    /* @__PURE__ */ jsx6("iframe", { src: url, id: "3ds-iframe", title: "3D Secure Checkout", className: "h-[500px] w-full rounded-lg border-0" })
   ] }) });
 });
 Iframe3ds.displayName = "Iframe3ds";
@@ -585,10 +611,10 @@ var slapiApi = {
     throw new Error("slapiApi is not configured. Call registerApi(...) first.");
   }
 };
-var registerApi = (config) => {
-  cfg.baseUrl = config.baseUrl;
-  cfg.accessToken = config.accessToken;
-  cfg.tenantId = config.tenantId;
+var registerApi = (config2) => {
+  cfg.baseUrl = config2.baseUrl;
+  cfg.accessToken = config2.accessToken;
+  cfg.tenantId = config2.tenantId;
   slapiApi = {
     get: async (key) => {
       const url = buildUrl(key);
@@ -878,6 +904,7 @@ var usePointsPayment = (mode = "web2") => {
 };
 // src/hooks/payments/useSplitCardPayments.ts
+import NiceModal4 from "@ebay/nice-modal-react";
 var useSplitCardPayments = (mode = "web2") => {
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
@@ -912,6 +939,12 @@ var useSplitCardPayments = (mode = "web2") => {
         amount: points
       }
     });
+    if (paymentResData.redirectUrl) {
+      const paymentIntent = await NiceModal4.show(Iframe3ds, { url: paymentResData.redirectUrl });
+      if (paymentIntent) {
+        await SlapiPaymentService.validate3DS({ paymentId: paymentResData.id });
+      }
+    }
     const cardStatus = await longPollCardStatus(paymentResData.id);
     if (mode === "web3") {
       const wallet = peekAirWallet();
@@ -974,7 +1007,7 @@ import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 // src/components/CreditCardTab/CreditCard/CardsList.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var isRemoveDisabled = true;
 var CardListItem = ({ card, isSelected, onSelect }) => {
   const handleSelect = () => {
@@ -984,30 +1017,33 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
     e.stopPropagation();
     if (isSelected || isRemoveDisabled) return;
   };
-  return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5("button", { type: "button", onClick: handleSelect, className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-sm", children: [
+    /* @__PURE__ */ jsx7(
       "div",
       {
         className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
           "bg-primary": isSelected
         }),
-        children: /* @__PURE__ */ jsx8("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx8("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+        children: /* @__PURE__ */ jsx7("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx7("div", { className: "bg-primary size-2.5 rounded-full" }) })
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs5(
       "div",
       {
-        className: cn("flex h-full w-full items-center justify-between border-1 !border-l-0 border-transparent px-3", {
-          "border-primary": isSelected
-        }),
+        className: cn(
+          "flex h-full w-full items-center justify-between rounded-r-sm border border-l-0! border-transparent px-3",
+          {
+            "border-primary": isSelected
+          }
+        ),
         children: [
-          /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs6("p", { className: "text-sm font-medium text-black/50", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx7("p", { className: "text-sm font-medium text-black", children: card.schema }) }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs5("p", { className: "text-sm font-medium text-black/50", children: [
               "Ending in ",
-              /* @__PURE__ */ jsx8("span", { className: "text-black", children: card.lastFourNumbers })
+              /* @__PURE__ */ jsx7("span", { className: "text-black", children: card.lastFourNumbers })
             ] }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 onClick: handleRemoveCard,
@@ -1015,9 +1051,9 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
                   "cursor-not-allowed opacity-50": isSelected || isRemoveDisabled
                   // 'cursor-pointer': !isSelected || !isRemoveDisabled,
                 }),
-                children: /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
-                  /* @__PURE__ */ jsx8("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx8("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
-                  /* @__PURE__ */ jsx8("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", fill: "none", children: [
+                  /* @__PURE__ */ jsx7("mask", { id: "mask0_188_5407", width: "20", height: "21", x: "0", y: "-1", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx7("path", { fill: "#D9D9D9", d: "M0-.5h20v20H0z" }) }),
+                  /* @__PURE__ */ jsx7("g", { mask: "url(#mask0_188_5407)", children: /* @__PURE__ */ jsx7(
                     "path",
                     {
                       fill: "#000",
@@ -1037,13 +1073,13 @@ var CardListItem = ({ card, isSelected, onSelect }) => {
 var CardsList = ({ selectedCard, setCard }) => {
   const { cards, cardsIsLoading } = useCards();
   if (cardsIsLoading) {
-    return /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
-      /* @__PURE__ */ jsx8("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
+    return /* @__PURE__ */ jsxs5("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx7("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" }),
+      /* @__PURE__ */ jsx7("div", { className: "bg-primary/8 h-11 animate-pulse rounded-sm" })
     ] });
   }
   if (cards.length === 0) return null;
-  return /* @__PURE__ */ jsx8("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx8(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
+  return /* @__PURE__ */ jsx7("div", { className: "flex w-full flex-col gap-1", children: cards.map((card) => /* @__PURE__ */ jsx7(CardListItem, { isSelected: selectedCard?.id === card.id, onSelect: setCard, card }, card.id)) });
 };
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
@@ -1053,7 +1089,7 @@ import { CardCvcElement, CardExpiryElement, CardNumberElement, useElements, useS
 // src/ui/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -1088,15 +1124,15 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx9(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+  return /* @__PURE__ */ jsx8(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
 }
 // src/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -1105,12 +1141,12 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx9(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ jsx10(CheckIcon, { className: "size-3.5 text-white" })
+          children: /* @__PURE__ */ jsx9(CheckIcon, { className: "size-3.5 text-white" })
         }
       )
     }
@@ -1119,9 +1155,9 @@ function Checkbox({ className, ...props }) {
 // src/ui/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -1135,7 +1171,7 @@ function Label({ className, ...props }) {
 }
 // src/components/CreditCardTab/CreditCard/CreditCardForm.tsx
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var style = {
   base: {
     fontSize: "16px",
@@ -1193,9 +1229,9 @@ var CreditCardForm = ({ cancel, saveCard }) => {
       setCardError("An error occurred while processing your card. Please try again.");
     }
   };
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-1", children: [
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-1", children: [
+      /* @__PURE__ */ jsx11(
         CardNumberElement,
         {
           options: {
@@ -1205,8 +1241,8 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "flex w-full gap-1", children: [
-        /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsxs6("div", { className: "flex w-full gap-1", children: [
+        /* @__PURE__ */ jsx11(
           CardExpiryElement,
           {
             options: {
@@ -1216,7 +1252,7 @@ var CreditCardForm = ({ cancel, saveCard }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx11(
           CardCvcElement,
           {
             options: {
@@ -1227,24 +1263,24 @@ var CreditCardForm = ({ cancel, saveCard }) => {
           }
         )
       ] }),
-      cardError && /* @__PURE__ */ jsx12("p", { className: "text-destructive mt-1 text-sm", children: cardError })
+      cardError && /* @__PURE__ */ jsx11("p", { className: "text-destructive mt-1 text-sm", children: cardError })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx12(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
-      /* @__PURE__ */ jsx12(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx11(Checkbox, { disabled: true, checked: true, id: "saveCard" }),
+      /* @__PURE__ */ jsx11(Label, { className: "text-sm font-medium", htmlFor: "saveCard", children: "Save card for future purchases" })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex w-full justify-end gap-2", children: [
-      /* @__PURE__ */ jsx12(Button, { variant: "secondary", onClick: cancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx12(Button, { onClick: handleSaveCard, children: "Add Card" })
+    /* @__PURE__ */ jsxs6("div", { className: "flex w-full justify-end gap-2", children: [
+      /* @__PURE__ */ jsx11(Button, { variant: "outline", className: "hover:bg-gray-100", onClick: cancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx11(Button, { onClick: handleSaveCard, children: "Add Card" })
     ] })
   ] });
 };
 // src/components/CreditCardTab/CreditCard/CreditCard.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var StripeWrapper = (props) => {
   const stripePromise = useMemo2(() => loadStripe(props.publicKey), [props.publicKey]);
-  return /* @__PURE__ */ jsx13(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx13(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
+  return /* @__PURE__ */ jsx12(Elements, { stripe: stripePromise, children: /* @__PURE__ */ jsx12(CreditCardForm, { cancel: props.onCancel, saveCard: props.saveNewCard }) });
 };
 var CreditCard = () => {
   const [showForm, setShowForm] = useState4(false);
@@ -1262,19 +1298,19 @@ var CreditCard = () => {
   const handleCancel = () => {
     setShowForm(false);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ jsx13("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Credit Cards" }),
-    !showForm && /* @__PURE__ */ jsxs8(Fragment3, { children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ jsx12("h3", { className: "text-primary text-xl leading-[34px] font-semibold", children: "Your Cards" }),
+    !showForm && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx12(
         CardsList,
         {
           selectedCard: selectedPaymentMethod?.type === "CREDIT_CARD" /* CREDIT_CARD */ ? selectedPaymentMethod.method : null,
           setCard
         }
       ),
-      spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx13("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
+      spreePayConfig?.stripePublicKey && /* @__PURE__ */ jsx12("button", { onClick: () => setShowForm(true), className: "text-sm font-medium text-black hover:underline", children: "Add new card" })
     ] }),
-    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx13(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
+    spreePayConfig?.stripePublicKey && showForm && /* @__PURE__ */ jsx12(StripeWrapper, { onCancel: handleCancel, saveNewCard, publicKey: spreePayConfig.stripePublicKey })
   ] });
 };
@@ -1286,9 +1322,9 @@ import { useId as useId2 } from "react";
 // src/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx13(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -1297,7 +1333,7 @@ function Switch({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx13(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -1309,35 +1345,35 @@ function Switch({ className, ...props }) {
 }
 // src/components/common/PointsSwitch.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var PointsSwitch = (props) => {
   const { disabled = false, value, onChange, message } = props;
   const { spreePayConfig } = useSpreePayConfig();
   const { appProps } = useStaticConfig();
   const { balance } = useSlapiBalance();
   const id = useId2();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx15(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-        /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx14(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
+        /* @__PURE__ */ jsxs8(
           Label,
           {
             htmlFor: id,
             className: "text-md flex-col items-baseline gap-0 leading-[1.3] font-semibold text-black sm:flex-row sm:gap-2 md:text-lg",
             children: [
               "Use Points ",
-              /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
+              /* @__PURE__ */ jsx14("span", { className: "text-xs font-medium", children: "Optional" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5", children: [
-        balance?.availablePoints ? /* @__PURE__ */ jsxs9("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ jsxs8("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
           formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx14("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
         ] }) : null,
-        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx15(
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx14(
           "a",
           {
             className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
@@ -1349,30 +1385,30 @@ var PointsSwitch = (props) => {
         )
       ] })
     ] }),
-    message && /* @__PURE__ */ jsxs9("div", { className: "flex gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
-      /* @__PURE__ */ jsx15("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx15(
+    message && /* @__PURE__ */ jsxs8("div", { className: "flex gap-1 rounded-sm border border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+      /* @__PURE__ */ jsx14("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx14(
         "path",
         {
           fill: "#000",
           d: "M9.6 13.8h.8V9.2h-.8zM10 8q.2 0 .4-.2l.1-.3-.1-.4L10 7l-.4.1-.1.4.1.3zm0 9.5a7 7 0 0 1-5.3-2.2 8 8 0 0 1-1.6-8.2 8 8 0 0 1 4-4q1.4-.6 2.9-.6a7 7 0 0 1 5.3 2.2 8 8 0 0 1 1.6 8.2 8 8 0 0 1-4 4q-1.4.6-2.9.6m0-.8q2.8 0 4.7-2 2-1.9 2-4.7t-2-4.7a6 6 0 0 0-4.7-2q-2.8 0-4.7 2a6 6 0 0 0-2 4.7q0 2.8 2 4.7 1.9 2 4.7 2"
         }
       ) }),
-      /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium text-black", children: message })
+      /* @__PURE__ */ jsx14("p", { className: "text-xs font-medium text-black", children: message })
     ] })
   ] });
 };
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef6, useState as useState9 } from "react";
 import { BUILD_ENV as BUILD_ENV2 } from "@mocanetwork/airkit";
 // src/components/CreditCardTab/Points/PointsSelector.tsx
 import { useState as useState8 } from "react";
 // src/ui/input.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx15(
     "input",
     {
       type,
@@ -1399,7 +1435,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) {
@@ -1449,7 +1485,7 @@ function useComposedRefs(...refs) {
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 import * as React3 from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -1460,7 +1496,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index] || BaseContext;
       const value = React3.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ jsx17(Context.Provider, { value, children });
+      return /* @__PURE__ */ jsx16(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -1582,11 +1618,10 @@ 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
 import * as React6 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var DirectionContext = React6.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React6.useContext(DirectionContext);
@@ -1647,7 +1682,7 @@ function useSize(element) {
 import * as React9 from "react";
 import * as ReactDOM from "react-dom";
 import { createSlot } from "@radix-ui/react-slot";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var NODES = [
   "a",
   "button",
@@ -1673,9 +1708,9 @@ 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__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx18(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -1684,7 +1719,7 @@ var Primitive = NODES.reduce((primitive, node) => {
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
 import React10 from "react";
 import { createSlot as createSlot2 } from "@radix-ui/react-slot";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 import React23 from "react";
 import { createSlot as createSlot22 } from "@radix-ui/react-slot";
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -1699,7 +1734,7 @@ function createCollection(name) {
     const { scope, children } = props;
     const ref = React10.useRef(null);
     const itemMap = React10.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ jsx20(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    return /* @__PURE__ */ jsx19(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
@@ -1709,7 +1744,7 @@ function createCollection(name) {
       const { scope, children } = props;
       const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ jsx20(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ jsx19(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
@@ -1726,7 +1761,7 @@ function createCollection(name) {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ jsx20(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ jsx19(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
@@ -1752,7 +1787,7 @@ function createCollection(name) {
 }
 // ../../node_modules/@radix-ui/react-slider/dist/index.mjs
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var PAGE_KEYS = ["PageUp", "PageDown"];
 var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 var BACK_KEYS = {
@@ -1830,7 +1865,7 @@ var Slider = React11.forwardRef(
         }
       });
     }
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       SliderProvider,
       {
         scope: props.__scopeSlider,
@@ -1843,7 +1878,7 @@ var Slider = React11.forwardRef(
         values,
         orientation,
         form,
-        children: /* @__PURE__ */ jsx21(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx20(Collection.Provider, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx20(Collection.Slot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx20(
           SliderOrientation,
           {
             "aria-disabled": disabled,
@@ -1912,7 +1947,7 @@ var SliderHorizontal = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.left);
     }
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -1920,7 +1955,7 @@ var SliderHorizontal = React11.forwardRef(
         endEdge: isSlidingFromLeft ? "right" : "left",
         direction: isSlidingFromLeft ? 1 : -1,
         size: "width",
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx20(
           SliderImpl,
           {
             dir: direction,
@@ -1978,7 +2013,7 @@ var SliderVertical = React11.forwardRef(
       rectRef.current = rect;
       return value(pointerPosition - rect.top);
     }
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       SliderOrientationProvider,
       {
         scope: props.__scopeSlider,
@@ -1986,7 +2021,7 @@ var SliderVertical = React11.forwardRef(
         endEdge: isSlidingFromBottom ? "top" : "bottom",
         size: "height",
         direction: isSlidingFromBottom ? 1 : -1,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx20(
           SliderImpl,
           {
             "data-orientation": "vertical",
@@ -2032,7 +2067,7 @@ var SliderImpl = React11.forwardRef(
       ...sliderProps
     } = props;
     const context = useSliderContext(SLIDER_NAME, __scopeSlider);
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       Primitive.span,
       {
         ...sliderProps,
@@ -2079,7 +2114,7 @@ var SliderTrack = React11.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSlider, ...trackProps } = props;
     const context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       Primitive.span,
       {
         "data-disabled": context.disabled ? "" : void 0,
@@ -2105,7 +2140,7 @@ var SliderRange = React11.forwardRef(
     );
     const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
     const offsetEnd = 100 - Math.max(...percentages);
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       Primitive.span,
       {
         "data-orientation": context.orientation,
@@ -2132,7 +2167,7 @@ var SliderThumb = React11.forwardRef(
       () => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
       [getItems, thumb]
     );
-    return /* @__PURE__ */ jsx21(SliderThumbImpl, { ...props, ref: composedRefs, index });
+    return /* @__PURE__ */ jsx20(SliderThumbImpl, { ...props, ref: composedRefs, index });
   }
 );
 var SliderThumbImpl = React11.forwardRef(
@@ -2157,7 +2192,7 @@ var SliderThumbImpl = React11.forwardRef(
         };
       }
     }, [thumb, context.thumbs]);
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs9(
       "span",
       {
         style: {
@@ -2166,7 +2201,7 @@ var SliderThumbImpl = React11.forwardRef(
           [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
         },
         children: [
-          /* @__PURE__ */ jsx21(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx20(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx20(
             Primitive.span,
             {
               role: "slider",
@@ -2186,7 +2221,7 @@ var SliderThumbImpl = React11.forwardRef(
               })
             }
           ) }),
-          isFormControl && /* @__PURE__ */ jsx21(
+          isFormControl && /* @__PURE__ */ jsx20(
             SliderBubbleInput,
             {
               name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
@@ -2219,7 +2254,7 @@ var SliderBubbleInput = React11.forwardRef(
         input.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx20(
       Primitive.input,
       {
         style: { display: "none" },
@@ -2301,14 +2336,14 @@ function cn2(...inputs) {
 }
 // src/ui/slider.tsx
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 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]
   );
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs10(
     Root5,
     {
       "data-slot": "slider",
@@ -2322,14 +2357,14 @@ function Slider2(props) {
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx21(
           Track,
           {
             "data-slot": "slider-track",
             className: cn2(
               "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__ */ jsx23(
+            children: /* @__PURE__ */ jsx21(
               Range,
               {
                 "data-slot": "slider-range",
@@ -2338,11 +2373,11 @@ function Slider2(props) {
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx23(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx21(
           Thumb2,
           {
             "data-slot": "slider-thumb",
-            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"
+            className: "ring-ring/50 block size-5 shrink-0 rounded-full border 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
         ))
@@ -2352,7 +2387,7 @@ function Slider2(props) {
 }
 // src/components/CreditCardTab/Points/PointsSelector.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var PointsSelector = (props) => {
   const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
@@ -2371,31 +2406,31 @@ var PointsSelector = (props) => {
   };
   const pointsValue = String(Math.round(splitTokens));
   const usdValue = formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage));
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "button",
     {
       disabled: isDisabled,
       onClick: onSelect,
-      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border-1 border-transparent", {
+      className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-sm border border-transparent", {
         "border-primary": isSelected,
         "cursor-not-allowed opacity-50": isDisabled
       }),
       children: [
-        /* @__PURE__ */ jsxs12("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
-          /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsxs11("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: cn("flex h-full w-11 items-center justify-center bg-black/10", {
                 "bg-primary": isSelected
               }),
-              children: /* @__PURE__ */ jsx24("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx24("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
+              children: /* @__PURE__ */ jsx23("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ jsx23("div", { className: "bg-primary size-2.5 rounded-full" }) })
             }
           ),
-          /* @__PURE__ */ jsx24("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
+          /* @__PURE__ */ jsx23("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ jsx24("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx24(
+        isSelected && /* @__PURE__ */ jsx23("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ jsxs11("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx23(
               Input,
               {
                 readOnly: true,
@@ -2406,9 +2441,9 @@ var PointsSelector = (props) => {
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
+            /* @__PURE__ */ jsx23("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Points" })
           ] }),
-          /* @__PURE__ */ jsx24("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23("div", { className: "flex w-full items-center pb-6", children: /* @__PURE__ */ jsx23(
             Slider2,
             {
               value: [splitTokens],
@@ -2420,8 +2455,8 @@ var PointsSelector = (props) => {
               step
             }
           ) }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx23(
               Input,
               {
                 readOnly: true,
@@ -2432,7 +2467,7 @@ var PointsSelector = (props) => {
                 onClick: (e) => e.stopPropagation()
               }
             ),
-            /* @__PURE__ */ jsx24("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
+            /* @__PURE__ */ jsx23("p", { className: "text-left text-xs leading-[20px] text-black/45", children: "Card" })
           ] })
         ] }) })
       ]
@@ -2441,7 +2476,7 @@ var PointsSelector = (props) => {
 };
 // src/components/CreditCardTab/Points/SplitBlock.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var SplitBlock = (props) => {
   const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
@@ -2450,6 +2485,7 @@ var SplitBlock = (props) => {
   const [walletReady, setWalletReady] = useState9(false);
   const { pointsConversionRatio, pointsTitle } = spreePayConfig || {};
   const { env } = useSpreePayEnv();
+  const prevPointsChainRef = useRef6(spreePayConfig?.pointsChain);
   const initWallet = useCallback4(
     async (pointsChain) => {
       if (!pointsChain) return;
@@ -2471,28 +2507,34 @@ var SplitBlock = (props) => {
     [onToggle, env.environment]
   );
   useEffect6(() => {
-    if (env.useWeb3Points) {
-      setAddress(null);
-      setWalletReady(false);
-      initWallet(spreePayConfig?.pointsChain);
-    }
+    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__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
-      /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: "Available" }),
+  return /* @__PURE__ */ jsx24("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs12(PointsSelector, { isDisabled: isPointsSelectorDisabled, onSelect: () => onSelect("air"), isSelected, children: [
+    /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs12("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
+      /* @__PURE__ */ jsx24("span", { className: "text-black/50", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
       " ",
-      pointsConversionRatio && /* @__PURE__ */ jsx25("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
+      pointsConversionRatio && /* @__PURE__ */ jsx24("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * pointsConversionRatio) })
     ] }) : null }),
-    isBalanceLoading ? /* @__PURE__ */ jsx25("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-black", children: "No points available" }),
-    address && /* @__PURE__ */ jsx25("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
+    isBalanceLoading ? /* @__PURE__ */ jsx24("div", { className: "h-4 w-6 animate-pulse bg-gray-200" }) : !balance?.availablePoints && /* @__PURE__ */ jsx24("p", { className: "text-sm font-medium text-black", children: "No points available" }),
+    address && /* @__PURE__ */ jsx24("div", { className: "text-sm font-medium text-black", children: address.length > 8 ? `${address.slice(0, 4)}...${address.slice(-4)}` : address })
   ] }) });
 };
 // src/components/CreditCardTab/Points/Points.tsx
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var Points = () => {
   const [usePoints, setUsePoints] = useState10(false);
   const [selectedPointsType, setSelectedPointsType] = useState10(null);
@@ -2506,8 +2548,8 @@ var Points = () => {
       setSelectedPaymentMethod({ ...selectedPaymentMethod, splitAmount: void 0 });
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx25(
       PointsSwitch,
       {
         value: usePoints,
@@ -2516,7 +2558,7 @@ var Points = () => {
         disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
-    usePoints && /* @__PURE__ */ jsx26(
+    usePoints && /* @__PURE__ */ jsx25(
       SplitBlock,
       {
         onToggle: handleTogglePoints,
@@ -2528,7 +2570,7 @@ var Points = () => {
 };
 // src/components/CreditCardTab/CreditCardTab.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var CreditCardTab = () => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { env } = useSpreePayEnv();
@@ -2583,16 +2625,16 @@ var CreditCardTab = () => {
   useEffect7(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsxs15("div", { children: [
-    /* @__PURE__ */ jsx27("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx27(CreditCard, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-6 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ jsx27(Points, {}) })
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx26("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx26(CreditCard, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "flex flex-col gap-6 border-b border-black/7 px-5 pt-5 pb-5 md:px-7 md:pt-6 md:pb-7", children: /* @__PURE__ */ jsx26(Points, {}) })
   ] });
 };
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useMemo as useMemo9 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import NiceModal6 from "@ebay/nice-modal-react";
+import NiceModal7 from "@ebay/nice-modal-react";
 import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { WagmiProvider } from "wagmi";
@@ -2615,9 +2657,9 @@ function getAction(client, actionFn, name) {
 // ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
 import { readContract as viem_readContract } from "viem/actions";
-function readContract(config, parameters) {
+function readContract(config2, parameters) {
   const { chainId, ...rest } = parameters;
-  const client = config.getClient({ chainId });
+  const client = config2.getClient({ chainId });
   const action = getAction(client, viem_readContract, "readContract");
   return action(rest);
 }
@@ -2625,17 +2667,20 @@ function readContract(config, parameters) {
 // ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
 import { hexToString } from "viem";
 import { call, getTransaction, waitForTransactionReceipt as viem_waitForTransactionReceipt } from "viem/actions";
-async function waitForTransactionReceipt(config, parameters) {
+async function waitForTransactionReceipt(config2, parameters) {
   const { chainId, timeout = 0, ...rest } = parameters;
-  const client = config.getClient({ chainId });
+  const client = config2.getClient({ chainId });
   const action = getAction(client, viem_waitForTransactionReceipt, "waitForTransactionReceipt");
   const receipt = await action({ ...rest, timeout });
   if (receipt.status === "reverted") {
     const action_getTransaction = getAction(client, 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, 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,
@@ -2699,7 +2744,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
 var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
   const { spreePayConfig } = useSpreePayConfig();
-  const config = useConfig();
+  const config2 = useConfig();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
@@ -2718,7 +2763,7 @@ var useCryptoPayment = () => {
       if (!tokenAddress) {
         throw new Error("Token address not found");
       }
-      const allowance = await readContract(config, {
+      const allowance = await readContract(config2, {
         address: tokenAddress,
         abi: erc20Abi2,
         functionName: "allowance",
@@ -2731,7 +2776,7 @@ var useCryptoPayment = () => {
           functionName: "approve",
           args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
         });
-        await waitForTransactionReceipt(config, {
+        await waitForTransactionReceipt(config2, {
           hash: result,
           confirmations: 1
           // You can change the number of block confirmations as per your requirement
@@ -2771,38 +2816,38 @@ var useCryptoPayment = () => {
 // src/components/CryptoTab/Crypto/ConnectButton.tsx
 import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var ConnectButton = () => {
-  return /* @__PURE__ */ jsx28(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+  return /* @__PURE__ */ jsx27(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
     if (!mounted) return null;
-    return /* @__PURE__ */ jsx28(Fragment5, { children: (() => {
+    return /* @__PURE__ */ jsx27(Fragment5, { children: (() => {
       if (!mounted || !account || !chain) {
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx27(
           "button",
           {
-            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
+            className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
             onClick: openConnectModal,
             children: "Connect a Wallet"
           }
         );
       }
       if (chain.unsupported) {
-        return /* @__PURE__ */ jsx28(
+        return /* @__PURE__ */ jsx27(
           "button",
           {
-            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
+            className: "h-[34px] rounded-md border border-black px-3 text-sm font-medium text-black",
             onClick: openChainModal,
             children: "Select a Network"
           }
         );
       }
-      return /* @__PURE__ */ jsxs16(
+      return /* @__PURE__ */ jsxs15(
         "button",
         {
-          className: "flex h-[34px] items-center gap-2 rounded-md border-1 border-black px-1.5 text-sm font-medium text-black",
+          className: "flex h-[34px] items-center gap-2 rounded-md border border-black px-1.5 text-sm font-medium text-black",
           onClick: openAccountModal,
           children: [
-            chain.hasIcon && /* @__PURE__ */ jsx28("div", { className: "h-6 w-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx28("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+            chain.hasIcon && /* @__PURE__ */ jsx27("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx27("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
             account.displayName
           ]
         }
@@ -2812,29 +2857,29 @@ var ConnectButton = () => {
 };
 // src/config/symbolLogos.tsx
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
-var MOCA_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsx29("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
-  /* @__PURE__ */ jsx29(
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var MOCA_SVG = /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx28("circle", { cx: "14", cy: "14", r: "13.5", fill: "#C15F97" }),
+  /* @__PURE__ */ jsx28(
     "path",
     {
       fill: "#fff",
       d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33Z"
     }
   ),
-  /* @__PURE__ */ jsx29("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+  /* @__PURE__ */ jsx28("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
 ] });
-var USDC_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_528_9163)", children: [
-    /* @__PURE__ */ jsx29("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
-    /* @__PURE__ */ jsx29(
+var USDC_SVG = /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsxs16("g", { clipPath: "url(#clip0_528_9163)", children: [
+    /* @__PURE__ */ jsx28("path", { fill: "#2775CA", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14Z" }),
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#fff",
         d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#fff",
@@ -2842,11 +2887,11 @@ var USDC_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/sv
       }
     )
   ] }),
-  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
+  /* @__PURE__ */ jsx28("defs", { children: /* @__PURE__ */ jsx28("clipPath", { id: "clip0_528_9163", children: /* @__PURE__ */ jsx28("path", { fill: "#fff", d: "M0 0h28v28H0z" }) }) })
 ] });
-var USDT_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
-  /* @__PURE__ */ jsx29("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
-  /* @__PURE__ */ jsx29(
+var USDT_SVG = /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", fill: "none", children: [
+  /* @__PURE__ */ jsx28("path", { fill: "#26A17B", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z" }),
+  /* @__PURE__ */ jsx28(
     "path",
     {
       fill: "#fff",
@@ -2854,23 +2899,23 @@ var USDT_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/sv
     }
   )
 ] });
-var WETH_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
-  /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_528_9173)", children: [
-    /* @__PURE__ */ jsx29(
+var WETH_SVG = /* @__PURE__ */ jsxs16("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", width: "28", height: "28", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ jsxs16("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#000",
         d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#F61F7D",
         d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#000",
@@ -2879,8 +2924,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/sv
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#000",
@@ -2889,8 +2934,8 @@ var WETH_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/sv
         clipRule: "evenodd"
       }
     ),
-    /* @__PURE__ */ jsx29("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx28("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx28(
       "path",
       {
         fill: "#000",
@@ -2898,7 +2943,7 @@ var WETH_SVG = /* @__PURE__ */ jsxs17("svg", { xmlns: "http://www.w3.org/2000/sv
       }
     )
   ] }),
-  /* @__PURE__ */ jsx29("defs", { children: /* @__PURE__ */ jsx29("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx29("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+  /* @__PURE__ */ jsx28("defs", { children: /* @__PURE__ */ jsx28("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx28("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
 ] });
 var symbolLogos = {
   MOCA: MOCA_SVG,
@@ -2911,33 +2956,33 @@ function getSymbolLogo(symbol) {
 }
 // src/components/CryptoTab/Crypto/Logos.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var Logos = () => {
-  return /* @__PURE__ */ jsxs18("div", { className: "flex", children: [
-    /* @__PURE__ */ jsx30("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
-    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
-    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
-    /* @__PURE__ */ jsx30("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
+  return /* @__PURE__ */ jsxs17("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx29("div", { className: "rounded-full border border-[#F5F7FA]", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ jsx29("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ jsx29("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA]", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ jsx29("div", { className: "-ml-2.5 rounded-full border border-[#F5F7FA] bg-[#F5F7FA]", children: getSymbolLogo("WETH") })
   ] });
 };
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import NiceModal5 from "@ebay/nice-modal-react";
+import NiceModal6 from "@ebay/nice-modal-react";
 // src/modals/CryptoSelectModal.tsx
 import { useMemo as useMemo8, useState as useState12 } from "react";
-import NiceModal4, { useModal as useModal2 } from "@ebay/nice-modal-react";
+import NiceModal5, { useModal as useModal2 } from "@ebay/nice-modal-react";
 // ../ui/src/components/input.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Input2({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(
     "input",
     {
       type,
       "data-slot": "input",
       className: cn2(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-(--primary) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
@@ -2948,18 +2993,58 @@ function Input2({ className, type, ...props }) {
 }
 // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import * as React14 from "react";
+// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
 import * as React13 from "react";
+import * as ReactDOM2 from "react-dom";
+import { createSlot as createSlot3 } from "@radix-ui/react-slot";
+import { jsx as jsx31 } from "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 = createSlot3(`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__ */ jsx31(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
 import { jsx as jsx32 } from "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__ */ jsx32(
-    Primitive.div,
+    Primitive2.div,
     {
       "data-orientation": orientation,
       ...semanticProps,
@@ -2989,7 +3074,7 @@ function Separator2({
       decorative,
       orientation,
       className: cn2(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-(--b-secondary) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       ),
       ...props
@@ -2998,17 +3083,17 @@ function Separator2({
 }
 // src/hooks/useBaseERC20Token.ts
-import * as React14 from "react";
+import * as React15 from "react";
 import { erc20Abi as erc20Abi3, formatUnits, getAddress } from "viem";
 import { useAccount, usePublicClient } from "wagmi";
 function useBaseERC20Token() {
   const { address } = useAccount();
   const baseClient = usePublicClient({ chainId: BASE_CHAIN_ID });
   const defaultClient = 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;
@@ -3089,8 +3174,8 @@ var useBaseTokens = () => {
 };
 // src/modals/CryptoSelectModal.tsx
-import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
-var CryptoSelectModal = NiceModal4.create(() => {
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+var CryptoSelectModal = NiceModal5.create(() => {
   const modal = useModal2();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
   const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
@@ -3107,12 +3192,11 @@ var CryptoSelectModal = NiceModal4.create(() => {
     setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
   };
   const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
-  const userCoinSymbols = userCoins.map((c) => c.symbol);
-  return /* @__PURE__ */ jsxs19(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+  return /* @__PURE__ */ jsxs18(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
     /* @__PURE__ */ jsx34(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
-      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs18(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between gap-4", children: [
           /* @__PURE__ */ jsx34("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx34("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
           /* @__PURE__ */ jsx34(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
           /* @__PURE__ */ jsx34("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx34(
@@ -3126,26 +3210,19 @@ var CryptoSelectModal = NiceModal4.create(() => {
         /* @__PURE__ */ jsx34(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
       ] }),
       /* @__PURE__ */ jsx34(Separator2, { className: "hidden md:block" }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
         /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
         (error || nativeError) && /* @__PURE__ */ jsx34("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex w-full flex-col gap-1", children: [
           isLoadingNative && /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-          nativeBalance && /* @__PURE__ */ jsxs19(
+          nativeBalance && /* @__PURE__ */ jsxs18(
             "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__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ jsx34(
-                    "img",
-                    {
-                      className: "h-8 w-8 shrink-0",
-                      src: nativeBalance.logoURI,
-                      alt: `${nativeBalance.symbol} logo`
-                    }
-                  ),
+                /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ jsx34("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
                   /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
                 /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
@@ -3153,20 +3230,20 @@ var CryptoSelectModal = NiceModal4.create(() => {
             },
             nativeBalance.symbol
           ),
-          isLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+          isLoading && /* @__PURE__ */ jsxs18(Fragment6, { children: [
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
-            return /* @__PURE__ */ jsxs19(
+            return /* @__PURE__ */ jsxs18(
               "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__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
                     /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
@@ -3178,25 +3255,28 @@ var CryptoSelectModal = NiceModal4.create(() => {
           })
         ] }),
         /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
-        /* @__PURE__ */ jsxs19("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
-          tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+          tokensIsLoading && /* @__PURE__ */ jsxs18(Fragment6, { children: [
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
             /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
-          filteredCoins.map((token) => /* @__PURE__ */ jsx34(
-            "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__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                token.logoURI ? /* @__PURE__ */ jsx34("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx34("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
-                /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: token.symbol })
-              ] })
-            },
-            token.symbol
-          ))
+          filteredCoins.map((token) => {
+            const userCoin = userCoins.find((c) => c.symbol === token.symbol);
+            return /* @__PURE__ */ jsx34(
+              "button",
+              {
+                disabled: !userCoin,
+                onClick: () => userCoin && handleSelect(userCoin),
+                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__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                  token.logoURI ? /* @__PURE__ */ jsx34("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx34("div", { className: "size-8 shrink-0 rounded-full bg-gray-400" }),
+                  /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: token.symbol })
+                ] })
+              },
+              token.symbol
+            );
+          })
         ] })
       ] })
     ] })
@@ -3205,14 +3285,14 @@ var CryptoSelectModal = NiceModal4.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var SelectCoinButton = () => {
   const openModal = () => {
-    NiceModal5.show(CryptoSelectModal);
+    NiceModal6.show(CryptoSelectModal);
   };
-  return /* @__PURE__ */ jsxs20("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx35("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
-    /* @__PURE__ */ jsxs20("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+  return /* @__PURE__ */ jsxs19("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx35("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "flex size-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
       /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx35("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
       /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
     ] })
@@ -3220,20 +3300,20 @@ var SelectCoinButton = () => {
 };
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var SelectedCoin = (props) => {
   const { coin, balance, logoURI } = props;
   const Icon = getSymbolLogo(coin);
-  return /* @__PURE__ */ jsxs21("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
-    /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx36("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
-    /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
+    /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex size-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx36("div", { className: "bg-primary size-2.5 rounded-full" }) }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border border-l-0! px-3", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
         /* @__PURE__ */ jsx36("p", { className: "font-semibold text-black", children: coin }),
         /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx36("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
       ] }),
-      /* @__PURE__ */ jsxs21("p", { className: "text-xs font-medium text-black/50", children: [
+      /* @__PURE__ */ jsxs20("p", { className: "text-xs font-medium text-black/50", children: [
         "Wallet balance ",
         /* @__PURE__ */ jsx36("span", { className: "text-black", children: balance })
       ] })
@@ -3242,7 +3322,7 @@ var SelectedCoin = (props) => {
 };
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var Crypto = () => {
   const { address } = useAccount3();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -3266,13 +3346,13 @@ var Crypto = () => {
   useEffect9(() => {
     register(handlePay);
   }, [register, handlePay]);
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-baseline gap-4", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex w-full items-center justify-between gap-4", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex w-full items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx37("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
       /* @__PURE__ */ jsx37(ConnectButton, {})
     ] }),
     !isWalletConnected && /* @__PURE__ */ jsx37(Logos, {}),
-    isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
+    isWalletConnected && /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-col gap-1", children: [
       selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx37(
         SelectedCoin,
         {
@@ -3302,36 +3382,34 @@ function getCachedWagmiConfig(projectId, appName) {
 }
 var CryptoWrapper = () => {
   const { spreePayConfig, configIsLoading } = useSpreePayConfig();
-  const [wagmiConfig, setWagmiConfig] = useState13(null);
-  useEffect10(() => {
-    if (!spreePayConfig) return;
-    const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
-    setWagmiConfig((prev) => prev ? prev : cfg2);
+  const wagmiConfig = useMemo9(() => {
+    if (!spreePayConfig) return null;
+    return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
   }, [spreePayConfig]);
   if (configIsLoading || !wagmiConfig) return null;
-  return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
+  return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx38(NiceModal7.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
 };
 // src/components/CryptoTab/CryptoTab.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var CryptoTab = () => {
   const { spreePayConfig } = useSpreePayConfig();
-  return /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
+  return /* @__PURE__ */ jsxs22("div", { children: [
+    /* @__PURE__ */ jsx39("div", { className: "border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
     /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) })
   ] });
 };
 // src/components/TabButtons.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
-var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+var TabButton = ({ isDisabled = false, isActive, children, onClick }) => {
   return /* @__PURE__ */ jsx40(
     "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 }
@@ -3342,98 +3420,79 @@ 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__ */ jsxs24("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsxs24(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.creditCard.enabled,
-        onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
-        isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
-        children: [
-          /* @__PURE__ */ jsx40("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx40(
-            "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__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs24(
-      TabButton,
-      {
-        isDisabled: !spreePayConfig?.crypto.enabled,
-        onClick: handleChange("CRYPTO" /* CRYPTO */),
-        isActive: value === "CRYPTO" /* CRYPTO */,
-        children: [
-          /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
-            /* @__PURE__ */ jsx40(
-              "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__ */ jsx40(
-              "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__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
-          ] }),
-          /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+    configIsLoading && /* @__PURE__ */ jsxs23(Fragment7, { children: [
+      /* @__PURE__ */ jsx40("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" }),
+      /* @__PURE__ */ jsx40("div", { className: "bg-primary/7 h-[58px] w-[132px] animate-pulse rounded-sm" })
+    ] }),
+    spreePayConfig?.creditCard.enabled && /* @__PURE__ */ jsxs23(TabButton, { onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */), isActive: value === "CREDIT_CARD" /* CREDIT_CARD */, children: [
+      /* @__PURE__ */ jsx40("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx40(
+        "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__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
+    ] }),
+    spreePayConfig?.crypto.enabled && /* @__PURE__ */ jsxs23(TabButton, { onClick: handleChange("CRYPTO" /* CRYPTO */), isActive: value === "CRYPTO" /* CRYPTO */, children: [
+      /* @__PURE__ */ jsxs23("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
+        /* @__PURE__ */ jsx40(
+          "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__ */ jsx40(
+          "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__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+      ] }),
+      /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
+    ] })
   ] });
 };
-// src/components/Tabs.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
-var Tabs = () => {
+// src/SpreePayContent.tsx
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+var SpreePayContent = ({ isLoggedIn }) => {
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
-  return /* @__PURE__ */ jsxs25("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
-    /* @__PURE__ */ jsxs25("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: [
+  return /* @__PURE__ */ jsxs24("div", { className: "w-full overflow-hidden rounded-3xl border border-black/25 bg-white", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex w-full flex-col gap-4 border-b border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
       /* @__PURE__ */ jsx41("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
       /* @__PURE__ */ jsx41(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
     ] }),
     selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx41(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {})
-  ] });
-};
-// src/SpreePayContent.tsx
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
-var SpreePayContent = ({ isLoggedIn }) => {
-  return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx42(Tabs, {}),
-    /* @__PURE__ */ jsx42(CheckoutButton, { isLoggedIn }),
-    /* @__PURE__ */ jsx42(SpreeLegal, {})
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {}),
+    /* @__PURE__ */ jsx41(CheckoutButton, { isLoggedIn })
   ] });
 };
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef6, useState as useState14 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef7, useState as useState13 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
-function useKeycloakSSO(config) {
-  const { url, realm, clientId, ssoPageURI, enabled } = config;
-  const initRef = useRef6(false);
-  const kcRef = useRef6(null);
-  const refreshTimerRef = useRef6(null);
-  const [error, setError] = useState14(null);
-  const [isChecking, setIsChecking] = useState14(enabled);
-  const [accessToken, setAccessToken] = useState14(null);
+function useKeycloakSSO(config2) {
+  const { url, realm, clientId, ssoPageURI, enabled } = config2;
+  const initRef = useRef7(false);
+  const kcRef = useRef7(null);
+  const refreshTimerRef = useRef7(null);
+  const scheduleRefreshRef = useRef7(() => {
+  });
+  const [error, setError] = useState13(null);
+  const [isChecking, setIsChecking] = useState13(enabled);
+  const [accessToken, setAccessToken] = useState13(null);
   const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -3448,17 +3507,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);
   }, []);
-  useEffect11(() => {
+  useEffect10(() => {
+    scheduleRefreshRef.current = scheduleRefresh;
+  }, [scheduleRefresh]);
+  useEffect10(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
-    setIsChecking(true);
     const kc = new Keycloak({ url, realm, clientId });
     kcRef.current = kc;
     kc.onTokenExpired = () => {
@@ -3490,21 +3551,20 @@ function useKeycloakSSO(config) {
 }
 // src/SpreePay.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var SpreePayInner = () => {
-  const rootRef = useRef7(null);
-  const [portalEl, setPortalEl] = useState15(null);
-  useLayoutEffect3(() => {
-    if (!rootRef.current) return;
-    const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
+  const [portalEl, setPortalEl] = useState14(null);
+  const rootRef = useCallback8((node) => {
+    if (!node) return;
+    const el = node.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  useEffect12(() => {
+  useEffect11(() => {
     console.log(`[spree-pay] v${version}`);
   }, []);
   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,
@@ -3513,7 +3573,8 @@ var SpreePayInner = () => {
     enabled: !env?.accessToken
   });
   const _accessToken = env.accessToken ?? accessToken;
-  const slapiFetcher = useMemo9(() => {
+  const unauthenticatedFetcher = useCallback8(() => Promise.resolve(null), []);
+  const slapiFetcher = useMemo10(() => {
     if (_accessToken) {
       return registerApi({
         accessToken: _accessToken,
@@ -3521,16 +3582,16 @@ var SpreePayInner = () => {
         baseUrl: staticConfig.slapiUrl
       });
     }
-  }, [_accessToken, staticConfig, tenantId]);
+    return unauthenticatedFetcher;
+  }, [_accessToken, staticConfig, tenantId, unauthenticatedFetcher]);
   const getContent = () => {
     if (isChecking) {
-      return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx43(SpreeLegal, {})
+      return /* @__PURE__ */ jsxs25("div", { className: "flex w-full flex-col", children: [
+        /* @__PURE__ */ jsx42("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
+        /* @__PURE__ */ jsx42("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" })
       ] });
     }
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx42(
       SWRConfig,
       {
         value: {
@@ -3539,23 +3600,23 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
+        children: /* @__PURE__ */ jsx42(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx42(NiceModal8.Provider, { children: /* @__PURE__ */ jsx42(SpreePayContent, { isLoggedIn: Boolean(_accessToken) }) }) })
       }
     );
   };
-  return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ jsx43("div", { className: "sl-spreepay__portal" }),
+  return /* @__PURE__ */ jsxs25("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
+    /* @__PURE__ */ jsx42("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ jsx43(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx43(SpreePayInner, {}) });
+  return /* @__PURE__ */ jsx42(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx42(SpreePayInner, {}) });
 };
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect13(() => {
+  useEffect12(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }