> For the complete documentation index, see [llms.txt](https://docs.oogabooga.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oogabooga.io/developers/meta-api/frontend-integration-guide/send-transaction.md).

# Send Transaction

[Github](https://github.com/0xoogabooga/meta-agg-fe-tutorial) 

[Live demo](https://meta-agg-fe-tutorial.vercel.app/?tab=transactions)

<figure><img src="/files/9xc1TMQTChV8J4r3dkpc" alt=""><figcaption></figcaption></figure>

Complete end-to-end swap implementation using Meta Aggregator quotes with wallet connection, token approval, and transaction execution.

**Architecture Overview**

**📁 Main Components** (`src/components/transaction-example/`)

**🔧 Core Components**

* `transaction-example.tsx` - Root wrapper with wallet provider
* `transaction-example-content.tsx` - Main logic and state management
* `wallet-provider.tsx` - Wagmi and RainbowKit configuration
* `wagmi-config.ts` - HyperEVM chain configuration and wallet setup

**🎨 UI Components**

* `header.tsx` - Connection status and wallet connect button
* `quote-display.tsx` - Quote data and action buttons
* `approval-status.tsx` - Token approval status and progress