跳转至主要内容
返回示例应用

Flashblocks Base App

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

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
React
语言：
TypeScript
构建工具/开发服务器：
Next.js
示例应用预览

概述

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.

功能


  • ⚡ 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 以及 baseSepolia 链条

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

先决条件

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.

快速入门

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

编辑 .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!

工作原理

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 待定 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),
})

注: 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

预览

Flashblocks Base App Preview

了解更多

投稿与反馈
我们非常希望听到您的反馈，并欢迎大家为这个示例应用做出任何贡献！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
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
Coinbase x402 Paywall
This crypto paywall demo shows how to monetize video content using blockchain payments via the x402 payment protocol. Built with Express.js, it requires users to pay USDC cryptocurrency to access premium videos on Base Sepolia testnet.
Coinbase x402 Paywall
AI Powered DeFi Yield Optimizer
This app teaches you how to integrate the Aerodrome Swap API with an AI model to create a personalized DeFi yield optimizer and analytics dashboard for Aerodrome.
AI Powered DeFi Yield Optimizer