@superlogic/spree-pay 0.1.26 → 0.1.28

package/build/index.cjs

@@ -44,7 +44,7 @@ var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
 // package.json
-var version = "0.1.26";
+var version = "0.1.28";
 
 // src/context/SpreePayActionsContext.tsx
 var import_react = require("react");
@@ -1308,24 +1308,43 @@ var import_jsx_runtime15 = require("react/jsx-runtime");
 var PointsSwitch = (props) => {
   const { disabled = false, value, onChange, message } = props;
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const { balance } = useSlapiBalance();
   const id = (0, import_react7.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-6", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Switch, { checked: value, onCheckedChange: onChange, disabled, id }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-          "Use Points ",
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          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__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-medium", children: "Optional" })
+            ]
+          }
+        )
       ] }),
-      balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
-        formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
-        " ",
-        !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio) })
-      ] }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+        balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "flex-1 text-right text-sm font-medium text-black", children: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "a",
+          {
+            className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
     ] }),
-    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+    message && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "size-5 shrink-0", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "path",
         {
@@ -2371,16 +2390,17 @@ var PointsSelector = (props) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-full w-full items-center justify-between gap-2 px-2 sm:gap-3 sm:px-3", children })
         ] }),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-3", children: [
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-2 pt-6 pb-2 sm:px-3 md:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between gap-2 sm:gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex max-w-[100px] flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               Input,
               {
                 readOnly: true,
+                name: "points amount",
                 value: Math.round(splitTokens),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2403,8 +2423,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
+                name: "usd amount",
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2452,7 +2473,7 @@ var SplitBlock = (props) => {
     initWallet(spreePayConfig?.pointsChain);
   }, [spreePayConfig?.pointsChain, initWallet]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-sm font-medium text-black", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-left text-xs font-medium text-black sm:text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-black/50", children: "Available" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
@@ -2471,6 +2492,7 @@ var Points = () => {
   const [selectedPointsType, setSelectedPointsType] = (0, import_react12.useState)(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2485,7 +2507,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
     usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -3254,19 +3276,27 @@ var Crypto = () => {
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
+var CHAINS = [import_chains.base];
+var wagmiConfigCache = /* @__PURE__ */ new Map();
+function getCachedWagmiConfig(projectId, appName) {
+  const key = `${projectId}::${appName}`;
+  let cfg2 = wagmiConfigCache.get(key);
+  if (!cfg2) {
+    cfg2 = (0, import_rainbowkit2.getDefaultConfig)({ appName, projectId, chains: CHAINS, ssr: true });
+    wagmiConfigCache.set(key, cfg2);
+  }
+  return cfg2;
+}
 var CryptoWrapper = () => {
-  const { spreePayConfig } = useSpreePayConfig();
-  const config = (0, import_react16.useMemo)(() => {
-    if (!spreePayConfig) return null;
-    return (0, import_rainbowkit2.getDefaultConfig)({
-      appName: spreePayConfig.rainbowAppName,
-      projectId: spreePayConfig.rainbowProjectId,
-      chains: [import_chains.base],
-      ssr: false
-    });
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const [wagmiConfig, setWagmiConfig] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
+    if (!spreePayConfig) return;
+    const cfg2 = getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
+    setWagmiConfig((prev) => prev ? prev : cfg2);
   }, [spreePayConfig]);
-  if (!config) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
+  if (configIsLoading || !wagmiConfig) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx

package/build/index.css

@@ -464,6 +464,9 @@
 .sl-spreepay .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
+.sl-spreepay .min-w-\[75px\] {
+  min-width: 75px;
+}
 .sl-spreepay .flex-1 {
   flex: 1;
 }
@@ -511,9 +514,6 @@
 .sl-spreepay .items-center {
   align-items: center;
 }
-.sl-spreepay .items-start {
-  align-items: flex-start;
-}
 .sl-spreepay .justify-between {
   justify-content: space-between;
 }
@@ -535,6 +535,9 @@
 .sl-spreepay .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
+.sl-spreepay .gap-2\.5 {
+  gap: calc(var(--spacing) * 2.5);
+}
 .sl-spreepay .gap-3 {
   gap: calc(var(--spacing) * 3);
 }
@@ -718,9 +721,15 @@
 .sl-spreepay .p-6 {
   padding: calc(var(--spacing) * 6);
 }
+.sl-spreepay .px-1 {
+  padding-inline: calc(var(--spacing) * 1);
+}
 .sl-spreepay .px-1\.5 {
   padding-inline: calc(var(--spacing) * 1.5);
 }
+.sl-spreepay .px-2 {
+  padding-inline: calc(var(--spacing) * 2);
+}
 .sl-spreepay .px-2\.5 {
   padding-inline: calc(var(--spacing) * 2.5);
 }
@@ -1463,11 +1472,32 @@
     justify-content: flex-end;
   }
 }
+.sl-spreepay .sm\:gap-2 {
+  @media (width >= 40rem) {
+    gap: calc(var(--spacing) * 2);
+  }
+}
+.sl-spreepay .sm\:gap-3 {
+  @media (width >= 40rem) {
+    gap: calc(var(--spacing) * 3);
+  }
+}
+.sl-spreepay .sm\:px-3 {
+  @media (width >= 40rem) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+}
 .sl-spreepay .sm\:text-left {
   @media (width >= 40rem) {
     text-align: left;
   }
 }
+.sl-spreepay .sm\:text-sm {
+  @media (width >= 40rem) {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+}
 .sl-spreepay .md\:block {
   @media (width >= 48rem) {
     display: block;
@@ -1498,16 +1528,16 @@
     padding-bottom: calc(var(--spacing) * 7);
   }
 }
-.sl-spreepay .md\:text-sm {
+.sl-spreepay .md\:text-lg {
   @media (width >= 48rem) {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
   }
 }
-.sl-spreepay .md\:text-xl {
+.sl-spreepay .md\:text-sm {
   @media (width >= 48rem) {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 }
 .sl-spreepay .dark\:border-input {

package/build/index.d.cts

@@ -6,6 +6,8 @@ type SpreePayProps = {
     className?: string;
     isProcessing?: boolean;
     transactionFeePercentage?: number;
+    disabledPoints?: boolean;
+    topUpLink?: string;
 };
 
 declare const SpreePay: FC<SpreePayProps>;

package/build/index.d.ts

@@ -6,6 +6,8 @@ type SpreePayProps = {
     className?: string;
     isProcessing?: boolean;
     transactionFeePercentage?: number;
+    disabledPoints?: boolean;
+    topUpLink?: string;
 };
 
 declare const SpreePay: FC<SpreePayProps>;

package/build/index.js

@@ -1,10 +1,10 @@
 // src/SpreePay.tsx
-import { useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useMemo as useMemo10, useRef as useRef7, useState as useState14 } from "react";
+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 { SWRConfig } from "swr";
 
 // package.json
-var version = "0.1.26";
+var version = "0.1.28";
 
 // src/context/SpreePayActionsContext.tsx
 import { createContext, useCallback, useContext, useRef, useState } from "react";
@@ -1268,24 +1268,43 @@ import { jsx as jsx15, jsxs as jsxs9 } 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(Label, { className: "text-md items-baseline leading-[1.3] font-semibold text-black md:text-xl", htmlFor: id, children: [
-          "Use Points ",
-          /* @__PURE__ */ jsx15("span", { className: "text-xs font-medium", children: "Optional" })
-        ] })
+        /* @__PURE__ */ jsxs9(
+          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" })
+            ]
+          }
+        )
       ] }),
-      balance?.availablePoints ? /* @__PURE__ */ jsxs9("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) })
-      ] }) : null
+      /* @__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: [
+          formatPoints(balance.availablePoints, spreePayConfig?.pointsTitle),
+          !!spreePayConfig?.pointsConversionRatio && /* @__PURE__ */ jsx15("span", { className: "text-black/50", children: ` ${formatUSD(balance.availablePoints * spreePayConfig.pointsConversionRatio)}` })
+        ] }) : null,
+        Boolean(appProps.topUpLink) && /* @__PURE__ */ jsx15(
+          "a",
+          {
+            className: "bg-primary cursor-pointer rounded-full px-2 py-1.5 text-xs font-medium text-white",
+            rel: "noreferrer",
+            target: "_blank",
+            href: appProps.topUpLink,
+            children: "Top Up"
+          }
+        )
+      ] })
     ] }),
