useContract with provider issues

[lsbyerley]

I feel as if I'm setting up the useContract and provider correctly but am still encountering an error when using a function of the contract:

Error: sending a transaction requires a signer (operation="sendTransaction", code=UNSUPPORTED_OPERATION, version=contracts/5.5.0)

The contract is deployed to rinkeby, i've setup a provider and passed it to the Provider component in app.jsx. The deposit function exists in the contract as I can see it when logging the contract to the console.

Given the code below i get the error above when trying to use the deposit function

// Home.jsx
import { useContract, useProvider } from 'wagmi';

const Home = () => {
  const provider = useProvider();
  const contract = useContract({
    addressOrName: RINKEBY_CONTRACT,
    contractInterface: contractJSON.abi,
    signerOrProvider: provider,
  });

  const onFormSubmit = async () => {
    let transaction = await contract.deposit(amount, message);
    let txn = await transaction.wait();
    console.log('LOG: deposit complete!', txn);
  };
};

// App.jsx
import { providers } from 'ethers';
import { Provider, defaultChains, defaultL2Chains } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';

const chains = [...defaultChains, ...defaultL2Chains];

const connectors = ({ chainId }) => {
  return [
    new InjectedConnector({
      chains,
    }),
  ];
};

function MyApp({ Component, pageProps }) {

  const provider = ({ chainId }) => {
    return new providers.AlchemyProvider(chainId, alchemyId);
  };

  return (
    <Provider
      connectors={connectors}
      provider={provider}
    >
      <Component {...props} />
    </Provider>
  );
}

[lsbyerley]

okay so i think the problem is the signerOrProvider prop is misleading. You have to pass the signer from the useSigner hook. The provider from useProvider does not work.

The following works:

const [{ data: signerData, error, loading }, getSigner] = useSigner();

const contract = useContract({
    addressOrName: RINKEBY_CONTRACT,
    contractInterface: contractJSON.abi,
    signerOrProvider: signerData,
  });

[tmm]

Signer and provider are both valid. Provider puts the contract in read-only mode.

[lsbyerley]

Cool.. i guess the wordage in the docs should be refined. I think many users of this library are/were under the impression passing the provider or signer would allow you to call functions of the contract. In my case, only passing the signer worked.