メインコンテンツへスキップ
サンプルアプリに戻る

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.

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

編集 .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 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),
})

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

詳細はこちら

投稿とフィードバック
皆様からのご意見をお待ちしております。また、このサンプルアプリへのご協力も大歓迎です！
問題の報告やフィードバックをお寄せいただくには、GitHubのイシューを qn-ガイド-例 リポジトリ。
投稿するには、以下の手順に従ってください：
  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