Help Needed: Unable to integrate wagmi with web3auth

Help - Plug n Play PnP Web SDKs
1

I am having file structure like this:

src/app/globals.css
src/app/layout.tsx
src/app/page.tsx
src/app/providers.tsx
src/balance.tsx
src/sendTransaction.tsx
src/switchNetwork.tsx
src/wagmi.tsx
src/writeContract.tsx
src/Web3AuthConnectorInstance.tsx

Here’s my code for wagmi.ts

import { http, cookieStorage, createConfig, createStorage } from 'wagmi'
import { mainnet, sepolia, rootstockTestnet, hederaTestnet, morphSepolia } from 'wagmi/chains'
import { coinbaseWallet, injected } from 'wagmi/connectors'
import Web3AuthConnectorInstance from "./Web3AuthConnectorInstance"

export function getConfig() {
  return createConfig({
    chains: [mainnet, sepolia, rootstockTestnet, hederaTestnet, morphSepolia],
    connectors: [
      injected(),
      coinbaseWallet(),
      Web3AuthConnectorInstance([mainnet, sepolia, rootstockTestnet, hederaTestnet, morphSepolia]),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http(),
      [rootstockTestnet.id]: http(),
      [hederaTestnet.id]: http(),
      [morphSepolia.id]: http(),
    },
  })
}

declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>
  }
}

Here’s my code for page.tsx

'use client'

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { SendTransaction } from "../sendTransaction";
import { SwitchChain } from "../switchNetwork";
import { Balance } from "../balance";
import { WriteContract } from "../writeContract";

function App() {
  const account = useAccount()
  const { connector, isConnected } = useAccount();
  const { connectors, connect, error } = useConnect()
  const { disconnect } = useDisconnect()

  if (isConnected) {
    return (
      <div className="main">
        <div className="title">Connected to {connector?.name}</div>
          <div> Addresses: {account.addresses} </div>
          <div> ChainId: {account.chainId} </div>
        <button className="card" onClick={disconnect as any}>
          Disconnect
        </button>
        <SendTransaction />
        <Balance />
        <WriteContract />
        <SwitchChain />
      </div>
    );
  } else {
    return (
      <div className="main">
        {connectors.map((connector) => {
          return (
            <button className="card" key={connector.id} onClick={() => connect({ connector })}>
              {connector.name}
            </button>
          );
        })}
        {error && <div>{error.message}</div>}
      </div>
    );
  }
}

export default App

Web3AuthConnectorInstance.tsx is same as this link attached. Examples

The issue is at src/wagmi code:

Web3AuthConnectorInstance([mainnet, sepolia, rootstockTestnet, hederaTestnet, morphSepolia]),

By command it out, it functions correctly.

Attached image is the bug happened screenshot.

Screenshot 2024-09-04 020159
Screenshot 2024-09-04 020159896×725 26.1 KB

2

Hey Sky Yap!

Thanks for providing the detailed information and code snippets. It seems like you’re experiencing issues with the Web3AuthConnectorInstance integration in your wagmi configuration. Based on your code and the error details, let’s narrow down the potential causes and solutions.

Could you please provide the following additional details to help our team debug more effectively:

  • Initialization & Login Code Snippets: Any relevant initialization or login code for Web3Auth.
  • Browser Console Screenshots (if there are specific errors showing up in the console apart from what you’ve shared).
  • Web3Auth SDK Version Number.

A few preliminary checks you could do:

  1. Web3AuthConnectorInstance Import: Ensure that the import path is correct in your wagmi.ts and matches the example exactly.
  2. Dependencies: Ensure all dependencies are properly installed and compatible. Sometimes version mismatches can cause unexpected issues.
  3. Compilation or Build Errors: Check if there’s any error during the build or when the app is running.

Here to help you every step of the way! Let’s get this resolved so you can continue with your integration.

This response was generated by the Web3Auth Bot and a person from the Web3Auth team will come and give a more detailed answer to your query as well.

3

Is it possible for you to send the browser console log? This error doesn’t talk much about the stack trace of what exactly happened here. What I can also assume is that this error is related to createContext which is a React issue unrelated to Web3Auth. Maybe you missed on some imports particularly for wagmi, particularly tanstack?