build onchain apps Download - build onchain apps Source Code Unduh

build onchain apps

Kode Sumber AI

v0.31.0

Unduh

Bangun Template Aplikasi Onchain

Bangun Template Aplikasi Onchain (⛵️)

Akselerasi kreativitas Onchain Anda dengan templat aplikasi Onchain build. ☕️

Bangun Template Aplikasi Onchain (alias Boat ⛵️) akan membantu Anda menghemat minggu pengaturan aplikasi awal dan kerumitan mengintegrasikan komponen Onchain dengan infrastruktur Web2. ?

Kami melakukan ini dengan mengambil pendekatan yang bertentangan untuk merampingkan keputusan awal yang harus Anda buat saat membangun aplikasi Onchain.

Apakah Anda seorang peserta hackathon atau pengusaha ambisius yang ingin membangun hal besar berikutnya, templat ini dirancang dengan Anda. ?

Di luar kotak ? ?

Dukungan Aplikasi Web Progresif Menggunakan Next.js
Dukungan Ethereum L2 melalui pangkalan?
Pembuatan akun mudah dengan dompet pintar
Contoh dan dokumentasi langsung untuk pengalaman pencetakan dan pembayaran dengan WAGMI dan VIEM
Praktik terbaik gaya terbaru dengan CSS Tailwind?
Pemeliharaan mudah dengan sering, pemformatan, dan tes ✅
Wawasan tentang metrik kinerja vitals web dengan parfum.js?
Penyebaran Kontrak Cerdas dengan Foundry ☁️
Dukungan untuk node testnet lokal untuk menguji kontrak pintar menggunakan anvil. ?

Memulai

Langkah 1: Variabel Lingkungan Pengaturan

Dapatkan URL RPC dasar dari Platform Pengembang Coinbase dan tetapkan ke file .env.local

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

Langkah 2: Instal dan jalankan aplikasi Onchain Anda

 # Install
yarn

# Run
yarn dev

Mengembangkan

Untuk memformat dan memasukkan paket secara lokal, gunakan langkah -langkah cepat ini.

 # Format fix
yarn format

# Lint fix
yarn lint

Memperbarui ABI

Setelah Anda membuat proyek menggunakan Boat, ini adalah folder dan file yang Anda minati saat memperbarui kontrak pintar: menggunakan kontrak pintar BuyMeAcoffee sebagai contoh di bawah ini

 < 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

Mengimpor ABI yang Diperbarui ke Kode Frontend

Setelah memperbarui kode kontrak pintar Anda, jalankan forge build di folder contracts . Ini akan membuat JSON di direktori contracts/out .

Output JSON berisi informasi tambahan. Kami hanya membutuhkan properti abi dari objek JSON itu. Mari kita gunakan jq untuk mengekstrak hanya properti abi

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

Ambil output jq dan perbarui web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

Selesai dengan langkah pertama!

Menyebarkan kontrak pintar Anda dan memperbarui kode frontend

Pastikan Anda mendapatkan semua variabel lingkungan kuadrat dalam contracts/.env dan dapatkan beberapa base sepolia et dari faucet!

Untuk menggunakan kontrak pintar Anda,

 # from the "contract" folder

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

Dalam output panjang, temukan nilai untuk Contract Address .

Salin nilai itu dan perbarui web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts dengan alamat baru.

Outro

Ini adalah salah satu langkah rawan yang lebih kesalahan. Ambil langkah demi langkah.

Jika Anda adalah penyebaran kontrak pintar baru, cukup coba sebarkan kontrak BuyMeACoffee yang ada dan ganti alamat kontrak. Setelah itu, coba perbarui BuyMeACoffee.sol dan dapatkan ABI baru di kode frontend Anda.

Kami memikirkan cara untuk membuat langkah ini lebih mudah di masa depan! Selamat peretasan!