0

I'm working on a Web3 application using Solidity, React Native Expo, and WalletConnectModal. I've set up a Ganache network for testing and successfully connected to it via my Expo app and MetaMask. I'm using ngrok to expose the Ganache RPC, making it accessible from my phone and MetaMask.

When I "Connect Wallet" from my Expo app and call a testTransaction() function, I can successfully send ETH between addresses on my Ganache network, so this means that this setup works well. However, I'm running into issues when trying to use ethers.js to interact with smart contracts.

Problem: When I initialize a web3Provider and call getSigner(), the signer's address is null and the provider is at block -2.

Here's the log output for the signer: { "_address": null, "_index": 0, "_isSigner": true, "provider": { "_emitted": { "block": -2 }, // ... (other fields) } }

Code: Here's a simplified version of my code:

import React, { useRef, useEffect, useState, useMemo } from "react";
import { ethers } from "ethers";
import { useWalletConnectModal } from "@walletconnect/modal-react-native";

export default function App() {
  const { open, isConnected, address, provider } = useWalletConnectModal();
  const [signerS, setSigner] = useState("");
  const [balance, setBalance] = useState();
  
  const web3Provider = useMemo(
    () => (provider ? new ethers.providers.Web3Provider(provider) : undefined),
    [provider]
  );

  async function getBalances() {
    try {
      const chainId = await web3Provider?.getNetwork().then((network) => network.chainId);
      const account = await web3Provider?.getSigner();
      console.log(account);
      // ... (rest of the code)
    } catch (error) {
      console.log(error);
    }
  }
  
  // ... (rest of the code)
}

Question: How can I resolve the issue of the signer's address being null and the provider being at block -2? I'm looking for a way to use ethers.providers normally, like in other examples I've seen online.

Here is the image to hopefully give you more context.

enter image description here

When clicking on connectWallet, and testTransaction, I am redirected to Metamask and after authorising everything works fine. But i cannot interact with the contract by pressing getMyBalance().

1 Answer 1

0

You can use the useEffect hook with isConnected as a dependency to trigger the initialization of the web3Provider and signer once the connection is established.

  useEffect(() => {
     if (isConnected) {
       const web3Provider = new ethers.providers.Web3Provider(provider);
       const signer = web3Provider.getSigner();
       setSigner(signer);
     }
   }, [isConnected, provider]);

Verify network configuration:

 const chainId = await web3Provider.getNetwork().then((network) => network.chainId);
 console.log(chainId);

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.