Feat: Move and Extract API to Common, Improve Error Handlers

examples/nextjs-app/package.json

@@ -13,8 +13,8 @@
     "@farcaster/frame-sdk": "^0.0.26",
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
-    "@rozoai/intent-common": "0.0.28-beta.2",
-    "@rozoai/intent-pay": "0.0.36",
+    "@rozoai/intent-common": "0.0.29",
+    "@rozoai/intent-pay": "0.0.37",
     "@tanstack/react-query": "^5.51.11",
     "@wagmi/core": "^2.22.0",
     "autoprefixer": "^10.4.20",

examples/nextjs-app/src/app/basic/page.tsx

@@ -199,25 +199,6 @@ export default function DemoBasic() {
       </Text>
 
       <div className="flex flex-col items-center gap-8">
-        <button
-          onClick={() => {
-            if (hasValidConfig) {
-              resetPayment({
-                toChain: parsedConfig.chainId,
-                toAddress: getAddress(parsedConfig.recipientAddress),
-                toStellarAddress: parsedConfig.recipientStellarAddress,
-                toSolanaAddress: parsedConfig.recipientSolanaAddress,
-                toUnits: parsedConfig.amount,
-                toToken: getAddress(parsedConfig.tokenAddress),
-              });
-            } else {
-              setIsConfigOpen(true);
-            }
-          }}
-        >
-          Configure Payment
-        </button>
-
         {Boolean(hasValidConfig) && parsedConfig ? (
           <>
             <RozoPayButton.Custom
@@ -242,7 +223,12 @@ export default function DemoBasic() {
               showProcessingPayout
             >
               {(renderProps) => (
-                <button onClick={renderProps.show}>Show RozoPayButton</button>
+                <button
+                  onClick={renderProps.show}
+                  className="bg-primary-dark text-white px-6 py-3 rounded-lg hover:bg-primary-medium transition-all"
+                >
+                  Pay
+                </button>
               )}
             </RozoPayButton.Custom>
             <button

examples/nextjs-app/src/app/shared.tsx

@@ -2,7 +2,7 @@ import { RozoPayEvent, getChainExplorerByChainId } from "@rozoai/intent-common";
 import { useEffect, useState } from "react";
 import { isAddress } from "viem";
 
-export const APP_ID = "rozoDemoMP"; // Your public app ID. Use pay-demo for prototyping only.
+export const APP_ID = "rozoBridgeStellar"; // Your public app ID. Use pay-demo for prototyping only.
 
 export const ROZOPAY_API_URL =
   process.env.NEXT_PUBLIC_ROZOPAY_API_URL || "https://intentapi.rozo.ai";

package.json

@@ -12,9 +12,10 @@
     "dev:example": "bun --filter @rozoai/pay-nextjs-app-example dev",
     "install:local": "bun install",
     "release": "bun build && bun --filter @rozoai/intent-common publish && bun --filter @rozoai/intent-pay release",
-    "clean": "bunx rimraf '**/node_modules'",
-    "clean:full": "bun clean && bunx rimraf bun-lock.yaml",
-    "clean:deps": "bunx rimraf '**/node_modules' '**/dist' '**/build' '**/.next'"
+    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
+    "clean:full": "bun clean && rm -f bun.lock",
+    "clean:deps": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -type d -prune -exec rm -rf '{}' + && find . -name 'build' -type d -prune -exec rm -rf '{}' + && find . -name '.next' -type d -prune -exec rm -rf '{}' +",
+    "clean:all": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -type d -prune -exec rm -rf '{}' + && find . -name 'build' -type d -prune -exec rm -rf '{}' + && find . -name '.next' -type d -prune -exec rm -rf '{}' + && rm -f bun.lock"
   },
   "keywords": [],
   "author": "",

packages/connectkit/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rozoai/intent-pay",
   "private": false,
-  "version": "0.0.36",
+  "version": "0.0.37",
   "author": "RozoAI",
   "homepage": "https://github.com/RozoAI/intent-pay",
   "license": "BSD-2-Clause",
@@ -51,7 +51,7 @@
     "@albedo-link/intent": "^0.13.0",
     "@reown/appkit": "^1.7.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@rozoai/intent-common": "0.0.28-beta.2",
+    "@rozoai/intent-common": "0.0.29",
     "@solana/spl-token": "^0.4.13",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
@@ -109,11 +109,5 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^6.0.5",
     "typescript-plugin-styled-components": "^3.0.0"
-  },
-  "overrides": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
   }
 }

packages/connectkit/src/components/Common/PaymentBreakdown/index.tsx

