@superlogic/spree-pay 0.1.42 → 0.2.1

package/build/CryptoTab-HISSGXAC.js

@@ -0,0 +1,838 @@
+import {
+  CheckoutButton,
+  PointsSwitch,
+  cn as cn2
+} from "./chunk-FGNS5H2Q.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  InfoBanner,
+  PaymentError,
+  SlapiPaymentService,
+  cn,
+  logger,
+  useSpreePayConfig,
+  useSpreePayRegister,
+  useSpreePaymentMethod
+} from "./chunk-RQX2IOTB.js";
+
+// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
+import { useMemo as useMemo2 } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import NiceModal3 from "@ebay/nice-modal-react";
+import { RainbowKitProvider, getDefaultConfig, lightTheme } from "@rainbow-me/rainbowkit";
+import "@rainbow-me/rainbowkit/styles.css";
+import { WagmiProvider } from "wagmi";
+import { base } from "wagmi/chains";
+
+// src/components/CryptoTab/Crypto/Crypto.tsx
+import { useCallback, useEffect as useEffect2 } from "react";
+import { useAccount as useAccount3 } from "wagmi";
+
+// ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
+function getAction(client, actionFn, name) {
+  const action_implicit = client[actionFn.name];
+  if (typeof action_implicit === "function")
+    return action_implicit;
+  const action_explicit = client[name];
+  if (typeof action_explicit === "function")
+    return action_explicit;
+  return (params) => actionFn(client, params);
+}
+
+// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
+import { readContract as viem_readContract } from "viem/actions";
+function readContract(config, parameters) {
+  const { chainId, ...rest } = parameters;
+  const client = config.getClient({ chainId });
+  const action = getAction(client, viem_readContract, "readContract");
+  return action(rest);
+}
+
+// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
+import { hexToString } from "viem";
+import { call, getTransaction, waitForTransactionReceipt as viem_waitForTransactionReceipt } from "viem/actions";
+async function waitForTransactionReceipt(config, parameters) {
+  const { chainId, timeout = 0, ...rest } = parameters;
+  const client = config.getClient({ chainId });
+  const action = getAction(client, viem_waitForTransactionReceipt, "waitForTransactionReceipt");
+  const receipt = await action({ ...rest, timeout });
+  if (receipt.status === "reverted") {
+    const action_getTransaction = getAction(client, getTransaction, "getTransaction");
+    const { from: account, ...txn } = await action_getTransaction({
+      hash: receipt.transactionHash
+    });
+    const action_call = getAction(client, call, "call");
+    const code = await action_call({
+      ...txn,
+      account,
+      data: txn.input,
+      gasPrice: txn.type !== "eip1559" ? txn.gasPrice : void 0,
+      maxFeePerGas: txn.type === "eip1559" ? txn.maxFeePerGas : void 0,
+      maxPriorityFeePerGas: txn.type === "eip1559" ? txn.maxPriorityFeePerGas : void 0
+    });
+    const reason = code?.data ? hexToString(`0x${code.data.substring(138)}`) : "unknown reason";
+    throw new Error(reason);
+  }
+  return {
+    ...receipt,
+    chainId: client.chain.id
+  };
+}
+
+// ../../node_modules/@wagmi/core/dist/esm/exports/index.js
+import { custom, http, webSocket } from "viem";
+
+// src/hooks/payments/useCryptoPayment.ts
+import { erc20Abi } from "viem";
+import { useConfig, useWalletClient } from "wagmi";
+
+// src/config/baseTokens.ts
+var BASE_CHAIN_ID = 8453;
+var BASE_TOKENS = [
+  {
+    address: "0x2b11834ed1feaed4b4b3a86a6f571315e25a884d",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "MOCA" /* MOCA */,
+    name: "Moca",
+    logoURI: "https://assets.coingecko.com/coins/images/30046/standard/moca.png"
+  },
+  {
+    address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bDA02913",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDC" /* USDC */,
+    name: "USD Coin",
+    logoURI: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png"
+  },
+  {
+    address: "0x4200000000000000000000000000000000000006",
+    chainId: BASE_CHAIN_ID,
+    decimals: 18,
+    symbol: "WETH" /* WETH */,
+    name: "Wrapped Ether",
+    logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png"
+  },
+  {
+    address: "0xfde4c96c8593536e31f229ea8f37b2ada2699bb2",
+    chainId: BASE_CHAIN_ID,
+    decimals: 6,
+    symbol: "USDT" /* USDT */,
+    name: "Tether USD",
+    logoURI: "https://cryptologos.cc/logos/tether-usdt-logo.png"
+  }
+];
+
+// src/hooks/payments/useCryptoPayment.ts
+var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
+var cryptoPaymentLogger = logger.child("crypto-payment");
+var useCryptoPayment = () => {
+  const { data: walletClient } = useWalletClient();
+  const { spreePayConfig } = useSpreePayConfig();
+  const config = useConfig();
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const cryptoPayment = async (params) => {
+    if (!walletClient) {
+      const error = new Error("Wallet not connected");
+      cryptoPaymentLogger.error("Wallet not connected for crypto payment", error);
+      throw error;
+    }
+    if (!spreePayConfig) {
+      const error = new Error("Spree Pay config not loaded");
+      cryptoPaymentLogger.error("Config not loaded for crypto payment", error);
+      throw error;
+    }
+    if (selectedPaymentMethod.type !== "CRYPTO" /* CRYPTO */ || !selectedPaymentMethod.method?.symbol) {
+      const error = new Error("Unsupported payment method");
+      cryptoPaymentLogger.error("Invalid payment method for crypto payment", error, {
+        actualType: selectedPaymentMethod.type,
+        hasMethod: Boolean(selectedPaymentMethod.method)
+      });
+      throw error;
+    }
+    const { capture, hash, metadata } = params;
+    const TOKEN = selectedPaymentMethod.method.symbol;
+    cryptoPaymentLogger.info("Starting crypto payment", {
+      hash,
+      capture,
+      token: TOKEN,
+      walletAddress: walletClient.account.address
+    });
+    if (["MOCA" /* MOCA */, "WETH" /* WETH */, "USDC" /* USDC */, "USDT" /* USDT */].includes(TOKEN)) {
+      const tokenAddress = selectedPaymentMethod.method.address;
+      if (!tokenAddress) {
+        const error = new Error("Token address not found");
+        cryptoPaymentLogger.error("Token address missing", error, { token: TOKEN });
+        throw error;
+      }
+      cryptoPaymentLogger.debug("Checking token allowance", {
+        token: TOKEN,
+        tokenAddress,
+        router: spreePayConfig.crypto.oneInchAggregationRouter
+      });
+      const allowance = await readContract(config, {
+        address: tokenAddress,
+        abi: erc20Abi,
+        functionName: "allowance",
+        args: [walletClient.account.address, spreePayConfig.crypto.oneInchAggregationRouter]
+      });
+      if (allowance <= 0n) {
+        cryptoPaymentLogger.info("Requesting token approval", {
+          token: TOKEN,
+          tokenAddress
+        });
+        const result = await walletClient.writeContract({
+          address: tokenAddress,
+          abi: erc20Abi,
+          functionName: "approve",
+          args: [spreePayConfig.crypto.oneInchAggregationRouter, MAX_UINT256]
+        });
+        cryptoPaymentLogger.debug("Waiting for approval confirmation", {
+          approvalTxHash: result
+        });
+        await waitForTransactionReceipt(config, {
+          hash: result,
+          confirmations: 1
+        });
+        cryptoPaymentLogger.info("Token approval confirmed", {
+          approvalTxHash: result
+        });
+      } else {
+        cryptoPaymentLogger.debug("Sufficient allowance exists", {
+          allowance: allowance.toString()
+        });
+      }
+    }
+    cryptoPaymentLogger.debug("Creating crypto payment", {
+      token: TOKEN,
+      slippageBps: Math.round(0.5 * 100)
+    });
+    const paymentRes = await SlapiPaymentService.createPayment({
+      hash,
+      capture,
+      metadata,
+      type: "CRYPTO" /* CRYPTO */,
+      crypto: {
+        token: TOKEN,
+        publicKey: walletClient.account.address,
+        slippageType: "fixed",
+        slippageBps: Math.round(0.5 * 100)
+      }
+    });
+    cryptoPaymentLogger.info("Crypto payment created", {
+      paymentId: paymentRes.data.id,
+      txId: paymentRes.data.txId
+    });
+    const parsedTX = JSON.parse(paymentRes.data.encodedTx);
+    cryptoPaymentLogger.debug("Sending transaction", {
+      to: parsedTX.to,
+      value: parsedTX.value.toString()
+    });
+    const txHash = await walletClient.sendTransaction({
+      account: walletClient.account.address,
+      to: parsedTX.to,
+      data: parsedTX.data,
+      value: parsedTX.value
+    });
+    cryptoPaymentLogger.info("Transaction sent", {
+      txHash,
+      paymentId: paymentRes.data.id
+    });
+    cryptoPaymentLogger.debug("Verifying transaction on chain", {
+      txId: paymentRes.data.txId,
+      txHash
+    });
+    const res = await SlapiPaymentService.baseVerify({ id: paymentRes.data.txId, txHash });
+    const finalStatus = res.verified ? "CAPTURED" /* CAPTURED */ : "FAILED" /* FAILED */;
+    cryptoPaymentLogger.info("Crypto payment completed", {
+      paymentId: paymentRes.data.id,
+      txHash,
+      verified: res.verified,
+      status: finalStatus
+    });
+    return {
+      txHash,
+      paymentId: paymentRes.data.id,
+      txId: paymentRes.data.txId,
+      status: finalStatus,
+      paymentType: "CRYPTO" /* CRYPTO */
+    };
+  };
+  return { cryptoPayment };
+};
+
+// src/components/CryptoTab/Crypto/ConnectButton.tsx
+import { ConnectButton as RainbowButton } from "@rainbow-me/rainbowkit";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ConnectButton = () => {
+  const buttonCN = "h-9 rounded-full border border-(--b-brand) px-4 text-sm font-medium text-(--brand-primary)";
+  return /* @__PURE__ */ jsx(RainbowButton.Custom, { children: ({ mounted, chain, account, openAccountModal, openChainModal, openConnectModal }) => {
+    if (!mounted) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: (() => {
+      if (!mounted || !account || !chain) {
+        return /* @__PURE__ */ jsx("button", { className: buttonCN, onClick: openConnectModal, children: "Connect wallet" });
+      }
+      if (chain.unsupported) {
+        return /* @__PURE__ */ jsx("button", { className: buttonCN, onClick: openChainModal, children: "Select a Network" });
+      }
+      return /* @__PURE__ */ jsxs("button", { className: cn(buttonCN, "flex items-center gap-2 pl-1.5"), onClick: openAccountModal, children: [
+        chain.hasIcon && /* @__PURE__ */ jsx("div", { className: "size-6 overflow-hidden rounded-full", style: { background: chain.iconBackground }, children: chain.iconUrl && /* @__PURE__ */ jsx("img", { alt: chain.name ?? "Chain icon", src: chain.iconUrl }) }),
+        account.displayName
+      ] });
+    })() });
+  } });
+};
+
+// src/config/symbolLogos.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MOCA_SVG = /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 28 28", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "14", cy: "14", r: "13.5", fill: "#c15f97" }),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      fill: "#fff",
+      d: "M16.06 6.65c.3 0 .59.16.74.43l6.06 10.5a.85.85 0 1 1-1.47.84L16.06 9.2l-1.51 2.62-.02.03-3.8 6.57a.85.85 0 0 1-1.47-.84l3.57-6.18-1.27-2.2-5.32 9.22a.85.85 0 0 1-1.48-.84l6.07-10.5.06-.1a.85.85 0 0 1 1.4.1l1.52 2.62 1.52-2.62.06-.1c.16-.2.4-.33.67-.33"
+    }
+  ),
+  /* @__PURE__ */ jsx2("circle", { cx: "16", cy: "14", r: "1.5", fill: "#fff" })
+] });
+var USDC_SVG = /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
+  /* @__PURE__ */ jsx2("path", { fill: "#2775ca", d: "M14 28c7.76 0 14-6.24 14-14S21.76 0 14 0 0 6.24 0 14s6.24 14 14 14" }),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      fill: "#fff",
+      d: "M17.85 16.22c0-2.04-1.23-2.74-3.68-3.04-1.75-.23-2.1-.7-2.1-1.51 0-.82.59-1.34 1.75-1.34 1.05 0 1.64.35 1.93 1.22.06.18.23.3.4.3h.94a.4.4 0 0 0 .41-.42v-.05a2.91 2.91 0 0 0-2.63-2.4v-1.4c0-.23-.17-.4-.46-.46h-.88c-.23 0-.4.17-.46.46v1.35c-1.75.23-2.86 1.4-2.86 2.85 0 1.93 1.16 2.69 3.61 2.98 1.64.29 2.16.64 2.16 1.57 0 .94-.81 1.58-1.92 1.58-1.52 0-2.04-.64-2.22-1.52-.06-.23-.23-.35-.4-.35h-1a.4.4 0 0 0-.4.41v.06c.23 1.46 1.16 2.5 3.08 2.8v1.4c0 .23.18.4.47.47h.88c.23 0 .4-.18.46-.47v-1.4c1.75-.3 2.92-1.52 2.92-3.1Z"
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      fill: "#fff",
+      d: "M11.03 22.34a8.69 8.69 0 0 1-5.2-11.2 8.63 8.63 0 0 1 5.2-5.19.6.6 0 0 0 .35-.58v-.82c0-.23-.12-.4-.35-.47-.06 0-.18 0-.24.06a10.48 10.48 0 0 0 0 20.01c.24.12.47 0 .53-.23.06-.06.06-.12.06-.24v-.81c0-.18-.18-.41-.35-.53m6.18-18.2c-.23-.12-.47 0-.53.23-.05.06-.05.12-.05.24v.81c0 .24.17.47.35.59a8.69 8.69 0 0 1 5.19 11.2 8.63 8.63 0 0 1-5.2 5.19c-.23.12-.34.3-.34.58v.82c0 .23.11.4.35.47.05 0 .17 0 .23-.06a10.48 10.48 0 0 0 6.82-13.19 10.58 10.58 0 0 0-6.82-6.88"
+    }
+  )
+] });
+var USDT_SVG = /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-7", fill: "none", viewBox: "0 0 28 28", children: [
+  /* @__PURE__ */ jsx2("path", { fill: "#26a17b", d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28" }),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      fill: "#fff",
+      d: "M15.5 15.3v-.01c-.1 0-.6.04-1.72.04-.88 0-1.5-.03-1.73-.04-3.42-.15-5.97-.74-5.97-1.46 0-.7 2.55-1.3 5.97-1.46v2.33a26 26 0 0 0 3.44 0v-2.32c3.42.15 5.96.74 5.96 1.46 0 .7-2.55 1.3-5.96 1.45m0-3.15v-2.08h4.76V6.89H7.3v3.17h4.76v2.08c-3.87.17-6.77.94-6.77 1.86s2.9 1.68 6.77 1.86v6.67h3.45v-6.67c3.86-.18 6.76-.94 6.76-1.86s-2.9-1.68-6.76-1.86"
+    }
+  )
+] });
+var WETH_SVG = /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-7", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_528_9173)", children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fill: "#000",
+        d: "M17.14 20.57c0 .95-1.31 2.01-3.39 2.4h-2.59c-4.65 0-8.42-1.07-8.42-2.4 0-1.32 3.77-2.4 8.42-2.4s5.98 1.08 5.98 2.4Z"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fill: "#F61F7D",
+        d: "M23.31 11c0 5.86-5.18 11.63-11.07 11.63-5.9 0-11.9-6.17-11.9-12.03C.34 4.75 5.12 0 11.01 0s12.3 5.15 12.3 11Z"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fill: "#000",
+        fillRule: "evenodd",
+        d: "M19.19 18.27c1.87-2 3.03-4.65 3.03-7.26 0-2.52-1.39-5-3.56-6.87-2.18-1.88-5-3.05-7.65-3.05a9.54 9.54 0 0 0-9.57 9.51c0 2.57 1.33 5.31 3.42 7.44 2.1 2.13 4.8 3.5 7.38 3.5a9.7 9.7 0 0 0 6.95-3.27Zm-6.95 4.36c5.89 0 11.07-5.77 11.07-11.62C23.31 5.15 16.9 0 11.01 0A10.63 10.63 0 0 0 .34 10.6c0 5.86 6 12.03 11.9 12.03Z",
+        clipRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ jsx2("path", { fill: "#fff", d: "M24 12.17a10.8 10.8 0 1 1-21.6 0 10.8 10.8 0 0 1 21.6 0Z" }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fill: "#000",
+        fillRule: "evenodd",
+        d: "M13.2 21.87a9.7 9.7 0 1 0 0-19.4 9.7 9.7 0 0 0 0 19.4Zm0 1.1a10.8 10.8 0 1 0 0-21.6 10.8 10.8 0 0 0 0 21.6Z",
+        clipRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ jsx2("path", { fill: "#000", fillRule: "evenodd", d: "M3.02 10.63.7 8.75l.74-.86 2.34 1.87-.75.87Z", clipRule: "evenodd" }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fill: "#000",
+        d: "M5.83 9.94h.99l.31 3 .4-3h.78l.41 2.98.32-2.98h.98l-.63 5.15H8.37l-.45-3.1-.42 3.1H6.47l-.64-5.15ZM10.91 9.94h2.38v.78h-1.2v1.27H13v.8h-.92v1.53h1.22v.77h-2.39V9.94ZM14.64 10.79h-.81v-.85h2.78v.85h-.8v4.3h-1.17v-4.3ZM17.42 9.94h1.16v2.09h.82V9.94h1.17v5.15H19.4v-2.25h-.82v2.25h-1.16V9.94Z"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: "clip0_528_9173", children: /* @__PURE__ */ jsx2("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
+] });
+var symbolLogos = {
+  MOCA: MOCA_SVG,
+  USDC: USDC_SVG,
+  USDT: USDT_SVG,
+  WETH: WETH_SVG
+};
+function getSymbolLogo(symbol) {
+  return symbolLogos[symbol] ?? null;
+}
+
+// src/components/CryptoTab/Crypto/Logos.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Logos = () => {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex", children: [
+    /* @__PURE__ */ jsx3("div", { className: "rounded-full border border-(--b-primary)", children: getSymbolLogo("MOCA") }),
+    /* @__PURE__ */ jsx3("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDC") }),
+    /* @__PURE__ */ jsx3("div", { className: "-ml-2.5 rounded-full border border-(--b-primary)", children: getSymbolLogo("USDT") }),
+    /* @__PURE__ */ jsx3("div", { className: "-ml-2.5 rounded-full border border-(--b-primary) bg-(--s-primary)", children: getSymbolLogo("WETH") })
+  ] });
+};
+
+// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
+import NiceModal2 from "@ebay/nice-modal-react";
+
+// src/modals/CryptoSelectModal.tsx
+import { useMemo, useState as useState2 } from "react";
+import NiceModal, { useModal } from "@ebay/nice-modal-react";
+
+// ../ui/src/components/input.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn2(
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base text-(--primary) shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-(--tertiary) disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import * as React2 from "react";
+
+// ../../node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive/dist/index.mjs
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot = createSlot(`Primitive.${node}`);
+  const Node = React.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx5(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+
+// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
+import { jsx as jsx6 } from "react/jsx-runtime";
+var NAME = "Separator";
+var DEFAULT_ORIENTATION = "horizontal";
+var ORIENTATIONS = ["horizontal", "vertical"];
+var Separator = React2.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__ */ jsx6(
+    Primitive.div,
+    {
+      "data-orientation": orientation,
+      ...semanticProps,
+      ...domProps,
+      ref: forwardedRef
+    }
+  );
+});
+Separator.displayName = NAME;
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var Root = Separator;
+
+// ../ui/src/components/separator.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn2(
+        "shrink-0 bg-(--b-secondary) data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/hooks/useBaseERC20Token.ts
+import * as React3 from "react";
+import { erc20Abi as erc20Abi2, 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] = React3.useState([]);
+  const [isLoading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  React3.useEffect(() => {
+    let cancelled = false;
+    async function run() {
+      const client = baseClient ?? defaultClient;
+      if (!address || !client) {
+        setRows([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const normalizedTokens = [];
+        for (const t of BASE_TOKENS) {
+          try {
+            const addr = getAddress(t.address);
+            normalizedTokens.push({ ...t, address: addr });
+          } catch {
+          }
+        }
+        const res = await client.multicall({
+          allowFailure: true,
+          contracts: normalizedTokens.map((t) => ({
+            address: t.address,
+            abi: erc20Abi2,
+            functionName: "balanceOf",
+            args: [address]
+          }))
+        });
+        const acc = [];
+        for (let idx = 0; idx < res.length; idx++) {
+          const r = res[idx];
+          const t = normalizedTokens[idx];
+          if (r.status === "success") {
+            const raw = r.result;
+            if (raw > 0n) acc.push({ ...t, raw, formatted: formatUnits(raw, t.decimals) });
+          }
+        }
+        if (!cancelled) setRows(acc);
+      } catch (e) {
+        if (!cancelled) {
+          const msg = e instanceof Error ? e.message : "Multicall failed";
+          setError(
+            baseClient ? msg : `Base client unavailable. Ensure Base (${BASE_CHAIN_ID}) is configured in Wagmi.`
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [address, baseClient, defaultClient]);
+  return { isLoading, error: error ?? null, erc20Balances: rows };
+}
+
+// src/hooks/useBaseNativeToken.ts
+import { useAccount as useAccount2, useBalance } from "wagmi";
+function useBaseNativeToken() {
+  const { address } = useAccount2();
+  const { data, isLoading, error } = useBalance({
+    address,
+    chainId: BASE_CHAIN_ID,
+    query: { enabled: !!address }
+  });
+  const nativeBalance = data ? { ...data, symbol: "ETH" /* ETH */, logoURI: "https://static.cdnlogo.com/logos/e/84/ethereum-eth_thumb.png" } : void 0;
+  return {
+    isLoadingNative: isLoading,
+    nativeError: error?.message ?? null,
+    nativeBalance
+  };
+}
+
+// src/hooks/useBaseTokens.ts
+import useSWR from "swr";
+var useBaseTokens = () => {
+  const { data: resData, isLoading } = useSWR(`/v1/base-transactions/tokens`);
+  return { tokens: resData?.data ?? [], tokensIsLoading: isLoading };
+};
+
+// src/modals/CryptoSelectModal.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var CryptoSelectModal = NiceModal.create(() => {
+  const modal = useModal();
+  const { isLoading, error, erc20Balances } = useBaseERC20Token();
+  const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
+  const { tokens, tokensIsLoading } = useBaseTokens();
+  const [search, setSearch] = useState2("");
+  const filteredCoins = useMemo(() => {
+    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);
+  return /* @__PURE__ */ jsxs4(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
+    /* @__PURE__ */ jsx8(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
+    /* @__PURE__ */ jsxs4(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx8("button", { className: "rounded-md hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-6", viewBox: "0 0 24 25", children: /* @__PURE__ */ jsx8("path", { stroke: "currentColor", d: "m15 6.5-6 6 6 6" }) }) }),
+          /* @__PURE__ */ jsx8(DialogTitle, { className: "text-2xl font-medium text-(--brand-primary)", children: "Select a token" }),
+          /* @__PURE__ */ jsx8("button", { className: "rounded-md p-1 hover:bg-(--s-primary-hover)", onClick: modal.remove, children: /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 17", children: /* @__PURE__ */ jsx8(
+            "path",
+            {
+              fill: "currentColor",
+              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__ */ jsx8(Input, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
+      ] }),
+      /* @__PURE__ */ jsx8(Separator2, { className: "hidden md:block" }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
+        /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "Tokens with wallet balance" }),
+        (error || nativeError) && /* @__PURE__ */ jsx8("p", { className: "text-center text-sm text-(--negative)", children: "Something wrong" }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-1", children: [
+          isLoadingNative && /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+          nativeBalance && /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover)",
+              onClick: () => handleSelect(nativeBalance),
+              children: [
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                  nativeBalance.logoURI && /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: nativeBalance.logoURI, alt: `${nativeBalance.symbol} logo` }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
+                ] }),
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
+              ]
+            },
+            nativeBalance.symbol
+          ),
+          isLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+          ] }),
+          erc20Balances.map((coin) => {
+            const Icon = getSymbolLogo(coin.symbol);
+            return /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+                onClick: () => handleSelect(coin),
+                children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                    Boolean(Icon) && Icon,
+                    /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.symbol })
+                  ] }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: coin.formatted })
+                ]
+              },
+              coin.symbol
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx8("h3", { className: "text-md font-medium text-(--brand-primary)", children: "All Tokens" }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
+          tokensIsLoading && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" }),
+            /* @__PURE__ */ jsx8("div", { className: "h-11 animate-pulse rounded-md bg-(--s-primary)" })
+          ] }),
+          filteredCoins.map((token) => {
+            const userCoin = userCoins.find((c) => c.symbol === token.symbol);
+            return /* @__PURE__ */ jsx8(
+              "button",
+              {
+                disabled: !userCoin,
+                onClick: () => userCoin && handleSelect(userCoin),
+                className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-(--brand-primary) hover:bg-(--s-primary-hover) disabled:cursor-not-allowed disabled:opacity-50",
+                children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                  token.logoURI ? /* @__PURE__ */ jsx8("img", { className: "size-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx8("div", { className: "size-8 shrink-0 rounded-full bg-(--s-tertiary)" }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium", children: token.symbol })
+                ] })
+              },
+              token.symbol
+            );
+          })
+        ] })
+      ] })
+    ] })
+  ] });
+});
+CryptoSelectModal.displayName = "CryptoSelectModal";
+
+// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectCoinButton = () => {
+  const openModal = () => {
+    NiceModal2.show(CryptoSelectModal);
+  };
+  return /* @__PURE__ */ jsx9(
+    "button",
+    {
+      onClick: openModal,
+      className: "flex h-11 w-full overflow-hidden rounded-md bg-(--s-primary) hover:bg-(--s-primary-hover)",
+      children: /* @__PURE__ */ jsxs5("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
+        /* @__PURE__ */ jsx9("div", { className: "flex items-center", children: /* @__PURE__ */ jsx9("p", { className: "font-medium text-(--secondary)", children: "Select a token" }) }),
+        /* @__PURE__ */ jsx9("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", className: "size-4", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx9("path", { stroke: "currentColor", d: "m6 12.43 4-4-4-4" }) })
+      ] })
+    }
+  );
+};
+
+// src/components/CryptoTab/Crypto/SelectedCoin.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectedCoin = (props) => {
+  const { coin, balance, logoURI } = props;
+  const Icon = getSymbolLogo(coin);
+  return /* @__PURE__ */ jsxs6("div", { className: "flex h-12 w-full overflow-hidden rounded-md border-2 border-(--b-brand) bg-(--s-primary)", children: [
+    /* @__PURE__ */ jsx10("div", { className: "flex h-full w-11 shrink-0 items-center justify-center border-r border-(--b-brand) bg-(--s-primary)", children: /* @__PURE__ */ jsx10("div", { className: "flex size-5 items-center justify-center rounded-full border-2 border-(--brand-primary)", children: /* @__PURE__ */ jsx10("div", { className: "size-2 rounded-full bg-(--brand-primary)" }) }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex h-full w-full items-center justify-between rounded-r-md px-3", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+        Icon,
+        !Icon && logoURI && /* @__PURE__ */ jsx10("img", { className: "mr-1 size-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
+        /* @__PURE__ */ jsx10("p", { className: "font-semibold text-(--brand-primary)", children: coin }),
+        /* @__PURE__ */ jsx10("svg", { xmlns: "http://www.w3.org/2000/svg", className: "size-4", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx10("path", { stroke: "currentColor", d: "m6 12.434 4-4-4-4" }) })
+      ] }),
+      /* @__PURE__ */ jsxs6("p", { className: "text-xs font-medium text-(--secondary)", children: [
+        "Wallet balance ",
+        /* @__PURE__ */ jsx10("span", { className: "text-(--brand-primary)", children: balance })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/CryptoTab/Crypto/Crypto.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Crypto = () => {
+  const { address } = useAccount3();
+  const { selectedPaymentMethod } = useSpreePaymentMethod();
+  const { cryptoPayment } = useCryptoPayment();
+  const { spreePayConfig } = useSpreePayConfig();
+  const isWalletConnected = Boolean(address);
+  const { register } = useSpreePayRegister();
+  const handlePay = useCallback(
+    async (data) => {
+      try {
+        const res = await cryptoPayment(data);
+        if (["AUTHORIZED" /* AUTHORIZED */, "CAPTURED" /* CAPTURED */].includes(res.status)) {
+          return Promise.resolve(res);
+        }
+        return Promise.reject(new PaymentError("Crypto payment failed", res.status));
+      } catch (_) {
+        return Promise.reject(new PaymentError("Payment failed", "FAILED" /* FAILED */));
+      }
+    },
+    [cryptoPayment]
+  );
+  useEffect2(() => {
+    register(handlePay);
+  }, [register, handlePay]);
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-baseline gap-4", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-lg leading-7 font-medium text-(--brand-primary) md:text-[22px]", children: "Pay with Crypto" }),
+      /* @__PURE__ */ jsx11(ConnectButton, {})
+    ] }),
+    !isWalletConnected && /* @__PURE__ */ jsx11(Logos, {}),
+    isWalletConnected && /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-4", children: [
+      selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx11(
+        SelectedCoin,
+        {
+          coin: selectedPaymentMethod.method.symbol,
+          balance: selectedPaymentMethod.method.formatted,
+          logoURI: selectedPaymentMethod.method.logoURI
+        }
+      ),
+      /* @__PURE__ */ jsx11(SelectCoinButton, {})
+    ] }),
+    spreePayConfig?.crypto.infoMessage && /* @__PURE__ */ jsx11(InfoBanner, { message: spreePayConfig.crypto.infoMessage })
+  ] });
+};
+
+// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
+import { jsx as jsx12 } 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 cfg = wagmiConfigCache.get(key);
+  if (!cfg) {
+    cfg = getDefaultConfig({ appName, projectId, chains: CHAINS, ssr: true });
+    wagmiConfigCache.set(key, cfg);
+  }
+  return cfg;
+}
+var CryptoWrapper = () => {
+  const { spreePayConfig, configIsLoading } = useSpreePayConfig();
+  const wagmiConfig = useMemo2(() => {
+    if (!spreePayConfig) return null;
+    return getCachedWagmiConfig(spreePayConfig.rainbowProjectId, spreePayConfig.rainbowAppName);
+  }, [spreePayConfig]);
+  if (configIsLoading || !wagmiConfig) return null;
+  return /* @__PURE__ */ jsx12(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx12(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx12(RainbowKitProvider, { theme: lightTheme({ borderRadius: "large" }), children: /* @__PURE__ */ jsx12(NiceModal3.Provider, { children: /* @__PURE__ */ jsx12(Crypto, {}) }) }) }) });
+};
+
+// src/components/CryptoTab/CryptoTab.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var CryptoTab = ({ isLoggedIn }) => {
+  const { spreePayConfig } = useSpreePayConfig();
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx13("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx13(CryptoWrapper, {}) }),
+    !spreePayConfig?.crypto.hidePoints && /* @__PURE__ */ jsx13("div", { className: "border-b border-(--border-component-specific-card) px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx13(PointsSwitch, { disabled: true, message: spreePayConfig?.crypto.pointsInfoMessage }) }),
+    /* @__PURE__ */ jsx13(CheckoutButton, { isLoggedIn })
+  ] });
+};
+export {
+  CryptoTab
+};