build onchain apps下載 - build onchain apps源代碼下載

build onchain apps

Ai源碼

v0.31.0

下載

構建Onchain應用程序模板

構建OnChain應用模板（⛵️）

使用構建OnChain應用模板加速您的OnChain創造力。 ☕️

構建OnChain Apps模板（又稱船⛵️）將幫助您節省數週的初始應用程序設置以及將Onchain組件與Web2基礎架構集成的麻煩。？

我們通過採用一種自以為是的方法來簡化構建OnChain應用程序時必須做出的早期決策。

無論您是黑客馬拉鬆的參與者還是希望建立下一個大事的雄心勃勃的企業家，此模板都考慮到您。？

開箱即用？？

使用Next.js的漸進Web應用程序支持
以太坊L2通過基礎支持？
用智能錢包創建簡單的帳戶
WAGMI和VIEM的鑄造和付款經驗的實時示例和文檔
最新的造型最佳實踐使用CSS？
通過覆蓋，格式和測試輕鬆維護✅
用香水對Web Vitals性能指標的見解？
與Foundry的智能合同部署☁️
支持使用Anvil測試智能合約的本地測試網節點。？

入門

步驟1：設置環境變量

從Coinbase開發人員平台獲取基本RPC URL，並分配給.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

使用船創建一個項目後，這些是您在更新智能合約時感興趣的文件夾和文件：使用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導入前端代碼

更新智能合同代碼後，在contracts文件夾中運行forge build 。這將在contracts/out目錄中創建JSON。

輸出JSON包含其他信息。我們只需要該JSON對象的abi屬性。讓我們使用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並使用新地址。