build onchain apps Download - build onchain apps Source Source Download

build onchain apps

โค้ดแหล่งที่มา AI

v0.31.0

ดาวน์โหลด

สร้างเทมเพลตแอพ OnChain

สร้างเทมเพลตแอพ OnChain (⛵)

เร่งความคิดสร้างสรรค์ onchain ของคุณด้วยเทมเพลตแอพสร้าง OnChain

สร้างเทมเพลตแอพ OnChain (AKA Boat ⛵) จะช่วยให้คุณประหยัดการตั้งค่าแอพเริ่มต้นสัปดาห์และความยุ่งยากในการรวมส่วนประกอบ onchain เข้ากับโครงสร้างพื้นฐาน Web2 -

เราทำสิ่งนี้โดยใช้วิธีการที่มีความคิดเห็นเพื่อปรับปรุงการตัดสินใจก่อนกำหนดคุณต้องทำเมื่อสร้างแอพ onChain

ไม่ว่าคุณจะเป็นผู้เข้าร่วมแฮ็คฮ็อตหรือผู้ประกอบการที่มีความทะเยอทะยานที่ต้องการสร้างสิ่งที่ยิ่งใหญ่ต่อไปเทมเพลตนี้ได้รับการออกแบบโดยคำนึงถึงคุณ -

ออกจากกล่อง ? -

การสนับสนุนเว็บแอปแบบก้าวหน้าโดยใช้ next.js
Ethereum L2 สนับสนุนผ่านฐาน?
การสร้างบัญชีง่ายด้วย Smart Wallet
ตัวอย่างและเอกสารสดสำหรับประสบการณ์การตัดและการชำระเงินกับ Wagmi และ Viem
แนวทางปฏิบัติที่ดีที่สุดในการจัดแต่งทรงผมด้วย Tailwind CSS?
การบำรุงรักษาง่ายด้วยผ้าสำลีการจัดรูปแบบและการทดสอบ✅
ข้อมูลเชิงลึกเกี่ยวกับการวัดประสิทธิภาพของเว็บ Vitals ด้วยน้ำหอม js?
การปรับใช้สัญญาอัจฉริยะกับโรงหล่อ☁
รองรับโหนด TestNet ท้องถิ่นสำหรับการทดสอบสัญญาอัจฉริยะโดยใช้ Anvil -

เริ่มต้น

ขั้นตอนที่ 1: ตัวแปรสภาพแวดล้อมการตั้งค่า

รับ URL พื้นฐาน RPC จากแพลตฟอร์ม Coinbase Developer และกำหนดให้กับไฟล์ .env.local

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

ขั้นตอนที่ 2: ติดตั้งและเรียกใช้แอพ OnChain ของคุณ

 # Install
yarn

# Run
yarn dev

พัฒนา

ในการจัดรูปแบบและผ้าสำลีแพ็คเกจในเครื่องใช้ขั้นตอนที่รวดเร็วเหล่านี้

 # Format fix
yarn format

# Lint fix
yarn lint

อัปเดต ABI

หลังจากที่คุณสร้างโครงการโดยใช้เรือเหล่านี้เป็นโฟลเดอร์และไฟล์ที่คุณสนใจเมื่ออัปเดตสัญญาอัจฉริยะ: การใช้สัญญา Smart BuyMeacoffee เป็นตัวอย่างด้านล่าง

 < 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

การนำเข้า ABI ที่อัปเดตไปยังรหัสส่วนหน้า

หลังจากอัปเดตรหัสสัญญาอัจฉริยะของคุณให้เรียกใช้ forge build ในโฟลเดอร์ contracts สิ่งนี้จะสร้าง JSON ในไดเรกทอรี contracts/out

เอาต์พุต JSON มีข้อมูลเพิ่มเติม เราต้องการคุณสมบัติ abi จากวัตถุ JSON นั้นเท่านั้น มาใช้ jq เพื่อแยกคุณสมบัติ abi เพียงอย่างเดียว

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

ใช้ผลลัพธ์ของ jq และอัปเดต web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

ทำด้วยขั้นตอนแรก!

การปรับใช้สัญญาอัจฉริยะของคุณและอัปเดตรหัสส่วนหน้า

ตรวจสอบให้แน่ใจว่าคุณมีตัวแปรสภาพแวดล้อมทั้งหมดกำลังสองอยู่ใน contracts/.env และรับ Sepolia ETH ฐานจากก๊อกน้ำ!

เพื่อปรับใช้สัญญาอัจฉริยะของคุณ

 # from the "contract" folder

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

ในผลลัพธ์ที่ยาวนานค้นหาค่าสำหรับ Contract Address

คัดลอกค่านั้นและอัปเดต web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts พร้อมที่อยู่ใหม่

อยู่เหนือกว่า

นี่คือหนึ่งในขั้นตอนที่เกิดข้อผิดพลาดมากขึ้น ทำทีละขั้นตอน

หากคุณเป็นการปรับใช้สัญญาอัจฉริยะใหม่เพียงลองปรับใช้สัญญา BuyMeACoffee ที่มีอยู่และแทนที่ที่อยู่ตามสัญญา หลังจากลองอัปเดต BuyMeACoffee.sol และรับ ABI ใหม่ในรหัสส่วนหน้าของคุณ

เรากำลังคิดถึงวิธีที่จะทำให้ขั้นตอนนี้ง่ายขึ้นในอนาคต! แฮ็คมีความสุข!