Flashblocks Base

Een dapp die de mogelijkheden Base laat zien aan de hand van een vergelijking van transactiebevestigingen: Flashblocks versus traditionele blokken.

Author

Sergen Uysal

App implementeren

Repo bekijken

Frontend-framework/bibliotheek:

Reageren

Taal:

TypeScript

Bouwtool/ontwikkelingsserver:

Next.js

Overzicht

Deze applicatie biedt een praktische demonstratie van Base , een technologie die is ontworpen om voorlopige bevestigingen van transacties tot wel 10 keer sneller te leveren dan standaardblokken. De applicatie beschikt over een dashboard waarmee je live een vergelijking kunt maken tussen beide systemen; hiermee kun je een testtransactie versturen en de bevestigingstijden van Flashblocks en traditionele blokken op het Base testnet visueel volgen.

Deze voorbeeldapp wordt uitsluitend aangeboden voor educatieve en demonstratiedoeleinden.

Aanvullende bronnen

Voor een uitgebreide handleiding over het implementeren van Flashblocks in je eigen applicaties kun je onze uitgebreide handleiding op Quicknode raadplegen

Bekijk onze video ‘Wat zijn Flashblocks op Base?’ voor meer informatie over Flashblocks.

Kenmerken

⚡ Vergelijking naast elkaar: Live visuele vergelijking van Flashblocks versus traditionele transactiebevestigingen
🔄 Transacties bijhouden: Verzend testtransacties en houd de bevestigingssnelheden in de gaten met behulp van getBlock peiling
🎯 Architectuur met twee clients: Gelijktijdige monitoring met beide baseSepoliaPreconf en baseSepolia kettingen

Technologiestack

Frontend-framework

Next.js: React-framework met App Router voor optimale prestaties
TypeScript: Een typeveilige ontwikkelingservaring
Tailwind CSS: een ‘utility-first’ CSS-framework voor snelle ontwikkeling van gebruikersinterfaces
shadcn/ui: Moderne, toegankelijke React-componentbibliotheek

Web3-integratie

Viem: Ethereum die in de eerste plaats op TypeScript is gebaseerd, met ondersteuning voor Flashblocks
Wagmi: React-hooks voor Ethereum
RainbowKit: Een prachtige ervaring bij het koppelen van je portemonnee
Base : Testnet de demonstratie van Flashblocks

Vereisten

Node.js 18+ en pnpm (of npm/yarn)
A Quicknode Quicknode-account met endpoint Base endpoint
Project-ID van Reown (voorheen WalletConnect)
Browser-wallet met ondersteuning voor Base (MetaMask, Rabby, enz.)
Kleine hoeveelheid Base ETH om te testen (verkrijgbaar via de faucetQuicknode)

Quicknode instellen

Endpoint aanmaken: Log in op je Quicknode en maak een nieuw endpoint aan endpoint testnet Base testnet Base testnet.
Endpoint ophalen: Nadat je het endpoint hebt aangemaakt, ga je naar het endpoint en kopieer je de endpoint . Quicknode ondersteunen Flashblocks standaard, zonder dat er extra configuratie nodig is.

Reown (voorheen WalletConnect) instellen

Project aanmaken: Ga naar Reown Cloud en maak een nieuw project aan voor de koppeling met de wallet.
Project-ID ophalen: Kopieer uw project-ID uit het projectdashboard om deze in de configuratie van de applicatie te gebruiken.

Snel aan de slag

1. Kloon de repository

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

2. Afhankelijkheden installeren

pnpm installeren
# of met npm
npm install
# of met yarn
yarn install

3. Configuratie van de omgeving

cp .env.voorbeeld .env.lokaal

Bewerken .env.local:

# Quicknode Endpoint verplicht)
NEXT_PUBLIC_QUICKNODE_ENDPOINT=uw_quicknode_base_sepolia_endpoint_hier

# WalletConnect-project-ID (verplicht)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=uw_walletconnect_project-id_hier

4. Start de ontwikkelingsserver

pnpm dev
# of met npm
npm run dev
# of met yarn
yarn dev

Bezoek http://localhost:3000 om Flashblocks in actie te zien!

Hoe het werkt

Strategie voor transactiebevestiging

De app maakt gebruik van Viem's getBlock methode met verschillende clientconfiguraties om het verschil in snelheid te laten zien:

Flashblocks-client: Toepassingen baseSepoliaPreconf keten die automatisch de in behandeling tag
Traditionele klant: Maakt gebruik van standaard baseSepolia ketting met nieuwste 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),
})

Opmerking: Deze implementatie van de peiling is geoptimaliseerd voor demonstratiedoeleinden. Voor productietoepassingen dient gebruik te worden gemaakt van waitForTransactionReceipt voor betere prestaties.

Het voordeel van Flashblocks

10x snellere bevestigingen: transacties worden binnen 200-600 ms bevestigd, in plaats van 2-4 seconden
Stapsgewijze updates: zie hoe 10 flashblocks samen één compleet blok vormen
Dezelfde beveiliging: cryptografische garanties blijven gewaarborgd, met snellere feedback
Betere gebruikerservaring: Near feedback voldoet aan de verwachtingen van Web 2-gebruikers