Feat: Stellar Kit improvement

examples/nextjs-app/next.config.ts

@@ -0,0 +1,22 @@
+import type { NextConfig } from "next";
+
+// Define the monorepo packages we want to use locally
+const monoRepoPackages = ["@rozoai/intent-pay", "@rozoai/intent-common"];
+
+// Check if we're using local packages
+const useLocalPackages = process.env.NEXT_USE_LOCAL_PACKAGES === "true";
+
+// Base Next.js configuration
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  // Always transpile the monorepo packages to ensure proper handling of React features
+  transpilePackages: monoRepoPackages,
+};
+
+export default nextConfig;

examples/nextjs-app/package.json

@@ -2,18 +2,19 @@
   "name": "@rozoai/pay-nextjs-app-example",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo -p 3002",
+    "dev": "next dev --turbo",
     "dev:local": "NEXT_USE_LOCAL_PACKAGES=true next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --max-warnings=0"
   },
   "dependencies": {
+    "@creit.tech/stellar-wallets-kit": "^1.9.5",
     "@farcaster/frame-sdk": "^0.0.26",
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
-    "@rozoai/intent-common": "0.0.23",
-    "@rozoai/intent-pay": "0.0.29",
+    "@rozoai/intent-common": "0.0.28-beta.2",
+    "@rozoai/intent-pay": "0.0.36",
     "@tanstack/react-query": "^5.51.11",
     "@wagmi/core": "^2.22.0",
     "autoprefixer": "^10.4.20",
@@ -24,8 +25,8 @@
     "react-dom": "18.2.0",
     "styled-components": "^6.1.19",
     "tailwindcss": "^3.4.17",
-    "viem": "^2.31.6",
-    "wagmi": "^2.15.6"
+    "viem": "^2.23.2",
+    "wagmi": "^2.14.11"
   },
   "devDependencies": {
     "@heroicons/react": "^2.2.0",

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

@@ -13,7 +13,7 @@ import { Address, getAddress, isAddress } from "viem";
 import { Text } from "../../shared/tailwind-catalyst/text";
 import CodeSnippet from "../code-snippet";
 import { ConfigPanel } from "../config-panel";
-import { APP_ID, Container, printEvent, usePersistedConfig } from "../shared";
+import { APP_ID, Container, usePersistedConfig } from "../shared";
 
 type Config = {
   recipientAddress: string;
@@ -185,8 +185,11 @@ export default function DemoBasic() {
     return {
       orderDate: new Date().toISOString(),
       // customDeeplinkUrl: `https://ns.rozo.ai/ns/zen?amount=${parsedConfig?.amount}`,
+      // payer: {
+      //   paymentOptions: [ExternalPaymentOptions.Stellar],
+      // },
     };
-  }, [parsedConfig]);
+  }, []);
 
   return (
     <Container className="max-w-4xl mx-auto p-6">
@@ -196,25 +199,52 @@ 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
+            <RozoPayButton.Custom
               appId={APP_ID}
               toChain={parsedConfig.chainId}
               toAddress={getAddress(parsedConfig.recipientAddress)}
               toStellarAddress={parsedConfig.recipientStellarAddress}
               toSolanaAddress={parsedConfig.recipientSolanaAddress}
               toUnits={parsedConfig.amount}
               toToken={getAddress(parsedConfig.tokenAddress)}
-              onPaymentStarted={printEvent}
+              onPaymentStarted={(e) => {
+                console.log("onPaymentStarted", e);
+              }}
               onPaymentCompleted={(e) => {
                 console.log("onPaymentCompleted", e);
-                printEvent(e);
+              }}
+              onPayoutCompleted={(e: any) => {
+                console.log("onPayoutCompleted", e);
               }}
               resetOnSuccess={true}
               metadata={metadata}
               showProcessingPayout
-            />
+            >
+              {(renderProps) => (
+                <button onClick={renderProps.show}>Show RozoPayButton</button>
+              )}
+            </RozoPayButton.Custom>
             <button
               onClick={() => setIsConfigOpen(true)}
               className="bg-primary-dark text-white px-6 py-3 rounded-lg hover:bg-primary-medium transition-all"

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

@@ -1,13 +1,12 @@
 "use client";
 
-import "@rainbow-me/rainbowkit/styles.css";
-import { RozoPayProvider } from "@rozoai/intent-pay";
+import {
+  getDefaultConfig as getDefaultConfigRozo,
+  RozoPayProvider,
+} from "@rozoai/intent-pay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { createConfig, WagmiProvider } from "wagmi";
-import { ROZOPAY_API_URL } from "../shared";
-
-import { getDefaultConfig as getDefaultConfigRozo } from "@rozoai/intent-pay";
 
 export const rozoPayConfig = createConfig(
   getDefaultConfigRozo({
@@ -21,14 +20,7 @@ export function Providers(props: { children: ReactNode }) {
   return (
     <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider payApiUrl={ROZOPAY_API_URL} debugMode={true}>
-          {/* <RainbowKitProvider
-            showRecentTransactions={false}
-            modalSize="compact"
-          > */}
-          {props.children}
-          {/* </RainbowKitProvider> */}
-        </RozoPayProvider>
+        <RozoPayProvider debugMode>{props.children}</RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

examples/nextjs-app/src/app/checkout/providers.tsx

@@ -1,27 +1,26 @@
 "use client";
 
-import { RozoPayProvider, getDefaultConfig } from "@rozoai/intent-pay";
+import {
+  getDefaultConfig as getDefaultConfigRozo,
+  RozoPayProvider,
+} from "@rozoai/intent-pay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { createConfig, WagmiProvider } from "wagmi";
-import { ROZOPAY_API_URL } from "../shared";
 
-export const wagmiConfig = createConfig(
-  getDefaultConfig({
+export const rozoPayConfig = createConfig(
+  getDefaultConfigRozo({
     appName: "Rozo Pay Checkout Demo",
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-  }),
+  })
 );
 
 const queryClient = new QueryClient();
 
 export function Providers(props: { children: ReactNode }) {
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider payApiUrl={ROZOPAY_API_URL} debugMode>
-          {props.children}
-        </RozoPayProvider>
+        <RozoPayProvider>{props.children}</RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

examples/nextjs-app/src/app/contract/providers.tsx

@@ -1,27 +1,26 @@
 "use client";
 
-import { RozoPayProvider, getDefaultConfig } from "@rozoai/intent-pay";
+import {
+  getDefaultConfig as getDefaultConfigRozo,
+  RozoPayProvider,
+} from "@rozoai/intent-pay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { createConfig, WagmiProvider } from "wagmi";
-import { ROZOPAY_API_URL } from "../shared";
 
-export const wagmiConfig = createConfig(
-  getDefaultConfig({
+export const rozoPayConfig = createConfig(
+  getDefaultConfigRozo({
     appName: "Rozo Pay Contract Demo",
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-  }),
+  })
 );
 
 const queryClient = new QueryClient();
 
 export function Providers(props: { children: ReactNode }) {
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider payApiUrl={ROZOPAY_API_URL} debugMode>
-          {props.children}
-        </RozoPayProvider>
+        <RozoPayProvider>{props.children}</RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

examples/nextjs-app/src/app/deposit/providers.tsx

@@ -1,27 +1,26 @@
 "use client";
 
-import { RozoPayProvider, getDefaultConfig } from "@rozoai/intent-pay";
+import {
+  getDefaultConfig as getDefaultConfigRozo,
+  RozoPayProvider,
+} from "@rozoai/intent-pay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { createConfig, WagmiProvider } from "wagmi";
-import { ROZOPAY_API_URL } from "../shared";
 
-export const wagmiConfig = createConfig(
-  getDefaultConfig({
+export const rozoPayConfig = createConfig(
+  getDefaultConfigRozo({
     appName: "Rozo Pay Deposit Demo",
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-  }),
+  })
 );
 
 const queryClient = new QueryClient();
 
 export function Providers(props: { children: ReactNode }) {
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider payApiUrl={ROZOPAY_API_URL} debugMode>
-          {props.children}
-        </RozoPayProvider>
+        <RozoPayProvider>{props.children}</RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

examples/nextjs-app/src/app/mini-app/providers.tsx

@@ -1,31 +1,28 @@
 "use client";
 
-import { RozoPayProvider, getDefaultConfig } from "@rozoai/intent-pay";
+import {
+  getDefaultConfig as getDefaultConfigRozo,
+  RozoPayProvider,
+} from "@rozoai/intent-pay";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { createConfig, WagmiProvider } from "wagmi";
-import { ROZOPAY_API_URL } from "../shared";
 import { farcasterConnector } from "./farcaster-connector";
 
-export const wagmiConfig = createConfig(
-  getDefaultConfig({
+export const rozoPayConfig = createConfig(
+  getDefaultConfigRozo({
     appName: "Rozo Pay Farcaster Frame Demo",
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-    // Add the Farcaster connector for the Rozo Pay button to detect
-    // the Farcaster wallet.
     additionalConnectors: [farcasterConnector()],
-  }),
+  })
 );
 
 const queryClient = new QueryClient();
 
 export function Providers(props: { children: ReactNode }) {
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={rozoPayConfig}>
       <QueryClientProvider client={queryClient}>
-        <RozoPayProvider payApiUrl={ROZOPAY_API_URL} debugMode>
-          {props.children}
-        </RozoPayProvider>
+        <RozoPayProvider>{props.children}</RozoPayProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

package.json

@@ -24,11 +24,17 @@
     "bumpp": "^10.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.31.6",
-    "wagmi": "^2.15.6"
+    "viem": "^2.23.2",
+    "wagmi": "^2.14.11"
   },
   "workspaces": [
     "packages/*",
     "examples/nextjs-app"
-  ]
+  ],
+  "overrides": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "viem": "^2.23.2",
+    "wagmi": "^2.14.11"
+  }
 }