Skip to content

BASE_MINIAPP_FIX.md

Latest commit

 

History

History
106 lines (81 loc) · 2.81 KB

BASE_MINIAPP_FIX.md

File metadata and controls

106 lines (81 loc) · 2.81 KB

Base MiniApp Payment Loop Fix

Problem

Payment requests were looping infinitely in Base MiniApp environment instead of completing successfully.

Root Causes

1. Missing loading Dependency

File: App.tsx line 155

Before:

}, [isConnected, address, pendingPayment]);

After:

}, [isConnected, address, pendingPayment, loading]);

Why: Without loading in dependencies, the useEffect could retrigger during payment processing.

2. Auto-Wallet-Connect Conflict

Issue: Base MiniApp already has wallet connected, but app was trying to auto-connect again.

Fix: Added MiniApp detection:

const isInMiniApp = typeof window !== 'undefined' && window.parent !== window;

useEffect(() => {
  if (isInMiniApp) {
    console.log('Running in Base MiniApp - skipping auto-connect');
    return;
  }
  // ... auto-connect logic
}, [isConnected, connectors, connect, isInMiniApp]);

3. Lack of Debugging Information

Fix: Added comprehensive logging:

  • 🔄 Payment start
  • ✅ Payment success
  • ❌ Payment failure
  • 🔓 Flag reset

Testing Instructions

1. Check Console Logs

Open browser DevTools and look for:

Running in Base MiniApp - skipping auto-connect
🔄 Starting payment process { pendingPayment: true, address: '0x...', ... }
✅ Payment completed successfully
🔓 Resetting payment processing flag

2. Verify Payment Flow

  1. Send message requiring payment
  2. Payment request should appear
  3. Click "Sign & Pay" (or auto-trigger)
  4. Should only see ONE payment attempt
  5. Container should be leased successfully

3. Check for Infinite Loop

If you see multiple "🔄 Starting payment process" logs without "✅ Payment completed", there's still an issue.

Deployment

# Commit changes
git add frontend/src/App.tsx
git commit -m "fix: resolve infinite payment loop in Base MiniApp

- Add loading to useEffect dependencies
- Detect Base MiniApp environment and skip auto-wallet-connect
- Add comprehensive logging for debugging payment flow"

# Deploy
git push
vercel --prod

Additional Debugging

If the issue persists, check:

  1. Network Tab: Look for duplicate /chat requests
  2. Console Errors: Any errors during payment signing
  3. Wallet Popup: Does it appear multiple times?
  4. Backend Logs: Check for duplicate payment processing

Environment-Specific Behavior

Regular Browser:

  • Auto-connects wallet on page load
  • Auto-triggers payment when wallet connects

Base MiniApp:

  • Skips auto-wallet-connect (wallet already connected)
  • Auto-triggers payment when payment required
  • Uses Base App's built-in wallet

Related Files

  • frontend/src/App.tsx - Main payment logic
  • frontend/src/Providers.tsx - Wallet configuration
  • frontend/public/.well-known/farcaster.json - MiniApp metadata