Update to wagmi 0.12.x

[frontendultron]

Link to minimal reproducible example

No link

Summary

Hello. I ran into a problem that I can’t connect to Metamask via WalletConnect using the Chrome mobile browser.

If I use version: "1": when clicking the button WalletConnect in the modal window web3modal the following error occurs and nothing happens:

client.ts:45 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'uri')
    at client.ts:45:53
    at b (regeneratorRuntime.js:86:17)
    at Generator._invoke (regeneratorRuntime.js:66:24)
    at Generator.next (regeneratorRuntime.js:117:21)
    at r (asyncToGenerator.js:3:20)
    at c (asyncToGenerator.js:25:9)

Version 1 works in your lab. Can't figure out why it doesn't work for me.

If I use version: "2": when going to metamask nothing happens. The same problem exists in your lab - https://lab.web3modal.com/v2Base

My initial code:

// Wagmi client
const { provider } = configureChains(
  chains, 
  [
    walletConnectProvider({ projectId: config.walletConnectId }),
  ]
);
const wagmiClient = createClient({
  autoConnect: true,
  connectors: modalConnectors({ 
    projectId: config.walletConnectId,
    appName: 'web3Modal', 
    chains,
    version: '2',
  }),
  provider,
});
// 

// Web3Modal Ethereum Client
const ethereumClient = new EthereumClient(wagmiClient, chains);

root.render(
    <>
      <WagmiConfig client={wagmiClient}>
        <BrowserRouter>
          <ApolloProvider client={defaultClient}>
            <Provider store={store}>
              <App />
            </Provider>
          </ApolloProvider>
        </BrowserRouter>
      </WagmiConfig>

      <Web3Modal
        projectId={config.walletConnectId}
        ethereumClient={ethereumClient}
        themeMode={"light"}
        themeColor={"default"}
      />
    </>
  );

Modal window call function:

const { open } = useWeb3Modal();

const onConnect = async(isButton) => { try { await open();

        if (isButton) {
            await changeNetwok(...);
        }
    } catch(e) {
        console.log('Connect error: ', e)
    }
}

List of related npm package versions

"wagmi": "^0.12.0",
"ethers": "^5.7.2",
"@web3modal/ethereum": "^2.1.3",
"@web3modal/react": "^2.1.3",

Phone: POCO M5
Android 12

Google Chrome browser(latest) || Firefox browser(latest)

[xzilja]

There are changes in wagmi x.12.x that we still need to implement, I believe if you downgrade back to x.11.x you should be able to use version "1" (metamask doesn't support 2 at the moment).

[frontendultron]

If I change the wagmi version to x.11.x and the web3modal version to 1, I get the following error:

Uncaught Error: No wagmi client found. Ensure you have set up a client: https://wagmi.sh/react/client
    getClient chunk-55IO54NW.js:709
    getAccount chunk-55IO54NW.js:2868
    getAccount OptionsCtrl.ts:72
    re index.ts:45
    legacyCustomElement custom-element.ts:21
    node_modules vendors-node_modules_motionone_dom_dist_easing_spring_index_es_js-node_modules_dijkstrajs_dij-f8d5bc.chunk.js:2787
    Ae index.ts:13
    node_modules vendors-node_modules_web3modal_react_node_modules_web3modal_ui_dist_index_js.chunk.js:5576
    factory react refresh:6

[xzilja]

This usually happens when there is a version conflict in packages, could you try again after deleting node_modules and .lock file and re-installing (downgrading packages can cause issues here)

[gradam26]

Having the same issues. What's the latest versions of wagmi and web3modal are compatible? Seems like I can't avoid this issue of "Uncaught Error: No wagmi client found. Ensure you have set up a client". Also getting the following: "NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "w3m-box-button" has already been used with this registry".

Am currently using wagmi 0.11.7 & web3modal 2.1.2. Have tried 2.1.3 but that didn't work either

[frontendultron]

Deleting node_modules and .lock file didn't work for me

[ShayneMichaelBacik1]

Ok sounds good 👍 I ever get paid I'll start working again until then my services to any projects I've wallet access will be under strict standards and rules, regulations or guidance will be cut off my sincerest apologies tours faithfully Shayne Michael Bacik

On Tue., Mar. 7, 2023, 1:31 a.m. frontendultron, @.***> wrote:

Deleting node_modules and .lock file didn't work for me

— Reply to this email directly, view it on GitHub https://github.com/WalletConnect/web3modal/issues/920#issuecomment-1457618723, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWXLOZ7PW2W6RLRGJEW63F3W23I5LANCNFSM6AAAAAAVQ5D4R4 . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[HaoCherHong]

Ok sounds good 👍 I ever get paid I'll start working again until then my services to any projects I've wallet access will be under strict standards and rules, regulations or guidance will be cut off my sincerest apologies tours faithfully Shayne Michael Bacik … On Tue., Mar. 7, 2023, 1:31 a.m. frontendultron, @.> wrote: Deleting node_modules and .lock file didn't work for me — Reply to this email directly, view it on GitHub <#920 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWXLOZ7PW2W6RLRGJEW63F3W23I5LANCNFSM6AAAAAAVQ5D4R4 . You are receiving this because you are subscribed to this thread.Message ID: @.>

@ShayneMichaelBacik1 Is there a working package version set of wagmi and web3modal currently for v2?

[kwebster2]

I am having this same issue - I am unable to get it to work using any combination of the versions.

[axanthus]

I'm getting the same issue for wagmi@0.12.7 and web3modal/ethereum and react@2.2.0. Either its "Wagmi client not found" or "No providers configured for chain 1" which is so strange because I clearly have defined my wagmi client and providers.

[Sparragus]

I'm having exactly the same issue as @axanthus