@@ -14,10 +14,10 @@ const PaymentBreakdown: React.FC<{
 
   return (
     <FeesContainer>
-      {feesUsd > 0 && (
+      {/* {feesUsd > 0 && (
         <FeeRow>
           <ModalBody>Subtotal</ModalBody>
-          <ModalBody>${subtotalUsd.toFixed(2)}</ModalBody>
+          <ModalBody>${(subtotalUsd - feesUsd).toFixed(2)}</ModalBody>
         </FeeRow>
       )}
       <FeeRow>
@@ -27,11 +27,11 @@ const PaymentBreakdown: React.FC<{
         ) : (
           <ModalBody>${feesUsd.toFixed(2)}</ModalBody>
         )}
-      </FeeRow>
+      </FeeRow> */}
       <FeeRow style={{ marginTop: 8 }}>
         <ModalBody style={{ fontWeight: 600 }}>Total</ModalBody>
         <ModalBody style={{ fontWeight: 600 }}>
-          ${totalUsd.toFixed(2)}
+          ${subtotalUsd.toFixed(2)}
         </ModalBody>
       </FeeRow>
     </FeesContainer>

packages/connectkit/src/components/Common/Portal/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import packageJson from "../../../../package.json";
+import { rozoPayVersion } from "../../../utils/exports";
 
 const Portal = (props: any) => {
   props = {
@@ -20,7 +20,7 @@ const Portal = (props: any) => {
     if (!ref.current) {
       const div = document.createElement("div");
       div.setAttribute("id", selector);
-      div.setAttribute("data-rozopay", `${packageJson.version}`);
+      div.setAttribute("data-rozopay", `${rozoPayVersion}`);
       document.body.appendChild(div);
       ref.current = div;
     }

packages/connectkit/src/components/Pages/Confirmation/index.tsx

@@ -16,6 +16,7 @@ import {
   getAddressContraction,
   getChainExplorerTxUrl,
   getOrderDestChainId,
+  getRozoPayment,
   polygonUSDC,
   rozoSolana,
   rozoStellar,
@@ -30,7 +31,6 @@ import defaultTheme from "../../../constants/defaultTheme";
 import { ROZO_INVOICE_URL } from "../../../constants/rozoConfig";
 import { useRozoPay } from "../../../hooks/useDaimoPay";
 import styled from "../../../styles/styled";
-import { fetchApi } from "../../../utils/api/base";
 import Button from "../../Common/Button";
 import PoweredByFooter from "../../Common/PoweredByFooter";
 
@@ -63,7 +63,7 @@ const Confirmation: React.FC = () => {
   const [payoutTxHash, setPayoutTxHash] = useState<string | undefined>(
     undefined
   );
-  
+
   // Track if completion events have been sent to prevent duplicate calls
   const paymentCompletedSent = React.useRef<string | null>(null);
   const payoutCompletedSent = React.useRef<string | null>(null);
@@ -200,13 +200,14 @@ const Confirmation: React.FC = () => {
             "[CONFIRMATION] Polling for payout transaction:",
             rozoPaymentId
           );
-          const response = await fetchApi(`payment/id/${rozoPaymentId}`);
+          const response = await getRozoPayment(rozoPaymentId);
           context.log("[CONFIRMATION] Payout polling response:", response.data);
 
           if (
             isActive &&
             response.data &&
-            response.data.payoutTransactionHash
+            response.data.payoutTransactionHash &&
+            typeof response.data.payoutTransactionHash === "string"
           ) {
             const url = getChainExplorerTxUrl(
               Number(response.data.destination.chainId),
@@ -256,12 +257,12 @@ const Confirmation: React.FC = () => {
       if (paymentCompletedSent.current === paymentKey) {
         return;
       }
-      
+
       context.log("[CONFIRMATION] Setting payment completed:", {
         rawPayInHash,
         rozoPaymentId,
       });
-      
+
       paymentCompletedSent.current = paymentKey;
       setPaymentCompleted(rawPayInHash, rozoPaymentId);
       setPaymentRozoCompleted(true);
@@ -276,12 +277,12 @@ const Confirmation: React.FC = () => {
       if (payoutCompletedSent.current === payoutKey) {
         return;
       }
-      
+
       context.log("[CONFIRMATION] Setting payout completed:", {
         payoutTxHash,
         rozoPaymentId,
       });
-      
+
       payoutCompletedSent.current = payoutKey;
       setPaymentPayoutCompleted(payoutTxHash, rozoPaymentId);
       setPayoutRozoCompleted(true);