build onchain apps

构建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并使用新地址。

OUTRO

这是更容易出错的步骤之一。一步一步。

如果您是新的智能合同部署，只需尝试部署现有的BuyMeACoffee合同并替换合同地址即可。之后，尝试更新BuyMeACoffee.sol ，并在前端代码中获取新的ABI。

我们正在考虑使这一步骤更轻松的方法！快乐黑客！

您需要sepolia的气体吗？ ？

了解如何在此处获取免费的测试网络资金：https：//docs.base.org/tools/network-faucets/。

社区☁️？ ☁️

查看以下位置以获取更多与船有关的内容：

• 关注@zizzamia（x，farcaster）进行项目更新
• 加入我们的OnchainKit Warpcast频道上的讨论

作者

• @zizzamia（x）
• @sneh1999（x）
• @wespickett（x）
• @mochikuan（x）
• @Renanmav（x）
• @robpolak（x）
• @kyhyco
• @CNASC（Warpcast）
• @arsood（x）
• @eragon512（x）

执照

该项目已根据MIT许可证获得许可 - 有关详细信息，请参见许可证文件。