Trying to connect with web3modal - is it possible?

[dataexcess]

I am not sure if it is possible but I would like to have web3Modal as my provider in my nuxt 3 project.
So far I have this plugin (plugins/use-wagmi.js):

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { w3mConnectors, w3mProvider } from '@web3modal/ethereum'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.walletConnectProjectId
    const chains = [mainnet, sepolia]

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

    nuxtApp.vueApp.use(UseWagmiPlugin, wagmiConfig)
})

But I am unsure how to proceed since actually web3Modal requires an Ethereum client like so:

const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

I should then call

const connect = () => { web3modal.openModal() }
to make the modal appear.

How would you recommend me to continue?

[unicape]

@dataexcess I don't know if this will help you https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/installation

[dataexcess]

@dataexcess I don't know if this will help you https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/installation

Well, yes that is where I have the code from...
The problem is use-wagmi works with the useConnect method...

const { connect } = useConnect({
  connector: new InjectedConnector(),
})

With web3Modal You have to use the openModal method like so:

document.getElementById('my-button').addEventListener('click', () => {
  web3modal.openModal()
})

When using this method the useAccount and useDisconnect do not work.

const { address, isConnected } = useAccount()
How can I combine the web3modal with use-wagmi, that is my question

[unicape]

const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

They seem to be connected through this step, try

[dataexcess]

I know... the problem is use-wagmi requires the code to be run in a plugin... using useWagmiPlugin, while the web3modal creates the ethereum client like this:

const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)

I cannot have both.. if I use this code, then the use-wagmi hooks do not work anymore since the connect() method is not called anymore. the connect method looks now like this (using the web3modal):

document.getElementById('my-button').addEventListener('click', () => {
  web3modal.openModal()
})

while actually, using the use-wagmi API it should look like:

const { connect } = useConnect({
  connector: new xxx-connector()
})

so my question is, is there a way to mix both? currently it either works one way or the other.

[unicape]

Can you provide a sample

[unicape]

@dataexcess bro look here it's done https://stackblitz.com/edit/nuxt-starter-xpyboe?file=plugins%2Fuse-wagmi.ts

[dataexcess]

omg that's exactly the example I needed! Thank you bro u are the best. 🙌

[dataexcess]

@unicape I'm sorry but did you test your code? Yes the plugin works, but did you try using it?

the plugin:

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.WALLETCONNECT_PROJECT_ID
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId })]
    )

    const web3config = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient
    })

    if (process.client) {
        const ethereumClient = new EthereumClient(web3config, chains)
        const web3Modal = new Web3Modal({ projectId }, ethereumClient)
    }

    nuxtApp.vueApp.use(UseWagmiPlugin, web3config)
})

the frontend code:

<script setup>
import { useAccount, useConnect, useDisconnect } from 'use-wagmi'
import { InjectedConnector } from 'use-wagmi/connectors/injected'

const { address, isConnected } = useAccount()
const { connect } = useConnect({
  connector: new InjectedConnector(),
})
const { disconnect } = useDisconnect()
</script>

<template>
  <div v-if="isConnected">
    Connected to {{ address }}
    <button @click="disconnect">Disconnect</button>
  </div>
  <button v-else @click="connect">
    Connect Wallet
  </button>
</template>

The problem remains the same... the connect button will not work with this.. now it complains about:

inpage.js:1 MetaMask - RPC Error: Already processing eth_requestAccounts. Please wait. {code: -32002, message: 'Already processing eth_requestAccounts. Please wait.'}
(anonymous) @ inpage.js:1
(anonymous) @ inpage.js:17
_runReturnHandlers @ inpage.js:17
_processRequest @ inpage.js:17
await in _processRequest (async)
_handle @ inpage.js:17
handle @ inpage.js:17
_rpcRequest @ inpage.js:1
(anonymous) @ inpage.js:1
request @ inpage.js:1
connect @ chunk-QRUHVNWK.js:211
await in connect (async)
connect @ chunk-LAFZBYO7.js:657
mutationFn @ index.js:567
fn @ mutation.ts:179
run @ retryer.ts:147
createRetryer @ retryer.ts:204
executeMutation @ mutation.ts:174
execute @ mutation.ts:216
await in execute (async)
mutate @ mutationObserver.ts:136
mutate @ useMutation.ts:165
connect2 @ index.js:601
_createElementBlock.onClick._cache.<computed>._cache.<computed> @ app.vue:57
callWithErrorHandling @ vue.js:1567
callWithAsyncErrorHandling @ vue.js:1575
invoker @ vue.js:9399
Show 11 more frames
app.vue:57 ResourceUnavailableRpcError: Requested resource not available.

Details: Already processing eth_requestAccounts. Please wait.
Version: [email protected]
    at InjectedConnector.connect (chunk-QRUHVNWK.js:229:15)
    at async connect (chunk-LAFZBYO7.js:657:18)

I think I don't need to use the code

const { connect } = useConnect({
  connector: new InjectedConnector(),
}) 

But instead use the web3Modal method:
web3modal.openModal()

But then the question is how do I access the web3modal in the fronend code from the plugin? Or how do I create the web3modal object in the frontend code without having the rest of the plugin to build it...?

[dataexcess]

Bro I fixed it like this 😎 (providing the web3Modal object from the plugin with 'provide').

Plugin:

import { UseWagmiPlugin, configureChains, createConfig, mainnet, sepolia } from 'use-wagmi'
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig()
    const projectId = config.public.WALLETCONNECT_PROJECT_ID
    const chains = [mainnet, sepolia]

    const { publicClient } = configureChains(chains,
        [w3mProvider({ projectId })]
    )

    const web3config = createConfig({
        autoConnect: true,
        connectors: w3mConnectors({ projectId, chains }),
        publicClient
    })

    let web3Modal = null
    if (process.client) {
        const ethereumClient = new EthereumClient(web3config, chains)
        web3Modal = new Web3Modal({ projectId }, ethereumClient)
    }

    nuxtApp.vueApp.use(UseWagmiPlugin, web3config)

    return {
        provide: {
            web3Modal
        }
    }
})

Then use it in the frontend:

const { $web3Modal } = useNuxtApp()
const { address, isConnected } = useAccount()
const connect = () => {
    $web3Modal.openModal()
}
const { disconnect } = useDisconnect()

[glitch-txs]

Hey 👋 v3 Alpha is out and it's more versatile, could you take a look @unicape ? Might be easier to integrate.
You've done a great job here 👌

https://docs.walletconnect.com/2.0/web3modal/v3/about

[ennioVisco]

Any news on this? V3 is stable now

[glitch-txs]

I think you can try using it with https://docs.walletconnect.com/web3modal/vue/about

[unicape]

I'm working on this now, but I'm usually very busy with work and the progress is slow.

[glitch-txs]

@unicape hmu if you need any help

[unicape]

You can see some progress here, I try to complete it before wagmi releases the official version wagmi-v2 tree

[dataexcess]

Hello, I want to integrate this again for a new project. I'm wondering should I do it the way I did before or has anything changed/updated? Thnx!

[kleinpetr]

same here :) cc @unicape

[reslear]

easy, see my playground:
https://github.com/belongnet/metakeep-wagmi-connector/tree/main/playground