在Polygon zkEVM上构建的终极指南

2023年3月27日

在本指南中，我将向你展示如何在 Polygon zkEVM 上创建一个全栈 web3 应用程序。在本指南结束时，我们将介绍如何：

• 设置我们的钱包以连接到 Polygon zkEVM

• 创建智能合约并将其部署到 Polygon zkEVM

• 构建一个 React 应用程序来连接智能合约并与之交互

让我们开始吧！

什么是 Polygon zkEVM？

如果你还不熟悉，Polygon zkEVM 是一个与 EVM 兼容的零知识 rollup。这意味着它可以作为 Ethereum 区块链的扩展解决方案；通过实现更高的每秒交易量和更便宜的 gas fees 来提高其可扩展性。

作为开发人员，Polygon zkEVM 的一个重要组成部分是它的 EVM 兼容性，这意味着我们可以使用我们所熟知和喜爱的相同工具（例如 Solidity）来构建智能合约并将它们部署到网络；这在以前对于 ZK rollup 来说是不可能的。

https://learnblockchain.cn/article/19723

现在我们已经掌握了基础知识，让我们深入构建。

设置 Polygon zkEVM

Polygon zkEVM 使用 bridge 将 ETH 从 Ethereum 转移到 Polygon zkEVM rollup。

在本指南中，我们将使用 testnet 来演示该过程，但是该过程在主网上是相同的，只是你处理的是真实资金；我将为你提供测试网和主网选项的资源。

在我们开始桥接过程之前，你需要一个钱包，其中加载了一些测试 （或真实）以太币。我不会介绍这些主题，因为我假设你可能已经设置好了。为以防万一你没有，以下是一些可以帮助你的资源：

1. 开始使用 MetaMask

2. 如何使用 faucet 获取测试网 ETH

将资金桥接到 Polygon zkEVM 网络

设置好钱包并在其中存入真实 ETH 或测试网 ETH 后，你就可以开始桥接过程了。前往下面的桥接 URL 开始 （根据你想要的，选择测试网或主网）：

• 测试网 bridge

• 主网 bridge

在 bridge 上，单击“添加到 MetaMask”按钮以将有关 zkEVM 的网络信息添加到你的钱包。在出现提示时单击“批准”和“切换网络”。

接下来，单击下面的按钮将你的钱包连接到 bridge：

选择以太坊网络作为“从”网络；以指定你正在将资金 从 以太坊桥接到 zkEVM。

输入你要桥接的 ETH 数量，例如 0.005 ETH，然后在确认步骤中单击“继续”和“Bridge”。

批准交易以启动桥接过程。

最后，单击“完成”并批准交易以完成桥接过程。

完成后，你应该在钱包中看到可用的资金：

很好！现在我们有一些资金可以在 zkEVM 上使用了。请记住，你可以随时通过 bridge 将资金发送回以太坊；这是 ZK rollup 的一项很棒的好处！

在 Polygon zkEVM 上创建智能合约

现在我们已经设置好了一些资金，我们准备开始构建了！首先，我们将创建一个智能合约。在本指南中，我们将构建一个简单的 ERC721 NFT 智能合约；但你可以创建任何你喜欢的东西。

创建 Hardhat 项目

在本指南中，我们将使用 Hardhat 来使其保持简单，但是此过程也适用于 Foundry/Forge。

首先，让我们使用 thirdweb CLI 创建一个新的 Solidity 项目。

在你的终端中运行以下命令以开始：

复制

复制

npx thirdweb create contract

此命令启动一系列交互式问题，以使用你选择的框架和标准创建你的 Solidity 项目。

在下面，我使用 Hardhat 和基本的 ERC721 NFT 智能合约作为起点：

创建 NFT 集合智能合约

如果我们在文本编辑器中打开此项目，我们可以看到我们有一个简陋的 Hardhat 项目，其中在 /contracts/MyContract.sol 文件中有一个智能合约，其中包含以下代码：

