构建一个 Gasless 交易 DApp

Thirdweb

·

使用 Gelato Relay 为你的 dApp 启用 Gasless 交易!

这是对最初发布在 Thirdweb 上的开发者教程的更新版本。

TL;DR:

本指南将引导你使用 Gelato Relay SDK 和 Thirdweb 的 React SDK 开发一个 gasless 应用。我们将创建两个名为 CounterApp 和 GaslessNFTApp 的 React 组件。这些组件的目的是允许用户在无需支付交易 gas 费用的情况下，递增存储在智能合约中的计数器值或将 NFT 铸造到他们的地址。

对于新用户来说，进入 Web3 的世界可能会令人望而却步，主要是因为“gas”费用系统。在以太坊等网络上，每笔交易都会产生一笔费用，称为 gas 费。虽然这种 gas 费用可以保护网络免受恶意攻击，但它也使入门过程复杂化。

为了让新用户加入区块链生态系统，他们必须在中心化交易所开设账户，进行 KYC，用法币购买加密货币，将加密货币转移到他们的钱包，然后用它与去中心化应用程序交互。

这就是 Gelato Relay 的用武之地。它提供了一种使此过程更顺畅的解决方案，无需用户购买原生代币来执行交易。在本指南中，我们将 Gelato Relay SDK 与 1Balance 支付系统 结合使用，允许你赞助用户的交易，这样他们就不必担心 gas 费用。此功能在 Gelato 支持的所有网络上均可用。此演示应用程序将使用 Thirdweb 的 React SDK 进行钱包连接、从链上提取信息以及使用标准“NFTDrop”模板合约进行 NFT 合约部署。

初始化和依赖安装

第一步：设置项目并安装依赖项 从 GitHub 克隆项目：

git clone https://github.com/gelatodigital/gelato-thirdweb-relay

切换到项目目录并安装必要的依赖项：

cd gelato-thirdweb-relay
npm install

第二步：运行项目并在浏览器中尝试

npm start

如果你在浏览器中导航到 http://localhost:3000/，你应该会看到以下内容：

第三步：连接你的钱包，并连接到 Polygon 主网

使用 Thirdweb 右上角的“连接钱包”按钮连接你的钱包。

单击“递增”按钮后，你会注意到 Gelato Relay 的状态 API 弹出了一些详细信息。当你向我们的 relayer 提交请求时，我们会将其指定为任务 ID，在我们的任务队列中等待。你可以使用状态 API 检查其进度并获取有关其执行的信息。

你是否注意到你根本不必签署任何交易或支付任何 gas 费用，但你只是与区块链上的状态进行交互并更新了状态？那是一笔 gasless 交易 - 让我们看看这到底是如何运作的。

幕后花絮

想知道刚刚发生了什么吗？让我们通过探索 src/components/CounterApp.tsx 中的代码来了解一下。

在代码中，有一个名为 sendRelayRequest 的函数：

  const sendRelayRequest = async () => {
    // update state
    setInitiated(true);
    setPopup(false);
    setTaskId("");
    setTxHash("");
    setStartTime(0);
    setTaskStatus("Loading...");

    // instantiating Gelato Relay SDK
    const relay = new GelatoRelay();

    // connecting to contract through front-end provider
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(target, counterABI.abi, signer);

    // relay request parameters
    const feeToken = "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE";
    const { data } = await contract.populateTransaction.increment();

    if (!props.chainId || !data) return;

    const request: CallWithSyncFeeRequest = {
      chainId,
      target,
      data,
      feeToken,
      isRelayContext: true,
    };

    const relayResponse = await relay.callWithSyncFee(request);
    setTaskId(relayResponse.taskId);
    setStartTime(Date.now());
  };

第 10 行 const relay = new GelatoRelay(); 创建了 Gelato Relay SDK 中 GelatoRelay 类的一个新实例。Gelato Relay SDK 提供了一种与 Gelato Relay 服务交互的简单方法，该服务可以在受支持的网络（如 Polygon）上实现 gasless 交易。

我们仍然必须通过你的前端钱包连接到区块链，以便从链中提取信息，例如计数器值，并检索计数器智能合约的 ABI。

 const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();
  const contract = new ethers.Contract(target, counterABI.abi, signer);

