Skip to main content
Back to Sample Apps

Flashblocks Base App

A dapp demonstrating Base Flashblocks capabilities with a side-by-side comparison of transaction confirmations: Flashblocks vs Traditional blocks.

Deploy Icon
Deploy App
Github Icon
View Repo
Frontend Framework/Library:
React
Language:
TypeScript
Build Tool/Development Server:
Next.js
Sample app preview

Overview

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.


Additional Resources

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.

Features


  • ⚡ Side-by-Side Comparison: Live visual comparison of Flashblocks vs Traditional transaction confirmations
  • 🔄 Transaction Tracking: Send test transactions and monitor confirmation speeds using getBlock polling
  • 🎯 Dual Client Architecture: Simultaneous monitoring with both baseSepoliaPreconf and baseSepolia chains

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

Prerequisites

Setting Up QuickNode​

  1. Create Endpoint: Log in to your QuickNode account and create a new endpoint for Base Sepolia testnet.

  2. 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)​

  1. Create Project: Head to Reown Cloud and create a new project for wallet connectivity.

  2. 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

Edit .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!

How It Works

Transaction Confirmation Strategy​

The app uses Viem's getBlock method with different client configurations to demonstrate the speed difference:

  • Flashblocks Client: Uses baseSepoliaPreconf chain which automatically applies the pending tag
  • Traditional Client: Uses standard baseSepolia chain with latest tag
// 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),
})

Note: This polling implementation is optimized for demonstration purposes. Production applications should use waitForTransactionReceipt for 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

Preview

Flashblocks Base App Preview

Learn More

Contributions & Feedback
We'd love to hear your feedback and welcome any contributions to this sample app!
To report issues or share feedback, open a GitHub issue in the qn-guide-examples repository.
To contribute, follow these steps:
  1. Fork the repository
  2. Create a feature branch:
    git checkout -b feature/amazing-feature
  3. Commit your changes:
    git commit -m "Add amazing feature"
  4. Push your branch:
    git push origin feature/amazing-feature
  5. Open a Pull Request.
Explore More Sample Apps
AML and CFT Compliant dApp
This application enables secure ETH staking with integrated compliance features. Built on Base and compatible with any Ethereum-based network, it leverages Chainlink Functions and QuickNode’s Risk Assessment API to ensure only low-risk wallets can participate in the staking pool.
AML and CFT Compliant dApp
Base Telegram Trading Bot
A user-friendly Telegram bot for trading ERC-20 tokens on Base Mainnet with MEV protection, leveraging QuickNode's Base DeFi Power Bundle.
Base Telegram Trading Bot
Base DEX Aggregator
A DEX Aggregator dApp on Base using QuickNode's Base DeFi Power Bundle, including gas estimation and swap APIs integration.
Base DEX Aggregator