复制

复制

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721Base.sol";

contract Contract is ERC721Base {
    constructor(
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps
    ) ERC721Base(_name, _symbol, _royaltyRecipient, _royaltyBps) {}
}

这使用了 thirdweb 的 ERC721 base contract，它为我们提供了代码来实现 ERC721 NFT 标准的所有功能，以及 ERC721A 对该标准的优化。

你可以随意自定义、覆盖或添加你想要的任何功能；或者，当然，构建一个完全不同的智能合约！

将智能合约部署到 Polygon zkEVM

现在你已经创建了智能合约，你就可以将其运送到 zkEVM 了。为此，我们将使用 thirdweb deploy。

运行以下命令 （从你的智能合约的同一目录） 以开始部署流程：

复制

复制

npx thirdweb deploy

此命令完成准备我们的合约所需的所有步骤：

• 使用 Hardhat 编译智能合约

• 将智能合约 ABI 上传到 IPFS。

• 打开 thirdweb dashboard 以从你连接的钱包进行部署。

无需私钥、RPC URL 或配置！

此过程完成后，打开命令末尾打印的 URL，以转到 thirdweb 仪表板。

填充合约的构造函数参数

将你的钱包连接到仪表板，并为你的智能合约的任何 constructor parameters 提供值。如果你正在关注 NFT 集合合约，则参数如下所述：

• 名称：你的智能合约的名称

• 符号：合约中每个Token的股票代码符号，例如 ETH 或 BAYC

• 版税收款人：从版税费用中收取资金的钱包地址

• 版税 Bps：要收取的版税费用百分比，例如 500 = 5%

选择 Polygon zkEVM 网络

要指定我们要部署到 Polygon zkEVM，请单击“配置网络”：

搜索“Polygon zkEVM”，你将看到 Polygon zkEVM 测试网和 Polygon zkEVM 主网的选项：

选择网络，然后单击“添加网络”以将 zkEVM 添加为部署选项。关闭模式并返回到部署页面，然后单击“立即部署”：

最后，批准“合约部署”交易。

太棒了！你刚刚将智能合约部署到 zkEVM！🥳 随意探索仪表板，你可以在其中从 UI 查看和执行智能合约的所有功能。

在 Polygon zkEVM 上创建 Web3 应用程序

现在我们已经发布了智能合约，让我们创建一个可以连接到用户钱包的应用程序，并让他们与我们的智能合约交互。

为此，我们将再次使用 thirdweb CLI 创建一个安装了 thirdweb React SDK 的前端应用程序。

在你的终端中运行以下命令以开始：

复制

复制

npx thirdweb create app

这将询问你一系列有关要用于创建前端应用程序的框架和语言的问题。在本指南中，我们将使用 Next.js 和 JavaScript；但你可以随意使用你感到舒适的工具！

在你的文本编辑器中打开新创建的应用程序。

将应用程序连接到 Polygon zkEVM

我们需要做的第一件事是配置 ThirdwebProvider 以使用 Polygon zkEVM 网络。我们将使用 @thirdweb-dev/chains 包来管理此连接。

在你的应用程序中，运行以下命令：

复制

复制

npm install @thirdweb-dev/chains@nightly

此包有 700 多个链供我们使用和连接，包括 Polygon zkEVM 测试网和主网。

接下来，在 _app.js 文件 (或 CRA/vite 的 Index.js 文件) 中，从链包中导入 PolygonZkevmTestnet 并将其设置为 activeChain 属性：

复制

复制

import { ThirdwebProvider } from "@thirdweb-dev/react";
// 导入 Polygon zkeVM 链并将其设置为 activeChain
// PolygonZkevmTestnet = 测试网
// PolygonZkevmBeta = 主网
import { PolygonZkevmTestnet, PolygonZkevmBeta } from "@thirdweb-dev/chains";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebProvider activeChain={PolygonZkevmTestnet}>
      <Component {...pageProps} />
    </ThirdwebProvider>
  );
}

