@moneymq/react 0.9.2 → 0.10.0

package/dist/index.d.cts

@@ -40,7 +40,7 @@ declare const MoneyMQContext: React.Context<MoneyMQClient | null>;
 declare const SandboxContext: React.Context<SandboxContextState>;
 declare function useMoneyMQ(): MoneyMQClient;
 declare function useSandbox(): SandboxContextState;
-declare function MoneyMQProvider({ children, client, branding, }: MoneyMQProviderProps): react_jsx_runtime.JSX.Element;
+declare function MoneyMQProvider({ children, client, branding }: MoneyMQProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Represents a completed payment transaction.

package/dist/index.d.ts

@@ -40,7 +40,7 @@ declare const MoneyMQContext: React.Context<MoneyMQClient | null>;
 declare const SandboxContext: React.Context<SandboxContextState>;
 declare function useMoneyMQ(): MoneyMQClient;
 declare function useSandbox(): SandboxContextState;
-declare function MoneyMQProvider({ children, client, branding, }: MoneyMQProviderProps): react_jsx_runtime.JSX.Element;
+declare function MoneyMQProvider({ children, client, branding }: MoneyMQProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Represents a completed payment transaction.

package/dist/index.js

@@ -46734,46 +46734,31 @@ var SandboxContext = createContext2({
   sandboxAccounts: []
 });
 var DEFAULT_RPC_URL = "https://api.devnet.solana.com";
-var SANDBOX_HASH_PREFIX = "SURFNETxSAFEHASH";
 function normalizeRpcUrl(url2) {
   return url2.replace("0.0.0.0", "localhost").replace("127.0.0.1", "localhost");
 }
-async function getRpcUrl(apiUrl) {
+async function getFacilitatorConfig(apiUrl) {
   try {
-    console.log("[MoneyMQ] Fetching config from:", `${apiUrl}/config`);
-    const response = await fetch(`${apiUrl}/config`);
+    const configUrl = `${apiUrl}/payment/v1/config?attrs=studio`;
+    console.log("[MoneyMQ] Fetching facilitator config from:", configUrl);
+    const response = await fetch(configUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch config: ${response.status}`);
+    }
     const config2 = await response.json();
-    const rawRpcUrl = config2.x402?.validator?.rpcUrl || DEFAULT_RPC_URL;
-    console.log("[MoneyMQ] Raw RPC URL from config:", rawRpcUrl);
+    const rawRpcUrl = config2.studio?.rpcUrl || DEFAULT_RPC_URL;
     const normalizedUrl = normalizeRpcUrl(rawRpcUrl);
-    console.log("[MoneyMQ] Normalized RPC URL:", normalizedUrl);
-    return normalizedUrl;
-  } catch (err2) {
-    console.error("[MoneyMQ] Error fetching config:", err2);
-    return DEFAULT_RPC_URL;
-  }
-}
-async function checkSandboxMode(rpcUrl) {
-  try {
-    console.log("[MoneyMQ] Checking sandbox mode with RPC:", rpcUrl);
-    const response = await fetch(rpcUrl, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        jsonrpc: "2.0",
-        id: 1,
-        method: "getLatestBlockhash",
-        params: [{ commitment: "finalized" }]
-      })
-    });
-    const data = await response.json();
-    const blockhash = data?.result?.value?.blockhash || "";
-    const isSandbox = blockhash.startsWith(SANDBOX_HASH_PREFIX);
-    console.log("[MoneyMQ] Blockhash:", blockhash, "| Sandbox:", isSandbox);
-    return isSandbox;
+    console.log("[MoneyMQ] Facilitator config:", { isSandbox: config2.isSandbox, rpcUrl: normalizedUrl });
+    return {
+      isSandbox: config2.isSandbox,
+      rpcUrl: normalizedUrl
+    };
   } catch (err2) {
-    console.error("[MoneyMQ] Error checking sandbox mode:", err2);
-    return false;
+    console.error("[MoneyMQ] Error fetching facilitator config:", err2);
+    return {
+      isSandbox: false,
+      rpcUrl: DEFAULT_RPC_URL
+    };
   }
 }
 async function fetchTokenBalance(rpcUrl, tokenAccountAddress) {
@@ -46799,8 +46784,8 @@ async function fetchTokenBalance(rpcUrl, tokenAccountAddress) {
 }
 async function fetchSandboxAccounts(apiUrl, rpcUrl) {
   try {
-    console.log("[MoneyMQ] Fetching sandbox accounts from:", `${apiUrl}/sandbox/accounts`);
-    const response = await fetch(`${apiUrl}/sandbox/accounts`);
+    console.log("[MoneyMQ] Fetching sandbox accounts from:", `${apiUrl}/payment/v1/accounts`);
+    const response = await fetch(`${apiUrl}/payment/v1/accounts`);
     if (!response.ok) {
       console.log("[MoneyMQ] Sandbox accounts fetch failed:", response.status);
       return [];
@@ -46842,19 +46827,14 @@ function useMoneyMQ() {
 function useSandbox() {
   return useContext2(SandboxContext);
 }
-function MoneyMQProvider({
-  children,
-  client,
-  branding
-}) {
+function MoneyMQProvider({ children, client, branding }) {
   const [rpcEndpoint, setRpcEndpoint] = useState3(null);
   const [isSandboxMode, setIsSandboxMode] = useState3(false);
   const [sandboxAccounts, setSandboxAccounts] = useState3([]);
   useEffect2(() => {
     async function initialize() {
-      const rpcUrl = await getRpcUrl(client.config.endpoint);
+      const { isSandbox, rpcUrl } = await getFacilitatorConfig(client.config.endpoint);
       setRpcEndpoint(rpcUrl);
-      const isSandbox = await checkSandboxMode(rpcUrl);
       setIsSandboxMode(isSandbox);
       if (isSandbox) {
         const accounts = await fetchSandboxAccounts(client.config.endpoint, rpcUrl);
@@ -49371,9 +49351,9 @@ var logo_animation_default = { assets: [{ id: "4", layers: [{ ind: 3, ty: 4, ks:
 // src/checkout-modal.tsx
 import {
   EventStream,
-  EventReader,
   CheckoutReceipt,
-  isPaymentSettlementSucceeded
+  isPaymentSettlementSucceeded,
+  isTransactionCompleted
 } from "@moneymq/sdk";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function encodeFormData(data) {
@@ -49541,31 +49521,38 @@ function waitForSettlementEvent(apiUrl, paymentIntentId, timeoutMs = 3e4) {
     stream.connect();
   });
 }
-function waitForChannelEvent(apiUrl, channelId, eventType, timeoutMs = 3e4) {
+function waitForTransactionCompleted(apiUrl, transactionId, timeoutMs = 3e4) {
   return new Promise((resolve, reject) => {
-    console.log("[MoneyMQ] Waiting for channel event:", eventType, "on channel:", channelId);
-    const reader = new EventReader(apiUrl, channelId, { replay: 10 });
+    console.log("[MoneyMQ] Waiting for transaction:completed event for tx:", transactionId);
+    const stream = new EventStream(apiUrl, { last: 5 });
     let resolved = false;
     const cleanup = () => {
       if (!resolved) {
-        reader.disconnect();
+        stream.disconnect();
       }
     };
     const timeout = setTimeout(() => {
       cleanup();
-      reject(new Error(`Channel event timeout waiting for ${eventType}`));
+      reject(new Error("Transaction completed event timeout"));
     }, timeoutMs);
-    reader.on(eventType, (event) => {
-      console.log("[MoneyMQ] Channel event received:", eventType);
-      resolved = true;
-      clearTimeout(timeout);
-      reader.disconnect();
-      resolve(event);
+    stream.on("payment", (event) => {
+      console.log("[MoneyMQ] Received event while waiting for transaction:completed:", event.type);
+      if (isTransactionCompleted(event)) {
+        if (event.data.transaction_id === transactionId) {
+          console.log("[MoneyMQ] Transaction completed event received for tx:", transactionId);
+          resolved = true;
+          clearTimeout(timeout);
+          stream.disconnect();
+          resolve(event);
+        } else {
+          console.log("[MoneyMQ] Transaction completed event for different tx:", event.data.transaction_id);
+        }
+      }
     });
-    reader.on("error", (error46) => {
-      console.error("[MoneyMQ] Channel reader error:", error46);
+    stream.on("error", (error46) => {
+      console.error("[MoneyMQ] Stream error while waiting for transaction:completed:", error46);
     });
-    reader.connect();
+    stream.connect();
   });
 }
 function getLineItemSubtotal(item) {
@@ -49716,10 +49703,10 @@ function CheckoutModal({
         if (currentSelection?.type === "browser_extension" && publicKey) {
           const apiUrl = normalizeRpcUrl2(client.config.endpoint);
           try {
-            const configResponse = await fetch(`${apiUrl}/config`);
+            const configResponse = await fetch(`${apiUrl}/payment/v1/config?attrs=studio`);
             const config2 = await configResponse.json();
             const rpcUrl = normalizeRpcUrl2(
-              config2.x402?.validator?.rpcUrl || "http://localhost:8899"
+              config2.studio?.rpcUrl || "http://localhost:8899"
             );
             const response = await fetch(rpcUrl, {
               method: "POST",
@@ -49774,9 +49761,9 @@ function CheckoutModal({
         const apiUrl2 = normalizeRpcUrl2(client.config.endpoint);
         let rpcUrl = "http://localhost:8899";
         try {
-          const configResponse = await fetch(`${apiUrl2}/config`);
+          const configResponse = await fetch(`${apiUrl2}/payment/v1/config?attrs=studio`);
           const config2 = await configResponse.json();
-          rpcUrl = normalizeRpcUrl2(config2.x402?.validator?.rpcUrl || rpcUrl);
+          rpcUrl = normalizeRpcUrl2(config2.studio?.rpcUrl || rpcUrl);
         } catch {
           console.log("[MoneyMQ] Using default RPC URL");
         }
@@ -49796,17 +49783,9 @@ function CheckoutModal({
         if (!transactionId2) {
           throw new Error("No transaction ID received from settlement event");
         }
-        console.log("[MoneyMQ] Waiting for transaction:completed on channel:", transactionId2);
-        const completedEvent2 = await waitForChannelEvent(
-          apiUrl2,
-          transactionId2,
-          "transaction:completed",
-          3e4
-        );
-        const receiptToken2 = completedEvent2.data?.receipt;
-        if (!receiptToken2) {
-          throw new Error("No receipt token in transaction:completed event");
-        }
+        console.log("[MoneyMQ] Waiting for transaction:completed CloudEvent for tx:", transactionId2);
+        const completedEvent2 = await waitForTransactionCompleted(apiUrl2, transactionId2, 3e4);
+        const receiptToken2 = completedEvent2.data.receipt;
         console.log("[MoneyMQ] Receipt received, creating CheckoutReceipt");
         const receipt2 = new CheckoutReceipt(receiptToken2);
         setIsSending(false);
@@ -49832,17 +49811,9 @@ function CheckoutModal({
       if (!transactionId) {
         throw new Error("No transaction ID received from settlement event");
       }
-      console.log("[MoneyMQ] Waiting for transaction:completed on channel:", transactionId);
-      const completedEvent = await waitForChannelEvent(
-        apiUrl,
-        transactionId,
-        "transaction:completed",
-        3e4
-      );
-      const receiptToken = completedEvent.data?.receipt;
-      if (!receiptToken) {
-        throw new Error("No receipt token in transaction:completed event");
-      }
+      console.log("[MoneyMQ] Waiting for transaction:completed CloudEvent for tx:", transactionId);
+      const completedEvent = await waitForTransactionCompleted(apiUrl, transactionId, 3e4);
+      const receiptToken = completedEvent.data.receipt;
       console.log("[MoneyMQ] Receipt received, creating CheckoutReceipt");
       const receipt = new CheckoutReceipt(receiptToken);
       setIsSending(false);
@@ -49867,9 +49838,10 @@ function CheckoutModal({
   ]);
   const canPay = (connected && publicKey || selectedPaymentMethod?.type === "sandbox_account") && recipient && !isSending;
   const dotLottieRef = useRef3(null);
+  const processingLottieRef = useRef3(null);
   useEffect4(() => {
     if (!dotLottieRef.current) return;
-    if (canPay) {
+    if (canPay && !isSending) {
       dotLottieRef.current.setFrame(0);
       dotLottieRef.current.play();
       const interval = setInterval(() => {
@@ -49882,7 +49854,15 @@ function CheckoutModal({
     } else {
       dotLottieRef.current.stop();
     }
-  }, [canPay]);
+  }, [canPay, isSending]);
+  useEffect4(() => {
+    if (!processingLottieRef.current) return;
+    if (isSending) {
+      processingLottieRef.current.setSpeed(2);
+      processingLottieRef.current.setLoop(true);
+      processingLottieRef.current.play();
+    }
+  }, [isSending]);
   if (typeof document === "undefined") return null;
   if (!shouldRender) return null;
   const WalletIcon = () => /* @__PURE__ */ jsxs3(
@@ -50744,11 +50724,11 @@ function CheckoutModal({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx5(
+                      /* @__PURE__ */ jsxs3(
                         "button",
                         {
                           onClick: handlePay,
-                          disabled: !canPay,
+                          disabled: !canPay || isSending,
                           style: {
                             width: "100%",
                             padding: "0.5rem 1rem",
@@ -50756,63 +50736,97 @@ function CheckoutModal({
                             border: "none",
                             fontSize: "1.0625rem",
                             fontWeight: 600,
-                            cursor: canPay ? "pointer" : "not-allowed",
-                            backgroundColor: canPay ? "#000" : "#48484a",
-                            color: canPay ? "#fff" : "#8e8e93",
+                            cursor: canPay && !isSending ? "pointer" : "not-allowed",
+                            backgroundColor: canPay || isSending ? "#000" : "#48484a",
+                            color: canPay || isSending ? "#fff" : "#8e8e93",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
                             gap: "0.25rem",
-                            transition: "opacity 150ms"
+                            transition: "background-color 150ms, color 150ms",
+                            position: "relative",
+                            overflow: "hidden"
                           },
-                          children: isSending ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                          children: [
                             /* @__PURE__ */ jsx5(
                               "div",
                               {
                                 style: {
-                                  width: "1.25rem",
-                                  height: "1.25rem",
-                                  border: "2px solid currentColor",
-                                  borderTopColor: "transparent",
-                                  borderRadius: "50%",
-                                  animation: "spin 1s linear infinite"
-                                }
+                                  position: "absolute",
+                                  inset: 0,
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  opacity: isSending ? 1 : 0,
+                                  transform: isSending ? "scale(1)" : "scale(0.8)",
+                                  transition: "opacity 200ms ease-out, transform 200ms ease-out",
+                                  pointerEvents: "none"
+                                },
+                                children: /* @__PURE__ */ jsx5(
+                                  l9,
+                                  {
+                                    dotLottieRefCallback: (dotLottie) => {
+                                      processingLottieRef.current = dotLottie;
+                                    },
+                                    data: JSON.stringify(logo_animation_default),
+                                    loop: false,
+                                    autoplay: false,
+                                    style: {
+                                      width: 48,
+                                      height: 48
+                                    }
+                                  }
+                                )
                               }
                             ),
-                            /* @__PURE__ */ jsx5("span", { children: "Processing..." })
-                          ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-                            /* @__PURE__ */ jsx5(
-                              l9,
+                            /* @__PURE__ */ jsxs3(
+                              "div",
                               {
-                                dotLottieRefCallback: (dotLottie) => {
-                                  dotLottieRef.current = dotLottie;
-                                },
-                                data: JSON.stringify(logo_animation_default),
-                                loop: false,
-                                autoplay: false,
                                 style: {
-                                  width: 48,
-                                  height: 48,
-                                  marginTop: "-8px",
-                                  marginBottom: "-8px",
-                                  marginLeft: "-8px",
-                                  marginRight: "4px",
-                                  opacity: canPay ? 1 : 0.55,
-                                  transition: "opacity 150ms"
-                                }
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  gap: "0.25rem",
+                                  opacity: isSending ? 0 : 1,
+                                  transform: isSending ? "scale(0.95)" : "scale(1)",
+                                  transition: "opacity 200ms ease-out, transform 200ms ease-out"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx5(
+                                    l9,
+                                    {
+                                      dotLottieRefCallback: (dotLottie) => {
+                                        dotLottieRef.current = dotLottie;
+                                      },
+                                      data: JSON.stringify(logo_animation_default),
+                                      loop: false,
+                                      autoplay: false,
+                                      style: {
+                                        width: 48,
+                                        height: 48,
+                                        marginTop: "-8px",
+                                        marginBottom: "-8px",
+                                        marginLeft: "-8px",
+                                        marginRight: "4px",
+                                        opacity: canPay ? 1 : 0.55,
+                                        transition: "opacity 150ms"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs3("span", { children: [
+                                    "Pay",
+                                    " ",
+                                    amount.toLocaleString(void 0, {
+                                      minimumFractionDigits: 2,
+                                      maximumFractionDigits: 2
+                                    }),
+                                    " ",
+                                    currency
+                                  ] })
+                                ]
                               }
-                            ),
-                            /* @__PURE__ */ jsxs3("span", { children: [
-                              "Pay",
-                              " ",
-                              amount.toLocaleString(void 0, {
-                                minimumFractionDigits: 2,
-                                maximumFractionDigits: 2
-                              }),
-                              " ",
-                              currency
-                            ] })
-                          ] })
+                            )
+                          ]
                         }
                       )
                     ]
@@ -50898,16 +50912,17 @@ var CheckoutButton = forwardRef(
         setError(null);
         try {
           if (!basket || basket.length === 0) {
-            throw new Error("Basket is empty");
+            setIsLoading(true);
+            return;
           }
           const apiUrl = client.config.endpoint;
-          const configResponse = await fetch(`${apiUrl}/config`);
+          const configResponse = await fetch(`${apiUrl}/payment/v1/config`);
           if (!configResponse.ok) {
             throw new Error(`Failed to fetch config: ${configResponse.status}`);
           }
           const config2 = await configResponse.json();
-          if (config2.x402?.payoutAccount?.address) {
-            setRecipient(config2.x402.payoutAccount.address);
+          if (config2.x402?.solana?.payout?.recipientAddress) {
+            setRecipient(config2.x402.solana.payout.recipientAddress);
           }
         } catch (err2) {
           console.error("[CheckoutButton] Error fetching payment details:", err2);