0

背景 我正在尝试使用来自 github 的 Hashlips NFT 铸造 Dapp，并且我已经自定义了主题和环境以指向 Binance 的 Testnet 环境。它使用测试网智能链 BNB 成功铸造了我的 NFT。

我正在尝试在 UI 中添加其他渲染以显示来自合同 ABI 的更多响应。

示例 我的合约 ABI 包含以下函数：“ totalSupply”将返回已铸造的总金额“ balanceOf”（插入地址）-将返回此用户已铸造的金额

问题 我已经按照各种教程使用 Web3 从合同 ABI 中提取这些值，并且我能够成功地将这些值发送到控制台日志，但我无法在呈现的 UI 中显示它们。

如果我使用代码contract.methods.totalSupply().call();，它会创建一个承诺并稍后返回该值，但仅在控制台日志中

如果我用${totalSupply}它渲染了 html，它会在 UI 中显示实际的函数文本

如果我在异步函数之外有我的 totalSupply 合同方法，它会给出我不能使用 await 的错误。

await contract.methods.totalSupply().call();

最终目标是：

  1. 创建一个从合约 ABI 检索响应的函数或调用，totalSupply或balanceOf
  2. 在呈现的 HTML 容器中显示此响应，例如：

<div>
<p class="sc-gKseQn gTjrPu" style="text-align: center; color: var(--accent-text);">You have minted: </p><p class="sc-fubCzh hohBlo" style="text-align: center; color: #ff1dec;">${totalSupply}</p>
</div>

const address = "xxxxxxx"
  const Web3 = require('web3')

  const web3 = new Web3('https://data-seed-prebsc-1-s1.binance.org:8545/');       
  var contract = new web3.eth.Contract(abi, address);
  const totalSupply = () => async (dispatch) => {
     await contract.methods.totalSupply().call();
  };

const rawHTML = `
<div>
<p class="sc-gKseQn gTjrPu" style="text-align: center; color: var(--accent-text);">You have minted: </p><p class="sc-fubCzh hohBlo" style="text-align: center; color: #ff1dec;">${totalSupply}</p>
</div>
`;
 <s.Container><div style={container}>
      {Parser().parse(rawHTML2)}
    </div></s.Container>

Hashlips 链接在这里 https://github.com/HashLips/hashlips_nft_minting_dapp

4

0 回答 0