export default MyApp;

这使用免费的 RPC URL 开箱即用地管理我们与区块链的连接。

连接到智能合约

前往 index.js (或 App.js) 的主页，并通过 useContract hook 使用其合约地址连接到你部署的智能合约。

提示：你可以从 thirdweb 仪表板获取合约地址。

这是我们到目前为止的代码：

复制

复制

import { useContract } from "@thirdweb-dev/react";

// 在这里放置你的智能合约地址！
const contractAddress = "0x66CC8aB6a3bFD1e1510d4ED2115b26E2f13fdcfC";

export default function Home() {
  // 使用 useContract hook 连接到你的智能合约
  const { contract } = useContract(contractAddress);

  return <div>Hello world!</div>;
}

为了添加连接到用户钱包的功能，我们可以使用 ConnectWallet UI component，但我们将使用 Web3Button UI Component 来代替，以允许合约管理员在连接后铸造 NFT。

使用 React SDK 铸造 NFT

Web3Button 连接到用户的钱包，将它们切换到正确的网络（polygon zkeVM），然后 在单击时调用我们智能合约上的某些功能。

首先，从 @thirdweb-dev/react 包中导入按钮组件，然后提供 contractAddress 和 action 属性。action 是单击按钮时发生的操作；即我们要铸造 NFT 的地方。

复制

复制

import { useContract, Web3Button } from "@thirdweb-dev/react";

const contractAddress = "0x66CC8aB6a3bFD1e1510d4ED2115b26E2f13fdcfC";

export default function Home() {
  const { contract } = useContract(contractAddress);

  return (
    <Web3Button
      contractAddress={contractAddress}
      action={async (contract) => {
        return await contract.erc721.mint({
          name: "My zkEVM NFT",
          description: "I just minted an NFT on the Polygon zkEVM!",
          image: "your-image-url-here",
        });
      }}
    >
      Mint NFT
    </Web3Button>
  );
}

在这里，我们提供了我们想要铸造的 NFT 的元数据，并使用 mint 函数将元数据上传并固定到 IPFS，然后再将 NFT 铸造到智能合约中。

在你的 localhost 上运行你的应用程序以查看结果，使用 npm run dev 并访问 http://localhost:3000/。单击按钮并接受交易以铸造你的第一个 NFT！

在你的合约仪表板上，你现在可以看到一个 NFT 已被铸造到智能合约中，其中包含你提供的元数据：

太棒了 🔥 我们现在拥有我们自己的 NFT 集合，该集合已铸造到 polygon zkEVM 网络上。

在应用程序中显示 NFT

最后，我们也可以使用 thirdweb React SDK 从我们的智能合约中读取信息。在本例中，我们将使用 useNFT hook 读取我们刚刚铸造的 NFT 的元数据，并使用 NFT Renderer 组件在 UI 上显示它。

复制

复制

import { ThirdwebNftMedia, useContract, useNFT } from "@thirdweb-dev/react";

const contractAddress = "0x66CC8aB6a3bFD1e1510d4ED2115b26E2f13fdcfC";

export default function Home() {
  const { contract } = useContract(contractAddress);
  const { data: nft, isLoading } = useNFT(contract);

  return isLoading ? (
    <p>Loading...</p>
  ) : (
    <div>
      <ThirdwebNftMedia metadata={nft.metadata} />
      <h2>{nft.metadata.name}</h2>
      <p>{nft.metadata.description}</p>
    </div>
  );
}

使用 ternary operator，我们现在在元数据从 IPFS 加载时显示一个加载状态，并在加载后在 UI 上显示 NFT 的元数据：

总结

就这样！我们已经介绍了创建构建在 Polygon 新 zkEVM 之上的全栈应用程序时需要了解的一切；从在你的钱包中设置网络到创建一个允许用户连接他们的钱包并铸造 NFT 的应用程序。

• 原文链接： blog.jarrodwatts.com/the...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～