-    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-1 rounded-sm border-1 border-[#006FD533] bg-[#006FD50D] p-1.5", children: [
+    message && /* @__PURE__ */ jsxs9("div", { className: "flex items-center 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(
         "path",
         {
@@ -2331,16 +2350,17 @@ var PointsSelector = (props) => {
               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" }) })
             }
           ),
-          /* @__PURE__ */ jsx24("div", { className: "flex h-full w-full items-center justify-between gap-3 px-3", children })
+          /* @__PURE__ */ jsx24("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-3 pt-6 pb-2 md:px-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between gap-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 max-w-[100px] flex-col gap-1", children: [
             /* @__PURE__ */ jsx24(
               Input,
               {
                 readOnly: true,
+                name: "points amount",
                 value: Math.round(splitTokens),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2363,8 +2383,9 @@ var PointsSelector = (props) => {
               Input,
               {
                 readOnly: true,
+                name: "usd amount",
                 value: formatUSD(usdAmount + getTransactionFee(usdAmount, appProps.transactionFeePercentage)),
-                className: "bg-white text-center font-medium",
+                className: "sm:text-md min-w-[75px] bg-white px-1 text-center text-xs font-medium sm:px-3",
                 onClick: (e) => e.stopPropagation()
               }
             ),
@@ -2412,7 +2433,7 @@ var SplitBlock = (props) => {
     initWallet(spreePayConfig?.pointsChain);
   }, [spreePayConfig?.pointsChain, initWallet]);
   return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { isDisabled: !walletReady, onSelect: () => onSelect("air"), isSelected, children: [
-    /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: balance?.availablePoints ? /* @__PURE__ */ jsxs13("p", { className: "text-sm font-medium text-black", 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" }),
       " ",
       formatPoints(balance.availablePoints, pointsTitle),
@@ -2431,6 +2452,7 @@ var Points = () => {
   const [selectedPointsType, setSelectedPointsType] = useState10(null);
   const { setSelectedPaymentMethod, selectedPaymentMethod } = useSpreePaymentMethod();
   const { spreePayConfig } = useSpreePayConfig();
+  const { appProps } = useStaticConfig();
   const handleTogglePoints = (enabled) => {
     setUsePoints(enabled);
     if (!enabled) {
@@ -2445,7 +2467,7 @@ var Points = () => {
         value: usePoints,
         onChange: handleTogglePoints,
         message: spreePayConfig?.creditCard.pointsInfoMessage,
-        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points
+        disabled: !spreePayConfig?.creditCard.enabled || !spreePayConfig?.creditCard.points || appProps.disabledPoints
       }
     ),
     usePoints && /* @__PURE__ */ jsx26(
@@ -2515,7 +2537,7 @@ var CreditCardTab = () => {
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { useMemo as useMemo9 } from "react";
+import { useEffect as useEffect10, useState as useState13 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import NiceModal6 from "@ebay/nice-modal-react";
 import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
@@ -3214,19 +3236,27 @@ var Crypto = () => {
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
+var CHAINS = [base];
+var wagmiConfigCache = /* @__PURE__ */ new Map();
+function getCachedWagmiConfig(projectId, appName) {
+  const key = `${projectId}::${appName}`;
+  let cfg2 = wagmiConfigCache.get(key);
+  if (!cfg2) {
+    cfg2 = getDefaultConfig({ appName, projectId, chains: CHAINS, ssr: true });
+    wagmiConfigCache.set(key, cfg2);
+  }
+  return cfg2;
+}
 var CryptoWrapper = () => {
-  const { spreePayConfig } = useSpreePayConfig();
-  const config = useMemo9(() => {
-    if (!spreePayConfig) return null;
-    return getDefaultConfig({
-      appName: spreePayConfig.rainbowAppName,
-      projectId: spreePayConfig.rainbowProjectId,
-      chains: [base],
-      ssr: false
-    });
+  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);
   }, [spreePayConfig]);
-  if (!config) return null;
-  return /* @__PURE__ */ jsx38(WagmiProvider, { config, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
+  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, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
@@ -3340,7 +3370,7 @@ var SpreePayContent = ({ isLoggedIn }) => {
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState13 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useRef as useRef6, useState as useState14 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
 function useKeycloakSSO(config) {
@@ -3348,9 +3378,9 @@ function useKeycloakSSO(config) {
   const initRef = useRef6(false);
   const kcRef = useRef6(null);
   const refreshTimerRef = useRef6(null);
-  const [error, setError] = useState13(null);
-  const [isChecking, setIsChecking] = useState13(enabled);
-  const [accessToken, setAccessToken] = useState13(null);
+  const [error, setError] = useState14(null);
+  const [isChecking, setIsChecking] = useState14(enabled);
+  const [accessToken, setAccessToken] = useState14(null);
   const scheduleRefresh = useCallback7(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -3372,7 +3402,7 @@ function useKeycloakSSO(config) {
       });
     }, delayMs);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     setIsChecking(true);
@@ -3410,13 +3440,13 @@ function useKeycloakSSO(config) {
 import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var SpreePayInner = () => {
   const rootRef = useRef7(null);
-  const [portalEl, setPortalEl] = useState14(null);
+  const [portalEl, setPortalEl] = useState15(null);
   useLayoutEffect3(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     console.log(`[spree-pay] v${version}`);
   }, []);
   const { env } = useSpreePayEnv();
@@ -3429,7 +3459,7 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = useMemo10(() => {
+  const slapiFetcher = useMemo9(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,
@@ -3469,9 +3499,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 var useCapture3DS = (searchParams) => {
-  useEffect12(() => {
+  useEffect13(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",