我们需要 ABI 来生成“payload”，告诉 Gelato Relay 在目标智能合约上调用哪个函数以及使用哪些参数：

const { data } = await contract.populateTransaction.increment();
Once we have the payload with data, we can build a simple sponsored relay request:

const request: CallWithSyncFeeRequest = {
    chainId,
    target,
    data,
    feeToken,
    isRelayContext: true,
};

此代码段是一个 CallWithSyncFeeRequest，允许目标智能合约以各种代币支付和赞助 gas。你可以在此处阅读有关 callWithSyncFee 的更多信息。Thirdweb 提供了诸如 useChainId() 之类的Hook，可以自动从连接的钱包中获取 chainID，以便在第 12 行自动获取。

要将 sendRelayRequest 函数链接到递增按钮，我们向显示的按钮添加一个 onClick 参数：

<button onClick={sendRelayRequest}>

使用 1Balance 赞助交易

是否想仅使用一个 API 密钥来支付所有受支持网络上所有用户的交易费用？让我们看看如何操作：

使用 1Balance 进行赞助

1. 首先访问 https://relay.gelato.network。当你在此处连接你的钱包时，会弹出一个仪表板。

2. 点击“1Balance 登录”。这允许你使用你的钱包登录。这是一个安全步骤，仅用于验证你的身份，而无需在区块链上执行任何操作。

3. 登录后，你可以存入资金，这些资金用于补贴你通过 Gelato Relay 请求的任何交易的 gas 成本。Gelato 还会收取少量 gas 费用，你可以在 Gelato 文档中阅读有关此费用的更多信息。

4. 为了赞助以太坊、Polygon 和其他主要网络上的交易，你的 1Balance 应该有 USDC 并且位于 Polygon 网络上。一旦你存入 USDC，这个新的余额将用于你在所有 Gelato 支持的网络上的所有交易。因此，你不必在不同的网络上处理余额。

5. 如果你感到谨慎并希望在真正交易之前进行试用，请点击“测试网”。在这里，你可以在 Goerli 上存入一些“测试”以太坊 (gETH)。这将允许你支付 Goerli、Optimism Goerli 和其他网络上的测试交易费用。

现在，为了让 relay 与你想要的合约一起工作，输入你的合约地址（或使用 Polygon 上的演示计数器合约，地址为 0x730615186326cF8f03E34a2B49ed0f43A38c0603）和网络，并启用你想要使用 Gelato Relay 调用的函数。你还可以通过点击“任何合约”切换来允许该网络上的任何合约。

创建你的应用程序后，你可以获取你的 API 密钥。有了 API 密钥，你现在可以更改 sendRelayRequest 函数中的请求代码，如下面的代码段所示

首先，构建 SponsoredCallRequest 的 struct：

const request: SponsoredCallRequest = {
    chainId,
    target,
    data,
};

然后你可以修改 relay 请求本身为：

const relayResponse = await relay.sponsoredCall(request, apiKey);

请记住，API 密钥可能会从前端泄露。出于演示目的，这表明在本地托管了一个示例演示。为了在使用 API 密钥时对其保密，请创建一个后端服务器，该服务器充当前端和 API 提供商之间的代理。这样，API 密钥对前端代码保持隐藏状态，只有服务器才能访问它。

现在我们可以构建我们的应用程序了。

如何构建你的 dApp

使用 React，创建一个新组件非常容易。你可以通过复制 CounterApp.tsx 文件并进行调整来轻松制作你自己的组件。但是对于本指南，我们将深入研究 GaslessNFTApp.tsx，它位于示例 repository 中。

GaslessNFTApp.tsx 使用不同的支付方式，用户签署一条消息以确认他们希望交易通过。这种做法遵循 ERC-2771 标准；你可以在 Gelato 的文档 中阅读有关它的更多信息。

让我们首先在 components 中的 AppContainer.tsx 文件中启用此应用程序。

import CounterApp from "./apps/CounterApp";
// import GaslessNFTApp from "./apps/GaslessNFTApp";

const AppContainer = () => {
  return (
    <div>
      <CounterApp />
      {/* <GaslessNFTApp /> */}
    </div>
  );
};

export default AppContainer;

