@superlogic/spree-pay 0.1.18 → 0.1.20

package/build/index.js

@@ -1,5 +1,5 @@
 // src/SpreePay.tsx
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState13 } 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);
@@ -2409,12 +2409,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 +2434,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 +2444,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 +2518,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 +2534,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 +2547,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 +2606,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"
           }
         );
       }
@@ -2741,20 +2741,90 @@ var Logos = () => {
 import NiceModal5 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";
 
-// src/hooks/useBaseERC20Token.ts
+// ../ui/src/components/input.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Input2({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx31(
+    "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",
+        "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
+      ),
+      ...props
+    }
+  );
+}
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
 import * as React13 from "react";
+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) => {
+  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,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
+    }
+  );
+});
+Separator.displayName = NAME;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root6 = Separator;
+
+// ../ui/src/components/separator.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx33(
+    Root6,
+    {
+      "data-slot": "separator",
+      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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/hooks/useBaseERC20Token.ts
+import * as React14 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] = React13.useState([]);
-  const [isLoading, setLoading] = React13.useState(false);
-  const [error, setError] = React13.useState(null);
-  React13.useEffect(() => {
+  const [rows, setRows] = React14.useState([]);
+  const [isLoading, setLoading] = React14.useState(false);
+  const [error, setError] = React14.useState(null);
+  React14.useEffect(() => {
     let cancelled = false;
     async function run() {
       const client = baseClient ?? defaultClient;
@@ -2827,36 +2897,56 @@ function useBaseNativeToken() {
   };
 }
 
+// src/hooks/useBaseTokens.ts
+import useSWR4 from "swr";
+var useBaseTokens = () => {
+  const { data: resData, isLoading } = useSWR4(`/v1/base-transactions/tokens`);
+  return { tokens: resData?.data ?? [], tokensIsLoading: isLoading };
+};
+
 // src/modals/CryptoSelectModal.tsx
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var CryptoSelectModal = NiceModal4.create(() => {
   const modal = useModal2();
   const { isLoading, error, erc20Balances } = useBaseERC20Token();
   const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
+  const { tokens, tokensIsLoading } = useBaseTokens();
+  const [search, setSearch] = useState12("");
+  const filteredCoins = useMemo8(() => {
+    return tokens.filter(
+      (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
+    );
+  }, [tokens, search]);
   const { setSelectedPaymentMethod } = useSpreePaymentMethod();
   const handleSelect = (coin) => {
     modal.remove();
     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: [
-    /* @__PURE__ */ jsx31(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
-    /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
-      /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsx31("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx31("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
-        /* @__PURE__ */ jsx31(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
-        /* @__PURE__ */ jsx31("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx31(
-          "path",
-          {
-            fill: "#000",
-            d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
-          }
-        ) }) })
-      ] }) }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
-        /* @__PURE__ */ jsx31("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
-        (error || nativeError) && /* @__PURE__ */ jsx31("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
+    /* @__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__ */ 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(
+            "path",
+            {
+              fill: "#000",
+              d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
+            }
+          ) }) })
+        ] }),
+        /* @__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__ */ 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: [
-          isLoadingNative && /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
+          isLoadingNative && /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
           nativeBalance && /* @__PURE__ */ jsxs19(
             "button",
             {
@@ -2864,7 +2954,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
               onClick: () => handleSelect(nativeBalance),
               children: [
                 /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-                  nativeBalance.logoURI && /* @__PURE__ */ jsx31(
+                  nativeBalance.logoURI && /* @__PURE__ */ jsx34(
                     "img",
                     {
                       className: "h-8 w-8 shrink-0",
@@ -2872,17 +2962,17 @@ var CryptoSelectModal = NiceModal4.create(() => {
                       alt: `${nativeBalance.symbol} logo`
                     }
                   ),
-                  /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                  /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
                 ] }),
-                /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+                /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
               ]
             },
             nativeBalance.symbol
           ),
           isLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-            /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
-            /* @__PURE__ */ jsx31("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" }),
+            /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
           ] }),
           erc20Balances.map((coin) => {
             const Icon = getSymbolLogo(coin.symbol);
@@ -2894,14 +2984,35 @@ var CryptoSelectModal = NiceModal4.create(() => {
                 children: [
                   /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
                     Boolean(Icon) && Icon,
-                    /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.symbol })
+                    /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.symbol })
                   ] }),
-                  /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.formatted })
+                  /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.formatted })
                 ]
               },
               coin.symbol
             );
           })
