0

How i call smart contract methods and views using my react.js app. im trying with this :

const getUserInfo = async()=>{
    const contract = await tezos.contract.at(contractAddress)
     await contract.methods.start_contributing().send()
} 

but i dont have a signer and provider here i define other variables:

const endpoint = useEndpoint()
    const contractAddress = props.contract
    const tezos = new TezosToolkit(endpoint)

Thanks, but i guess i need to provide more info. i used beacon wallet for this :

beacon       : new BeaconWallet({ name : name, preferredNetwork : network}),

const wallet = beacon

i also set a provider:

wallet.requestPermissions({ network: { type: network } }) 
const provider = wallet && await tezos.setWalletProvider(wallet) 

how to i call a method with beacon with provider. i want to call start_contributing() method in this contract :https://better-call.dev/ghostnet/KT1Edr28YEyZCq3N9d4Gq14eJFNbWHdQa5cg/interact/start_contributing

new edit ------------------------------------- i just tried to use setSignerProvider(wallet) an i get this :

Argument of type 'BeaconWallet' is not assignable to parameter of type 'Signer'.


Type 'BeaconWallet' is missing the following properties from type 'Signer': sign, publicKey, publicKeyHash, secretKey
1
  • Instead of: const getUserInfo = async()=>{ const contract = await tezos.contract.at(contractAddress) await contract.methods.start_contributing().send() } Try: const getUserInfo = async()=>{ const contract = await tezos.wallet.at(contractAddress) await contract.methods.start_contributing().send() } Jul 27, 2023 at 13:25

3 Answers 3

1

I think I've figured out why you are not being able to sign your operation with a beacon wallet.

You are using Taquito's Contract API, but the Wallet API should be used to interact with a wallet.

So, you should use:

const contract = await tezos.wallet.at(contractAddress);

Instead of:

const contract = await tezos.contract.at(contractAddress);

Here is a working example:

import { TezosToolkit } from '@taquito/taquito';
import { BeaconWallet } from "@taquito/beacon-wallet";
import { NetworkType } from "@airgap/beacon-dapp";
import { Buffer } from "buffer";
window.Buffer = Buffer;

let Tezos = new TezosToolkit('https://ghostnet.ecadinfra.com');

async function connectWallet() {
  console.log("Initializing...");
  try
  {

    const wallet = new BeaconWallet({ name: 'myWallet',
    preferredNetwork: NetworkType.GHOSTNET });

    Tezos.setWalletProvider(wallet);

    await wallet.requestPermissions({
      network: {
        type: NetworkType.GHOSTNET,
        rpcUrl: "https://ghostnet.ecadinfra.com"
      }
    })
    .then(() => { 
      console.log('Got permissions');
    })

    // Here is where you set your SIGNER.
    Tezos.setSignerProvider(wallet);

    const userAddress = await wallet.getPKH();
    const balance = await Tezos.tz.getBalance(userAddress);

    console.log('Address    : ' + userAddress);
    console.log('Balance    : ' + balance / 1000000);  

    // Calling the contract method...
    await Tezos.wallet.at('KT1G95Gcivn4advLYw68C9mufc6g5WDuDRCd')
    .then((c) => {
      const result =  c.methods.somar(2, 2).send();
      return result;
    })
    .then((op) => {
      console.log('Waiting for operation...' +  op.hash);
      const result = op.confirmation(3).then(() => op.hash);
      return result;
    })
    .then((hash) => { 
      console.log('The operation was injected : https://ghostnet.tzstats.com/'+ hash)
    });


    wallet.clearActiveAccount();
    
  } 
  catch (error) 
  {
    console.log(error);
  }
}

function App() {
  connectWallet();
  return <h1>Hello, world!</h1>
}


export default App;

Specifically, in your case:

const getUserInfo = async()=>{
    const contract = await tezos.wallet.at(contractAddress)
     await contract.methods.start_contributing().send()
}
1

If you'd like your front-end app to connect wallet to interact with smart contract, wallet api is the use case.

After you've set up your BeaconWallet and have requested permission that you can configure your wallet instance to tezosToolkit.

Then you can use wallet api like tz.wallet... instead of tz.contract... Here's an example of making contract call to the said entrypoint

let tz = await tezos.setWalletProvider(wallet) 
const contract = await tz.wallet.at('KT1Edr28YEyZCq3N9d4Gq14eJFNbWHdQa5cg')
let op = await contract.methods.start_contributing().send()
op.confirmation()
console.log(await op.status)
console.log(await op.opHash)
1
  • thanks a lot. it works for me using setWalletProvider(wallet) Jul 28, 2023 at 9:53
0

Try this:

   const myRpcProvider = 'https://ghostnet.ecadinfra.com';
   const words = "word1 word2... word12";
   const passphrase = "";

   const params =
   {
       mnemonic: words,
       password: passphrase
   }            

   const mySigner = InMemorySigner.fromMnemonic(params);

   const Tezos = new TezosToolkit(myRpcProvider);
   Tezos.setSignerProvider(mySigner);

   await tezos.contract.at(contractAddress)
  .then((c) => {
    const result =  c.methods.sum(param1, param2).send();
    return result;
  })
  .then((op) => {
    console.log('Waiting for operation...' +  op.hash);
    const result = op.confirmation(3).then(() => op.hash);
    return result;
  })
  .then((hash) => { 
    console.log('The operation was injected : https://ghostnet.tzstats.com/'+ hash)
  });

Replace "contractAddress" with the one you want to call. Replace c.methods."sum" with the name of the method you want to call (here the method name is "sum"). Check the number of parameters your contract method requires (here they are two: param1 and param2).

6
  • i edited the question, can you check it please ? Jul 27, 2023 at 9:07
  • So what you want is, once your app is connected to a beacon wallet, you want to call a smart contract method? Is that it? Jul 27, 2023 at 9:59
  • yes im already have connecting dapp with beacon wallet and i want to interact with smart contract on my frontend using this beacon wallet instance Jul 27, 2023 at 11:22
  • Ok. I'm writing an example right now using React. I will post it here in a couple of minutes. Jul 27, 2023 at 11:26
  • thanks sir, i just wanted to know how to set signer using beacon wallet than i will create funcitons which can sign transactions and use smart contract funcitons on my react app. also im wondering is there a way to call views in smart contract using beacon Jul 27, 2023 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.