如何在您的應用程式中使用 Flashblocks |Quicknode

閱讀時間 9 分鐘

概覽

交易確認時間過長，可能會嚴重影響去中心化應用程式的使用者體驗。Base 提供了一項強大的解決方案，能在短短 200 毫秒內完成交易預確認——速度比Base 標準的 2 秒區塊時間快達 10 倍。這項技術將傳統區塊拆分為迷你區塊，每 200 毫秒進行一次串流，在維持加密安全性的同時，提供near交易回饋。

訂閱我們的 YouTube 頻道，觀看更多影片！

在本指南中，我們將建立一個視覺化比較 dApp，透過Quicknode 支援 Flashblocks 的端點，實際展示這種速度差異。以下是該應用程式與控制台的輸出畫面：

Flashblocks 示範

在我們的範例應用程式庫中探索更多內容

此範例應用程式亦收錄於Quicknode 應用程式庫中。歡迎前往瀏覽，尋找更多可直接使用的 Web3 專案、工具與靈感，為您的下一個開發專案注入動力！

您將學到什麼

Flashblocks 在協定層面的運作原理
支援哪些 RPC 方法來存取 Flashblocks 資料？
如何使用Viem和Wagmi將 Flashblocks 整合到您的應用程式中
在生產環境中部署 Flashblocks 時需考量的要點

您需要準備的物品

一個endpoint Base endpoint 的Quicknode
具備 React 和 TypeScript 的基礎知識
您的電腦上已安裝Node.js
瀏覽器錢包（例如 MetaMask、Rabby 或類似產品）
少量用於測試的Base ETH（請從Quicknode 的水龍頭領取testnet ）
來自Reown（前身為 WalletConnect）的專案識別碼，用於錢包連線功能

了解 Flashblocks

FlashblocksBase 一個運作速度遠快於傳統區塊生成過程的預確認層，從根本上改變了Base 上的交易處理方式。與其等待 2 秒才能獲得標準的 L2 區塊，Flashblocks 每 200 毫秒即會串流更新，提供近乎即時的用戶體驗。

若想深入了解技術細節，我們強烈建議您觀看我們的詳細影片解說。本指南將著重介紹您需要掌握的核心概念。

若想深入了解 Flashblocks 的架構與實作細節，請觀看這段影片。

訂閱我們的 YouTube 頻道，觀看更多影片！

Flashblocks 的運作原理

串流預確認

每隔 200 毫秒，系統便會建立一個包含待處理交易的新快照區塊。這些不僅僅是狀態更新——每個快照區塊都代表了該時刻區塊鏈狀態的加密安全快照。

漸進式積木建築

十個快照區塊會在 2 秒內逐步累積，最終形成一個完整的區塊。這意味著雖然最終區塊的生成仍需 2 秒，但使用者在此期間會收到 10 次確認更新，而不必等待整個過程結束。

Flashblocks - 傳統磚塊 來源：Quicknode 影片——《Flashblocks 詳解》

智慧型氣體分配

Gas 會逐步分配至這十個快閃區塊中。第一個快閃區塊的 Gas 上限較低（1.4M），隨後每個快閃區塊的 Gas 上限會逐步增加，直到最後一個快閃區塊達到完整區塊的 Gas 上限為止。此設計可讓規模較小且對時間敏感的交易迅速獲得確認。

Flashblocks - 氣體分配 來源：Quicknode 影片——《Flashblocks 詳解》

加密安全

每個快閃區塊皆包含其專屬的狀態根節點，確保每隔 200 毫秒進行一次加密驗證。此設計在提供更快速回饋的同時，仍能維持與傳統區塊相同的安全性保證。

最終結算

當累積 10 個快閃區塊後，完整的區塊將提交至Ethereum 進行最終結算，確保與傳統Base 相同的最終性保證。

此設計讓應用程式能更早偵測到狀態變化，並迅速更新使用者介面，無需等待完整的區塊週期完成。

Flashblocks 支援的 RPC 方法

Flashblocks 可與現有的標準 RPC 方法無縫整合，但有幾點差異需特別留意。雖然某些方法必須搭配 待定 標籤，若未使用該標籤，亦可呼叫其他支援 Flashblocks 的方法。

