@superlogic/spree-pay 0.1.19 → 0.1.21

package/build/index.cjs

@@ -39,7 +39,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SpreePay.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_swr5 = require("swr");
 
@@ -598,10 +598,10 @@ var slapiApi = {
     throw new Error("slapiApi is not configured. Call registerApi(...) first.");
   }
 };
-var registerApi = (config2) => {
-  cfg.baseUrl = config2.baseUrl;
-  cfg.accessToken = config2.accessToken;
-  cfg.tenantId = config2.tenantId;
+var registerApi = (config) => {
+  cfg.baseUrl = config.baseUrl;
+  cfg.accessToken = config.accessToken;
+  cfg.tenantId = config.tenantId;
   slapiApi = {
     get: async (key) => {
       const url = buildUrl(key);
@@ -747,7 +747,8 @@ async function createAndInit(opts) {
       chain: opts.mocaChain,
       account: address
     }) : null;
-    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+    const walletReady = Boolean(address && walletClient);
+    return { walletReady, address, walletClient, air, chain: opts.mocaChain };
   } catch (e) {
     const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
     return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
@@ -755,6 +756,10 @@ async function createAndInit(opts) {
 }
 async function getAirWallet(options) {
   const key = optionsKey(options);
+  if (cachedKey === key && singletonState && !singletonState.walletReady) {
+    singletonState = null;
+    initPromise = null;
+  }
   if (singletonState && cachedKey === key) return singletonState;
   if (initPromise && cachedKey === key) return initPromise;
   cachedKey = key;
@@ -2282,7 +2287,7 @@ function Slider2({
 // src/components/CreditCardTab/Points/PointsSelector.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var PointsSelector = (props) => {
-  const { isSelected, onSelect, children } = props;
+  const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { appProps, staticConfig } = useStaticConfig();
@@ -2297,9 +2302,11 @@ var PointsSelector = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
+      disabled: isDisabled,
       onClick: onSelect,
       className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-        "border-primary": isSelected
+        "border-primary": isSelected,
+        "cursor-not-allowed opacity-50": isDisabled
       }),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex h-11 w-full", { "bg-black/4": isSelected }), children: [
@@ -2350,30 +2357,38 @@ var PointsSelector = (props) => {
 // src/components/CreditCardTab/Points/SplitBlock.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var SplitBlock = (props) => {
-  const { isSelected, onSelect } = props;
+  const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = (0, import_react11.useState)(null);
+  const [walletReady, setWalletReady] = (0, import_react11.useState)(false);
   const { staticConfig } = useStaticConfig();
   const { pointsConversionRatio, pointsTitle } = staticConfig;
-  const initWallet = (0, import_react11.useCallback)(async (pointsChain) => {
-    if (!pointsChain) {
-      return;
-    }
-    try {
-      const res = await getAirWallet({
-        mocaChain: pointsChain.mocaChain,
-        partnerId: pointsChain.partnerId
-      });
-      setAddress(res.address ?? null);
-    } catch (e) {
-      console.error("Air Wallet init failed:", e);
-    }
-  }, []);
+  const initWallet = (0, import_react11.useCallback)(
+    async (pointsChain) => {
+      if (!pointsChain) return;
+      try {
+        const res = await getAirWallet({
+          mocaChain: pointsChain.mocaChain,
+          partnerId: pointsChain.partnerId
+        });
+        setAddress(res.address ?? null);
+        setWalletReady(res.walletReady);
+        if (!res.walletReady && res.error) {
+          onToggle(false);
+        }
+      } catch (e) {
+        console.error("Air Wallet init failed:", e);
+      }
+    },
+    [onToggle]
+  );
   (0, import_react11.useEffect)(() => {
+    setAddress(null);
+    setWalletReady(false);
     initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig, initWallet]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+  }, [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)("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2402,7 +2417,14 @@ var Points = () => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
-    usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+    usePoints && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      SplitBlock,
+      {
+        onToggle: handleTogglePoints,
+        isSelected: selectedPointsType === "air",
+        onSelect: setSelectedPointsType
+      }
+    )
   ] });
 };
 
@@ -2449,11 +2471,11 @@ var CreditCardTab = () => {
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
+var import_react16 = require("react");
 var import_react_query = require("@tanstack/react-query");
 var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
 var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
 var import_styles = require("@rainbow-me/rainbowkit/styles.css");
-var import_wallets = require("@rainbow-me/rainbowkit/wallets");
 var import_wagmi5 = require("wagmi");
 var import_chains = require("wagmi/chains");
 
@@ -2474,9 +2496,9 @@ function getAction(client, actionFn, name) {
 
 // ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
 var import_actions = require("viem/actions");
-function readContract(config2, parameters) {
+function readContract(config, parameters) {
   const { chainId, ...rest } = parameters;
-  const client = config2.getClient({ chainId });
+  const client = config.getClient({ chainId });
   const action = getAction(client, import_actions.readContract, "readContract");
   return action(rest);
 }
@@ -2484,9 +2506,9 @@ function readContract(config2, parameters) {
 // ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
 var import_viem2 = require("viem");
 var import_actions2 = require("viem/actions");
-async function waitForTransactionReceipt(config2, parameters) {
+async function waitForTransactionReceipt(config, parameters) {
   const { chainId, timeout = 0, ...rest } = parameters;
-  const client = config2.getClient({ chainId });
+  const client = config.getClient({ chainId });
   const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
   const receipt = await action({ ...rest, timeout });
   if (receipt.status === "reverted") {
@@ -2558,7 +2580,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
 var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = (0, import_wagmi.useWalletClient)();
-  const config2 = (0, import_wagmi.useConfig)();
+  const config = (0, import_wagmi.useConfig)();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
@@ -2574,7 +2596,7 @@ var useCryptoPayment = () => {
       if (!tokenAddress) {
         throw new Error("Token address not found");
       }
-      const allowance = await readContract(config2, {
+      const allowance = await readContract(config, {
         address: tokenAddress,
         abi: import_viem4.erc20Abi,
         functionName: "allowance",
@@ -2587,7 +2609,7 @@ var useCryptoPayment = () => {
           functionName: "approve",
           args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
         });
-        await waitForTransactionReceipt(config2, {
+        await waitForTransactionReceipt(config, {
           hash: result,
           confirmations: 1
           // You can change the number of block confirmations as per your requirement
@@ -2646,9 +2668,9 @@ var ConnectButton = () => {
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "button",
           {
-            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
+            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
             onClick: openChainModal,
-            children: "Wrong network"
+            children: "Select a Network"
           }
         );
       }
@@ -3145,23 +3167,19 @@ var Crypto = () => {
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var queryClient = new import_react_query.QueryClient();
-var connectors = (0, import_rainbowkit2.connectorsForWallets)(
-  [
-    {
-      groupName: "Supported",
-      wallets: [import_wallets.injectedWallet, import_wallets.walletConnectWallet]
-    }
-  ],
-  { appName: "Spree Pay", projectId: "YOUR_PROJECT_ID" }
-);
-var config = (0, import_wagmi5.createConfig)({
-  chains: [import_chains.base],
-  connectors,
-  transports: { [import_chains.base.id]: (0, import_wagmi5.http)() },
-  ssr: true
-});
 var CryptoWrapper = () => {
-  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, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
+  const { spreePayConfig } = useSpreePayConfig();
+  const config = (0, import_react16.useMemo)(() => {
+    if (!spreePayConfig) return null;
+    return (0, import_rainbowkit2.getDefaultConfig)({
+      appName: spreePayConfig.rainbowAppName || "AIR Shop",
+      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      chains: [import_chains.base],
+      ssr: true
+    });
+  }, [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, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
@@ -3274,18 +3292,18 @@ var SpreePayContent = ({ isLoggedIn }) => {
 };
 
 // src/hooks/useKeycloakSSO.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_keycloak_js = __toESM(require("keycloak-js"), 1);
 var refreshAheadSeconds = 60;
-function useKeycloakSSO(config2) {
-  const { url, realm, clientId, ssoPageURI, enabled } = config2;
-  const initRef = (0, import_react16.useRef)(false);
-  const kcRef = (0, import_react16.useRef)(null);
-  const refreshTimerRef = (0, import_react16.useRef)(null);
-  const [error, setError] = (0, import_react16.useState)(null);
-  const [isChecking, setIsChecking] = (0, import_react16.useState)(enabled);
-  const [accessToken, setAccessToken] = (0, import_react16.useState)(null);
-  const scheduleRefresh = (0, import_react16.useCallback)(() => {
+function useKeycloakSSO(config) {
+  const { url, realm, clientId, ssoPageURI, enabled } = config;
+  const initRef = (0, import_react17.useRef)(false);
+  const kcRef = (0, import_react17.useRef)(null);
+  const refreshTimerRef = (0, import_react17.useRef)(null);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
+  const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
+  const scheduleRefresh = (0, import_react17.useCallback)(() => {
     const kc = kcRef.current;
     if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
       return;
@@ -3306,7 +3324,7 @@ function useKeycloakSSO(config2) {
       });
     }, delayMs);
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (initRef.current || !enabled) return;
     initRef.current = true;
     setIsChecking(true);
@@ -3343,9 +3361,9 @@ function useKeycloakSSO(config2) {
 // src/SpreePay.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var SpreePayInner = () => {
-  const rootRef = (0, import_react17.useRef)(null);
-  const [portalEl, setPortalEl] = (0, import_react17.useState)(null);
-  (0, import_react17.useLayoutEffect)(() => {
+  const rootRef = (0, import_react18.useRef)(null);
+  const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
+  (0, import_react18.useLayoutEffect)(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
     setPortalEl(el ?? null);
@@ -3360,7 +3378,7 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = (0, import_react17.useMemo)(() => {
+  const slapiFetcher = (0, import_react18.useMemo)(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,
@@ -3400,9 +3418,9 @@ var SpreePay = (props) => {
 };
 
 // src/hooks/useCapture3DS.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useCapture3DS = (searchParams) => {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
       window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
     }

package/build/index.js

@@ -1,5 +1,5 @@
 // src/SpreePay.tsx
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo9, useRef as useRef7, useState as useState14 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo10, useRef as useRef7, useState as useState14 } from "react";
 import NiceModal7 from "@ebay/nice-modal-react";
 import { SWRConfig } from "swr";
 
@@ -558,10 +558,10 @@ var slapiApi = {
     throw new Error("slapiApi is not configured. Call registerApi(...) first.");
   }
 };
-var registerApi = (config2) => {
-  cfg.baseUrl = config2.baseUrl;
-  cfg.accessToken = config2.accessToken;
-  cfg.tenantId = config2.tenantId;
+var registerApi = (config) => {
+  cfg.baseUrl = config.baseUrl;
+  cfg.accessToken = config.accessToken;
+  cfg.tenantId = config.tenantId;
   slapiApi = {
     get: async (key) => {
       const url = buildUrl(key);
@@ -707,7 +707,8 @@ async function createAndInit(opts) {
       chain: opts.mocaChain,
       account: address
     }) : null;
-    return { walletReady: true, address, walletClient, air, chain: opts.mocaChain };
+    const walletReady = Boolean(address && walletClient);
+    return { walletReady, address, walletClient, air, chain: opts.mocaChain };
   } catch (e) {
     const msg = e instanceof Error ? e.message : "Unknown error during AirWallet initialization";
     return { walletReady: false, address: null, walletClient: null, air: null, chain: null, error: msg };
@@ -715,6 +716,10 @@ async function createAndInit(opts) {
 }
 async function getAirWallet(options) {
   const key = optionsKey(options);
+  if (cachedKey === key && singletonState && !singletonState.walletReady) {
+    singletonState = null;
+    initPromise = null;
+  }
   if (singletonState && cachedKey === key) return singletonState;
   if (initPromise && cachedKey === key) return initPromise;
   cachedKey = key;
@@ -2242,7 +2247,7 @@ function Slider2({
 // src/components/CreditCardTab/Points/PointsSelector.tsx
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var PointsSelector = (props) => {
-  const { isSelected, onSelect, children } = props;
+  const { isDisabled, isSelected, onSelect, children } = props;
   const { balance } = useSlapiBalance();
   const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
   const { appProps, staticConfig } = useStaticConfig();
@@ -2257,9 +2262,11 @@ var PointsSelector = (props) => {
   return /* @__PURE__ */ jsxs12(
     "button",
     {
+      disabled: isDisabled,
       onClick: onSelect,
       className: cn("bg-primary/8 cursor-pointer overflow-hidden rounded-md border-1 border-transparent", {
-        "border-primary": isSelected
+        "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: [
@@ -2310,30 +2317,38 @@ var PointsSelector = (props) => {
 // src/components/CreditCardTab/Points/SplitBlock.tsx
 import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var SplitBlock = (props) => {
-  const { isSelected, onSelect } = props;
+  const { onToggle, isSelected, onSelect } = props;
   const { balance, isBalanceLoading } = useSlapiBalance();
   const { spreePayConfig } = useSpreePayConfig();
   const [address, setAddress] = useState9(null);
+  const [walletReady, setWalletReady] = useState9(false);
   const { staticConfig } = useStaticConfig();
   const { pointsConversionRatio, pointsTitle } = staticConfig;
-  const initWallet = useCallback4(async (pointsChain) => {
-    if (!pointsChain) {
-      return;
-    }
-    try {
-      const res = await getAirWallet({
-        mocaChain: pointsChain.mocaChain,
-        partnerId: pointsChain.partnerId
-      });
-      setAddress(res.address ?? null);
-    } catch (e) {
-      console.error("Air Wallet init failed:", e);
-    }
-  }, []);
+  const initWallet = useCallback4(
+    async (pointsChain) => {
+      if (!pointsChain) return;
+      try {
+        const res = await getAirWallet({
+          mocaChain: pointsChain.mocaChain,
+          partnerId: pointsChain.partnerId
+        });
+        setAddress(res.address ?? null);
+        setWalletReady(res.walletReady);
+        if (!res.walletReady && res.error) {
+          onToggle(false);
+        }
+      } catch (e) {
+        console.error("Air Wallet init failed:", e);
+      }
+    },
+    [onToggle]
+  );
   useEffect6(() => {
+    setAddress(null);
+    setWalletReady(false);
     initWallet(spreePayConfig?.pointsChain);
-  }, [spreePayConfig, initWallet]);
-  return /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxs13(PointsSelector, { onSelect: () => onSelect("air"), isSelected, children: [
+  }, [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("span", { className: "text-black/50", children: "Available" }),
       " ",
@@ -2362,7 +2377,14 @@ var Points = () => {
   };
   return /* @__PURE__ */ jsxs14(Fragment3, { children: [
     /* @__PURE__ */ jsx26(PointsSwitch, { disabled: !spreePayConfig?.creditCard.enabled, value: usePoints, onChange: handleTogglePoints }),
-    usePoints && /* @__PURE__ */ jsx26(SplitBlock, { isSelected: selectedPointsType === "air", onSelect: setSelectedPointsType })
+    usePoints && /* @__PURE__ */ jsx26(
+      SplitBlock,
+      {
+        onToggle: handleTogglePoints,
+        isSelected: selectedPointsType === "air",
+        onSelect: setSelectedPointsType
+      }
+    )
   ] });
 };
 
@@ -2409,12 +2431,12 @@ var CreditCardTab = () => {
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
+import { useMemo as useMemo9 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import NiceModal6 from "@ebay/nice-modal-react";
-import { RainbowKitProvider, connectorsForWallets } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
-import { injectedWallet, walletConnectWallet } from "@rainbow-me/rainbowkit/wallets";
-import { WagmiProvider, createConfig, http as http2 } from "wagmi";
+import { WagmiProvider } from "wagmi";
 import { base } from "wagmi/chains";
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
@@ -2434,9 +2456,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(config2, parameters) {
+function readContract(config, parameters) {
   const { chainId, ...rest } = parameters;
-  const client = config2.getClient({ chainId });
+  const client = config.getClient({ chainId });
   const action = getAction(client, viem_readContract, "readContract");
   return action(rest);
 }
@@ -2444,9 +2466,9 @@ function readContract(config2, 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(config2, parameters) {
+async function waitForTransactionReceipt(config, parameters) {
   const { chainId, timeout = 0, ...rest } = parameters;
-  const client = config2.getClient({ chainId });
+  const client = config.getClient({ chainId });
   const action = getAction(client, viem_waitForTransactionReceipt, "waitForTransactionReceipt");
   const receipt = await action({ ...rest, timeout });
   if (receipt.status === "reverted") {
@@ -2518,7 +2540,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
 var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
 var useCryptoPayment = () => {
   const { data: walletClient } = useWalletClient();
-  const config2 = useConfig();
+  const config = useConfig();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
   const cryptoPayment = async (params) => {
     if (!walletClient) {
@@ -2534,7 +2556,7 @@ var useCryptoPayment = () => {
       if (!tokenAddress) {
         throw new Error("Token address not found");
       }
-      const allowance = await readContract(config2, {
+      const allowance = await readContract(config, {
         address: tokenAddress,
         abi: erc20Abi2,
         functionName: "allowance",
@@ -2547,7 +2569,7 @@ var useCryptoPayment = () => {
           functionName: "approve",
           args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
         });
-        await waitForTransactionReceipt(config2, {
+        await waitForTransactionReceipt(config, {
           hash: result,
           confirmations: 1
           // You can change the number of block confirmations as per your requirement
@@ -2606,9 +2628,9 @@ var ConnectButton = () => {
         return /* @__PURE__ */ jsx28(
           "button",
           {
-            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-red-500",
+            className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
             onClick: openChainModal,
-            children: "Wrong network"
+            children: "Select a Network"
           }
         );
       }
@@ -3105,23 +3127,19 @@ var Crypto = () => {
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
-var connectors = connectorsForWallets(
-  [
-    {
-      groupName: "Supported",
-      wallets: [injectedWallet, walletConnectWallet]
-    }
-  ],
-  { appName: "Spree Pay", projectId: "YOUR_PROJECT_ID" }
-);
-var config = createConfig({
-  chains: [base],
-  connectors,
-  transports: { [base.id]: http2() },
-  ssr: true
-});
 var CryptoWrapper = () => {
-  return /* @__PURE__ */ jsx38(WagmiProvider, { config, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
+  const { spreePayConfig } = useSpreePayConfig();
+  const config = useMemo9(() => {
+    if (!spreePayConfig) return null;
+    return getDefaultConfig({
+      appName: spreePayConfig.rainbowAppName || "AIR Shop",
+      projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
+      chains: [base],
+      ssr: true
+    });
+  }, [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, {}) }) }) }) });
 };
 
 // src/components/CryptoTab/CryptoTab.tsx
@@ -3237,8 +3255,8 @@ var SpreePayContent = ({ isLoggedIn }) => {
 import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState13 } from "react";
 import Keycloak from "keycloak-js";
 var refreshAheadSeconds = 60;
-function useKeycloakSSO(config2) {
-  const { url, realm, clientId, ssoPageURI, enabled } = config2;
+function useKeycloakSSO(config) {
+  const { url, realm, clientId, ssoPageURI, enabled } = config;
   const initRef = useRef6(false);
   const kcRef = useRef6(null);
   const refreshTimerRef = useRef6(null);
@@ -3320,7 +3338,7 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = useMemo9(() => {
+  const slapiFetcher = useMemo10(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superlogic/spree-pay",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "Spree-pay React component and utilities",
   "private": false,
   "type": "module",
@@ -45,7 +45,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
-    "@rainbow-me/rainbowkit": "^2.2.8",
+    "@rainbow-me/rainbowkit": "^2.2.9",
     "@stripe/react-stripe-js": "^3.9.0",
     "@stripe/stripe-js": "^7.8.0",
     "@tanstack/react-query": "^5.85.5",