How to get Provider and contract values while using web3Modal

[t9fiction]

I have checked the docs but i think i m overlooking something,
So what i want is that i need to have the provider values and the contract values once the wallet is selected by the user. For example he connects Bitkeep from the modal, then once he selects it, then the values of provider and contract should be accessible in the dapp.

i am using the "const { open, close } = useWeb3Modal();", and on an onClick event, the open is called and makes the modal popup but once the wallet is selected, then i need the provider and contract values.
Following is my code

//-------------------------------Index.js-----------------------------------
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
} from "@web3modal/ethereum";
import { Web3Modal } from "@web3modal/react";
import { configureChains, createConfig, WagmiConfig } from "wagmi";
import { arbitrum, mainnet, polygon } from "wagmi/chains";

const chains = [arbitrum, mainnet, polygon];
const projectId = "...............";

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, chains }),
  publicClient,
});

const ethereumClient = new EthereumClient(wagmiConfig, chains);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
 <WagmiConfig config={wagmiConfig}>
        <App />
      </WagmiConfig>
      <Web3Modal  projectId={projectId}   ethereumClient={ethereumClient}  />
    </>
);


//--------------------------------------App------------------
import { useWeb3Modal } from "@web3modal/react";

const foo = () => {
const { open, close } = useWeb3Modal();

async function connect_wallet() {
    try {
      await open(); // Open the web3modal provider selection modal
      console.log("web3 and provider")
      // provider values here 
    } catch (error) {
      console.error("Error connecting to provider:", error);
    }
  
 }

return(
 <div>
  <button onClick={connect_wallet}>
    Connect Wallet
  </button>
 </div>
 )
}

//------------------------------------------------------------------------------------------------

[t9fiction]

No suggestions, no answers what so ever

[saintmaxi]

once the wallet is connected, you should be able to use wagmi hooks to access these values.

note that in the latest versions of web3modal, wagmi v1.x.x is used which leans on viem and the "publicClient" terminology rather than wagmi 0.x.x which uses ethers.js and "provider" terminology. you may have reference the 0.x.x versions of the wagmi docs and select an appropriate version of web3modal to be able to use the ethers "provider" terminology.