方法	說明	Flashblocks 的使用方法
`eth_getBlockByNumber`	根據區塊編號擷取區塊	隨著 `待定`, 返回最新的 Flashblock
`eth_getTransactionReceipt`	取得交易收據	Flashblocks 中已預先確認交易的回執
`eth_getBalance`	查詢帳戶餘額	隨著 `待定`, 反映了最新版 Flashblock 的平衡性調整
`eth_getTransactionCount`	取得帳戶的非重複碼	隨著 `待定`, 從 Flashblocks 擷取最新的非ce值
`eth_getTransactionByHash`	根據雜湊值檢索交易	返回具有指定雜湊值的交易

如需 RPC 方法的更詳細說明，請參閱我們的Flashblocks 文件。

關於 eth_getTransactionReceipt 以及 eth_getTransactionByHash

使用該功能時，需特別注意的一項關鍵行為是 eth_getTransactionReceipt 以及 eth_getTransactionByHash 其中一種方法是：在啟用 Flashblocksendpoint，這些 RPC 呼叫將始終返回預先確認的資料。

與其他受 Flashblocks 支援的方法不同，這些方法不接受 block 標籤參數（例如 待定 或 最新)。這表示您無法使用它從 Flashblocksendpoint擷取傳統方式確認的收據。

Quicknode Mainnet Base testnet Flashblocks。在本指南中，我們將以Base 為例進行說明，但相關流程在Base Mainnet亦完全相同。

Flashblocks 的 Viem 與 Wagmi 整合

您的 dApp 或腳本必須正確設定「待處理區塊」標籤，相關 RPC 方法才能與 Flashblocks 進行互動。Viem 提供了幾種實現方式，而由於 Wagmi 底層採用 Viem，因此為您的 dApp 整合 Flashblocks 的步驟，只需像設定區塊鏈那樣簡單即可。

針對每種方法明確地： 您可以手動設定 blockTag 至 「待處理」 在每次個別方法呼叫時（例如， client.getBalance({ ..., blockTag: 'pending' })). 這樣雖然能提供細緻的控制，但操作過程可能較為重複。
在客戶端設定： 您可以設定預設值 blockTag 當您使用 experimental_blockTag 屬性（例如， createPublicClient({ ..., experimental_blockTag: 'pending' })). 此操作會將該設定套用至所有透過該客戶端實例進行的方法呼叫。詳情請參閱這裡.
使用預先設定的區塊鏈（建議）： 最方便的做法是使用已內建預確認機制的鏈配置，例如 baseSepoliaPreconf. 這會自動將預設區塊標籤設定為 待定 無需額外設定。

在此專案中，我們使用 Viem 的 baseSepoliaPreconf 鏈。此設定會自動確保相關的 API 呼叫從最新的快閃區塊（flashblock）擷取資料，而非從最後一個已定案的區塊擷取。

自動區塊標籤的行為

當使用類似以下的設定時 baseSepoliaPreconf, 該 待定 對於幾項關鍵的 Viem 動作，系統會自動將 block 標籤設為預設值，包括：

呼叫
estimateGas
getBalance
getBlock
simulateContract
waitForTransactionReceipt
watchBlocks

如需最新資訊，請務必參閱Viem 的官方文件。

在此應用程式中，我們將執行兩個客戶端實例，一個用於傳統區塊，另一個用於快閃區塊。接著，我們將使用 getBlock 用來查看交易何時被納入區塊的方法，以及 getBalance 用於取得最新餘額的方法。

設定 Flashblocks 應用程式

讓我們來設定開發環境，並在本地執行這個比較型 dApp。

先決條件設定

步驟 1：建立Quicknode Endpoint

註冊Quicknode
endpoint Base testnet建立一個新的endpoint
從儀表板複製您的 HTTPSendpoint

步驟 2：設定 Reown（WalletConnect）

造訪Reown Cloud並建立一個新專案
為您的專案命名（例如：「Flashblocks 示範」）
請從專案儀表板複製您的專案 ID

專案安裝

步驟 1：克隆並導航

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

步驟 2：安裝依賴項

pnpm install
# or
npm install
# or
yarn install

步驟 3：設定環境變數

複製範例環境設定檔：

