[RELEASE] fix batched USDC transactions

packages/app/control/docs/components/echo-account.mdx

@@ -0,0 +1,267 @@
+---
+title: Echo Account Component
+description: Complete guide to the Echo Account component
+---
+
+# Echo Account Component
+
+The Echo Account component is a comprehensive user account management interface that provides everything you need for user authentication, balance display, and account management in your Echo applications.
+
+## Overview
+
+The Echo Account component includes:
+
+- **User authentication status** - Shows login/logout functionality
+- **Balance display** - Real-time user balance with currency formatting
+- **Top-up functionality** - Easy way for users to add funds
+- **User profile management** - Avatar, name, and account details
+- **Responsive design** - Works on desktop and mobile devices
+
+## Installation
+
+### React Version
+
+```bash
+pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-react.json
+```
+
+### Next.js Version
+
+```bash
+pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-next.json
+```
+
+## Basic Usage
+
+### React
+
+```tsx
+import { EchoAccount } from '@/components/echo-account-react';
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>My Echo App</h1>
+      <EchoAccount />
+    </div>
+  );
+}
+```
+
+### Next.js
+
+```tsx
+import { EchoAccount } from '@/components/echo-account-next';
+
+export default function MyApp() {
+  return (
+    <div>
+      <h1>My Echo App</h1>
+      <EchoAccount />
+    </div>
+  );
+}
+```
+
+## Component Structure
+
+The Echo Account component is composed of several sub-components:
+
+### EchoAccountButton
+
+The main button that triggers the account popover:
+
+```tsx
+import { EchoAccountButton } from '@/components/echo-account-button/echo-account';
+import { useEcho } from '@merit-systems/echo-react-sdk';
+
+// Usage with Echo context
+const echo = useEcho();
+return <EchoAccountButton echo={echo} />;
+```
+
+### EchoPopover
+
+The popover container that holds the account interface:
+
+```tsx
+import { EchoPopover } from '@/components/echo-account-button/echo-popover';
+```
+
+### Balance Component
+
+Displays the user's current balance:
+
+```tsx
+import { Balance } from '@/components/echo-account-button/balance';
+```
+
+### TopUpButton
+
+Handles adding funds to the user's account:
+
+```tsx
+import { TopUpButton } from '@/components/echo-account-button/top-up-button';
+```
+
+## Customization
+
+### Styling
+
+You can customize the appearance using Tailwind classes:
+
+```tsx
+<EchoAccount className="custom-account-styles" />
+```
+
+### Custom Props
+
+The component accepts various props for customization:
+
+```tsx
+interface EchoAccountProps {
+  className?: string;
+  showBalance?: boolean;
+  showTopUp?: boolean;
+  variant?: 'default' | 'compact' | 'minimal';
+}
+```
+
+### Example with Custom Props
+
+```tsx
+<EchoAccount 
+  className="my-custom-styles"
+  showBalance={true}
+  showTopUp={true}
+  variant="compact"
+/>
+```
+
+## Advanced Usage
+
+### Custom Account Button
+
+You can create a custom account button with your own styling:
+
+```tsx
+import { EchoAccountButton } from '@/components/echo-account-button/echo-account';
+import { useEcho } from '@merit-systems/echo-react-sdk';
+
+function CustomAccountButton() {
+  const echo = useEcho();
+
+  return (
+    <EchoAccountButton 
+      echo={echo}
+      className="bg-custom-primary text-white rounded-lg px-4 py-2"
+    />
+  );
+}
+```
+
+### Standalone Components
+
+You can use individual components for custom layouts:
+
+```tsx
+import { Balance } from '@/components/echo-account-button/balance';
+import { TopUpButton } from '@/components/echo-account-button/top-up-button';
+
+function CustomAccountLayout() {
+  return (
+    <div className="flex items-center gap-4">
+      <Balance />
+      <TopUpButton />
+    </div>
+  );
+}
+```
+
+## Integration with Echo SDK
+
+The Echo Account component automatically integrates with the Echo SDK:
+
+### Authentication
+
+- Automatically detects user login status
+- Shows login button when user is not authenticated
+- Displays user information when authenticated
+
+### Balance Management
+
+- Real-time balance updates
+- Currency formatting
+- Balance history (if available)
+
+### Payment Processing
+
+- Integrated top-up functionality
+- Secure payment processing
+- Transaction history
+
+## Responsive Design
+
+The Echo Account component is fully responsive:
+
+- **Desktop**: Full popover with all account details
+- **Tablet**: Optimized layout for touch interfaces
+- **Mobile**: Compact design with essential features
+
+## Accessibility
+
+The component includes comprehensive accessibility features:
+
+- **Keyboard navigation** - Full keyboard support
+- **Screen reader support** - Proper ARIA labels and descriptions
+- **Focus management** - Proper focus handling for popovers
+- **Color contrast** - Meets WCAG guidelines
+
+## Best Practices
+
+### Performance
+
+- The component uses React.memo for optimal re-rendering
+- Balance updates are debounced to prevent excessive API calls
+- Lazy loading for non-critical components
+
+### Security
+
+- All user data is handled securely through the Echo SDK
+- No sensitive information is stored in component state
+- Proper error handling for failed operations
+
+### User Experience
+
+- Clear visual feedback for all user actions
+- Loading states for async operations
+- Error states with helpful messages
+
+## Troubleshooting
+
+### Common Issues
+
+**Component not rendering:**
+- Ensure Echo provider is properly configured
+- Check that user is authenticated
+- Verify all required dependencies are installed
+
+**Balance not updating:**
+- Check Echo SDK configuration
+- Verify API endpoints are accessible
+- Check browser console for errors
+
+**Styling issues:**
+- Ensure Tailwind CSS is properly configured
+- Check that component CSS is loaded
+- Verify custom styles don't conflict
+
+### Debug Mode
+
+Enable debug mode to see detailed logging:
+
+```tsx
+<EchoAccount debug={true} />
+```
+
+This will log component state changes and API calls to the browser console.

