Flashblocks Base App
A dapp demonstrating Base Flashblocks capabilities with a side-by-side comparison of transaction confirmations: Flashblocks vs Traditional blocks.
Resumen
This application provides a hands-on demonstration of Base Flashblocks, a technology designed to provide transaction preconfirmations up to 10x faster than standard blocks. It features a live, side-by-side comparison dashboard that allows you to send a test transaction and visually track the confirmation times of Flashblocks versus traditional blocks on the Base Sepolia testnet.
This example app is provided for educational and demonstration purposes only.
For an in-depth guide on implementing Flashblocks in your own applications, check out our comprehensive guide on Quicknode
To learn more about Flashblocks, check out our What are Flashblocks on Base video.
Características
- ⚡ Side-by-Side Comparison: Live visual comparison of Flashblocks vs Traditional transaction confirmations
- 🔄 Transaction Tracking: Send test transactions and monitor confirmation speeds using
getBlockpolling - 🎯 Dual Client Architecture: Simultaneous monitoring with both
baseSepoliaPreconfybaseSepoliacadenas
Technology Stack
Frontend Framework
- Next.js: React framework with App Router for optimal performance
- TypeScript: Type-safe development experience
- Tailwind CSS: Utility-first CSS framework for rapid UI development
- shadcn/ui: Modern, accessible React component library
Web3 Integration
- Viem: TypeScript-first Ethereum interface with Flashblocks support
- Wagmi: React hooks for Ethereum interactions
- RainbowKit: Beautiful wallet connection experience
- Base Sepolia: Testnet for Flashblocks demonstration
Requisitos previos
- Node.js 18+ and pnpm (or npm/yarn)
- A Quicknode account with Base Sepolia endpoint
- Project ID from Reown (formerly WalletConnect)
- Browser wallet with Base Sepolia support (MetaMask, Rabby, etc.)
- Small amount of Base Sepolia ETH for testing (available from Quicknode's faucet)
Setting Up Quicknode
-
Create Endpoint: Log in to your Quicknode account and create a new endpoint for Base Sepolia testnet.
-
Get Endpoint URL: After creating the endpoint, go to the endpoint dashboard and copy the HTTPS endpoint URL. Quicknode endpoints support Flashblocks out-of-the-box with no additional configuration needed.
Setting Up Reown (formerly WalletConnect)
-
Create Project: Head to Reown Cloud and create a new project for wallet connectivity.
-
Get Project ID: Copy your Project ID from the project dashboard for use in the application configuration.
Quick Start
1. Clone the Repository
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/flashblocks-base
2. Install Dependencies
pnpm install
# or using npm
npm install
# or using yarn
yarn install
3. Environment Configuration
cp .env.example .env.local
Editar .env.local:
# Quicknode Endpoint (Required)
NEXT_PUBLIC_QUICKNODE_ENDPOINT=your_quicknode_base_sepolia_endpoint_here
# WalletConnect Project ID (Required)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_walletconnect_project_id_here
4. Run Development Server
pnpm dev
# or using npm
npm run dev
# or using yarn
yarn dev
Visit http://localhost:3000 to experience Flashblocks in action!
Cómo funciona
Transaction Confirmation Strategy
The app uses Viem's getBlock method with different client configurations to demonstrate the speed difference:
- Flashblocks Client: Uses
baseSepoliaPreconfchain which automatically applies thependingtag - Traditional Client: Uses standard
baseSepoliachain withlatesttag
// Flashblocks client
export const flashblocksClient = createPublicClient({
chain: baseSepoliaPreconf, // Auto-uses "pending" for Flashblocks
transport: http(QUICKNODE_ENDPOINT),
})
// Traditional client
export const traditionalClient = createPublicClient({
chain: baseSepolia, // Standard blocks with "latest"
transport: http(QUICKNODE_ENDPOINT),
})
Nota: This polling implementation is optimized for demonstration purposes. Production applications should use
waitForTransactionReceiptfor better performance.
The Flashblocks Advantage
- 10x Faster Confirmations: See transactions confirm in 200-600ms vs 2-4 seconds
- Progressive Updates: Watch as 10 flashblocks build into 1 complete block
- Same Security: Cryptographic guarantees maintained with faster feedback
- Better UX: Near-instant feedback matches Web2 user expectations
Vista previa
Más información
- Quicknode Flashblocks Documentation
- Video: Flashblocks Technical Deep Dive
- Base Flashblocks Official Docs
- Documentación de Viem
- Hacer un fork del repositorio
- Crear una rama de características:git checkout -b feature/amazing-feature
- Guarda los cambios:git commit -m "Añadir una función increíble"
- Envía tu rama:git push origin feature/amazing-feature
- Abre una solicitud de incorporación de cambios.
