Add Loyalty Badges to Your AI-Built Apps

Add a loyalty badge feature to my app using the LoyaltyOS API.

Requirements:
1. Create a "Claim Badge" button component that:
   - Shows a gradient button with text "Claim Your Badge 🏆"
   - On click, calls the LoyaltyOS API to mint a badge
   - Shows loading state while minting
   - Shows success state with confetti animation when done

2. API Integration:
   - Endpoint: POST https://badges.grinder.wiki/api/badges/mint-smart
   - Headers: Authorization: Bearer YOUR_API_KEY, Content-Type: application/json
   - Body: { campaign_id: "YOUR_CAMPAIGN_ID", user_email: user.email, tier_level: 1 }

3. Handle responses:
   - If flow === "direct_mint": Show "Badge minted!" with the transaction hash
   - If flow === "claim_link": Show "Check your email for claim link"
   - On error: Show error message with retry button

4. Style with Tailwind CSS, make it look modern and celebratory.

Create a tiered loyalty badge system for my app using LoyaltyOS API.

Requirements:
1. Create a BadgeProgress component that shows:
   - Current badge tier (Bronze, Silver, Gold, Platinum)
   - Progress bar to next tier
   - "Upgrade Badge" button when eligible

2. Create a BadgeDisplay component that shows:
   - Badge image from the API response
   - Tier name and description
   - "Minted on Optimism" with blockchain link

3. API Endpoints to use:
   - Check status: GET https://badges.grinder.wiki/api/badges/verify?wallet=USER_WALLET
   - Mint badge: POST https://badges.grinder.wiki/api/badges/mint-smart
   - Upgrade: POST https://badges.grinder.wiki/api/badges/upgrade
   
4. Headers for authenticated endpoints:
   - Authorization: Bearer YOUR_API_KEY
   - Content-Type: application/json

5. Style with a gaming/achievement aesthetic. Use gradients for different tiers:
   - Bronze: orange gradient
   - Silver: gray gradient  
   - Gold: yellow gradient
   - Platinum: purple gradient

Create a complete LoyaltyOS integration for my React/Next.js app.

Create these files:

1. lib/grinder-badges.ts - API client:
   - mintBadge(email, tierId, campaignId) - mints a badge
   - upgradeBadge(campaignId, wallet) - upgrades to next tier
   - verifyBadge(wallet, campaignId?) - checks badge ownership
   - Use fetch with Authorization: Bearer YOUR_API_KEY header
   - Base URL: https://badges.grinder.wiki/api

2. hooks/useBadge.ts - React hook:
   - useBadge(wallet) - returns { badge, loading, error, refetch }
   - Caches badge data and auto-refreshes

3. components/BadgeCard.tsx:
   - Shows badge image, tier, campaign name
   - Upgrade button if not max tier
   - Share button to copy badge URL

4. components/ClaimBadgeButton.tsx:
   - Props: campaignId, userEmail, tierLevel
   - Handles mint flow with loading/success/error states
   - Confetti animation on success

5. components/BadgeGate.tsx:
   - Props: campaignId, requiredTier, children
   - Only renders children if user has required badge tier
   - Shows "Unlock with badge" prompt otherwise

Use TypeScript, handle errors gracefully, add loading skeletons.