cp .env.example .env.local

編輯 .env.local 請輸入您的憑證：

NEXT_PUBLIC_QUICKNODE_ENDPOINT=your_quicknode_endpoint_here
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here

步驟 4：啟動開發伺服器

pnpm 開發
# or
npm run dev
# or
yarn dev

導航至 http://localhost:3000 以查看應用程式正在執行。

開發 Flashblocks 應用程式

Flashblocks 應用程式已準備就緒。現在，讓我們來探討讓並排比較功能得以運作的核心實作細節。

步驟 1：設定 Viem 客戶端

此比較邏輯的核心在於使用兩個不同的 Viem publicClient 實例。您可以在 /lib/clients.ts 檔案。此設定的關鍵在於我們針對各客戶端所使用的 Viem 鏈配置之間的差異： baseSepoliaPreconf 以及 baseSepolia.

baseSepoliaPreconf （適用於 Flashblocks）：這是 Viem 專為 Flashblocks 設計的特殊配置。此區塊鏈配置具備預確認機制，因此 Viem 會自動將 RPC 請求的預設區塊標籤設定為 待定.
baseSepolia （針對傳統區塊）：這是Base testnet的標準配置。它使用預設的區塊標籤 最新.

// lib/clients.ts
import { createPublicClient, http } from 'viem'
import { baseSepolia, baseSepoliaPreconf } from 'viem/chains'

const QUICKNODE_ENDPOINT = process.env.NEXT_PUBLIC_QUICKNODE_ENDPOINT!

// Flashblocks client automatically uses "pending" for supported actions
export const flashblocksClient = createPublicClient({
	chain: baseSepoliaPreconf,
	transport: http(QUICKNODE_ENDPOINT),
})

// Traditional client uses "latest" by default
export const traditionalClient = createPublicClient({
	chain: baseSepolia,
	transport: http(QUICKNODE_ENDPOINT),
})

步驟 2：擷取餘額

我們將從兩位客戶那裡取得初始餘額，並在應用程式中顯示出來。這項操作是在 use-balance-tracker.ts hook.

// hooks/use-balance-tracker.ts
// ...
const client =
	clientType === 'flashblocks' ? flashblocksClient : traditionalClient
const newBalance = await client.getBalance({ address })
setBalance(newBalance)
// ...

步驟 3：實作交易追蹤

交易確認策略是在 use-transaction-tracking.ts hook。在本次示範中，我們將不使用 Viem 的 waitForTransactionReceipt, 我們實作了一套自訂的輪詢機制，以突顯區塊可用性的差異。

flow如下：

當使用者發送一筆交易時，其雜湊值會被記錄下來。
此應用程式會啟動兩個並行的輪詢迴圈，分別對應兩個客戶端（Flashblocks 和 Traditional）。
每個迴圈都會呼叫 getBlock 每 100 毫秒（假設的時間間隔）
此迴圈會檢查該交易哈希值是否存在於區塊的交易陣列中。
一旦找到該筆交易，系統便會記錄所花費的時間，並將其顯示為確認時間。
最後，系統會從各客戶端擷取最新的餘額並顯示出來。

此輪詢實作旨在透過將每次嘗試記錄至控制台，來有效展示該概念。對於生產環境的應用程式，您應採用更穩健的方法，例如 waitForTransactionReceipt 以確保交易的最終性。

Flashblocks 主控台日誌

以下是輪詢迴圈的部分程式碼：

// hooks/use-transaction-tracking.ts
// ...
try {
	// Get the latest block with transactions
	const block = await client.getBlock({
		includeTransactions: true,
	})

	console.log(
		`[${clientName}] Checking block ${block.number} (${block.hash}). Attempt: ${attempts}`
	)

	// Check if our transaction hash is in the block's transactions
	const txInBlock = block.transactions.find((tx: any) => tx.hash === hash)

	if (txInBlock) {
		confirmed = true
		confirmationTime = Date.now() - startTime
		// Get the full receipt for additional data
		receipt = await client.getTransactionReceipt({ hash })

		console.log(`[${clientName}] Tx ${hash} confirmed in block ${block.number}`)
		break
	}

	// Wait before next attempt
	await new Promise(resolve => setTimeout(resolve, 100))
} catch (blockError) {
	console.warn(`[${clientName}] Block fetch attempt failed:`, blockError)
	// Continue trying
	await new Promise(resolve => setTimeout(resolve, 100))
}
// ...

