build onchain apps Download - build onchain apps Quellcode Download

build onchain apps

AI-Quellcode

v0.31.0

Herunterladen

Erstellen Sie Onchain -Apps -Vorlage

Erstellen Sie Onchain -Apps -Vorlage (⛵️)

Beschleunigen Sie Ihre Onchain -Kreativität mit der Build -Onchain -Apps -Vorlage. ☕️

Bauen Sie die Anchain -Apps -Vorlage (AKA -Boot ⛵️) auf, die Ihnen bei der Erst -App -App -Setup und dem Problem der Integration von Onchain -Komponenten in die Web2 -Infrastruktur sparen können. ?

Wir tun dies, indem wir einen eindeutigen Ansatz zur Straffung früherer Entscheidungen verfolgen, die Sie beim Erstellen einer Onchain -App treffen müssen.

Egal, ob Sie ein Hackathon -Teilnehmer oder ein ehrgeiziger Unternehmer sind, der die nächste große Sache aufbauen möchte, diese Vorlage ist mit Ihnen konzipiert. ?

Aus der Schachtel ? ?

Progressive Web App Support mithilfe von Next.js
Ethereum L2 -Unterstützung durch Basis?
Einfache Kontoerstellung mit intelligenter Brieftasche
Live
Neueste Styling Best Practices mit Rückenwind -CSS?
Einfache Wartung mit Linie, Formatierung und Tests ✅
Einblicke in Web -Vitals -Leistungsmetriken mit Parfüm.js?
Smart Contract -Bereitstellung mit Foundry ☁️
Unterstützung für einen lokalen Testnet -Knoten zum Testen intelligenter Verträge mit Anvil. ?

Erste Schritte

Schritt 1: Variablen für Umgebungsumgebungen einrichten

Erhalten Sie eine Basis -RPC -URL von der Coinbase Developer -Plattform und weisen Sie der .env.local -Datei zu

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

Schritt 2: Installieren und Ausführen Ihrer Onchain -App

 # Install
yarn

# Run
yarn dev

Entwickeln

Um zu formatieren und abzuspiegeln, verwenden Sie diese schnellen Schritte lokal.

 # Format fix
yarn format

# Lint fix
yarn lint

ABI aktualisieren

Nachdem Sie ein Projekt mit dem Boot erstellt haben, sind dies die Ordner und Dateien, an denen Sie bei der Aktualisierung eines intelligenten Vertrags interessiert sind: Verwenden von BuyMeacoffee -Smart -Vertrag wie ein Beispiel unten

 < project-name >
├── contracts
│   ├── src
│   │   └── BuyMeACoffee.sol          ← smart contract code
│   └──out/BuyMeACoffee.sol
│       └── BuyMeACoffee.json         ← output from " forge build " which contains the updated ABI
│
└── web/app/buy-me-coffee
    └── _contracts
        ├── BuyMeACoffeeABI.ts             ← copy of ABI from contracts/out/BuyMeACoffee.json
        └── useBuyMeACoffeeContract.ts     ← deploy address

Importieren aktualisierter ABI in Frontend -Code

Führen Sie nach dem Aktualisieren Ihres Smart Contract Code forge build im contracts -Ordner aus. Dadurch wird ein JSON in den contracts/out -Verzeichnissen geschaffen.

Der Ausgang JSON enthält zusätzliche Informationen. Wir brauchen nur die abi -Eigenschaft von diesem JSON -Objekt. Verwenden wir jq , um nur die abi -Eigenschaft zu extrahieren

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

Nehmen Sie die Ausgabe von jq und web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

Mit dem ersten Schritt fertig!

Bereitstellung Ihres Smart -Vertrags und Aktualisierung des Frontend -Code

Stellen Sie sicher, dass Sie alle Umgebungsvariablen in contracts/.env verteilt haben, und holen Sie sich eine Basis -Sepolien -Eth von einem Wasserhahn!

Um Ihren intelligenten Vertrag bereitzustellen,

 # from the "contract" folder

source .env && forge script script/LocalContract.s.sol:LocalContractScript  --broadcast --rpc-url https://sepolia.base.org

Ermitteln Sie in der langen Ausgabe den Wert für Contract Address .

Kopieren Sie diesen Wert und aktualisieren Sie web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts mit der neuen Adresse.

Outro

Dies ist einer der fehlerhafteren Schritte. Nehmen Sie es Schritt für Schritt.

Wenn Sie eine neue Smart Contract -Bereitstellung sind, versuchen Sie einfach, den vorhandenen BuyMeACoffee -Vertrag bereitzustellen, und ersetzen Sie die Vertragsadresse. Versuchen Sie danach, BuyMeACoffee.sol zu aktualisieren und den neuen ABI in Ihren Frontend -Code zu erhalten.

Wir denken über Möglichkeiten nach, diesen Schritt in Zukunft zu erleichtern! Frohe Hacking!