@volr/react-ui 0.1.93 → 0.1.95

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React10 = require('react');
 var reactDom = require('react-dom');
 var react = require('@volr/react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -10,9 +10,347 @@ var qrcode_react = require('qrcode.react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
 
-// 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 = {
@@ -266,13 +604,13 @@ var translations = {
 function getTranslations(locale = "en") {
   return translations[locale] || translations.en;
 }
-var I18nContext = React11.createContext(null);
+var I18nContext = React10.createContext(null);
 function interpolate(text, params) {
   if (!params) return text;
   return text.replace(/\{\{(\w+)\}\}/g, (_, key) => params[key] ?? `{{${key}}}`);
 }
 function useI18n() {
-  const context = React11.useContext(I18nContext);
+  const context = React10.useContext(I18nContext);
   if (!context) {
     return {
       locale: "en",
@@ -307,9 +645,9 @@ function detectLocale() {
   return lang.startsWith("ko") ? "ko" : "en";
 }
 function I18nProvider({ children }) {
-  const [locale, setLocale] = React11.useState(detectLocale());
-  const translations2 = React11.useMemo(() => getTranslations(locale), [locale]);
-  const t = React11.useMemo(() => {
+  const [locale, setLocale] = React10.useState(detectLocale());
+  const translations2 = React10.useMemo(() => getTranslations(locale), [locale]);
+  const t = React10.useMemo(() => {
     return (key, params) => {
       const keys = key.split(".");
       let value2 = translations2;
@@ -326,7 +664,7 @@ function I18nProvider({ children }) {
       return typeof value2 === "string" ? interpolate(value2, params) : key;
     };
   }, [translations2]);
-  const value = React11.useMemo(
+  const value = React10.useMemo(
     () => ({
       locale,
       translations: translations2,
@@ -338,9 +676,9 @@ function I18nProvider({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(I18nContext.Provider, { value, children });
 }
 var useTranslation = useI18n;
-var VolrModalContext = React11.createContext(null);
+var VolrModalContext = React10.createContext(null);
 var useVolrModal = () => {
-  const context = React11.useContext(VolrModalContext);
+  const context = React10.useContext(VolrModalContext);
   if (!context) {
     throw new Error("useVolrModal must be used within VolrUIProvider");
   }
@@ -349,17 +687,17 @@ var useVolrModal = () => {
 var VolrModalProvider = ({
   children
 }) => {
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [mode, setMode] = React11.useState("account");
-  const [asset, setAsset] = React11.useState(null);
-  const [paymentOptions, setPaymentOptions] = React11.useState(null);
-  const open = React11.useCallback((options) => {
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [mode, setMode] = React10.useState("account");
+  const [asset, setAsset] = React10.useState(null);
+  const [paymentOptions, setPaymentOptions] = React10.useState(null);
+  const open = React10.useCallback((options) => {
     setMode(options?.mode ?? "account");
     setAsset(options?.asset ?? null);
     setPaymentOptions(options?.payment ?? null);
     setIsOpen(true);
   }, []);
-  const close = React11.useCallback(() => {
+  const close = React10.useCallback(() => {
     setIsOpen(false);
     setAsset(null);
     setPaymentOptions(null);
@@ -373,11 +711,11 @@ function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React11.useState(() => {
+  const [matches, setMatches] = React10.useState(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     const handler = (event) => setMatches(event.matches);
@@ -391,12 +729,12 @@ function useMediaQuery(query) {
 // src/generated/volr-sdk-css.ts
 var VOLR_SDK_CSS = '/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--volr-tw-translate-x:0;--volr-tw-translate-y:0;--volr-tw-translate-z:0;--volr-tw-space-y-reverse:0;--volr-tw-border-style:solid;--volr-tw-gradient-position:initial;--volr-tw-gradient-from:#0000;--volr-tw-gradient-via:#0000;--volr-tw-gradient-to:#0000;--volr-tw-gradient-stops:initial;--volr-tw-gradient-via-stops:initial;--volr-tw-gradient-from-position:0%;--volr-tw-gradient-via-position:50%;--volr-tw-gradient-to-position:100%;--volr-tw-leading:initial;--volr-tw-font-weight:initial;--volr-tw-shadow:0 0 #0000;--volr-tw-shadow-color:initial;--volr-tw-shadow-alpha:100%;--volr-tw-inset-shadow:0 0 #0000;--volr-tw-inset-shadow-color:initial;--volr-tw-inset-shadow-alpha:100%;--volr-tw-ring-color:initial;--volr-tw-ring-shadow:0 0 #0000;--volr-tw-inset-ring-color:initial;--volr-tw-inset-ring-shadow:0 0 #0000;--volr-tw-ring-inset:initial;--volr-tw-ring-offset-width:0px;--volr-tw-ring-offset-color:#fff;--volr-tw-ring-offset-shadow:0 0 #0000;--volr-tw-blur:initial;--volr-tw-brightness:initial;--volr-tw-contrast:initial;--volr-tw-grayscale:initial;--volr-tw-hue-rotate:initial;--volr-tw-invert:initial;--volr-tw-opacity:initial;--volr-tw-saturate:initial;--volr-tw-sepia:initial;--volr-tw-drop-shadow:initial;--volr-tw-drop-shadow-color:initial;--volr-tw-drop-shadow-alpha:100%;--volr-tw-drop-shadow-size:initial;--volr-tw-duration:initial;--volr-tw-ease:initial}}}@layer theme{:root,:host{--volr-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--volr-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--volr-color-red-50:oklch(97.1% .013 17.38);--volr-color-red-100:oklch(93.6% .032 17.717);--volr-color-red-200:oklch(88.5% .062 18.334);--volr-color-red-500:oklch(63.7% .237 25.331);--volr-color-red-600:oklch(57.7% .245 27.325);--volr-color-red-700:oklch(50.5% .213 27.518);--volr-color-green-100:oklch(96.2% .044 156.743);--volr-color-green-600:oklch(62.7% .194 149.214);--volr-color-emerald-300:oklch(84.5% .143 164.978);--volr-color-emerald-400:oklch(76.5% .177 163.223);--volr-color-emerald-500:oklch(69.6% .17 162.48);--volr-color-emerald-600:oklch(59.6% .145 163.225);--volr-color-teal-400:oklch(77.7% .152 181.912);--volr-color-teal-500:oklch(70.4% .14 182.503);--volr-color-cyan-400:oklch(78.9% .154 211.53);--volr-color-slate-50:oklch(98.4% .003 247.858);--volr-color-slate-100:oklch(96.8% .007 247.896);--volr-color-slate-200:oklch(92.9% .013 255.508);--volr-color-slate-300:oklch(86.9% .022 252.894);--volr-color-slate-400:oklch(70.4% .04 256.788);--volr-color-slate-500:oklch(55.4% .046 257.417);--volr-color-slate-600:oklch(44.6% .043 257.281);--volr-color-slate-900:oklch(20.8% .042 265.755);--volr-color-gray-500:oklch(55.1% .027 264.364);--volr-color-black:#000;--volr-color-white:#fff;--volr-spacing:.25rem;--volr-container-md:28rem;--volr-container-4xl:56rem;--volr-text-xs:.75rem;--volr-text-xs--line-height:calc(1/.75);--volr-text-sm:.875rem;--volr-text-sm--line-height:calc(1.25/.875);--volr-text-base:1rem;--volr-text-base--line-height:calc(1.5/1);--volr-text-lg:1.125rem;--volr-text-lg--line-height:calc(1.75/1.125);--volr-text-xl:1.25rem;--volr-text-xl--line-height:calc(1.75/1.25);--volr-text-2xl:1.5rem;--volr-text-2xl--line-height:calc(2/1.5);--volr-text-8xl:6rem;--volr-text-8xl--line-height:1;--volr-font-weight-medium:500;--volr-font-weight-semibold:600;--volr-font-weight-bold:700;--volr-leading-relaxed:1.625;--volr-radius-md:.375rem;--volr-radius-lg:.5rem;--volr-radius-xl:.75rem;--volr-radius-2xl:1rem;--volr-radius-3xl:1.5rem;--volr-ease-out:cubic-bezier(0,0,.2,1);--volr-animate-spin:spin 1s linear infinite;--volr-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--volr-blur-2xl:40px;--volr-default-transition-duration:.15s;--volr-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--volr-default-font-family:var(--volr-font-sans);--volr-default-mono-font-family:var(--volr-font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--volr-default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--volr-default-font-feature-settings,normal);font-variation-settings:var(--volr-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--volr-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--volr-default-mono-font-feature-settings,normal);font-variation-settings:var(--volr-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:host{--volr-primary-color:var(--volr-accent-color,#303030);--volr-font-family:var(--volr-custom-font,inherit);--volr-bg:#fff;--volr-bg-secondary:#f8fafc;--volr-bg-tertiary:#f1f5f9;--volr-text:#0f172a;--volr-text-secondary:#475569;--volr-text-muted:#94a3b8;--volr-border:#e2e8f0;--volr-border-strong:#cbd5e1;--volr-hover-bg:#f8fafc;--volr-error-bg:#fef2f2;--volr-error-border:#fecaca;--volr-error-text:#991b1b}:host([data-theme=dark]){--volr-bg:#1c1c1e;--volr-bg-secondary:#2c2c2e;--volr-bg-tertiary:#3a3a3c;--volr-text:#f5f5f7;--volr-text-secondary:#c7c7cc;--volr-text-muted:#8e8e93;--volr-border:#3a3a3c;--volr-border-strong:#48484a;--volr-hover-bg:#2c2c2e;--volr-error-bg:#3c1f1f;--volr-error-border:#7f1d1d;--volr-error-text:#fca5a5}*,:before,:after{box-sizing:border-box}*{font-family:var(--volr-font-family);color:var(--volr-text)}button,input,select,textarea{color:var(--volr-text);background-color:#0000}button{cursor:pointer;background-color:#0000}input::placeholder{color:var(--volr-text-muted)}h1,h2,h3{color:var(--volr-text);margin:0;font-weight:700}h1{font-size:1.875rem;line-height:2.25rem}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem;line-height:1.75rem}p{margin:0}}@layer components{.volr-dialog-overlay{inset:calc(var(--volr-spacing)*0);z-index:40;background-color:var(--volr-color-black);position:fixed}@supports (color:color-mix(in lab, red, red)){.volr-dialog-overlay{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr-dialog-content{z-index:50;border-radius:var(--volr-radius-2xl);border-style:var(--volr-tw-border-style);padding:calc(var(--volr-spacing)*7);--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow);background-color:var(--volr-bg);border-width:1px;border-color:var(--volr-border-strong);width:calc(100% - 2rem);max-width:28rem;max-height:85vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)}@media (max-width:640px){.volr-dialog-content{top:auto;right:calc(var(--volr-spacing)*0);bottom:calc(var(--volr-spacing)*0);left:calc(var(--volr-spacing)*0);border-radius:1.25rem 1.25rem 0 0;width:100%;max-width:100%;margin:0 auto;transform:translateY(0)}}.volr-dialog-close{top:calc(var(--volr-spacing)*4);right:calc(var(--volr-spacing)*4);height:calc(var(--volr-spacing)*8);width:calc(var(--volr-spacing)*8);color:var(--volr-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:3.40282e38px;justify-content:center;align-items:center;display:inline-flex;position:absolute}.volr-dialog-close:hover{background-color:var(--volr-hover-bg);color:var(--volr-text-secondary)}.volr-dialog-close:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}.volr-dialog-close-icon{height:calc(var(--volr-spacing)*4);width:calc(var(--volr-spacing)*4)}.volr-email-input{border:1px solid var(--volr-border-strong);background-color:var(--volr-bg);width:100%;color:var(--volr-text);border-radius:.5rem;outline:none;padding:.75rem .75rem .75rem 2.75rem;font-size:1rem;line-height:1.5}.volr-email-input::placeholder{color:var(--volr-text-muted)}.volr-email-input:focus{border-color:var(--volr-border-strong);box-shadow:0 0 0 2px var(--volr-border-strong)}.volr-option-button{border:1px solid var(--volr-border);background-color:var(--volr-bg);width:100%;color:var(--volr-text);cursor:pointer;border-radius:.5rem;align-items:center;gap:.75rem;padding:.75rem;transition:background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;display:flex}.volr-option-button:hover{background-color:var(--volr-hover-bg);border-color:var(--volr-border)}.volr-option-button:focus-visible{box-shadow:0 0 0 2px var(--volr-border-strong);outline:none}}@layer utilities{.volr\\:pointer-events-auto{pointer-events:auto}.volr\\:pointer-events-none{pointer-events:none}.volr\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.volr\\:absolute{position:absolute}.volr\\:fixed{position:fixed}.volr\\:relative{position:relative}.volr\\:inset-0{inset:calc(var(--volr-spacing)*0)}.volr\\:-top-3{top:calc(var(--volr-spacing)*-3)}.volr\\:top-1\\/2{top:50%}.volr\\:-right-3{right:calc(var(--volr-spacing)*-3)}.volr\\:-right-4{right:calc(var(--volr-spacing)*-4)}.volr\\:right-2{right:calc(var(--volr-spacing)*2)}.volr\\:bottom-0{bottom:calc(var(--volr-spacing)*0)}.volr\\:-left-4{left:calc(var(--volr-spacing)*-4)}.volr\\:left-3{left:calc(var(--volr-spacing)*3)}.volr\\:-z-10{z-index:calc(10*-1)}.volr\\:z-10{z-index:10}.volr\\:z-20{z-index:20}.volr\\:z-40{z-index:40}.volr\\:z-50{z-index:50}.volr\\:mx-auto{margin-inline:auto}.volr\\:my-6{margin-block:calc(var(--volr-spacing)*6)}.volr\\:mt-0\\.5{margin-top:calc(var(--volr-spacing)*.5)}.volr\\:mt-1{margin-top:calc(var(--volr-spacing)*1)}.volr\\:mt-2{margin-top:calc(var(--volr-spacing)*2)}.volr\\:mt-3{margin-top:calc(var(--volr-spacing)*3)}.volr\\:mt-4{margin-top:calc(var(--volr-spacing)*4)}.volr\\:mt-6{margin-top:calc(var(--volr-spacing)*6)}.volr\\:mt-8{margin-top:calc(var(--volr-spacing)*8)}.volr\\:mb-1{margin-bottom:calc(var(--volr-spacing)*1)}.volr\\:mb-2{margin-bottom:calc(var(--volr-spacing)*2)}.volr\\:mb-3{margin-bottom:calc(var(--volr-spacing)*3)}.volr\\:mb-4{margin-bottom:calc(var(--volr-spacing)*4)}.volr\\:mb-5{margin-bottom:calc(var(--volr-spacing)*5)}.volr\\:mb-6{margin-bottom:calc(var(--volr-spacing)*6)}.volr\\:mb-8{margin-bottom:calc(var(--volr-spacing)*8)}.volr\\:-ml-2{margin-left:calc(var(--volr-spacing)*-2)}.volr\\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.volr\\:flex{display:flex}.volr\\:grid{display:grid}.volr\\:inline-block{display:inline-block}.volr\\:inline-flex{display:inline-flex}.volr\\:h-1{height:calc(var(--volr-spacing)*1)}.volr\\:h-1\\.5{height:calc(var(--volr-spacing)*1.5)}.volr\\:h-2{height:calc(var(--volr-spacing)*2)}.volr\\:h-3{height:calc(var(--volr-spacing)*3)}.volr\\:h-3\\.5{height:calc(var(--volr-spacing)*3.5)}.volr\\:h-4{height:calc(var(--volr-spacing)*4)}.volr\\:h-5{height:calc(var(--volr-spacing)*5)}.volr\\:h-6{height:calc(var(--volr-spacing)*6)}.volr\\:h-7{height:calc(var(--volr-spacing)*7)}.volr\\:h-8{height:calc(var(--volr-spacing)*8)}.volr\\:h-10{height:calc(var(--volr-spacing)*10)}.volr\\:h-12{height:calc(var(--volr-spacing)*12)}.volr\\:h-14{height:calc(var(--volr-spacing)*14)}.volr\\:h-16{height:calc(var(--volr-spacing)*16)}.volr\\:h-24{height:calc(var(--volr-spacing)*24)}.volr\\:h-40{height:calc(var(--volr-spacing)*40)}.volr\\:h-44{height:calc(var(--volr-spacing)*44)}.volr\\:h-48{height:calc(var(--volr-spacing)*48)}.volr\\:h-\\[0\\.8em\\]{height:.8em}.volr\\:h-\\[200px\\]{height:200px}.volr\\:h-full{height:100%}.volr\\:h-px{height:1px}.volr\\:max-h-36{max-height:calc(var(--volr-spacing)*36)}.volr\\:max-h-96{max-height:calc(var(--volr-spacing)*96)}.volr\\:max-h-\\[85vh\\]{max-height:85vh}.volr\\:max-h-\\[90vh\\]{max-height:90vh}.volr\\:min-h-\\[120px\\]{min-height:120px}.volr\\:min-h-\\[500px\\]{min-height:500px}.volr\\:w-1\\.5{width:calc(var(--volr-spacing)*1.5)}.volr\\:w-2{width:calc(var(--volr-spacing)*2)}.volr\\:w-3\\.5{width:calc(var(--volr-spacing)*3.5)}.volr\\:w-4{width:calc(var(--volr-spacing)*4)}.volr\\:w-5{width:calc(var(--volr-spacing)*5)}.volr\\:w-6{width:calc(var(--volr-spacing)*6)}.volr\\:w-8{width:calc(var(--volr-spacing)*8)}.volr\\:w-10{width:calc(var(--volr-spacing)*10)}.volr\\:w-12{width:calc(var(--volr-spacing)*12)}.volr\\:w-16{width:calc(var(--volr-spacing)*16)}.volr\\:w-20{width:calc(var(--volr-spacing)*20)}.volr\\:w-24{width:calc(var(--volr-spacing)*24)}.volr\\:w-32{width:calc(var(--volr-spacing)*32)}.volr\\:w-36{width:calc(var(--volr-spacing)*36)}.volr\\:w-40{width:calc(var(--volr-spacing)*40)}.volr\\:w-44{width:calc(var(--volr-spacing)*44)}.volr\\:w-48{width:calc(var(--volr-spacing)*48)}.volr\\:w-\\[200px\\]{width:200px}.volr\\:w-auto{width:auto}.volr\\:w-full{width:100%}.volr\\:max-w-4xl{max-width:var(--volr-container-4xl)}.volr\\:max-w-full{max-width:100%}.volr\\:max-w-md{max-width:var(--volr-container-md)}.volr\\:max-w-none{max-width:none}.volr\\:min-w-0{min-width:calc(var(--volr-spacing)*0)}.volr\\:flex-1{flex:1}.volr\\:flex-shrink-0,.volr\\:shrink-0{flex-shrink:0}.volr\\:-translate-y-1\\/2{--volr-tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--volr-tw-translate-x)var(--volr-tw-translate-y)}.volr\\:animate-\\[volrFadeIn_0\\.2s_ease-out\\]{animation:.2s ease-out volrFadeIn}.volr\\:animate-pulse{animation:var(--volr-animate-pulse)}.volr\\:animate-spin{animation:var(--volr-animate-spin)}.volr\\:list-inside{list-style-position:inside}.volr\\:list-decimal{list-style-type:decimal}.volr\\:grid-cols-\\[minmax\\(0\\,1\\.1fr\\)_minmax\\(0\\,1fr\\)\\]{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.volr\\:flex-col{flex-direction:column}.volr\\:items-baseline{align-items:baseline}.volr\\:items-center{align-items:center}.volr\\:items-end{align-items:flex-end}.volr\\:items-start{align-items:flex-start}.volr\\:justify-between{justify-content:space-between}.volr\\:justify-center{justify-content:center}.volr\\:gap-1{gap:calc(var(--volr-spacing)*1)}.volr\\:gap-1\\.5{gap:calc(var(--volr-spacing)*1.5)}.volr\\:gap-2{gap:calc(var(--volr-spacing)*2)}.volr\\:gap-3{gap:calc(var(--volr-spacing)*3)}.volr\\:gap-4{gap:calc(var(--volr-spacing)*4)}:where(.volr\\:space-y-1>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*1)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*1)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-2>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*2)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*2)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-3>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*3)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*3)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-4>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*4)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*4)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-6>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*6)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*6)*calc(1 - var(--volr-tw-space-y-reverse)))}:where(.volr\\:space-y-8>:not(:last-child)){--volr-tw-space-y-reverse:0;margin-block-start:calc(calc(var(--volr-spacing)*8)*var(--volr-tw-space-y-reverse));margin-block-end:calc(calc(var(--volr-spacing)*8)*calc(1 - var(--volr-tw-space-y-reverse)))}.volr\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.volr\\:overflow-hidden{overflow:hidden}.volr\\:overflow-visible{overflow:visible}.volr\\:overflow-y-auto{overflow-y:auto}.volr\\:rounded{border-radius:.25rem}.volr\\:rounded-2xl{border-radius:var(--volr-radius-2xl)}.volr\\:rounded-full{border-radius:3.40282e38px}.volr\\:rounded-lg{border-radius:var(--volr-radius-lg)}.volr\\:rounded-md{border-radius:var(--volr-radius-md)}.volr\\:rounded-xl{border-radius:var(--volr-radius-xl)}.volr\\:rounded-t-2xl{border-top-left-radius:var(--volr-radius-2xl);border-top-right-radius:var(--volr-radius-2xl)}.volr\\:rounded-t-3xl{border-top-left-radius:var(--volr-radius-3xl);border-top-right-radius:var(--volr-radius-3xl)}.volr\\:border{border-style:var(--volr-tw-border-style);border-width:1px}.volr\\:border-2{border-style:var(--volr-tw-border-style);border-width:2px}.volr\\:border-4{border-style:var(--volr-tw-border-style);border-width:4px}.volr\\:border-t{border-top-style:var(--volr-tw-border-style);border-top-width:1px}.volr\\:border-t-2{border-top-style:var(--volr-tw-border-style);border-top-width:2px}.volr\\:border-red-200{border-color:var(--volr-color-red-200)}.volr\\:border-slate-200{border-color:var(--volr-color-slate-200)}.volr\\:border-slate-300{border-color:var(--volr-color-slate-300)}.volr\\:border-white{border-color:var(--volr-color-white)}.volr\\:border-t-slate-600{border-top-color:var(--volr-color-slate-600)}.volr\\:bg-black\\/45{background-color:var(--volr-color-black)}@supports (color:color-mix(in lab, red, red)){.volr\\:bg-black\\/45{background-color:color-mix(in oklab,var(--volr-color-black)45%,transparent)}}.volr\\:bg-cyan-400{background-color:var(--volr-color-cyan-400)}.volr\\:bg-emerald-300{background-color:var(--volr-color-emerald-300)}.volr\\:bg-emerald-400{background-color:var(--volr-color-emerald-400)}.volr\\:bg-green-100{background-color:var(--volr-color-green-100)}.volr\\:bg-red-50{background-color:var(--volr-color-red-50)}.volr\\:bg-red-100{background-color:var(--volr-color-red-100)}.volr\\:bg-slate-50{background-color:var(--volr-color-slate-50)}.volr\\:bg-slate-100{background-color:var(--volr-color-slate-100)}.volr\\:bg-slate-200{background-color:var(--volr-color-slate-200)}.volr\\:bg-slate-300{background-color:var(--volr-color-slate-300)}.volr\\:bg-slate-900{background-color:var(--volr-color-slate-900)}.volr\\:bg-teal-400{background-color:var(--volr-color-teal-400)}.volr\\:bg-white{background-color:var(--volr-color-white)}.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.volr\\:bg-linear-to-br{--volr-tw-gradient-position:to bottom right in oklab}}.volr\\:bg-linear-to-br{background-image:linear-gradient(var(--volr-tw-gradient-stops))}.volr\\:from-emerald-400{--volr-tw-gradient-from:var(--volr-color-emerald-400);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:from-emerald-500{--volr-tw-gradient-from:var(--volr-color-emerald-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:to-teal-500{--volr-tw-gradient-to:var(--volr-color-teal-500);--volr-tw-gradient-stops:var(--volr-tw-gradient-via-stops,var(--volr-tw-gradient-position),var(--volr-tw-gradient-from)var(--volr-tw-gradient-from-position),var(--volr-tw-gradient-to)var(--volr-tw-gradient-to-position))}.volr\\:object-cover{object-fit:cover}.volr\\:p-1{padding:calc(var(--volr-spacing)*1)}.volr\\:p-2{padding:calc(var(--volr-spacing)*2)}.volr\\:p-3{padding:calc(var(--volr-spacing)*3)}.volr\\:p-4{padding:calc(var(--volr-spacing)*4)}.volr\\:p-5{padding:calc(var(--volr-spacing)*5)}.volr\\:p-6{padding:calc(var(--volr-spacing)*6)}.volr\\:p-8{padding:calc(var(--volr-spacing)*8)}.volr\\:px-2{padding-inline:calc(var(--volr-spacing)*2)}.volr\\:px-3{padding-inline:calc(var(--volr-spacing)*3)}.volr\\:px-4{padding-inline:calc(var(--volr-spacing)*4)}.volr\\:py-0\\.5{padding-block:calc(var(--volr-spacing)*.5)}.volr\\:py-1\\.5{padding-block:calc(var(--volr-spacing)*1.5)}.volr\\:py-2{padding-block:calc(var(--volr-spacing)*2)}.volr\\:py-2\\.5{padding-block:calc(var(--volr-spacing)*2.5)}.volr\\:py-3{padding-block:calc(var(--volr-spacing)*3)}.volr\\:py-4{padding-block:calc(var(--volr-spacing)*4)}.volr\\:py-6{padding-block:calc(var(--volr-spacing)*6)}.volr\\:py-8{padding-block:calc(var(--volr-spacing)*8)}.volr\\:py-12{padding-block:calc(var(--volr-spacing)*12)}.volr\\:pt-2{padding-top:calc(var(--volr-spacing)*2)}.volr\\:pt-3{padding-top:calc(var(--volr-spacing)*3)}.volr\\:pt-4{padding-top:calc(var(--volr-spacing)*4)}.volr\\:pr-3{padding-right:calc(var(--volr-spacing)*3)}.volr\\:pb-2{padding-bottom:calc(var(--volr-spacing)*2)}.volr\\:pb-4{padding-bottom:calc(var(--volr-spacing)*4)}.volr\\:pl-11{padding-left:calc(var(--volr-spacing)*11)}.volr\\:text-center{text-align:center}.volr\\:text-left{text-align:left}.volr\\:text-right{text-align:right}.volr\\:align-baseline{vertical-align:baseline}.volr\\:font-mono{font-family:var(--volr-font-mono)}.volr\\:text-2xl{font-size:var(--volr-text-2xl);line-height:var(--volr-tw-leading,var(--volr-text-2xl--line-height))}.volr\\:text-8xl{font-size:var(--volr-text-8xl);line-height:var(--volr-tw-leading,var(--volr-text-8xl--line-height))}.volr\\:text-base{font-size:var(--volr-text-base);line-height:var(--volr-tw-leading,var(--volr-text-base--line-height))}.volr\\:text-lg{font-size:var(--volr-text-lg);line-height:var(--volr-tw-leading,var(--volr-text-lg--line-height))}.volr\\:text-sm{font-size:var(--volr-text-sm);line-height:var(--volr-tw-leading,var(--volr-text-sm--line-height))}.volr\\:text-xl{font-size:var(--volr-text-xl);line-height:var(--volr-tw-leading,var(--volr-text-xl--line-height))}.volr\\:text-xs{font-size:var(--volr-text-xs);line-height:var(--volr-tw-leading,var(--volr-text-xs--line-height))}.volr\\:leading-relaxed{--volr-tw-leading:var(--volr-leading-relaxed);line-height:var(--volr-leading-relaxed)}.volr\\:font-bold{--volr-tw-font-weight:var(--volr-font-weight-bold);font-weight:var(--volr-font-weight-bold)}.volr\\:font-medium{--volr-tw-font-weight:var(--volr-font-weight-medium);font-weight:var(--volr-font-weight-medium)}.volr\\:font-semibold{--volr-tw-font-weight:var(--volr-font-weight-semibold);font-weight:var(--volr-font-weight-semibold)}.volr\\:break-all{word-break:break-all}.volr\\:text-emerald-600{color:var(--volr-color-emerald-600)}.volr\\:text-gray-500{color:var(--volr-color-gray-500)}.volr\\:text-green-600{color:var(--volr-color-green-600)}.volr\\:text-red-500{color:var(--volr-color-red-500)}.volr\\:text-red-600{color:var(--volr-color-red-600)}.volr\\:text-red-700{color:var(--volr-color-red-700)}.volr\\:text-slate-400{color:var(--volr-color-slate-400)}.volr\\:text-slate-500{color:var(--volr-color-slate-500)}.volr\\:text-slate-600{color:var(--volr-color-slate-600)}.volr\\:text-slate-900{color:var(--volr-color-slate-900)}.volr\\:text-white{color:var(--volr-color-white)}.volr\\:capitalize{text-transform:capitalize}.volr\\:underline{text-decoration-line:underline}.volr\\:opacity-0{opacity:0}.volr\\:opacity-25{opacity:.25}.volr\\:opacity-30{opacity:.3}.volr\\:opacity-75{opacity:.75}.volr\\:shadow-2xl{--volr-tw-shadow:0 25px 50px -12px var(--volr-tw-shadow-color,#00000040);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-\\[0_-8px_30px_rgba\\(0\\,0\\,0\\,0\\.2\\)\\]{--volr-tw-shadow:0 -8px 30px var(--volr-tw-shadow-color,#0003);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-lg{--volr-tw-shadow:0 10px 15px -3px var(--volr-tw-shadow-color,#0000001a),0 4px 6px -4px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-md{--volr-tw-shadow:0 4px 6px -1px var(--volr-tw-shadow-color,#0000001a),0 2px 4px -2px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-sm{--volr-tw-shadow:0 1px 3px 0 var(--volr-tw-shadow-color,#0000001a),0 1px 2px -1px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-xl{--volr-tw-shadow:0 20px 25px -5px var(--volr-tw-shadow-color,#0000001a),0 8px 10px -6px var(--volr-tw-shadow-color,#0000001a);box-shadow:var(--volr-tw-inset-shadow),var(--volr-tw-inset-ring-shadow),var(--volr-tw-ring-offset-shadow),var(--volr-tw-ring-shadow),var(--volr-tw-shadow)}.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:var(--volr-color-emerald-500)}@supports (color:color-mix(in lab, red, red)){.volr\\:shadow-emerald-500\\/50{--volr-tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--volr-color-emerald-500)50%,transparent)var(--volr-tw-shadow-alpha),transparent)}}.volr\\:blur-2xl{--volr-tw-blur:blur(var(--volr-blur-2xl));filter:var(--volr-tw-blur,)var(--volr-tw-brightness,)var(--volr-tw-contrast,)var(--volr-tw-grayscale,)var(--volr-tw-hue-rotate,)var(--volr-tw-invert,)var(--volr-tw-saturate,)var(--volr-tw-sepia,)var(--volr-tw-drop-shadow,)}.volr\\:transition-all{transition-property:all;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--volr-tw-gradient-from,--volr-tw-gradient-via,--volr-tw-gradient-to;transition-timing-function:var(--volr-tw-ease,var(--volr-default-transition-timing-function));transition-duration:var(--volr-tw-duration,var(--volr-default-transition-duration))}.volr\\:duration-300{--volr-tw-duration:.3s;transition-duration:.3s}.volr\\:duration-500{--volr-tw-duration:.5s;transition-duration:.5s}.volr\\:ease-out{--volr-tw-ease:var(--volr-ease-out);transition-timing-function:var(--volr-ease-out)}.volr\\:outline-none{--volr-tw-outline-style:none;outline-style:none}@media (hover:hover){.volr\\:hover\\:bg-slate-50:hover{background-color:var(--volr-color-slate-50)}}.volr\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.volr\\:disabled\\:opacity-50:disabled{opacity:.5}.volr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.volr-text-secondary{color:var(--volr-text-secondary)}.volr-text-muted{color:var(--volr-text-muted)}.volr-bg-secondary{background-color:var(--volr-bg-secondary)}.volr-bg-tertiary{background-color:var(--volr-bg-tertiary)}.volr-border{border-color:var(--volr-border)}.volr-border-strong{border-color:var(--volr-border-strong)}.volr-divider-line{background-color:var(--volr-border)}.volr-error{background-color:var(--volr-error-bg);border-color:var(--volr-error-border);color:var(--volr-error-text)}.volr-hover:hover{background-color:var(--volr-hover-bg)}.volr-surface{background-color:var(--volr-bg)}}@property --volr-tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --volr-tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --volr-tw-gradient-position{syntax:"*";inherits:false}@property --volr-tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --volr-tw-gradient-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-via-stops{syntax:"*";inherits:false}@property --volr-tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --volr-tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --volr-tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --volr-tw-leading{syntax:"*";inherits:false}@property --volr-tw-font-weight{syntax:"*";inherits:false}@property --volr-tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-shadow-color{syntax:"*";inherits:false}@property --volr-tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-shadow-color{syntax:"*";inherits:false}@property --volr-tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-ring-color{syntax:"*";inherits:false}@property --volr-tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-inset-ring-color{syntax:"*";inherits:false}@property --volr-tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-ring-inset{syntax:"*";inherits:false}@property --volr-tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --volr-tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --volr-tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --volr-tw-blur{syntax:"*";inherits:false}@property --volr-tw-brightness{syntax:"*";inherits:false}@property --volr-tw-contrast{syntax:"*";inherits:false}@property --volr-tw-grayscale{syntax:"*";inherits:false}@property --volr-tw-hue-rotate{syntax:"*";inherits:false}@property --volr-tw-invert{syntax:"*";inherits:false}@property --volr-tw-opacity{syntax:"*";inherits:false}@property --volr-tw-saturate{syntax:"*";inherits:false}@property --volr-tw-sepia{syntax:"*";inherits:false}@property --volr-tw-drop-shadow{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-color{syntax:"*";inherits:false}@property --volr-tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --volr-tw-drop-shadow-size{syntax:"*";inherits:false}@property --volr-tw-duration{syntax:"*";inherits:false}@property --volr-tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
 function useResolvedTheme(theme = "light") {
-  const [resolvedTheme, setResolvedTheme] = React11.useState(() => {
+  const [resolvedTheme, setResolvedTheme] = React10.useState(() => {
     if (theme !== "system") return theme;
     if (typeof window === "undefined") return "light";
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (theme !== "system") {
       setResolvedTheme(theme);
       return;
@@ -412,10 +750,10 @@ function useResolvedTheme(theme = "light") {
   return resolvedTheme;
 }
 function ShadowPortal({ children, theme = "light" }) {
-  const [mountNode, setMountNode] = React11.useState(null);
-  const hostRef = React11.useRef(null);
+  const [mountNode, setMountNode] = React10.useState(null);
+  const hostRef = React10.useRef(null);
   const resolvedTheme = useResolvedTheme(theme);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     const host = document.createElement("div");
     host.id = "volr-shadow-portal";
     host.style.position = "fixed";
@@ -439,7 +777,7 @@ function ShadowPortal({ children, theme = "light" }) {
       hostRef.current = null;
     };
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (hostRef.current) {
       hostRef.current.setAttribute("data-theme", resolvedTheme);
     }
@@ -448,7 +786,7 @@ function ShadowPortal({ children, theme = "light" }) {
   return reactDom.createPortal(children, mountNode);
 }
 function useFocusTrap(isActive, containerRef) {
-  const previousActiveElement = React11.useRef(null);
+  const previousActiveElement = React10.useRef(null);
   const focusableSelector = [
     "button:not([disabled])",
     "input:not([disabled])",
@@ -457,7 +795,7 @@ function useFocusTrap(isActive, containerRef) {
     "a[href]",
     '[tabindex]:not([tabindex="-1"])'
   ].join(", ");
-  const getFocusableElements = React11.useCallback(() => {
+  const getFocusableElements = React10.useCallback(() => {
     if (!containerRef.current) return [];
     return Array.from(
       containerRef.current.querySelectorAll(focusableSelector)
@@ -465,7 +803,7 @@ function useFocusTrap(isActive, containerRef) {
       return el.offsetParent !== null;
     });
   }, [containerRef, focusableSelector]);
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React10.useCallback(
     (event) => {
       if (event.key !== "Tab") return;
       const focusableElements = getFocusableElements();
@@ -486,7 +824,7 @@ function useFocusTrap(isActive, containerRef) {
     },
     [getFocusableElements]
   );
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!isActive) return;
     previousActiveElement.current = document.activeElement;
     const focusableElements = getFocusableElements();
@@ -517,12 +855,12 @@ var Modal = ({
 }) => {
   const isMobile2 = useMediaQuery("(max-width: 500px)");
   const variant = explicitVariant ?? (isMobile2 ? "bottom-sheet" : "centered");
-  const dialogRef = React11.useRef(null);
-  const dialogId = React11.useId();
+  const dialogRef = React10.useRef(null);
+  const dialogId = React10.useId();
   const uiContext = useVolrUIOptional();
   const theme = uiContext?.theme ?? "light";
   useFocusTrap(open, dialogRef);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && open) {
         if (onEscapeKeyDown) {
@@ -976,7 +1314,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__default.default.forwardRef(
+var Button = React10__default.default.forwardRef(
   ({ variant = "primary", size = "md", fullWidth, className, style, disabled, children, ...props }, ref) => {
     const { accentColor } = useVolrUI();
     const sizeStyle = sizeMap[size];
@@ -1084,12 +1422,12 @@ function PasskeyEnrollView({
     isEnrolling,
     error: enrollmentError
   } = react.usePasskeyEnrollment();
-  const [hasStarted, setHasStarted] = React11.useState(false);
-  const [errorMessage, setErrorMessage] = React11.useState(null);
-  const [isRefreshing, setIsRefreshing] = React11.useState(false);
+  const [hasStarted, setHasStarted] = React10.useState(false);
+  const [errorMessage, setErrorMessage] = React10.useState(null);
+  const [isRefreshing, setIsRefreshing] = React10.useState(false);
   const biometricType = getBiometricType();
   const hasPasskey = user?.keyStorageType === "passkey";
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     console.log("[PasskeyEnrollView] User state:", {
       user,
       keyStorageType: user?.keyStorageType,
@@ -1097,7 +1435,7 @@ function PasskeyEnrollView({
       hasPasskey
     });
   }, [user, hasPasskey]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (hasPasskey && !user?.evmAddress && !isRefreshing) {
       const refreshUserData = async () => {
         try {
@@ -1128,7 +1466,7 @@ function PasskeyEnrollView({
       refreshUserData();
     }
   }, [hasPasskey, user?.evmAddress, isRefreshing, client, setUser, user]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!user?.id) {
       const error = new Error("User ID is required for passkey enrollment");
       setErrorMessage(getUserFriendlyError(error, t));
@@ -1137,7 +1475,7 @@ function PasskeyEnrollView({
       }
     }
   }, [user, onError, t]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (enrollmentError) {
       const friendlyMessage = getUserFriendlyError(enrollmentError, t);
       setErrorMessage(friendlyMessage);
@@ -1294,8 +1632,8 @@ function MpcConnectView({
     isConnecting,
     error: connectionError
   } = react.useMpcConnection();
-  const [errorMessage, setErrorMessage] = React11.useState(null);
-  React11.useEffect(() => {
+  const [errorMessage, setErrorMessage] = React10.useState(null);
+  React10.useEffect(() => {
     if (connectionError) {
       setErrorMessage(connectionError.message);
       if (onError) {
@@ -1303,7 +1641,7 @@ function MpcConnectView({
       }
     }
   }, [connectionError, onError]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     handleConnect();
   }, []);
   const handleConnect = async () => {
@@ -1364,7 +1702,7 @@ function MpcConnectView({
   );
 }
 var CopyButton = ({ text, className, onCopy }) => {
-  const [copied, setCopied] = React11.useState(false);
+  const [copied, setCopied] = React10.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(text);
@@ -1562,9 +1900,9 @@ function PoweredBy() {
 }
 function EmailInlineInput({ onSubmit, accentColor }) {
   const { t } = useI18n();
-  const [email, setEmail] = React11.useState("");
-  const [error, setError] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(false);
+  const [email, setEmail] = React10.useState("");
+  const [error, setError] = React10.useState(null);
+  const [isLoading, setIsLoading] = React10.useState(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -1688,14 +2026,14 @@ function SigninSelectScreen({
 function CodeInputScreen({ email, onSubmit, onResend }) {
   const { t } = useI18n();
   const { accentColor } = useVolrUI();
-  const [digits, setDigits] = React11.useState(Array(6).fill(""));
-  const [error, setError] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(false);
-  const inputRefs = React11.useRef([]);
-  React11.useEffect(() => {
+  const [digits, setDigits] = React10.useState(Array(6).fill(""));
+  const [error, setError] = React10.useState(null);
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const inputRefs = React10.useRef([]);
+  React10.useEffect(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     const code = digits.join("");
     if (code.length === 6 && !isLoading) {
       handleSubmit(code);
@@ -1858,23 +2196,23 @@ function SiweLoginScreen({
     checkSiweSession,
     getSiweSignUrl
   } = react.useVolrLogin();
-  const [isLoading, setIsLoading] = React11.useState(false);
-  const [loadingWallet, setLoadingWallet] = React11.useState(null);
-  const [error, setError] = React11.useState(null);
-  const [providers, setProviders] = React11.useState([]);
-  const [isDetecting, setIsDetecting] = React11.useState(true);
-  const [hasLegacyWallet, setHasLegacyWallet] = React11.useState(false);
-  const [showOtherWallet, setShowOtherWallet] = React11.useState(false);
-  const [sessionUrl, setSessionUrl] = React11.useState(null);
-  const [isPolling, setIsPolling] = React11.useState(false);
-  const pollingRef = React11.useRef(null);
-  const sessionCreatedRef = React11.useRef(false);
-  React11.useEffect(() => {
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const [loadingWallet, setLoadingWallet] = React10.useState(null);
+  const [error, setError] = React10.useState(null);
+  const [providers, setProviders] = React10.useState([]);
+  const [isDetecting, setIsDetecting] = React10.useState(true);
+  const [hasLegacyWallet, setHasLegacyWallet] = React10.useState(false);
+  const [showOtherWallet, setShowOtherWallet] = React10.useState(false);
+  const [sessionUrl, setSessionUrl] = React10.useState(null);
+  const [isPolling, setIsPolling] = React10.useState(false);
+  const pollingRef = React10.useRef(null);
+  const sessionCreatedRef = React10.useRef(false);
+  React10.useEffect(() => {
     return () => {
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (typeof window === "undefined") {
       setIsDetecting(false);
       return;
@@ -1900,7 +2238,7 @@ function SiweLoginScreen({
     };
   }, []);
   const hasAnyWallet = providers.length > 0 || hasLegacyWallet;
-  const createSession = React11.useCallback(async () => {
+  const createSession = React10.useCallback(async () => {
     if (sessionCreatedRef.current || sessionUrl) return;
     sessionCreatedRef.current = true;
     try {
@@ -1942,17 +2280,17 @@ function SiweLoginScreen({
       onError(err instanceof Error ? err : new Error("Failed to create session"));
     }
   }, [createSiweSession, getSiweSignUrl, checkSiweSession, onSuccess, onError, t, sessionUrl]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!isDetecting && !hasAnyWallet && !sessionUrl) {
       createSession();
     }
   }, [isDetecting, hasAnyWallet, sessionUrl, createSession]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (showOtherWallet && !sessionUrl) {
       createSession();
     }
   }, [showOtherWallet, sessionUrl, createSession]);
-  const handleWalletClick = React11.useCallback(async (provider, walletName) => {
+  const handleWalletClick = React10.useCallback(async (provider, walletName) => {
     setError(null);
     setIsLoading(true);
     setLoadingWallet(walletName);
@@ -1976,7 +2314,7 @@ function SiweLoginScreen({
       setLoadingWallet(null);
     }
   }, [signWithWallet, onSuccess, onError]);
-  const handleLegacyWalletClick = React11.useCallback(async () => {
+  const handleLegacyWalletClick = React10.useCallback(async () => {
     if (typeof window === "undefined" || !window.ethereum) return;
     const ethereum = window.ethereum;
     let walletName = "Wallet";
@@ -1985,7 +2323,7 @@ function SiweLoginScreen({
     else if (ethereum.isRabby) walletName = "Rabby";
     await handleWalletClick(ethereum, walletName);
   }, [handleWalletClick]);
-  const cancelOtherWallet = React11.useCallback(() => {
+  const cancelOtherWallet = React10.useCallback(() => {
     if (pollingRef.current) {
       clearInterval(pollingRef.current);
       pollingRef.current = null;
@@ -2129,13 +2467,13 @@ function SigninModal({ isOpen, onClose, onError }) {
   const { logout, user } = react.useVolrContext();
   const { appName, branding } = useVolrUI();
   const { requestEmailCode, verifyEmailCode, handleSocialLogin } = react.useVolrLogin();
-  const [currentScreen, setCurrentScreen] = React11.useState("method-select");
-  const [email, setEmail] = React11.useState("");
+  const [currentScreen, setCurrentScreen] = React10.useState("method-select");
+  const [email, setEmail] = React10.useState("");
   const hasPasskey = user?.keyStorageType === "passkey";
   const isMobile2 = useMediaQuery("(max-width: 500px)");
   const isWideViewport = useMediaQuery("(min-width: 864px)");
   const shouldUseWideLayout = !isMobile2 && isWideViewport && Boolean(branding) && currentScreen === "method-select";
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!isOpen) {
       setCurrentScreen("method-select");
       setEmail("");
@@ -2164,8 +2502,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();
@@ -2292,7 +2634,7 @@ function SigninModal({ isOpen, onClose, onError }) {
 function AccountModal({ isOpen, onClose, onError }) {
   const { user, logout } = react.useVolrContext();
   const { t } = useI18n();
-  const [isLoggingOut, setIsLoggingOut] = React11.useState(false);
+  const [isLoggingOut, setIsLoggingOut] = React10.useState(false);
   if (!user) {
     return /* @__PURE__ */ jsxRuntime.jsx(SigninModal, { isOpen, onClose, onError });
   }
@@ -2426,7 +2768,7 @@ function AssetSelectView({
     }) })
   ] });
 }
-var TextLinkButton = React11__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
+var TextLinkButton = React10__default.default.forwardRef(({ showArrow = false, className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -2685,7 +3027,7 @@ var DepositCompletedToast = ({
   symbol
 }) => {
   const { t } = useI18n();
-  const [expanded, setExpanded] = React11.useState(false);
+  const [expanded, setExpanded] = React10.useState(false);
   const formatAmount = (amount) => {
     const divisor = BigInt(10 ** decimals);
     const whole = amount / divisor;
@@ -2840,10 +3182,10 @@ function DepositQRView(props) {
   const { t } = useI18n();
   const { config } = react.useVolrContext();
   const { client } = react.useInternalAuth();
-  const [chainName, setChainName] = React11.useState(null);
-  const [showOtherTokenModal, setShowOtherTokenModal] = React11.useState(false);
-  const [showToast, setShowToast] = React11.useState(false);
-  const [toastData, setToastData] = React11.useState(null);
+  const [chainName, setChainName] = React10.useState(null);
+  const [showOtherTokenModal, setShowOtherTokenModal] = React10.useState(false);
+  const [showToast, setShowToast] = React10.useState(false);
+  const [toastData, setToastData] = React10.useState(null);
   const eip681 = `ethereum:${props.address}`;
   const status = react.useDepositListener({
     chainId: props.chainId,
@@ -2856,7 +3198,7 @@ function DepositQRView(props) {
     },
     address: props.address
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (status.state === "detected") {
       setToastData({
         previousBalance: status.previousBalance,
@@ -2866,11 +3208,11 @@ function DepositQRView(props) {
       setShowToast(true);
     }
   }, [status]);
-  const getNetworkInfo = React11.useCallback(
+  const getNetworkInfo = React10.useCallback(
     react.createGetNetworkInfo({ client, rpcOverrides: config.rpcOverrides }),
     [client, config.rpcOverrides]
   );
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     let cancelled = false;
     const loadChainName = async () => {
       try {
@@ -3037,11 +3379,11 @@ var DepositModal = ({
 }) => {
   const { user } = react.useVolrContext();
   const { client } = react.useInternalAuth();
-  const [depositAssets, setDepositAssets] = React11.useState([]);
-  const [isLoading, setIsLoading] = React11.useState(true);
-  const [error, setError] = React11.useState(null);
-  const [selectedIdx, setSelectedIdx] = React11.useState(-1);
-  React11.useEffect(() => {
+  const [depositAssets, setDepositAssets] = React10.useState([]);
+  const [isLoading, setIsLoading] = React10.useState(true);
+  const [error, setError] = React10.useState(null);
+  const [selectedIdx, setSelectedIdx] = React10.useState(-1);
+  React10.useEffect(() => {
     if (!open) return;
     setIsLoading(true);
     setError(null);
@@ -3068,12 +3410,12 @@ var DepositModal = ({
     if (depositAssets.length === 1) return 0;
     return -1;
   };
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (open && !isLoading && depositAssets.length > 0) {
       setSelectedIdx(getInitialIndex());
     }
   }, [open, isLoading, depositAssets.length, asset]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (!open) {
       setSelectedIdx(-1);
     }
@@ -3102,6 +3444,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 } = react.useVolrContext();
+  const { client } = react.useInternalAuth();
+  const { evm } = react.useVolr();
+  const { paymentOptions } = useVolrModal();
+  const { updatePaymentToProcessing, pollPaymentStatus } = react.useVolrPaymentApi();
+  const [state, dispatch] = React10.useReducer(paymentModalReducer, initialState);
+  const fetchBalance = React10.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 = React10.useCallback(async () => {
+    try {
+      const response = await client.get("/auth/branding");
+      dispatch({ type: "SET_LOGO_URL", logoUrl: response.logoUrl });
+    } catch {
+    }
+  }, [client]);
+  const fetchPaymentConfig = React10.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]);
+  React10.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 = React10.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 = React10.useCallback(() => {
+    dispatch({ type: "SHOW_DEPOSIT" });
+  }, []);
+  const handleDepositClose = React10.useCallback(
+    (depositOpen) => {
+      if (!depositOpen) {
+        dispatch({ type: "HIDE_DEPOSIT" });
+        if (state.currentPayment) {
+          fetchBalance(state.currentPayment);
+        }
+      }
+    },
+    [state.currentPayment, fetchBalance]
+  );
+  const handleDone = React10.useCallback(() => {
+    if (state.currentPayment?.status === "CONFIRMED") {
+      paymentOptions?.onComplete?.(state.currentPayment);
+    }
+    onOpenChange(false);
+  }, [state.currentPayment, paymentOptions, onOpenChange]);
+  const handleRetry = React10.useCallback(() => {
+    dispatch({ type: "RETRY" });
+    if (state.currentPayment) {
+      fetchBalance(state.currentPayment);
+    }
+  }, [state.currentPayment, fetchBalance]);
+  const handleClose = React10.useCallback(() => {
+    if (state.step === "processing") {
+      return;
+    }
+    if (state.step === "info") {
+      paymentOptions?.onCancel?.();
+    }
+    onOpenChange(false);
+  }, [state.step, paymentOptions, onOpenChange]);
+  const handleReport = React10.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__ */ jsxRuntime.jsxs("div", { className: "volr:p-6 volr:space-y-6 volr:animate-pulse", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-center volr:gap-4", children: [
@@ -3417,10 +4055,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__ */ jsxRuntime.jsxs("div", { className: "volr:p-6 volr:space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:flex volr:justify-center volr:py-4", children: isSuccess ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       "svg",
@@ -3459,7 +4098,11 @@ var PaymentResultView = ({
     ) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "volr:text-lg volr:font-semibold volr:text-slate-900", children: isSuccess ? "Payment Complete" : "Payment Failed" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "volr:bg-slate-50 volr:rounded-lg volr:p-4 volr:space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:text-sm", children: [
@@ -3488,7 +4131,10 @@ var PaymentResultView = ({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:space-y-3", children: isSuccess ? /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onDone, className: "volr:w-full", children: "Done" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onRetry, className: "volr:w-full", children: "Try Again" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:w-full", children: "Cancel" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onReport, className: "volr:flex-1", children: "Report Issue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", onClick: onDone, className: "volr:flex-1", children: "Cancel" })
+      ] })
     ] }) })
   ] });
 };
@@ -3496,139 +4142,61 @@ var PaymentModal = ({
   open,
   onOpenChange
 }) => {
-  const { user } = react.useVolrContext();
-  const { client } = react.useInternalAuth();
-  const { paymentOptions, close: closeModal } = useVolrModal();
-  const { updatePaymentToProcessing, checkPayment, pollPaymentStatus } = react.useVolrPay();
-  const [step, setStep] = React11.useState("info");
-  const [processingStep, setProcessingStep] = React11.useState("signing");
-  const [balance, setBalance] = React11.useState("0");
-  const [isBalanceLoading, setIsBalanceLoading] = React11.useState(true);
-  const [isPaying, setIsPaying] = React11.useState(false);
-  const [currentPayment, setCurrentPayment] = React11.useState(null);
-  const [txHash, setTxHash] = React11.useState();
-  const [error, setError] = React11.useState();
-  const [logoUrl, setLogoUrl] = React11.useState();
-  React11.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 = React11.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.");
+  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__ */ jsxRuntime.jsx(
+      DepositModal,
+      {
+        open: true,
+        onOpenChange: handleDepositClose,
+        asset: {
+          chainId: currentPayment.token.chainId,
+          symbol: currentPayment.token.symbol
+        }
       }
-      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 = React11.useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-  const handleDone = React11.useCallback(() => {
-    if (currentPayment) {
-      paymentOptions?.onComplete?.(currentPayment);
-    }
-    onOpenChange(false);
-  }, [currentPayment, paymentOptions, onOpenChange]);
-  const handleRetry = React11.useCallback(() => {
-    setStep("info");
-    setError(void 0);
-    if (currentPayment) {
-      fetchBalance(currentPayment);
-    }
-  }, [currentPayment]);
-  const handleClose = React11.useCallback(() => {
-    if (step === "processing") {
-      return;
-    }
-    if (step === "info") {
-      paymentOptions?.onCancel?.();
-    }
-    onOpenChange(false);
-  }, [step, paymentOptions, onOpenChange]);
+    );
+  }
   if (!paymentOptions || !currentPayment) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
       /* @__PURE__ */ jsxRuntime.jsx(PaymentSkeleton, {})
     ] });
   }
+  if (!isConfigured && step === "info") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange: handleClose, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: handleClose }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "volr:p-6 volr:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-red-600", children: "Payment not configured. Please contact the app developer." }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange: handleClose, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ModalHeader,
       {
-        onClose: step !== "processing" ? handleClose : void 0,
+        onClose: canClose ? handleClose : void 0,
         title: step === "info" ? "Confirm Payment" : void 0
       }
     ),
@@ -3651,21 +4219,22 @@ var PaymentModal = ({
         payment: currentPayment,
         error,
         onDone: handleDone,
-        onRetry: handleRetry
+        onRetry: handleRetry,
+        onReport: handleReport
       }
     )
   ] });
 };
-var VolrUIContext = React11__default.default.createContext(null);
+var VolrUIContext = React10__default.default.createContext(null);
 var useVolrUI = () => {
-  const context = React11.useContext(VolrUIContext);
+  const context = React10.useContext(VolrUIContext);
   if (!context) {
     throw new Error("useVolrUI must be used within VolrUIProvider");
   }
   return context;
 };
 var useVolrUIOptional = () => {
-  return React11.useContext(VolrUIContext);
+  return React10.useContext(VolrUIContext);
 };
 function OnboardingFlow({
   keyStorageType,
@@ -3721,11 +4290,11 @@ var VolrUIProvider = ({
   const providerPolicy = config.providerPolicy ?? {
     enforceOnFirstLogin: true
   };
-  const [showOnboarding, setShowOnboarding] = React11.useState(false);
-  const [keyStorageTypeError, setKeyStorageTypeError] = React11.useState(
+  const [showOnboarding, setShowOnboarding] = React10.useState(false);
+  const [keyStorageTypeError, setKeyStorageTypeError] = React10.useState(
     null
   );
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (providerPolicy.enforceOnFirstLogin !== false && !keyStorageType) {
       const errorMessage = "keyStorageType must be specified in VolrUIProvider props. Please set keyStorageType prop in VolrUIProvider.";
       console.error(errorMessage);
@@ -3797,9 +4366,9 @@ var VolrUIProvider = ({
 };
 function AccountModalPortal() {
   const { isOpen, mode, close } = useVolrModal();
-  const [portalRoot, setPortalRoot] = React11.useState(null);
-  const [error, setError] = React11.useState(null);
-  React11.useEffect(() => {
+  const [portalRoot, setPortalRoot] = React10.useState(null);
+  const [error, setError] = React10.useState(null);
+  React10.useEffect(() => {
     if (typeof window === "undefined") return;
     let root = document.getElementById("volr-modal-root");
     if (!root) {
@@ -3858,9 +4427,9 @@ function AccountModalPortal() {
 function DepositModalPortal() {
   const { isOpen, mode, asset, close } = useVolrModal();
   const { user } = react.useVolrContext();
-  const [portalRoot, setPortalRoot] = React11.useState(null);
-  const [showLogin, setShowLogin] = React11.useState(false);
-  React11.useEffect(() => {
+  const [portalRoot, setPortalRoot] = React10.useState(null);
+  const [showLogin, setShowLogin] = React10.useState(false);
+  React10.useEffect(() => {
     if (typeof window === "undefined") return;
     let root = document.getElementById("volr-modal-root");
     if (!root) {
@@ -3875,7 +4444,7 @@ function DepositModalPortal() {
       }
     };
   }, []);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (isOpen && mode === "deposit" && !user) {
       setShowLogin(true);
     } else {
@@ -3909,8 +4478,8 @@ function DepositModalPortal() {
 }
 function PaymentModalPortal() {
   const { isOpen, mode, close } = useVolrModal();
-  const [portalRoot, setPortalRoot] = React11.useState(null);
-  React11.useEffect(() => {
+  const [portalRoot, setPortalRoot] = React10.useState(null);
+  React10.useEffect(() => {
     if (typeof window === "undefined") return;
     let root = document.getElementById("volr-modal-root");
     if (!root) {
@@ -3940,8 +4509,8 @@ function PaymentModalPortal() {
 function OAuthCallbackHandler({
   onShowOnboarding
 }) {
-  const [hasCode, setHasCode] = React11.useState(false);
-  React11.useEffect(() => {
+  const [hasCode, setHasCode] = React10.useState(false);
+  React10.useEffect(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     const code = params.get("code");
@@ -3984,13 +4553,13 @@ function OnboardingChecker({
 }) {
   const { user, provider, isLoading } = react.useVolrContext();
   const { isOpen: isModalOpen } = useVolrModal();
-  const modalWasOpened = React11__default.default.useRef(false);
-  React11.useEffect(() => {
+  const modalWasOpened = React10__default.default.useRef(false);
+  React10.useEffect(() => {
     if (isModalOpen) {
       modalWasOpened.current = true;
     }
   }, [isModalOpen]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (isLoading) {
       return;
     }
@@ -4033,7 +4602,7 @@ function OnboardingChecker({
 }
 function useSwitchNetwork() {
   const { client } = react.useInternalAuth();
-  return React11.useCallback(
+  return React10.useCallback(
     async (chainId) => {
       if (typeof window === "undefined" || !window.ethereum) {
         throw new Error("No wallet found");
@@ -4093,6 +4662,104 @@ async function getCurrentChainId() {
   });
   return parseInt(chainIdHex, 16);
 }
+var paymentPromiseResolvers = /* @__PURE__ */ new Map();
+function useVolrPay() {
+  const { open: openModal } = useVolrModal();
+  const { createPayment, checkPayment, getPaymentHistory, cancelPayment } = react.useVolrPaymentApi();
+  const currentPaymentIdRef = React10.useRef(null);
+  const pay = React10.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
+  };
+}
 
 Object.defineProperty(exports, "VolrProvider", {
   enumerable: true,
@@ -4114,6 +4781,10 @@ Object.defineProperty(exports, "useVolrLogin", {
   enumerable: true,
   get: function () { return react.useVolrLogin; }
 });
+Object.defineProperty(exports, "useVolrPaymentApi", {
+  enumerable: true,
+  get: function () { return react.useVolrPaymentApi; }
+});
 exports.I18nContext = I18nContext;
 exports.I18nProvider = I18nProvider;
 exports.MpcConnectView = MpcConnectView;
@@ -4124,6 +4795,7 @@ exports.useI18n = useI18n;
 exports.useSwitchNetwork = useSwitchNetwork;
 exports.useTranslation = useTranslation;
 exports.useVolrModal = useVolrModal;
+exports.useVolrPay = useVolrPay;
 exports.useVolrUI = useVolrUI;
 exports.useVolrUIOptional = useVolrUIOptional;
 //# sourceMappingURL=index.cjs.map