如何从前端应用调用 Openbrush 合约答案

【问题标题】：How to call Openbrush contract from Front-end app如何从前端应用调用 Openbrush 合约
【发布时间】：2022-10-16 07:10:25
【问题描述】：

我使用 ink! 实现智能合约，substrate 的 WASM 智能合约实现语言。
那时，我决定使用openbrush库。 openbrush 就像 EVM 中的 openzeppelin。
根据官网，智能合约很容易实现。 [https://docs.openbrush.io/]
但我不知道如何从前端调用它。
我可以通过查看 Telegram 来解决它，但我会写这个，希望它可以帮助其他人。

openbrush 中定义的函数声明如下：

psp34::transfer (to: TransferInput1, id: TransferInput2, data: TransferInput3)
psp34::ownerOf (id: OwnerOfInput1): Option<AccountId>

【问题讨论】：

标签： smartcontracts substrate polkadot-js

【解决方案1】：

下面是调用上述两个合约函数的示例代码。

    const wsProvider = new WsProvider(blockchainUrl);
    const api = await ApiPromise.create({ provider: wsProvider });
    const contract = new ContractPromise(api, psp_abi, PSP_ADDRESS);
    setApi(api);
    const { gasConsumed, result, output } = await contract.query['psp34::ownerOf'](
      actingAddress,
      { value: 0, gasLimit: -1 },
      NFT_ID
    );

    const { web3FromSource } = await import("@polkadot/extension-dapp");
    const wsProvider = new WsProvider(blockchainUrl);
    const api = await ApiPromise.create({ provider: wsProvider });
    setApi(api);

    const contract = new ContractPromise(api, psp_abi, PSP_ADDRESS);
    const performingAccount = accounts[0];
    const injector = await web3FromSource(performingAccount.meta.source);
    const flip = await contract.tx['psp34::transfer'](
      { value: 0, gasLimit: gasLimit },
      "ajYMsCKsEAhEvHpeA4XqsfiA9v1CdzZPrCfS6pEfeGHW9j8",
      NFT_ID,
      Null
    );
    if (injector !== undefined) {
      const unsub = await flip.signAndSend(
        actingAddress,
        { signer: injector.signer },
        ({ events = [], status }) => {
-- snip --

【讨论】：