接下来，取消注释第 2 行和第 8 行以激活前端中的 GaslessNFTApp。现在，如果你仍在运行开发服务器，你可以导航到 http://localhost:3000/ 并查看新应用程序（否则，再次运行 npm start）。

Gasless NFT App 已添加到下面。 如果你点击“Click NFT”，什么也不会发生，因为你需要添加目标合约地址和一个 1Balance 赞助商 API 密钥。如果你想使用 Polygon 上的演示 NFT 智能合约，请使用地址 0x730615186326cF8f03E34a2B49ed0f43A38c0603。

否则，请阅读下文以了解如何使用 Thirdweb 部署你的 NFT 合约。

使用 Thirdweb 部署你的合约

此 NFT mint 是 gasless 的，并且 NFT 合约是使用 Thirdweb 的 dashboard 上的模板合约“NFTDrop” 部署的，该模板 here 中找到。Thirdweb 可以非常轻松地部署 NFT 合约并编辑申领条件、价格等。你可以阅读通过 Thirdweb 部署此 NFT 合约的完整指南 Deploy an ERC721A NFT Smart Contract guide。

设置中最重要的部分是部署后的申领条件：

对于此演示，NFT 是免费且无限的（尽管在实践中，只有 20 张不同的图片上传到实际的 NFT）。

部署后，获取合约地址并将其粘贴到 GaslessNFTApp.tsx 上第 20 行的 target 变量中：

const target = "PASTE_CONTRACT_ADDRESS_HERE"

Thirdweb 可以非常轻松地连接到合约并从中提取数据：

  // contract object instantiate
  const { contract, isLoading } = useContract(target, "nft-drop");
  const { data: nfts, refetch } = useNFTs(contract, { start: 0, count: 20 });

这里不需要导入 ABI，因为 Thirdweb 会为你处理 ABI 管理。此外， Thirdweb 的 React SDK 提供了诸如 useNFTs 之类的自定义Hook，它是一个查询与智能合约关联的所有 NFT 的Hook。此过程全部在一行代码中完成，从而节省了大量时间并减少了与查询相关的麻烦。

接下来，将你生成的 1Balance 赞助商 API 密钥 粘贴到第 79 行：

 const sponsorAPIkey = "PASTE_SPONSOR_API_KEY_HERE";

一旦两者都准备就绪，你可以前往前端并点击“Claim NFT”。你的 NFT 将被铸造并发送到连接的钱包，所有这些都无需 gas。

结论

你已经学习了如何创建一个提供免 gas 操作的应用程序。借助 CounterApp，用户可以毫不费力地增加一个值，而无需支付 gas 费用，而 GaslessNFTApp 允许他们免费铸造 NFT。这可以通过使用 Gelato Relay 的工具和 Gelato 1Balance 来实现。由于 Thirdweb 的 React SDK 可以在基于 React 的前端中非常快速有效地连接智能合约并从中提取数据，因此所有这些都变得更加容易和快速。

关于 Gelato

Gelato 是 web3 的去中心化后端，它使构建者能够创建增强的智能合约，这些合约在包括以太坊、Arbitrum、Polygon、Optimism、zkSync 等在内的所有主要 EVM 兼容区块链上都是自动化的、gasless 的和链下感知的。400 多个 web3 项目多年来一直依赖 Gelato 来支持 DeFi、NFT 和游戏领域的数百万笔交易的执行。

Gelato 目前提供四种服务：

• Web3 Functions: 通过运行去中心化云函数，将你的智能合约连接到链下数据和计算。

• Automate: 通过以可靠、对开发者友好且去中心化的方式自动执行交易来自动化你的智能合约

• Relay: 通过易于使用的 API 让你的用户能够访问可靠、强大且可扩展的 gasless 交易

• Gasless Wallet: 一个强大的 SDK，使开发者能够通过组合 Gelato Relay + Safe 的智能合约钱包 来提供世界一流的 UX，从而实现账户抽象

订阅我们的时事通讯并打开你的 Twitter 通知，以获取有关 Gelato 生态系统的最新更新！

如果你有兴趣成为 Gelato 团队的一员并构建互联网的未来，请浏览空缺职位并在此处申请 here。

Thirdweb

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