Accessing getUserInfo() or web3AuthInstance with the wagmi-connector plugin

Help - Plug n Play Web - Modal SDK
1
  • SDK Version:
    “@web3auth/ethereum-provider”: “^8.0.1”,
    “@web3auth/modal”: “^8.0.1”,
    “@web3auth/openlogin-adapter”: “^8.0.1”,
    “@web3auth/web3auth-wagmi-connector”: “^6.0.0”,
  • Platform: web-modal SDK wagmi

I’m currently using wagmi v2.

It worked fine with the code below when it was package v7.

import { useAccount } from ‘wagmi’
const account = useAccount()
const connector = account.connector
const web3Auth = connector.options.web3AuthInstance

await web3Auth.getUserInfo()

Is there a way to get web3AuthInstance or getUserInfo() in the v8 version?

3

hi @jh.koo

For now it is not possible in this version due to the restrictions of the wagmi interface.

We are contacting wagmi team to find a solution to this issue.

4

+1 to have easy access to userInfo again, as I need it for authentication

5

Actually, there is a way. Pass the web3AuthInstance as a context:

ContextProvider.tsx

export const Web3AuthContext = createContext<Web3AuthNoModal | null>(null);
export const useWeb3Auth = () => useContext(Web3AuthContext);

export const ContextProvider = ({ children }: { children: React.ReactNode }) => {
const web3AuthInstance = new Web3AuthNoModal({<yourOptionsHere>});
// configure your adapter
const config = createConfig({
    chains: [polygon],
    transports: {
      [polygon.id]: http(),
    },  
    connectors: [
        Web3AuthConnector({
          web3AuthInstance: web3AuthInstance,
          loginParams: { loginProvider: "google" },
        }),
    ]
});

  return (
    <Web3AuthContext.Provider value={web3AuthInstance}>
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
      </WagmiProvider>
    </Web3AuthContext.Provider>
  );
};

Then, you can get “userInfo” from the web3Auth context. But, I had to do a weird hack to get the fully updated web3AuthInstance. I had to use a useEffect with wagmi’s “walletClient” in the dependency array:

import { useWalletClient } from "wagmi";
import { useWeb3Auth } from "@/app/provider/ContextProvider";

const { data: walletClient } = useWalletClient();
let web3Auth = useWeb3Auth();

useEffect(() => {
  const getUserInfo = async () => {
    try {
      var userInfo = await web3Auth?.getUserInfo();
    } catch (e) {
      console.log("Cannot get userInfo first time, likely web3Auth not fully updated");
    }
    console.log("/app, userInfo", userInfo);
  };
  getUserInfo();
}, [walletClient]);

I would appreciate any feedback if there is a better way, particularly in getting the fully updated web3AuthInstance. Thanks.

6

hi @jonwayhuang,

The Wagmi team hasn’t given us feedback yet. But I would try to implement your solution and see if it’s working.

Thanks a lot !!

7

hi @jh.koo

Please check the code of the PR ! It could help you in what you are trying to do!

Thanks @jonwayhuang