Issue: Transaction Not Sent When Using prepareContractCall in React SDK

[ShashwatPS]

Description:
I am currently working with the Thirdweb React SDK and attempting to test a basic contract. Despite following the documentation and setting up the prepareContractCall correctly, no transaction is sent when I click the "Send Transaction" button. I would appreciate any assistance in resolving this issue.

Solidity Contract:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.8;

contract TransferTokens {
    event Transfer(
        address indexed _from,
        address indexed _to,
        uint256 _amount,
        string _name,
        string _blockchain
    );

    function transferEther(
        address payable _to,
        string memory _name,
        string memory _blockchain
    ) external payable {
        require(_to != address(0), "Invalid recipient address");
        payable(_to).transfer(msg.value);
        emit Transfer(msg.sender, _to, msg.value, _name, _blockchain);
    }
}

Sending the Transaction:

"use client"

import { client } from "../provider/Wallet/client";
import { getContract, prepareContractCall } from "thirdweb";
import { sepolia } from "thirdweb/chains";
import { useSendTransaction } from "thirdweb/react";
import TransferTokensAbi from "../assests/web3/Abis/TransferTokensAbi.json";

const contract = getContract({
    client,
    address: "0x369c4209E4aaE8e8A5fb562E64BB009BD917AD73",
    chain: sepolia,
    abi: TransferTokensAbi as any,
});

export default function Transfer() {
    const { mutate: sendTransaction } = useSendTransaction();

    const onClick = async () => {
        console.log({"contract": contract})
        const toAddress = "0xfB43419929FA1DeDF67B51252Eb734844c3f52D0";
        const name = "SOL";
        const blockchain = "Sepolia";
        const value = BigInt("10000000000000000");
        const transaction = await prepareContractCall({
            contract,
            method: "transferEther",
            params: [toAddress, name, blockchain],
            value: value,
        });
        sendTransaction(transaction);
    };

    return (
        <div>
            <button onClick={onClick}>Transfer Ether</button>
        </div>
    );
}

Wallet Connection:

"use client"

import {client} from "../app/provider/Wallet/client";
import { ConnectButton } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";

export default function Home() {
  return (
      <div>
          <ConnectButton client={client}/>
      </div>
  );
}

[joaquim-verges]

@ShashwatPS likely there's an transaction error.

you can get the error from the mutation:

const { mutate: sendTransaction, error } = useSendTransaction();

or by adding a callback to sendTransaction

sendTransaction(
   transaction, 
   { onError: (error) => {
      console.error(error);
    }, 
});

for more info on how to handle mutation errors, refer to the tanstack query mutation docs

[joaquim-verges]

also keep in mind that you don't need to await the prepareContractCall method! its synchronous.

curious where in the docs you saw it awaited? would help me correct it

[NetzFinance]

@joaquim-verges

Found this (hover over prepareContractCall in vs code) whilst looking for a fix for invalid sender with in app wallets, so thought id answer where it was awaited

[joaquim-verges]

Thank you @NetzFinance !! Fixing now