測試應用程式

現在讓我們來看看 Flashblocks 的實際運作情況。請依照以下步驟測試此應用程式：

連線您的錢包：請確認您的開發伺服器正在運行。點擊應用程式中的「連線錢包」按鈕，並在瀏覽器錢包中批准此連線。請確保您已連線至Base 網路。
取得測試用 ETH：若您需要Base 的 ETH，請前往Quicknode Base 水龍頭，並輸入您的錢包地址。您將收到用於交易的測試用 ETH。
發送測試交易：點擊「發送 0.0001 ETH 測試交易」，並在您的錢包中確認該交易。您可以同時觀察兩個面板，以查看確認狀態的更新。

您會發現 Flashblocks 面板（左側）的更新速度比傳統面板（右側）更快。更新應near。您也可以查看控制台日誌，以了解輪詢機制。

關於確認速度的說明

有時，您可能會發現 Flashblocks 面板未顯示已發送交易的確認時間。這是因為 Flashblocks 的處理速度極快，交易可能在應用程式的簡單輪詢迴圈開始檢查之前，就已被納入區塊之中。

這是這場示威活動中的一項細微之處 getBlock 輪詢方法。在生產環境的應用程式中，應使用更穩健的功能，例如 waitForTransactionReceipt 能夠可靠地擷取交易確認資訊。

應用程式中的 Flashblocks — 示範

實施時的考量事項

本指南中介紹的技術旨在清楚展示 Flashblocks 的速度。在建置生產環境應用程式時，請務必留意以下事項：

用途 waitForTransactionReceipt 適用於《製作守則》: 使用 getBlock 在我們的示範中，此功能僅供視覺化之用。在實際的 dApp 中，您必須使用 Viem 的 waitForTransactionReceipt 函式。它效率更高、更穩健，且針對生產環境進行了優化，內部會處理重試與輪詢。此外，請使用 確認函 若需等待特定數量的確認，請勾選此選項。
區分「預確認」與「最終確認」：Flashblocks 能在數毫秒內提供高可信度的預確認，這對使用者體驗大有幫助。然而，這與鏈上最終結算並不相同。對於關鍵交易，您可以等待交易在後續區塊中完全最終確認，以防範區塊重組等罕見情況。
優化資料擷取：我們的示範程式每 100 毫秒進行一次輪詢，以觀察 Flashblocks 的效果。您可以根據實際使用情境，在相關操作中設定輪詢間隔。此外，對於需要極低延遲更新的應用程式，您可以考慮使用 WebSocket (WSS) 連線。請注意Quicknode 目前尚未支援 WSS 連線中的 Flashblocks 功能。

結論

您已了解 Flashblocks 的運作原理、如何透過預定義鏈配置 Viem 以使用 Flashblocks，以及如何建置一個比較型 dApp 來親身體驗其優勢。透過將 Flashblocks 與Quicknode 整合，您可以顯著提升 dApp 的使用者體驗，提供使用者所期待的速度與反應靈敏度。

如何在您的應用程式中使用 Flashblocks

概覽​

您將學到什麼​

您需要準備的物品​

了解 Flashblocks​

Flashblocks 的運作原理​

串流預確認​

漸進式積木建築​

智慧型氣體分配​

加密安全​

最終結算​

Flashblocks 支援的 RPC 方法​

Flashblocks 的 Viem 與 Wagmi 整合​

自動區塊標籤的行為​

設定 Flashblocks 應用程式​

先決條件設定​

步驟 1：建立Quicknode Endpoint​

步驟 2：設定 Reown（WalletConnect）​

專案安裝​

步驟 1：克隆並導航​

步驟 2：安裝依賴項​

步驟 3：設定環境變數​

步驟 4：啟動開發伺服器​

開發 Flashblocks 應用程式​

步驟 1：設定 Viem 客戶端​

步驟 2：擷取餘額​

步驟 3：實作交易追蹤​

測試應用程式​

實施時的考量事項​

結論​

更多資源​

概覽