본문으로 건너뛰기
샘플 앱으로 돌아가기

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 아이콘
리포지토리 보기
프론트엔드 프레임워크/라이브러리:
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.

이 예제 앱은 교육 및 시연 목적으로만 제공됩니다.


추가 자료

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

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!

작동 원리

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

자세히 알아보기

기여 및 피드백
여러분의 의견을 듣고 싶으며, 이 샘플 앱에 대한 모든 기여를 환영합니다!
문제를 신고하거나 피드백을 공유하려면, 다음에서 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