@volr/react-ui 0.1.94 → 0.1.95

package/dist/index.js

@@ -1,13 +1,351 @@
-import React11, { createContext, useContext, useState, useMemo, useEffect, useCallback, useRef, useId } from 'react';
+import React10, { createContext, useContext, useState, useMemo, useEffect, useCallback, useRef, useId, useReducer } from 'react';
 import { createPortal } from 'react-dom';
-import { useVolrContext, useInternalAuth, usePasskeyEnrollment, useMpcConnection, VolrProvider, useVolrAuthCallback, useVolrPay, useVolrLogin, useDepositListener, createGetNetworkInfo } from '@volr/react';
-export { VolrProvider, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin } from '@volr/react';
+import { useVolrContext, useInternalAuth, usePasskeyEnrollment, useMpcConnection, VolrProvider, useVolrAuthCallback, useVolrPaymentApi, useVolrLogin, useVolr, useDepositListener, createGetNetworkInfo } from '@volr/react';
+export { VolrProvider, useDepositListener, usePasskeyEnrollment, useVolr, useVolrLogin, useVolrPaymentApi } from '@volr/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { QRCodeSVG } from 'qrcode.react';
 
-// src/providers/VolrUIProvider.tsx
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+
+// ../node_modules/viem/_esm/constants/abis.js
+var universalResolverErrors, erc20Abi;
+var init_abis = __esm({
+  "../node_modules/viem/_esm/constants/abis.js"() {
+    universalResolverErrors = [
+      {
+        inputs: [
+          {
+            name: "dns",
+            type: "bytes"
+          }
+        ],
+        name: "DNSDecodingFailed",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "ens",
+            type: "string"
+          }
+        ],
+        name: "DNSEncodingFailed",
+        type: "error"
+      },
+      {
+        inputs: [],
+        name: "EmptyAddress",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "status",
+            type: "uint16"
+          },
+          {
+            name: "message",
+            type: "string"
+          }
+        ],
+        name: "HttpError",
+        type: "error"
+      },
+      {
+        inputs: [],
+        name: "InvalidBatchGatewayResponse",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "errorData",
+            type: "bytes"
+          }
+        ],
+        name: "ResolverError",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "name",
+            type: "bytes"
+          },
+          {
+            name: "resolver",
+            type: "address"
+          }
+        ],
+        name: "ResolverNotContract",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "name",
+            type: "bytes"
+          }
+        ],
+        name: "ResolverNotFound",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            name: "primary",
+            type: "string"
+          },
+          {
+            name: "primaryAddress",
+            type: "bytes"
+          }
+        ],
+        name: "ReverseAddressMismatch",
+        type: "error"
+      },
+      {
+        inputs: [
+          {
+            internalType: "bytes4",
+            name: "selector",
+            type: "bytes4"
+          }
+        ],
+        name: "UnsupportedResolverProfile",
+        type: "error"
+      }
+    ];
+    [
+      ...universalResolverErrors,
+      {
+        name: "resolveWithGateways",
+        type: "function",
+        stateMutability: "view",
+        inputs: [
+          { name: "name", type: "bytes" },
+          { name: "data", type: "bytes" },
+          { name: "gateways", type: "string[]" }
+        ],
+        outputs: [
+          { name: "", type: "bytes" },
+          { name: "address", type: "address" }
+        ]
+      }
+    ];
+    [
+      ...universalResolverErrors,
+      {
+        name: "reverseWithGateways",
+        type: "function",
+        stateMutability: "view",
+        inputs: [
+          { type: "bytes", name: "reverseName" },
+          { type: "uint256", name: "coinType" },
+          { type: "string[]", name: "gateways" }
+        ],
+        outputs: [
+          { type: "string", name: "resolvedName" },
+          { type: "address", name: "resolver" },
+          { type: "address", name: "reverseResolver" }
+        ]
+      }
+    ];
+    erc20Abi = [
+      {
+        type: "event",
+        name: "Approval",
+        inputs: [
+          {
+            indexed: true,
+            name: "owner",
+            type: "address"
+          },
+          {
+            indexed: true,
+            name: "spender",
+            type: "address"
+          },
+          {
+            indexed: false,
+            name: "value",
+            type: "uint256"
+          }
+        ]
+      },
+      {
+        type: "event",
+        name: "Transfer",
+        inputs: [
+          {
+            indexed: true,
+            name: "from",
+            type: "address"
+          },
+          {
+            indexed: true,
+            name: "to",
+            type: "address"
+          },
+          {
+            indexed: false,
+            name: "value",
+            type: "uint256"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "allowance",
+        stateMutability: "view",
+        inputs: [
+          {
+            name: "owner",
+            type: "address"
+          },
+          {
+            name: "spender",
+            type: "address"
+          }
+        ],
+        outputs: [
+          {
+            type: "uint256"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "approve",
+        stateMutability: "nonpayable",
+        inputs: [
+          {
+            name: "spender",
+            type: "address"
+          },
+          {
+            name: "amount",
+            type: "uint256"
+          }
+        ],
+        outputs: [
+          {
+            type: "bool"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "balanceOf",
+        stateMutability: "view",
+        inputs: [
+          {
+            name: "account",
+            type: "address"
+          }
+        ],
+        outputs: [
+          {
+            type: "uint256"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "decimals",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [
+          {
+            type: "uint8"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "name",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [
+          {
+            type: "string"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "symbol",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [
+          {
+            type: "string"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "totalSupply",
+        stateMutability: "view",
+        inputs: [],
+        outputs: [
+          {
+            type: "uint256"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "transfer",
+        stateMutability: "nonpayable",
+        inputs: [
+          {
+            name: "recipient",
+            type: "address"
+          },
+          {
+            name: "amount",
+            type: "uint256"
+          }
+        ],
+        outputs: [
+          {
+            type: "bool"
+          }
+        ]
+      },
+      {
+        type: "function",
+        name: "transferFrom",
+        stateMutability: "nonpayable",
+        inputs: [
+          {
+            name: "sender",
+            type: "address"
+          },
+          {
+            name: "recipient",
+            type: "address"
+          },
+          {
+            name: "amount",
+            type: "uint256"
+          }
+        ],
+        outputs: [
+          {
+            type: "bool"
+          }
+        ]
+      }
+    ];
+  }
+});
 
 // src/i18n/locales/en.ts
 var en = {
@@ -971,7 +1309,7 @@ var variantMap = {
   ghost: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "none" },
   outline: { backgroundColor: "transparent", color: "var(--volr-text-secondary)", border: "1px solid var(--volr-border)" }
 };
-var Button = React11.forwardRef(
+var Button = React10.forwardRef(
   ({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
     const { accentColor } = useVolrUI();
     const sizeStyle = sizeMap[size];
@@ -2159,8 +2497,12 @@ function SigninModal({ isOpen, onClose, onError }) {
     }
     setCurrentScreen("passkey-setup");
   };
-  const handleSiweSuccess = (_data) => {
-    onClose();
+  const handleSiweSuccess = (data) => {
+    if (data.keyStorageType) {
+      onClose();
+      return;
+    }
+    setCurrentScreen("passkey-setup");
   };
   const handlePasskeyComplete = () => {
     onClose();
@@ -2421,7 +2763,7 @@ function AssetSelectView({
     }) })
   ] });
 }
-var TextLinkButton = React11.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
+var TextLinkButton = React10.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3097,6 +3439,302 @@ var DepositModal = ({
     )
   ] });
 };
+
+// ../node_modules/viem/_esm/index.js
+init_abis();
+
+// src/hooks/usePaymentModalState.ts
+var initialState = {
+  step: "info",
+  processingStep: "signing",
+  balance: "0",
+  isBalanceLoading: true,
+  isPaying: false,
+  currentPayment: null,
+  txHash: void 0,
+  error: void 0,
+  logoUrl: void 0,
+  receiverAddress: null,
+  showDeposit: false
+};
+function paymentModalReducer(state, action) {
+  switch (action.type) {
+    case "RESET":
+      return { ...initialState };
+    case "INIT_PAYMENT":
+      return {
+        ...initialState,
+        currentPayment: action.payment,
+        isBalanceLoading: true
+      };
+    case "SET_BALANCE":
+      return { ...state, balance: action.balance };
+    case "SET_BALANCE_LOADING":
+      return { ...state, isBalanceLoading: action.loading };
+    case "SET_LOGO_URL":
+      return { ...state, logoUrl: action.logoUrl };
+    case "SET_RECEIVER_ADDRESS":
+      return { ...state, receiverAddress: action.receiverAddress };
+    case "START_PAYMENT":
+      return {
+        ...state,
+        isPaying: true,
+        step: "processing",
+        processingStep: "signing",
+        error: void 0
+      };
+    case "SET_PROCESSING_STEP":
+      return { ...state, processingStep: action.step };
+    case "SET_TX_HASH":
+      return { ...state, txHash: action.txHash };
+    case "PAYMENT_SUCCESS":
+      return {
+        ...state,
+        isPaying: false,
+        step: "result",
+        currentPayment: action.payment
+      };
+    case "PAYMENT_ERROR":
+      return {
+        ...state,
+        isPaying: false,
+        step: "result",
+        error: action.error
+      };
+    case "RETRY":
+      return {
+        ...state,
+        step: "info",
+        error: void 0,
+        isBalanceLoading: true
+      };
+    case "SHOW_DEPOSIT":
+      return { ...state, showDeposit: true };
+    case "HIDE_DEPOSIT":
+      return { ...state, showDeposit: false, isBalanceLoading: true };
+    default:
+      return state;
+  }
+}
+function usePaymentModalState(open, onOpenChange) {
+  const { user } = useVolrContext();
+  const { client } = useInternalAuth();
+  const { evm } = useVolr();
+  const { paymentOptions } = useVolrModal();
+  const { updatePaymentToProcessing, pollPaymentStatus } = useVolrPaymentApi();
+  const [state, dispatch] = useReducer(paymentModalReducer, initialState);
+  const fetchBalance = useCallback(
+    async (payment) => {
+      if (!user?.evmAddress) {
+        dispatch({ type: "SET_BALANCE_LOADING", loading: false });
+        return;
+      }
+      dispatch({ type: "SET_BALANCE_LOADING", loading: true });
+      try {
+        const evmClient = evm(payment.token.chainId);
+        const tokenAddress = payment.token.id.split("_")[1];
+        let balanceRaw;
+        if (tokenAddress === "native") {
+          balanceRaw = await evmClient.getBalance(user.evmAddress);
+        } else {
+          balanceRaw = await evmClient.readContract({
+            address: tokenAddress,
+            abi: erc20Abi,
+            functionName: "balanceOf",
+            args: [user.evmAddress]
+          });
+        }
+        const balanceNum = Number(balanceRaw) / Math.pow(10, payment.token.decimals);
+        const formattedBalance = balanceNum.toLocaleString(void 0, {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: payment.token.decimals > 6 ? 6 : payment.token.decimals
+        });
+        dispatch({ type: "SET_BALANCE", balance: formattedBalance });
+      } catch (err) {
+        console.error("Failed to fetch balance:", err);
+        dispatch({ type: "SET_BALANCE", balance: "0" });
+      } finally {
+        dispatch({ type: "SET_BALANCE_LOADING", loading: false });
+      }
+    },
+    [user, evm]
+  );
+  const fetchBranding = useCallback(async () => {
+    try {
+      const response = await client.get("/auth/branding");
+      dispatch({ type: "SET_LOGO_URL", logoUrl: response.logoUrl });
+    } catch {
+    }
+  }, [client]);
+  const fetchPaymentConfig = useCallback(async () => {
+    try {
+      const response = await client.get(
+        "/payments/config"
+      );
+      dispatch({
+        type: "SET_RECEIVER_ADDRESS",
+        receiverAddress: response.receiverAddress
+      });
+    } catch (err) {
+      console.error("Failed to fetch payment config:", err);
+      dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: null });
+    }
+  }, [client]);
+  useEffect(() => {
+    if (open && paymentOptions) {
+      dispatch({ type: "INIT_PAYMENT", payment: paymentOptions.payment });
+      fetchBalance(paymentOptions.payment);
+      fetchBranding();
+      fetchPaymentConfig();
+    } else if (!open) {
+      dispatch({ type: "RESET" });
+    }
+  }, [open, paymentOptions, fetchBalance, fetchBranding, fetchPaymentConfig]);
+  const handlePay = useCallback(async () => {
+    const { currentPayment, receiverAddress } = state;
+    if (!currentPayment || !user?.evmAddress || !paymentOptions || !receiverAddress) {
+      return;
+    }
+    dispatch({ type: "START_PAYMENT" });
+    try {
+      const evmClient = evm(currentPayment.token.chainId);
+      const tokenAddress = currentPayment.token.id.split("_")[1];
+      dispatch({ type: "SET_PROCESSING_STEP", step: "broadcasting" });
+      let result;
+      if (tokenAddress === "native") {
+        result = await evmClient.sendTransaction({
+          to: receiverAddress,
+          data: "0x",
+          value: BigInt(currentPayment.amount)
+        });
+      } else {
+        result = await evmClient.sendBatch([
+          {
+            target: tokenAddress,
+            abi: erc20Abi,
+            functionName: "transfer",
+            args: [
+              receiverAddress,
+              BigInt(currentPayment.amount)
+            ]
+          }
+        ]);
+      }
+      dispatch({ type: "SET_TX_HASH", txHash: result.txHash ?? "" });
+      dispatch({ type: "SET_PROCESSING_STEP", step: "confirming" });
+      await updatePaymentToProcessing(currentPayment.id, result.txId);
+      paymentOptions.onProcessing?.({
+        ...currentPayment,
+        txHash: result.txHash ?? "",
+        status: "PROCESSING"
+      });
+      const confirmedPayment = await pollPaymentStatus(currentPayment.id);
+      dispatch({ type: "PAYMENT_SUCCESS", payment: confirmedPayment });
+      if (confirmedPayment.status === "CONFIRMED") {
+        paymentOptions.onComplete?.(confirmedPayment);
+      } else if (confirmedPayment.status === "FAILED") {
+        const failError = {
+          code: "PAYMENT_FAILED",
+          message: "Transaction failed on-chain"
+        };
+        dispatch({ type: "PAYMENT_ERROR", error: failError });
+        paymentOptions.onError?.(failError);
+      }
+    } catch (err) {
+      console.error("Payment failed:", err);
+      const paymentError = {
+        code: err.code || "PAYMENT_FAILED",
+        message: err.message || "Payment failed. Please try again."
+      };
+      dispatch({ type: "PAYMENT_ERROR", error: paymentError });
+      paymentOptions?.onError?.(paymentError);
+    }
+  }, [
+    state,
+    user,
+    paymentOptions,
+    evm,
+    updatePaymentToProcessing,
+    pollPaymentStatus
+  ]);
+  const handleDeposit = useCallback(() => {
+    dispatch({ type: "SHOW_DEPOSIT" });
+  }, []);
+  const handleDepositClose = useCallback(
+    (depositOpen) => {
+      if (!depositOpen) {
+        dispatch({ type: "HIDE_DEPOSIT" });
+        if (state.currentPayment) {
+          fetchBalance(state.currentPayment);
+        }
+      }
+    },
+    [state.currentPayment, fetchBalance]
+  );
+  const handleDone = useCallback(() => {
+    if (state.currentPayment?.status === "CONFIRMED") {
+      paymentOptions?.onComplete?.(state.currentPayment);
+    }
+    onOpenChange(false);
+  }, [state.currentPayment, paymentOptions, onOpenChange]);
+  const handleRetry = useCallback(() => {
+    dispatch({ type: "RETRY" });
+    if (state.currentPayment) {
+      fetchBalance(state.currentPayment);
+    }
+  }, [state.currentPayment, fetchBalance]);
+  const handleClose = useCallback(() => {
+    if (state.step === "processing") {
+      return;
+    }
+    if (state.step === "info") {
+      paymentOptions?.onCancel?.();
+    }
+    onOpenChange(false);
+  }, [state.step, paymentOptions, onOpenChange]);
+  const handleReport = useCallback(async () => {
+    const { currentPayment, error, step, txHash } = state;
+    if (!currentPayment || !error) return;
+    try {
+      await client.post(`/payments/${currentPayment.id}/report`, {
+        errorCode: error.code,
+        errorMessage: error.message,
+        platform: "web",
+        context: {
+          step,
+          txHash,
+          tokenId: currentPayment.token.id,
+          chainId: currentPayment.token.chainId,
+          amount: currentPayment.amount
+        }
+      });
+      alert("Error report submitted. Thank you for your feedback.");
+    } catch (err) {
+      console.error("Failed to submit error report:", err);
+      alert(
+        `Error Code: ${error.code}
+
+Message: ${error.message}
+
+Please contact support with this information.`
+      );
+    }
+  }, [state, client]);
+  const canClose = state.step !== "processing";
+  const isConfigured = state.receiverAddress !== null;
+  return {
+    state,
+    handlePay,
+    handleDeposit,
+    handleDepositClose,
+    handleDone,
+    handleRetry,
+    handleClose,
+    handleReport,
+    canClose,
+    isConfigured
+  };
+}
 var PaymentSkeleton = () => {
   return /* @__PURE__ */ jsxs("div", { className: "volr:p-6 volr:space-y-6 volr:animate-pulse", children: [
     /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:items-center volr:gap-4", children: [
@@ -3412,10 +4050,11 @@ var PaymentResultView = ({
   payment,
   error,
   onDone,
-  onRetry
+  onRetry,
+  onReport
 }) => {
   const isSuccess = payment.status === "CONFIRMED";
-  payment.status === "FAILED" || !!error;
+  const isFailed = payment.status === "FAILED" || !!error;
   return /* @__PURE__ */ jsxs("div", { className: "volr:p-6 volr:space-y-6", children: [
     /* @__PURE__ */ jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: isSuccess ? /* @__PURE__ */ jsx("div", { className: "volr:w-16 volr:h-16 volr:rounded-full volr:bg-green-100 volr:flex volr:items-center volr:justify-center", children: /* @__PURE__ */ jsx(
       "svg",
@@ -3454,7 +4093,11 @@ var PaymentResultView = ({
     ) }) }),
     /* @__PURE__ */ jsxs("div", { className: "volr:text-center", children: [
       /* @__PURE__ */ jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? "Payment Complete" : "Payment Failed" }),
-      /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-1", children: isSuccess ? "Your transaction has been confirmed" : error?.message || "The transaction could not be completed" })
+      /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-slate-500 volr:mt-1", children: isSuccess ? "Your transaction has been confirmed" : error?.message || "The transaction could not be completed" }),
+      isFailed && error?.code && /* @__PURE__ */ jsxs("p", { className: "volr:text-xs volr:text-slate-400 volr:mt-1 volr:font-mono", children: [
+        "Error code: ",
+        error.code
+      ] })
     ] }),
     isSuccess && payment.txHash && /* @__PURE__ */ jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-4 volr:space-y-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
@@ -3483,7 +4126,10 @@ var PaymentResultView = ({
     ] }),
     /* @__PURE__ */ jsx("div", { className: "volr:space-y-3", children: isSuccess ? /* @__PURE__ */ jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { onClick: onRetry, className: "volr:w-full", children: "Try Again" }),
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:w-full", children: "Cancel" })
+      /* @__PURE__ */ jsxs("div", { className: "volr:flex volr:gap-3", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onReport, className: "volr:flex-1", children: "Report Issue" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:flex-1", children: "Cancel" })
+      ] })
     ] }) })
   ] });
 };
@@ -3491,139 +4137,61 @@ var PaymentModal = ({
   open,
   onOpenChange
 }) => {
-  const { user } = useVolrContext();
-  const { client } = useInternalAuth();
-  const { paymentOptions, close: closeModal } = useVolrModal();
-  const { updatePaymentToProcessing, checkPayment, pollPaymentStatus } = useVolrPay();
-  const [step, setStep] = useState("info");
-  const [processingStep, setProcessingStep] = useState("signing");
-  const [balance, setBalance] = useState("0");
-  const [isBalanceLoading, setIsBalanceLoading] = useState(true);
-  const [isPaying, setIsPaying] = useState(false);
-  const [currentPayment, setCurrentPayment] = useState(null);
-  const [txHash, setTxHash] = useState();
-  const [error, setError] = useState();
-  const [logoUrl, setLogoUrl] = useState();
-  useEffect(() => {
-    if (open && paymentOptions) {
-      setStep("info");
-      setProcessingStep("signing");
-      setCurrentPayment(paymentOptions.payment);
-      setError(void 0);
-      setTxHash(void 0);
-      fetchBalance(paymentOptions.payment);
-      fetchBranding();
-    } else if (!open) {
-      setCurrentPayment(null);
-      setBalance("0");
-      setIsBalanceLoading(true);
-    }
-  }, [open, paymentOptions]);
-  const fetchBalance = async (payment) => {
-    if (!user?.evmAddress) {
-      setIsBalanceLoading(false);
-      return;
-    }
-    setIsBalanceLoading(true);
-    try {
-      const response = await client.get(
-        `/wallet/balance?chainId=${payment.token.chainId}&address=${user.evmAddress}&tokenId=${payment.token.id}`
-      ).catch(() => ({ balance: "0" }));
-      const balanceNum = Number(response.balance) / Math.pow(10, payment.token.decimals);
-      setBalance(balanceNum.toLocaleString(void 0, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: payment.token.decimals > 6 ? 6 : payment.token.decimals
-      }));
-    } catch (err) {
-      console.error("Failed to fetch balance:", err);
-      setBalance("0");
-    } finally {
-      setIsBalanceLoading(false);
-    }
-  };
-  const fetchBranding = async () => {
-    try {
-      const response = await client.get("/auth/branding");
-      setLogoUrl(response.logoUrl);
-    } catch {
-    }
-  };
-  const handlePay = useCallback(async () => {
-    if (!currentPayment || !user?.evmAddress || !paymentOptions) return;
-    setIsPaying(true);
-    setStep("processing");
-    setProcessingStep("signing");
-    setError(void 0);
-    try {
-      const configResponse = await client.get(
-        `/payments/config`
-      ).catch(() => null);
-      if (!configResponse?.receiverAddress) {
-        throw new Error("Payment not configured. Please contact the app developer.");
-      }
-      setProcessingStep("broadcasting");
-      const mockTxHash = `0x${Math.random().toString(16).slice(2)}`;
-      setTxHash(mockTxHash);
-      setProcessingStep("confirming");
-      await new Promise((resolve) => setTimeout(resolve, 2e3));
-      const finalPayment = {
-        ...currentPayment,
-        status: "CONFIRMED",
-        txHash: mockTxHash,
-        confirmedAt: (/* @__PURE__ */ new Date()).toISOString()
-      };
-      setCurrentPayment(finalPayment);
-      setStep("result");
-      paymentOptions.onComplete?.(finalPayment);
-    } catch (err) {
-      console.error("Payment failed:", err);
-      const paymentError = {
-        code: "PAYMENT_FAILED",
-        message: err.message || "Payment failed. Please try again."
-      };
-      setError(paymentError);
-      setStep("result");
-      paymentOptions?.onError?.(paymentError);
-    } finally {
-      setIsPaying(false);
-    }
-  }, [currentPayment, user, paymentOptions, client, updatePaymentToProcessing]);
-  const handleDeposit = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-  const handleDone = useCallback(() => {
-    if (currentPayment) {
-      paymentOptions?.onComplete?.(currentPayment);
-    }
-    onOpenChange(false);
-  }, [currentPayment, paymentOptions, onOpenChange]);
-  const handleRetry = useCallback(() => {
-    setStep("info");
-    setError(void 0);
-    if (currentPayment) {
-      fetchBalance(currentPayment);
-    }
-  }, [currentPayment]);
-  const handleClose = useCallback(() => {
-    if (step === "processing") {
-      return;
-    }
-    if (step === "info") {
-      paymentOptions?.onCancel?.();
-    }
-    onOpenChange(false);
-  }, [step, paymentOptions, onOpenChange]);
+  const { paymentOptions } = useVolrModal();
+  const {
+    state,
+    handlePay,
+    handleDeposit,
+    handleDepositClose,
+    handleDone,
+    handleRetry,
+    handleClose,
+    handleReport,
+    canClose,
+    isConfigured
+  } = usePaymentModalState(open, onOpenChange);
+  const {
+    step,
+    processingStep,
+    balance,
+    isBalanceLoading,
+    isPaying,
+    currentPayment,
+    txHash,
+    error,
+    logoUrl,
+    showDeposit
+  } = state;
+  if (showDeposit && currentPayment) {
+    return /* @__PURE__ */ jsx(
+      DepositModal,
+      {
+        open: true,
+        onOpenChange: handleDepositClose,
+        asset: {
+          chainId: currentPayment.token.chainId,
+          symbol: currentPayment.token.symbol
+        }
+      }
+    );
+  }
   if (!paymentOptions || !currentPayment) {
     return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, children: [
       /* @__PURE__ */ jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
       /* @__PURE__ */ jsx(PaymentSkeleton, {})
     ] });
   }
+  if (!isConfigured && step === "info") {
+    return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange: handleClose, children: [
+      /* @__PURE__ */ jsx(ModalHeader, { onClose: handleClose }),
+      /* @__PURE__ */ jsx("div", { className: "volr:p-6 volr:text-center", children: /* @__PURE__ */ jsx("p", { className: "volr:text-sm volr:text-red-600", children: "Payment not configured. Please contact the app developer." }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange: handleClose, children: [
     /* @__PURE__ */ jsx(
       ModalHeader,
       {
-        onClose: step !== "processing" ? handleClose : void 0,
+        onClose: canClose ? handleClose : void 0,
         title: step === "info" ? "Confirm Payment" : void 0
       }
     ),
@@ -3646,12 +4214,13 @@ var PaymentModal = ({
         payment: currentPayment,
         error,
         onDone: handleDone,
-        onRetry: handleRetry
+        onRetry: handleRetry,
+        onReport: handleReport
       }
     )
   ] });
 };
-var VolrUIContext = React11.createContext(null);
+var VolrUIContext = React10.createContext(null);
 var useVolrUI = () => {
   const context = useContext(VolrUIContext);
   if (!context) {
@@ -3979,7 +4548,7 @@ function OnboardingChecker({
 }) {
   const { user, provider, isLoading } = useVolrContext();
   const { isOpen: isModalOpen } = useVolrModal();
-  const modalWasOpened = React11.useRef(false);
+  const modalWasOpened = React10.useRef(false);
   useEffect(() => {
     if (isModalOpen) {
       modalWasOpened.current = true;
@@ -4088,7 +4657,105 @@ async function getCurrentChainId() {
   });
   return parseInt(chainIdHex, 16);
 }
+var paymentPromiseResolvers = /* @__PURE__ */ new Map();
+function useVolrPay() {
+  const { open: openModal } = useVolrModal();
+  const { createPayment, checkPayment, getPaymentHistory, cancelPayment } = useVolrPaymentApi();
+  const currentPaymentIdRef = useRef(null);
+  const pay = useCallback(
+    async (options) => {
+      const payment = await createPayment({
+        amount: options.amount,
+        item: options.item,
+        referenceId: options.referenceId,
+        metadata: options.metadata,
+        idempotencyKey: options.idempotencyKey,
+        expiresInSec: options.expiresInSec
+      });
+      currentPaymentIdRef.current = payment.id;
+      options.handlers?.onCreated?.({ id: payment.id });
+      const waitPromise = new Promise((resolve, reject) => {
+        paymentPromiseResolvers.set(payment.id, { resolve, reject });
+      });
+      const modalOptions = {
+        payment,
+        options: {
+          amount: options.amount,
+          item: options.item,
+          referenceId: options.referenceId,
+          metadata: options.metadata,
+          idempotencyKey: options.idempotencyKey,
+          expiresInSec: options.expiresInSec
+        },
+        onComplete: (result) => {
+          currentPaymentIdRef.current = null;
+          const resolver = paymentPromiseResolvers.get(payment.id);
+          if (resolver) {
+            resolver.resolve(result);
+            paymentPromiseResolvers.delete(payment.id);
+          }
+          if (result.status === "CONFIRMED") {
+            options.handlers?.onSuccess?.(result);
+          }
+        },
+        onProcessing: (processingPayment) => {
+          options.handlers?.onProcessing?.({
+            id: processingPayment.id,
+            txHash: processingPayment.txHash
+          });
+        },
+        onError: (error) => {
+          currentPaymentIdRef.current = null;
+          const resolver = paymentPromiseResolvers.get(payment.id);
+          if (resolver) {
+            resolver.reject(new Error(error.message));
+            paymentPromiseResolvers.delete(payment.id);
+          }
+          options.handlers?.onError?.(error);
+        },
+        onCancel: () => {
+          currentPaymentIdRef.current = null;
+          const resolver = paymentPromiseResolvers.get(payment.id);
+          if (resolver) {
+            resolver.resolve({
+              ...payment,
+              status: "CANCELLED"
+            });
+            paymentPromiseResolvers.delete(payment.id);
+          }
+          options.handlers?.onCancel?.();
+        }
+      };
+      openModal({ mode: "payment", payment: modalOptions });
+      return {
+        id: payment.id,
+        status: payment.status,
+        wait: () => waitPromise,
+        cancel: async () => {
+          await cancelPayment(payment.id);
+          currentPaymentIdRef.current = null;
+          const resolver = paymentPromiseResolvers.get(payment.id);
+          if (resolver) {
+            resolver.resolve({
+              ...payment,
+              status: "CANCELLED"
+            });
+            paymentPromiseResolvers.delete(payment.id);
+          }
+          options.handlers?.onCancel?.();
+        }
+      };
+    },
+    [createPayment, cancelPayment, openModal]
+  );
+  return {
+    pay,
+    checkPayment,
+    getPaymentHistory,
+    isPaymentInProgress: currentPaymentIdRef.current !== null
+  };
+}
 
-export { I18nContext, I18nProvider, MpcConnectView, PasskeyEnrollView, VolrUIProvider, getCurrentChainId, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrUI, useVolrUIOptional };
+export { I18nContext, I18nProvider, MpcConnectView, PasskeyEnrollView, VolrUIProvider, getCurrentChainId, useI18n, useSwitchNetwork, useTranslation, useVolrModal, useVolrPay, useVolrUI, useVolrUIOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map