packages/app/control/docs/components/index.mdx

@@ -0,0 +1,60 @@
+---
+title: Echo Components
+description: Pre-built UI components for Echo applications
+---
+
+# Echo Components
+
+Echo provides a comprehensive set of pre-built UI components through our [Shadcn Components Registry](https://echo-components.com/). These components are specifically designed for Echo applications and include everything you need to build beautiful, functional user interfaces.
+
+## What are Echo Components?
+
+Echo Components are pre-built React components that integrate seamlessly with the Echo ecosystem. They provide:
+
+- **Ready-to-use UI elements** - Drop-in components for common Echo app patterns
+- **Echo integration** - Built-in support for Echo authentication, billing, and user management
+- **Consistent design** - Unified design system across all Echo applications
+- **Accessibility** - WCAG compliant components out of the box
+- **Customization** - Easy theming and styling options
+
+## Available Components
+
+### Echo Account Components
+
+- **Echo Account Button** - Complete user account management with balance display, top-up functionality, and user profile
+- **Echo Account (React)** - React-specific implementation with hooks integration
+- **Echo Account (Next.js)** - Next.js optimized version with server-side rendering support
+
+### UI Components
+
+- **Echo Button** - Enhanced button component with Echo-specific variants
+- **Money Input** - Specialized input for handling monetary values with proper formatting
+- **Echo Logo** - Branded logo component with light/dark mode support
+
+## Quick Start
+
+To get started with Echo Components, you can install them using the Shadcn CLI:
+
+```bash
+# Install Echo Account component for React
+pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-react.json
+
+# Install Echo Account component for Next.js
+pnpm dlx shadcn@latest add https://echo-components.com/r/echo-account-next.json
+```
+
+## When to Use Echo Components
+
+Use Echo Components when you want to:
+
+- **Speed up development** - Skip building common UI patterns from scratch
+- **Ensure consistency** - Maintain design consistency across Echo applications
+- **Focus on business logic** - Spend time on your app's unique features instead of UI
+- **Leverage Echo integration** - Get built-in support for Echo's authentication and billing systems
+
+## Next Steps
+
+- **[Installation Guide](/docs/components/installation)** - Learn how to set up Echo Components in your project
+- **[Echo Account Component](/docs/components/echo-account)** - Complete guide to the Echo Account component
+- **[UI Components](/docs/components/ui-components)** - Overview of available UI components
+- **[Customization](/docs/components/customization)** - How to customize and theme Echo Components