+        ] }),
+        /* @__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(Fragment5, { 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
+          ))
         ] })
       ] })
     ] })
@@ -2910,44 +3021,44 @@ var CryptoSelectModal = NiceModal4.create(() => {
 CryptoSelectModal.displayName = "CryptoSelectModal";
 
 // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var SelectCoinButton = () => {
   const openModal = () => {
     NiceModal5.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__ */ jsx32("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx32("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
+    /* @__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: [
-      /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx32("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
-      /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx32("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
+      /* @__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" }) })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/SelectedCoin.tsx
-import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } 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__ */ jsx33("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx33("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx33("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
+    /* @__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: [
         Icon,
-        !Icon && logoURI && /* @__PURE__ */ jsx33("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
-        /* @__PURE__ */ jsx33("p", { className: "font-semibold text-black", children: coin }),
-        /* @__PURE__ */ jsx33("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
+        !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 h-8 w-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: [
         "Wallet balance ",
-        /* @__PURE__ */ jsx33("span", { className: "text-black", children: balance })
+        /* @__PURE__ */ jsx36("span", { className: "text-black", children: balance })
       ] })
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/Crypto.tsx
-import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var Crypto = () => {
   const { address } = useAccount3();
   const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -2973,12 +3084,12 @@ var Crypto = () => {
   }, [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: [
-      /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
-      /* @__PURE__ */ jsx34(ConnectButton, {})
+      /* @__PURE__ */ jsx37("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
+      /* @__PURE__ */ jsx37(ConnectButton, {})
     ] }),
-    !isWalletConnected && /* @__PURE__ */ jsx34(Logos, {}),
+    !isWalletConnected && /* @__PURE__ */ jsx37(Logos, {}),
     isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
-      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx34(
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx37(
         SelectedCoin,
         {
           coin: selectedPaymentMethod.method.symbol,
@@ -2986,46 +3097,42 @@ var Crypto = () => {
           logoURI: selectedPaymentMethod.method.logoURI
         }
       ),
-      /* @__PURE__ */ jsx34(SelectCoinButton, {})
+      /* @__PURE__ */ jsx37(SelectCoinButton, {})
     ] })
   ] });
 };
 
 // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+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__ */ jsx35(WagmiProvider, { config, children: /* @__PURE__ */ jsx35(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx35(RainbowKitProvider, { children: /* @__PURE__ */ jsx35(NiceModal6.Provider, { children: /* @__PURE__ */ jsx35(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
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var CryptoTab = () => {
   return /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx36("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx36(CryptoWrapper, {}) }),
-    /* @__PURE__ */ jsx36("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx36(PointsSwitch, { disabled: true }) })
+    /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
+    /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true }) })
   ] });
 };
 
 // src/components/TabButtons.tsx
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx40(
     "button",
     {
       disabled: isDisabled,
@@ -3056,14 +3163,14 @@ var TabButtons = (props) => {
         onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
         isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
         children: [
-          /* @__PURE__ */ jsx37("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx37(
+          /* @__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__ */ jsx37("p", { className: "text-sm font-medium", children: "Card" })
+          /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
         ]
       }
     ),
@@ -3075,23 +3182,23 @@ var TabButtons = (props) => {
         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__ */ jsx37(
+            /* @__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__ */ jsx37(
+            /* @__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__ */ jsx37("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
+            /* @__PURE__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
           ] }),
-          /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium", children: "Crypto" })
+          /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
         ]
       }
     )
@@ -3099,41 +3206,41 @@ var TabButtons = (props) => {
 };
 
 // src/components/Tabs.tsx
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tabs = () => {
   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: [
-      /* @__PURE__ */ jsx38("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
-      /* @__PURE__ */ jsx38(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
+      /* @__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__ */ jsx38(CreditCardTab, {}),
-    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx38(CryptoTab, {})
+    selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx41(CreditCardTab, {}),
+    selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {})
   ] });
 };
 
 // src/SpreePayContent.tsx
-import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var SpreePayContent = ({ isLoggedIn }) => {
   return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx39(Tabs, {}),
-    /* @__PURE__ */ jsx39(CheckoutButton, { isLoggedIn }),
-    /* @__PURE__ */ jsx39(SpreeLegal, {})
+    /* @__PURE__ */ jsx42(Tabs, {}),
+    /* @__PURE__ */ jsx42(CheckoutButton, { isLoggedIn }),
+    /* @__PURE__ */ jsx42(SpreeLegal, {})
   ] });
 };
 
 // src/hooks/useKeycloakSSO.ts
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
+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);
-  const [error, setError] = useState12(null);
-  const [isChecking, setIsChecking] = useState12(enabled);
-  const [accessToken, setAccessToken] = useState12(null);
+  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) {
@@ -3190,10 +3297,10 @@ function useKeycloakSSO(config2) {
 }
 
 // src/SpreePay.tsx
-import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var SpreePayInner = () => {
   const rootRef = useRef7(null);
-  const [portalEl, setPortalEl] = useState13(null);
+  const [portalEl, setPortalEl] = useState14(null);
   useLayoutEffect3(() => {
     if (!rootRef.current) return;
     const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
@@ -3209,7 +3316,7 @@ var SpreePayInner = () => {
     ssoPageURI: env?.ssoPageURI,
     enabled: !env?.accessToken
   });
-  const slapiFetcher = useMemo8(() => {
+  const slapiFetcher = useMemo10(() => {
     if (accessToken || env.accessToken) {
       return registerApi({
         accessToken: env.accessToken || accessToken,
@@ -3221,12 +3328,12 @@ var SpreePayInner = () => {
   const getContent = () => {
     if (isChecking) {
       return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
-        /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
-        /* @__PURE__ */ jsx40(SpreeLegal, {})
+        /* @__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__ */ jsx40(
+    return /* @__PURE__ */ jsx43(
       SWRConfig,
       {
         value: {
@@ -3235,17 +3342,17 @@ var SpreePayInner = () => {
           revalidateOnFocus: false,
           revalidateIfStale: false
         },
-        children: /* @__PURE__ */ jsx40(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx40(NiceModal7.Provider, { children: /* @__PURE__ */ jsx40(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
+        children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
       }
     );
   };
   return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
-    /* @__PURE__ */ jsx40("div", { className: "sl-spreepay__portal" }),
+    /* @__PURE__ */ jsx43("div", { className: "sl-spreepay__portal" }),
     getContent()
   ] });
 };
 var SpreePay = (props) => {
-  return /* @__PURE__ */ jsx40(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx40(SpreePayInner, {}) });
+  return /* @__PURE__ */ jsx43(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx43(SpreePayInner, {}) });
 };
 
 // src/hooks/useCapture3DS.ts