1,290 讀數

如何使用 Next.js、TypeScript 和 Solidity 构建去中心化慈善平台

经过 Darlington Gospel 8m2024/01/16

太長; 讀書

欢迎阅读这份综合指南，我们将使用 Next.js、Solidity 和 TypeScript 构建一个 Web3 去中心化慈善平台。学完本教程后，您将清楚地了解：

featured image - 如何使用 Next.js、TypeScript 和 Solidity 构建去中心化慈善平台

您将要构建的内容，请参阅 Bitfinity 测试网络和git repo的现场演示。

介绍

欢迎阅读这份综合指南，我们将使用 Next.js、Solidity 和 TypeScript 构建一个 Web3 去中心化慈善平台。学完本教程后，您将清楚地了解：

使用 Next.js 构建动态界面
使用 Solidity 制作以太坊智能合约
使用 TypeScript 合并静态类型检查
部署智能合约并与之交互
了解基于区块链的慈善平台的基础知识

作为参与本教程的奖励，您可以轻松赢得一本关于成为受欢迎的Solidity开发人员的著名书籍。此优惠对前300 人免费，有关如何获胜的说明，请观看下面的短视频。

先决条件

您需要安装以下工具才能与我一起构建：

Node.js
纱
git 重击
元掩码
Next.js
坚固性
Redux 工具包
顺风CSS

要为本教程设置 MetaMask，请观看下面的教学视频：

完成设置后，您就有资格获得我们的书籍的免费副本。要领取您的书，请填写表格以提交您的工作证明。

观看以下教学视频即可获得长达 3 个月的免费高级课程

Dapp 导师学院，包括：

立即开始您的 Bitfinity 之旅。当您构建您的第一个慈善捐赠跟踪 dApp 时，体验快速、简单且无麻烦的开发过程。将您的智能合约部署到 Bitfinity 网络并产生积极影响。

话虽如此，让我们进入教程并设置我们的项目。

设置

我们将首先克隆准备好的前端存储库并设置环境变量。运行以下命令：

 git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain

接下来，在项目的根目录下创建一个.env文件并包含以下键：

 NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret

将<YOUR_ALCHEMY_PROJECT_ID>和<WALLET_CONNECT_PROJECT_ID>替换为您各自的项目 ID。

YOUR_ALCHEMY_PROJECT_ID ：在此处获取密钥WALLET_CONNECT_PROJECT_ID ：在此处获取密钥

最后，运行yarn dev来启动项目。

我们这个项目的前端很可靠，可以进行一些智能合约集成，但我们需要 Reduxify 我们的应用程序来启用共享数据空间。

构建 Redux 商店

上图代表了我们的 Redux 存储的结构，它会很简单，因为我们没有创建一些过于复杂的项目。

我们将设置 Redux 来管理应用程序的全局状态。按着这些次序：

在项目根目录创建一个store文件夹。
在store内，创建两个文件夹： actions和states 。
在states内，创建一个globalStates.ts文件。

在actions内，创建一个globalActions.ts文件。

在store文件夹内创建一个globalSlices.ts文件。

在store文件夹内创建一个index.ts文件。

使用 Redux 提供程序更新pages/_app.ts文件。

我们的应用程序已经使用 Redux 工具包进行了包装，在集成后端和前端时我们将重新访问 Redux。

智能合约开发

接下来，我们将为我们的平台开发智能合约：

在项目根目录创建一个contracts文件夹。
在contracts内，创建一个DappFund.sol文件并添加下面的合约代码。

DappFund合约将促进慈善机构的创建、更新和捐赠，以及更改慈善税和禁止慈善机构等管理功能。

以下是逐个功能的细分：

constructor() ：此函数在部署合约时设置初始慈善税。它在合约部署期间仅执行一次。
createCharity() ：此函数允许用户创建一个新的慈善机构。它需要几个参数，例如慈善机构的名称、描述、图像、简介和金额。它检查这些参数是否有效，然后创建一个新的CharityStruct并将其添加到charities映射中。
updateCharity() ：此函数允许慈善机构的所有者更新其详细信息。在更新慈善机构的详细信息之前，它会检查该慈善机构是否存在以及发送者是否是该慈善机构的所有者。
deleteCharity() ：此函数允许慈善机构的所有者将其标记为已删除。在将其标记为已删除之前，它会检查该慈善机构是否存在以及发送者是否是该慈善机构的所有者。
toggleBan() ：此函数允许合约所有者禁止或取消禁止慈善机构。它会在切换其被禁止状态之前检查该慈善机构是否存在。
donate() ：此函数允许用户向慈善机构捐款。它检查该慈善机构是否存在、未被禁止并且尚未达到其筹款目标。然后，它增加总捐赠计数，创建一个新的SupportStruct ，并将其添加到supportersOf映射中。它还更新了慈善机构的筹集金额和捐款数量。
changeTax() ：此函数允许合约所有者更改慈善税。它会在更新税费之前检查新的税率是否有效。
getCharity() ：此函数允许任何人获取慈善机构的详细信息。它返回与给定 ID 关联的CharityStruct 。
getCharities() ：此函数允许任何人获取所有活跃慈善机构的详细信息。它返回CharityStruct对象的数组。
getMyCharities() ：此函数允许用户获取所有活跃慈善机构的详细信息。它返回CharityStruct对象的数组。
getSupports() ：此函数允许任何人获取特定慈善机构的所有支持者的详细信息。它返回SupportStruct对象的数组。
payTo() ：此内部函数用于转移资金。它将指定数量的以太币发送到给定的地址。
currentTime() ：此内部函数返回自 Unix 纪元以来的当前时间（以秒为单位）。它用于为捐赠和慈善创作添加时间戳。

合约部署和播种

现在，让我们部署智能合约并用一些虚拟数据填充它：

在项目根目录创建一个scripts文件夹。
在scripts中，创建一个deploy.js和一个seed.js文件并添加以下代码。

部署脚本

种子脚本

运行以下命令来部署合约并为其添加数据：

 yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2

如果您的操作正确，您应该会看到类似如下的输出：

此时我们可以开始将智能合约集成到前端。

前端集成

首先，在项目根目录创建一个services文件夹，并在其中创建一个blockchain.tsx文件。该文件将包含与我们的智能合约交互的函数。

提供的代码是我们的区块链服务的 TypeScript 实现，用于与我们的智能合约交互。这项服务使用户能够在我们的慈善平台上执行操作，包括创建和更新慈善机构、捐款等。

以下是逐个功能的细分：

getEthereumContracts() ：此函数获取服务将与之交互的以太坊合约实例。它检查用户是否有连接的以太坊帐户并使用它与合约交互，否则，它使用随机创建的钱包。
getAdmin() ：该函数返回合约的所有者。
getCharities() 、 getMyCharities() 、 getCharity() ：这些函数分别获取所有慈善机构、当前用户创建的慈善机构以及通过其 ID 指定的特定慈善机构。
getSupporters() ：此函数通过 ID 获取特定慈善机构的支持者。
createCharity() 、 updateCharity() ：这些函数分别允许用户创建新的慈善机构或更新现有的慈善机构。
makeDonation() ：此函数允许用户向特定慈善机构捐款。
deleteCharity() ：此函数允许慈善机构的所有者删除它。
banCharity() ：此函数允许合约所有者禁止慈善机构。
structuredCharities() 、 structuredSupporters() ：这些是辅助函数，可将合约返回的数据构造为更可用的格式。