@volr/react-ui 0.1.98 → 0.1.100

package/dist/index.cjs

@@ -3456,7 +3456,9 @@ var initialState = {
   isBalanceLoading: true,
   isConfigLoading: true,
   isPaying: false,
-  currentPayment: null,
+  payOptions: null,
+  tokenInfo: null,
+  createdPayment: null,
   txHash: void 0,
   error: void 0,
   logoUrl: void 0,
@@ -3467,13 +3469,15 @@ function paymentModalReducer(state, action) {
   switch (action.type) {
     case "RESET":
       return { ...initialState };
-    case "INIT_PAYMENT":
+    case "INIT":
       return {
         ...initialState,
-        currentPayment: action.payment,
+        payOptions: action.options,
         isBalanceLoading: true,
         isConfigLoading: true
       };
+    case "SET_TOKEN_INFO":
+      return { ...state, tokenInfo: action.tokenInfo };
     case "SET_BALANCE":
       return { ...state, balance: action.balance };
     case "SET_BALANCE_LOADING":
@@ -3492,6 +3496,8 @@ function paymentModalReducer(state, action) {
         processingStep: "signing",
         error: void 0
       };
+    case "SET_CREATED_PAYMENT":
+      return { ...state, createdPayment: action.payment };
     case "SET_PROCESSING_STEP":
       return { ...state, processingStep: action.step };
     case "SET_TX_HASH":
@@ -3501,7 +3507,7 @@ function paymentModalReducer(state, action) {
         ...state,
         isPaying: false,
         step: "result",
-        currentPayment: action.payment
+        createdPayment: action.payment
       };
     case "PAYMENT_ERROR":
       return {
@@ -3530,33 +3536,32 @@ function usePaymentModalState(open, onOpenChange) {
   const { client } = react.useInternalAuth();
   const { evm } = react.useVolr();
   const { paymentOptions } = useVolrModal();
-  const { updatePaymentToProcessing, pollPaymentStatus } = react.useVolrPaymentApi();
+  const { createPayment, updatePaymentToProcessing, pollPaymentStatus, failPendingPayment } = react.useVolrPaymentApi();
   const [state, dispatch] = React10.useReducer(paymentModalReducer, initialState);
   const fetchBalance = React10.useCallback(
-    async (payment) => {
+    async (tokenInfo) => {
       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];
+        const evmClient = evm(tokenInfo.chainId);
         let balanceRaw;
-        if (tokenAddress === "native") {
+        if (tokenInfo.address === "native") {
           balanceRaw = await evmClient.getBalance(user.evmAddress);
         } else {
           balanceRaw = await evmClient.readContract({
-            address: tokenAddress,
+            address: tokenInfo.address,
             abi: erc20Abi,
             functionName: "balanceOf",
             args: [user.evmAddress]
           });
         }
-        const balanceNum = Number(balanceRaw) / Math.pow(10, payment.token.decimals);
+        const balanceNum = Number(balanceRaw) / Math.pow(10, tokenInfo.decimals);
         const formattedBalance = balanceNum.toLocaleString(void 0, {
           minimumFractionDigits: 0,
-          maximumFractionDigits: payment.token.decimals > 6 ? 6 : payment.token.decimals
+          maximumFractionDigits: tokenInfo.decimals > 6 ? 6 : tokenInfo.decimals
         });
         dispatch({ type: "SET_BALANCE", balance: formattedBalance });
       } catch (err) {
@@ -3578,72 +3583,74 @@ function usePaymentModalState(open, onOpenChange) {
   const fetchPaymentConfig = React10.useCallback(async () => {
     dispatch({ type: "SET_CONFIG_LOADING", loading: true });
     try {
-      const response = await client.get(
-        "/payments/config"
-      );
-      dispatch({
-        type: "SET_RECEIVER_ADDRESS",
-        receiverAddress: response.receiverAddress
-      });
+      const response = await client.get("/payments/config");
+      dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: response.receiverAddress });
+      dispatch({ type: "SET_TOKEN_INFO", tokenInfo: response.token });
+      if (response.token) {
+        fetchBalance(response.token);
+      }
     } catch (err) {
       console.error("Failed to fetch payment config:", err);
       dispatch({ type: "SET_RECEIVER_ADDRESS", receiverAddress: null });
     } finally {
       dispatch({ type: "SET_CONFIG_LOADING", loading: false });
     }
-  }, [client]);
+  }, [client, fetchBalance]);
   React10.useEffect(() => {
-    if (open && paymentOptions) {
+    if (open && paymentOptions?.options) {
       if (state.step === "processing" || state.step === "result") {
         return;
       }
-      dispatch({ type: "INIT_PAYMENT", payment: paymentOptions.payment });
-      fetchBalance(paymentOptions.payment);
+      dispatch({ type: "INIT", options: paymentOptions.options });
       fetchBranding();
       fetchPaymentConfig();
     } else if (!open) {
       dispatch({ type: "RESET" });
     }
-  }, [open, paymentOptions?.payment?.id]);
+  }, [open, paymentOptions?.options?.amount]);
   const handlePay = React10.useCallback(async () => {
-    const { currentPayment, receiverAddress } = state;
-    if (!currentPayment || !user?.evmAddress || !paymentOptions || !receiverAddress) {
+    const { payOptions, receiverAddress, tokenInfo } = state;
+    if (!payOptions || !user?.evmAddress || !paymentOptions || !receiverAddress || !tokenInfo) {
       return;
     }
     dispatch({ type: "START_PAYMENT" });
+    let createdPaymentId = null;
     try {
-      const evmClient = evm(currentPayment.token.chainId);
-      const tokenAddress = currentPayment.token.id.split("_")[1];
+      const payment = await createPayment(payOptions);
+      createdPaymentId = payment.id;
+      dispatch({ type: "SET_CREATED_PAYMENT", payment });
+      paymentOptions.options.handlers?.onCreated?.({ id: payment.id });
+      const evmClient = evm(tokenInfo.chainId);
       dispatch({ type: "SET_PROCESSING_STEP", step: "broadcasting" });
       let result;
-      if (tokenAddress === "native") {
+      if (tokenInfo.address === "native") {
         result = await evmClient.sendTransaction({
           to: receiverAddress,
           data: "0x",
-          value: BigInt(currentPayment.amount)
+          value: BigInt(payment.amount)
         });
       } else {
         result = await evmClient.sendBatch([
           {
-            target: tokenAddress,
+            target: tokenInfo.address,
             abi: erc20Abi,
             functionName: "transfer",
             args: [
               receiverAddress,
-              BigInt(currentPayment.amount)
+              BigInt(payment.amount)
             ]
           }
         ]);
       }
       dispatch({ type: "SET_TX_HASH", txHash: result.txHash ?? "" });
       dispatch({ type: "SET_PROCESSING_STEP", step: "confirming" });
-      await updatePaymentToProcessing(currentPayment.id, result.txId);
+      await updatePaymentToProcessing(payment.id, result.txId);
       paymentOptions.onProcessing?.({
-        ...currentPayment,
+        ...payment,
         txHash: result.txHash ?? "",
         status: "PROCESSING"
       });
-      const confirmedPayment = await pollPaymentStatus(currentPayment.id);
+      const confirmedPayment = await pollPaymentStatus(payment.id);
       dispatch({ type: "PAYMENT_SUCCESS", payment: confirmedPayment });
       if (confirmedPayment.status === "CONFIRMED") {
         paymentOptions.onComplete?.(confirmedPayment);
@@ -3657,6 +3664,13 @@ function usePaymentModalState(open, onOpenChange) {
       }
     } catch (err) {
       console.error("Payment failed:", err);
+      if (createdPaymentId) {
+        try {
+          await failPendingPayment(createdPaymentId);
+        } catch (failErr) {
+          console.error("Failed to mark payment as failed:", failErr);
+        }
+      }
       const paymentError = {
         code: err.code || "PAYMENT_FAILED",
         message: err.message || "Payment failed. Please try again."
@@ -3669,8 +3683,10 @@ function usePaymentModalState(open, onOpenChange) {
     user,
     paymentOptions,
     evm,
+    createPayment,
     updatePaymentToProcessing,
-    pollPaymentStatus
+    pollPaymentStatus,
+    failPendingPayment
   ]);
   const handleDeposit = React10.useCallback(() => {
     dispatch({ type: "SHOW_DEPOSIT" });
@@ -3679,25 +3695,25 @@ function usePaymentModalState(open, onOpenChange) {
     (depositOpen) => {
       if (!depositOpen) {
         dispatch({ type: "HIDE_DEPOSIT" });
-        if (state.currentPayment) {
-          fetchBalance(state.currentPayment);
+        if (state.tokenInfo) {
+          fetchBalance(state.tokenInfo);
         }
       }
     },
-    [state.currentPayment, fetchBalance]
+    [state.tokenInfo, fetchBalance]
   );
   const handleDone = React10.useCallback(() => {
-    if (state.currentPayment?.status === "CONFIRMED") {
-      paymentOptions?.onComplete?.(state.currentPayment);
+    if (state.createdPayment?.status === "CONFIRMED") {
+      paymentOptions?.onComplete?.(state.createdPayment);
     }
     onOpenChange(false);
-  }, [state.currentPayment, paymentOptions, onOpenChange]);
+  }, [state.createdPayment, paymentOptions, onOpenChange]);
   const handleRetry = React10.useCallback(() => {
     dispatch({ type: "RETRY" });
-    if (state.currentPayment) {
-      fetchBalance(state.currentPayment);
+    if (state.tokenInfo) {
+      fetchBalance(state.tokenInfo);
     }
-  }, [state.currentPayment, fetchBalance]);
+  }, [state.tokenInfo, fetchBalance]);
   const handleClose = React10.useCallback(() => {
     if (state.step === "processing") {
       return;
@@ -3708,19 +3724,19 @@ function usePaymentModalState(open, onOpenChange) {
     onOpenChange(false);
   }, [state.step, paymentOptions, onOpenChange]);
   const handleReport = React10.useCallback(async () => {
-    const { currentPayment, error, step, txHash } = state;
-    if (!currentPayment || !error) return;
+    const { createdPayment, error, step, txHash, tokenInfo } = state;
+    if (!createdPayment || !error) return;
     try {
-      await client.post(`/payments/${currentPayment.id}/report`, {
+      await client.post(`/payments/${createdPayment.id}/report`, {
         errorCode: error.code,
         errorMessage: error.message,
         platform: "web",
         context: {
           step,
           txHash,
-          tokenId: currentPayment.token.id,
-          chainId: currentPayment.token.chainId,
-          amount: currentPayment.amount
+          tokenId: tokenInfo?.id,
+          chainId: tokenInfo?.chainId,
+          amount: createdPayment.amount
         }
       });
       alert("Error report submitted. Thank you for your feedback.");
@@ -3736,7 +3752,8 @@ Please contact support with this information.`
     }
   }, [state, client]);
   const canClose = state.step !== "processing";
-  const isConfigured = state.receiverAddress !== null;
+  const isConfigured = state.receiverAddress !== null && state.tokenInfo !== null;
+  const isReady = !state.isConfigLoading && !state.isBalanceLoading && isConfigured;
   return {
     state,
     handlePay,
@@ -3747,7 +3764,8 @@ Please contact support with this information.`
     handleClose,
     handleReport,
     canClose,
-    isConfigured
+    isConfigured,
+    isReady
   };
 }
 var PaymentSkeleton = () => {
@@ -3850,7 +3868,12 @@ var ItemDisplay = ({
   ] });
 };
 var PaymentInfoView = ({
-  payment,
+  amount,
+  tokenSymbol,
+  tokenDecimals,
+  itemName,
+  itemDescription,
+  itemImage,
   balance,
   isBalanceLoading,
   logoUrl,
@@ -3858,22 +3881,20 @@ var PaymentInfoView = ({
   onDeposit,
   isPaying
 }) => {
-  const { token, itemName, itemDescription, itemImage } = payment;
-  const amountInUnits = Number(payment.amount) / Math.pow(10, token.decimals);
-  const formattedAmount = amountInUnits.toLocaleString(void 0, {
+  const formattedAmount = amount.toLocaleString(void 0, {
     minimumFractionDigits: 0,
-    maximumFractionDigits: token.decimals > 6 ? 6 : token.decimals
+    maximumFractionDigits: tokenDecimals > 6 ? 6 : tokenDecimals
   });
   const balanceNum = parseFloat(balance.replace(/,/g, "") || "0");
-  const isInsufficient = !isBalanceLoading && balanceNum < amountInUnits;
+  const isInsufficient = !isBalanceLoading && balanceNum < amount;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:space-y-6", children: [
     itemName && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ItemDisplay,
         {
           name: itemName,
-          description: itemDescription ?? void 0,
-          image: itemImage ?? void 0,
+          description: itemDescription,
+          image: itemImage,
           logoUrl
         }
       ),
@@ -3883,12 +3904,7 @@ var PaymentInfoView = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "volr:text-sm volr:text-slate-500", children: "Amount to Pay" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:items-baseline volr:gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-2xl volr:font-bold volr:text-slate-900", children: formattedAmount }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: token.symbol })
-      ] }),
-      payment.totalUsd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "volr:text-sm volr:text-slate-400", children: [
-        "\u2248 $",
-        parseFloat(payment.totalUsd).toFixed(2),
-        " USD"
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "volr:text-lg volr:font-medium volr:text-slate-600", children: tokenSymbol })
       ] })
     ] }),
     isBalanceLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "volr:flex volr:justify-between volr:items-center volr:p-3 volr:bg-slate-50 volr:rounded-lg volr:animate-pulse", children: [
@@ -3898,7 +3914,7 @@ var PaymentInfoView = ({
       BalanceDisplay,
       {
         balance,
-        symbol: token.symbol,
+        symbol: tokenSymbol,
         required: formattedAmount,
         isInsufficient
       }
@@ -3934,12 +3950,12 @@ var PaymentInfoView = ({
               )
             ] }),
             "Processing..."
-          ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${token.symbol}`
+          ] }) : isInsufficient ? "Insufficient Balance" : `Pay ${formattedAmount} ${tokenSymbol}`
         }
       ),
       isInsufficient && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "secondary", onClick: onDeposit, className: "volr:w-full", children: [
         "Deposit ",
-        token.symbol
+        tokenSymbol
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(PoweredBy, {})
@@ -4118,8 +4134,7 @@ var PaymentModal = ({
     handleClose,
     handleReport,
     canClose,
-    isConfigured
-  } = usePaymentModalState(open, onOpenChange);
+    isConfigured} = usePaymentModalState(open, onOpenChange);
   const {
     step,
     processingStep,
@@ -4127,26 +4142,28 @@ var PaymentModal = ({
     isBalanceLoading,
     isConfigLoading,
     isPaying,
-    currentPayment,
+    payOptions,
+    tokenInfo,
+    createdPayment,
     txHash,
     error,
     logoUrl,
     showDeposit
   } = state;
-  if (showDeposit && currentPayment) {
+  if (showDeposit && tokenInfo) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DepositModal,
       {
         open: true,
         onOpenChange: handleDepositClose,
         asset: {
-          chainId: currentPayment.token.chainId,
-          symbol: currentPayment.token.symbol
+          chainId: tokenInfo.chainId,
+          symbol: tokenInfo.symbol
         }
       }
     );
   }
-  if (!paymentOptions || !currentPayment || isConfigLoading) {
+  if (!paymentOptions || !payOptions || isConfigLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { onClose: () => onOpenChange(false) }),
       /* @__PURE__ */ jsxRuntime.jsx(PaymentSkeleton, {})
@@ -4166,10 +4183,15 @@ var PaymentModal = ({
         title: step === "info" ? "Confirm Payment" : void 0
       }
     ),
-    step === "info" && /* @__PURE__ */ jsxRuntime.jsx(
+    step === "info" && tokenInfo && /* @__PURE__ */ jsxRuntime.jsx(
       PaymentInfoView,
       {
-        payment: currentPayment,
+        amount: payOptions.amount,
+        tokenSymbol: tokenInfo.symbol,
+        tokenDecimals: tokenInfo.decimals,
+        itemName: payOptions.item?.name,
+        itemDescription: payOptions.item?.description,
+        itemImage: payOptions.item?.image,
         balance,
         isBalanceLoading,
         logoUrl,
@@ -4179,10 +4201,10 @@ var PaymentModal = ({
       }
     ),
     step === "processing" && /* @__PURE__ */ jsxRuntime.jsx(PaymentProcessingView, { step: processingStep, txHash }),
-    step === "result" && /* @__PURE__ */ jsxRuntime.jsx(
+    step === "result" && createdPayment && /* @__PURE__ */ jsxRuntime.jsx(
       PaymentResultView,
       {
-        payment: currentPayment,
+        payment: createdPayment,
         error,
         onDone: handleDone,
         onRetry: handleRetry,
@@ -4628,42 +4650,32 @@ async function getCurrentChainId() {
   });
   return parseInt(chainIdHex, 16);
 }
-var paymentPromiseResolvers = /* @__PURE__ */ new Map();
+var paymentPromiseResolver = null;
 function useVolrPay() {
-  const { open: openModal } = useVolrModal();
-  const { createPayment, checkPayment, getPaymentHistory, cancelPayment } = react.useVolrPaymentApi();
-  const currentPaymentIdRef = React10.useRef(null);
+  const { open: openModal, close: closeModal } = useVolrModal();
+  const { checkPayment, getPaymentHistory } = react.useVolrPaymentApi();
+  const isInProgressRef = React10.useRef(false);
   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 });
+    (options) => {
+      isInProgressRef.current = true;
       const waitPromise = new Promise((resolve, reject) => {
-        paymentPromiseResolvers.set(payment.id, { resolve, reject });
+        paymentPromiseResolver = { resolve, reject };
       });
       const modalOptions = {
-        payment,
         options: {
           amount: options.amount,
           item: options.item,
           referenceId: options.referenceId,
           metadata: options.metadata,
           idempotencyKey: options.idempotencyKey,
-          expiresInSec: options.expiresInSec
+          expiresInSec: options.expiresInSec,
+          handlers: options.handlers
         },
         onComplete: (result) => {
-          currentPaymentIdRef.current = null;
-          const resolver = paymentPromiseResolvers.get(payment.id);
-          if (resolver) {
-            resolver.resolve(result);
-            paymentPromiseResolvers.delete(payment.id);
+          isInProgressRef.current = false;
+          if (paymentPromiseResolver) {
+            paymentPromiseResolver.resolve(result);
+            paymentPromiseResolver = null;
           }
           if (result.status === "CONFIRMED") {
             options.handlers?.onSuccess?.(result);
@@ -4676,54 +4688,43 @@ function useVolrPay() {
           });
         },
         onError: (error) => {
-          currentPaymentIdRef.current = null;
-          const resolver = paymentPromiseResolvers.get(payment.id);
-          if (resolver) {
-            resolver.reject(new Error(error.message));
-            paymentPromiseResolvers.delete(payment.id);
+          isInProgressRef.current = false;
+          if (paymentPromiseResolver) {
+            paymentPromiseResolver.reject(new Error(error.message));
+            paymentPromiseResolver = null;
           }
           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);
+          isInProgressRef.current = false;
+          if (paymentPromiseResolver) {
+            paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
+            paymentPromiseResolver = null;
           }
           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);
+        cancel: () => {
+          closeModal();
+          isInProgressRef.current = false;
+          if (paymentPromiseResolver) {
+            paymentPromiseResolver.reject(new Error("Payment cancelled by user"));
+            paymentPromiseResolver = null;
           }
           options.handlers?.onCancel?.();
         }
       };
     },
-    [createPayment, cancelPayment, openModal]
+    [openModal, closeModal]
   );
   return {
     pay,
     checkPayment,
     getPaymentHistory,
-    isPaymentInProgress: currentPaymentIdRef.current !== null
+    isPaymentInProgress: isInProgressRef.current
   };
 }