A demo application that simulates a Bitcoin fee sponsorship system where users can send transactions without fees, and fee pay masters can sponsor transaction costs. Now with real Bitcoin wallet integration using Tomo Wallet Connect SDK.

• Real Bitcoin Wallet Connection: Connect actual Bitcoin wallets using Tomo Wallet Connect SDK
• Wallet Connection: Connect sender and paymaster wallets
• Fee-Free Transactions: Submit Bitcoin transactions without paying fees
• Fee Sponsorship: Paymasters can sponsor transaction fees
• Real-time Status Tracking: Monitor transaction status (pending, sponsored, completed)
• Responsive Design: Works on desktop and mobile devices

├── app/
│   ├── layout.tsx              # Root layout with TomoProvider
│   └── page.tsx                # Main application page
├── components/
│   ├── ui/                     # Shadcn/ui components
│   ├── StatusIcon.tsx          # Transaction status icon component
│   ├── WalletConnection.tsx    # Wallet connection component
│   ├── TransactionForm.tsx     # Transaction submission form
│   ├── TransactionList.tsx     # Transaction list display
│   ├── PaymasterDashboard.tsx  # Paymaster dashboard
│   └── TomoProvider.tsx        # Tomo SDK context provider
├── lib/
│   ├── types.ts                # TypeScript type definitions
│   ├── utils.ts                # Utility functions
│   └── hooks/
│       ├── useBitcoinPaymaster.ts # Main state management hook
│       └── useBitcoinWallet.ts    # Bitcoin wallet connection hook
└── public/                     # Static assets

• Main Page: Orchestrates the overall layout and data flow
• TomoProvider: Provides Tomo Wallet Connect SDK context
• WalletConnection: Reusable component for wallet connection UI with error handling
• TransactionForm: Handles transaction submission
• TransactionList: Displays transaction history
• PaymasterDashboard: Manages paymaster functionality
• StatusIcon: Displays transaction status icons

• Custom Hooks:
  • useBitcoinPaymaster: Main application state and business logic
  • useBitcoinWallet: Bitcoin wallet connection and operations
• Type Safety: Full TypeScript support with proper interfaces
• Separation of Concerns: UI components are pure and receive data via props

• Sats Wagmi SDK: Bitcoin wallet connection
• Wallet Operations: Connect, disconnect, get balance, send transactions
• Error Handling: Comprehensive error handling for wallet operations
• Demo Mode: Fallback to mock operations when SDK is not fully configured

1. Modularity: Each component has a single responsibility
2. Reusability: Components can be easily reused across the application
3. Maintainability: Code is organized and easy to understand
4. Testability: Components can be tested in isolation
5. Type Safety: Full TypeScript support prevents runtime errors
6. Real Integration: Actual Bitcoin wallet support with fallback to demo mode

1. Install dependencies:

pnpm install

2. Set up environment variables (optional for demo mode):

# Create .env.local file
# No additional configuration needed for demo mode

3. Run the development server:

pnpm dev

4. Open http://localhost:3000 in your browser.

1. Connect Bitcoin Wallet: Click "Connect Bitcoin Wallet" to connect a real Bitcoin wallet
2. Submit Transaction: Fill in the recipient address and amount, then submit
3. Connect Paymaster Wallet: Switch to the right panel and connect the paymaster wallet
4. Sponsor Transactions: Click "Sponsor" on pending transactions to pay their fees
5. Monitor Progress: Watch transactions move from pending → sponsored → completed

The application uses Sats Wagmi SDK to support various Bitcoin wallets:

• Compatible Bitcoin wallets

To enable real Bitcoin wallet functionality:

1. Configure the Sats Wagmi SDK with your preferred connectors
2. The app will automatically use real wallet connections

The app currently runs in demo mode with:

• Simulated wallet connections
• Mock transaction processing
• Demo Bitcoin addresses

• Next.js 14: React framework with App Router
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• Shadcn/ui: High-quality React components
• Lucide React: Beautiful icons
• @gobob/sats-wagmi: Bitcoin wallet connection SDK

This application demonstrates Bitcoin fee sponsorship with real wallet integration:

• Real Wallet Support: Connect actual Bitcoin wallets using Tomo SDK
• Demo Fallback: Works without configuration using mock data
• Fee Sponsorship: Simulates fee sponsorship system
• Future Enhancements: Could integrate with Lightning Network or smart contracts

To learn more about the technologies used:

• Next.js Documentation
• Sats Wagmi SDK
• Bitcoin Development

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.