# Overview

Comprehensive, production-ready examples for common MoonPay Wallets integration patterns. Each recipe includes complete code, styling examples, and best practices.

## Start here

<CardGroup cols={2}>
  <Card title="DeFi Trading App" icon="chart-line" href="/recipes/wallets/defi-trading-app">
    Sign in, explicitly provision identity-backed wallets, and review and submit a trade from your app.
  </Card>

  <Card title="Low-Latency Trading" icon="bolt" href="/recipes/wallets/low-latency-trading">
    Prepare wallets when the trading screen opens so orders sign in a single request.
  </Card>
</CardGroup>

## Authentication

<CardGroup cols={2}>
  <Card title="Complete Authentication Flow" icon="right-to-bracket" href="/recipes/wallets/complete-authentication-flow">
    Full-featured email OTP authentication with error handling and loading states
  </Card>

  <Card title="Protected Routes" icon="lock" href="/recipes/wallets/protected-routes-with-authentication">
    Protect routes and require authentication before access
  </Card>
</CardGroup>

## Dashboard & User Interface

<CardGroup cols={2}>
  <Card title="Dashboard with Wallet Operations" icon="gauge" href="/recipes/wallets/complete-dashboard-wallet-operations">
    Complete user dashboard integrating authentication, wallet display, and transactions
  </Card>

  <Card title="Wallet Status Indicator" icon="wifi" href="/recipes/wallets/wallet-connection-status-indicator">
    Display wallet connection status with visual indicators
  </Card>
</CardGroup>

## Ethereum Transactions

<CardGroup cols={2}>
  <Card title="ERC-20 Token Transfer" icon="coins" href="/recipes/wallets/erc20-token-transfer-ethereum">
    Send ERC-20 tokens using the embedded wallet
  </Card>

  <Card title="NFT Minting" icon="image" href="/recipes/wallets/nft-minting-etheruem">
    Mint NFTs by calling smart contract functions
  </Card>

  <Card title="Multi-Step Transaction Flow" icon="list-check" href="/recipes/wallets/multi-step-transaction-flow">
    Handle complex multi-step flows like approve + swap
  </Card>
</CardGroup>

## Solana Development

<CardGroup cols={1}>
  <Card title="Solana Program Interaction" icon="bolt" href="/recipes/wallets/solana-program-interaction">
    Interact with Solana programs using the embedded wallet
  </Card>
</CardGroup>

## Styling & Design

<CardGroup cols={1}>
  <Card title="Complete Styling Examples" icon="palette" href="/get-started/frontend-sdks/react/advance/configure-appearance">
    CSS examples for authentication, dashboard, and UI components
  </Card>
</CardGroup>

## What's included

Each recipe is written to be usable as a starting point, not just a reference snippet:

| Included | What you get |
| --- | --- |
| **Complete code** | Copy-and-paste implementations that show the full flow |
| **Production patterns** | Error handling, loading states, and user feedback |
| **TypeScript support** | Typed examples for React and common framework setups |
| **Responsive UI** | Layouts that work on mobile and desktop |
| **Styling guidance** | Ready-to-use CSS and customization examples |
| **Variations** | Common extensions and advanced use cases |

## Getting started

1. Choose a recipe that matches your use case
2. Copy the code into your project
3. Customize the styling and behavior
4. Add your own business logic

All recipes are built with React and TypeScript, and work with Next.js, Create React App, Vite, and other React frameworks.

## Need help?

Can't find what you're looking for? Check out our comprehensive documentation:

<CardGroup cols={3}>
  <Card title="Quick Start" icon="rocket" href="/get-started/frontend-sdks/react/quick-start">
    Get started with MoonPay Wallets
  </Card>

  <Card title="Authentication" icon="shield-check" href="/authentication/overview">
    Authentication methods
  </Card>

  <Card title="Wallet Operations" icon="wallet" href="/wallets/overview">
    Wallet features
  </Card>
</CardGroup>