Feat - Implement USDC Worldchain

examples/nextjs-app/package.json

@@ -2,7 +2,7 @@
   "name": "@rozoai/pay-nextjs-app-example",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "NEXT_USE_LOCAL_PACKAGES=true next dev --turbo",
     "dev:local": "NEXT_USE_LOCAL_PACKAGES=true next dev",
     "build": "next build",
     "start": "next start",
@@ -13,16 +13,18 @@
     "@farcaster/frame-sdk": "^0.0.26",
     "@headlessui/react": "^2.2.0",
     "@rainbow-me/rainbowkit": "^2.2.8",
-    "@rozoai/intent-common": "0.0.30",
-    "@rozoai/intent-pay": "0.0.40",
+    "@rozoai/intent-common": "0.0.31",
+    "@rozoai/intent-pay": "0.0.42",
     "@tanstack/react-query": "^5.51.11",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@wagmi/core": "^2.22.0",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "next": "^15.3.3",
     "postcss": "^8.4.49",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^16.1.0",
     "styled-components": "^6.1.19",
     "tailwindcss": "^3.4.17",
     "viem": "^2.23.2",

examples/nextjs-app/src/app/basic/README.md

@@ -1,4 +1,89 @@
-# Rozo Pay Basic Demo
+# Basic Payment Demo
 
-This demo shows how you can accept a basic payment from any coin on any
-chain. The recipient receives USDC on Base.
+The simplest integration example showing how to accept payments from any coin on any supported blockchain network using the RozoAI Intent Pay SDK.
+
+## Overview
+
+This demo showcases a minimal implementation of `RozoPayButton` that enables cross-chain cryptocurrency payments with just a few lines of code.
+
+## Features
+
+- ✅ Accept payments from any supported chain (EVM, Solana, Stellar)
+- ✅ Real-time payment tracking with event callbacks
+- ✅ Auto-generated implementation code with syntax highlighting
+- ✅ Interactive configuration panel
+- ✅ Cross-chain bridging support
+
+## Quick Start
+
+1. **Configure Payment Settings**: Click "Configure Payment Settings" to set up your recipient address, chain, token, and amount.
+
+2. **Test the Payment**: Once configured, use the "Make Payment" button to test the payment flow.
+
+3. **Copy Implementation Code**: The generated TypeScript code is ready to copy into your project.
+
+## Key Components
+
+### RozoPayButton
+
+The main payment component that handles the entire payment flow:
+
+```typescript
+<RozoPayButton
+  appId="your-app-id"
+  toChain={chainId}
+  toAddress={recipientAddress}
+  toToken={tokenAddress}
+  toUnits={amount}
+  onPaymentStarted={(event) => console.log(event)}
+  onPaymentCompleted={(event) => console.log(event)}
+/>
+```
+
+### Event Callbacks
+
+Track payment lifecycle with built-in callbacks:
+
+- `onPaymentStarted`: Triggered when user initiates payment
+- `onPaymentCompleted`: Triggered when payment is confirmed on-chain
+- `onPayoutCompleted`: Triggered when funds arrive at destination
+
+## Developer Notes
+
+- Uses `react-syntax-highlighter` for clean code display
+- Implements `useCallback` and `useMemo` to prevent unnecessary re-renders
+- Persists configuration to localStorage for better UX
+- Automatically validates addresses and configuration
+
+## Props Reference
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `appId` | `string` | Your RozoAI Intent Pay application ID |
+| `toChain` | `number` | Destination blockchain network ID |
+| `toAddress` | `Address` | Recipient wallet address (checksummed) |
+| `toToken` | `Address` | Token contract address to receive |
+| `toUnits` | `string` | Amount in token's smallest unit |
+| `onPaymentStarted` | `(event) => void` | Payment initiation callback |
+| `onPaymentCompleted` | `(event) => void` | Payment completion callback |
+
+## Cross-Chain Payments
+
+For Stellar/Solana destinations, use bridge configuration:
+
+```typescript
+<RozoPayButton
+  appId="your-app-id"
+  toChain={8453} // Base Chain
+  toToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" // Base USDC
+  toAddress="0x..." // Any EVM address
+  toStellarAddress="GABC..." // or toSolanaAddress
+  toUnits="1000000"
+/>
+```
+
+## Learn More
+
+- [RozoAI Intent Pay Documentation](https://github.com/rozoai/intent-pay)
+- [Supported Chains & Tokens](https://docs.rozo.ai)
+- [API Reference](https://docs.rozo.ai/api)