FlashblocksBase

一個展示Base 功能的去中心化應用程式（dapp），並對交易確認情況進行並列比較：Flashblocks 與傳統區塊。

作者

塞爾根·烏伊薩爾

部署應用程式

檢視儲存庫

前端框架／函式庫：

React

語言：

TypeScript

建置工具／開發伺服器：

Next.js

概覽

本應用程式提供Base 的實作示範，這項技術旨在提供比標準區塊快達 10 倍的交易預確認速度。它具備一個即時並列比較儀表板，讓您能夠發送測試交易，並在Base testnet直觀地追蹤 Flashblocks 與傳統區塊的確認時間差異。

此範例應用程式僅供教育及示範之用。

其他資源

若想深入了解如何在您的應用程式中實作 Flashblocks，請參閱我們在Quicknode上發布的完整指南

若想進一步了解 Flashblocks，請觀看我們的《 Base上的 Flashblocks 是什麼》影片。

特色

⚡ 並列比較：Flashblocks 與傳統交易確認的即時視覺比較
🔄 交易追蹤: 使用以下方式發送測試交易並監控確認速度 getBlock 民意調查
🎯 雙客戶端架構: 同時透過兩者進行監測 baseSepoliaPreconf 以及 baseSepolia 鏈條

技術堆疊

前端框架

Next.js：搭載 App Router 的 React 框架，可實現最佳效能
TypeScript：類型安全的開發體驗
Tailwind CSS：專為快速 UI 開發而設計的「實用功能優先」CSS 框架
shadcn/ui：現代且符合無障礙標準的 React 元件函式庫

Web3 整合

Viem：支援 Flashblocks 的 TypeScriptEthereum
Wagmi：用於Ethereum React Hooks
RainbowKit：絕佳的錢包連接體驗
Base ：Flashblocks 示範Testnet

先決條件

Node.js 18 及以上版本，以及 pnpm（或 npm/yarn）
A Quicknode 帳戶，搭配Base endpoint
來自Reown（前身為 WalletConnect）的專案編號
支援Base 的瀏覽器錢包（MetaMask、Rabby 等）
少量用於測試的Base ETH（可從Quicknode 的水龍頭領取）

設定Quicknode

建立Endpoint：登入您的Quicknode ，並endpoint Base testnet建立一個新的endpoint 。
Endpoint ：建立endpoint，請前往endpoint 複製 HTTPSendpoint 。Quicknode 預設即支援 Flashblocks，無需進行額外設定。

設定 Reown（前身為 WalletConnect）

建立專案：前往Reown Cloud，並建立一個用於錢包連線的新專案。
取得專案 ID：請從專案儀表板複製您的專案 ID，以便在應用程式設定中使用。

快速入門

1. 複製儲存庫

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/sample-dapps/flashblocks-base

2. 安裝依賴項

pnpm 安裝
# 或使用 npm
npm 安裝
# 或使用 yarn
yarn 安裝

3. 環境設定

cp .env.example .env.local

編輯 .env.local:

#Quicknode Endpoint 必填）
NEXT_PUBLIC_QUICKNODE_ENDPOINT=請在此處填入您的 Quicknode Sepolia 基礎端點

# WalletConnect 專案 ID（必填）
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=請在此處填入您的 WalletConnect 專案 ID

4. 執行開發伺服器

pnpm dev
# 或使用 npm
npm 執行 dev
# 或使用 yarn
yarn dev

造訪 http://localhost:3000 親身體驗 Flashblocks 的實際運作！

運作原理

交易確認策略

該應用程式採用 Viem 的 getBlock 使用不同客戶端設定的程式方法，以展示速度差異：

Flashblocks 客戶端: 用途 baseSepoliaPreconf 一串會自動套用該 待定 標籤
傳統客戶: 使用標準 baseSepolia 連同 最新 標籤

// 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),
})