How to call contract methods on my frontend web app?

Question

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

Answer 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()
}

Answer 2

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)

Answer 3

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