How to call Openbrush contract from Front-end app

Question

• I implement smart contracts with ink!, substrate's WASM smart contract implementation language.
• At that time, I decided to use the openbrush library. openbrush is like openzeppelin in EVM.
• The smart contract was easy to implement according to the official website. [https://docs.openbrush.io/]
• But I couldn't figure out how to call it from the front end.
• I was able to solve it by looking at Telegram, but I will write this in the hope that it will help others.

A function defined in openbrush is declared like this:

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

Answer 1

• Below is a sample code that calls the above two contract functions.

    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 --